IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/selector' of github.com:ONLYOFFICE/DocSpace into feature/selector

Browse Source
This commit is contained in:
TimofeyBoyko 2022-09-06 16:55:17 +03:00
commit 67cdfd1a9e
4 changed files with 100 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/client/src/components/PeopleSelector/index.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useCallback } from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { I18nextProvider, withTranslation } from "react-i18next"; import { I18nextProvider, withTranslation } from "react-i18next";
@ -48,7 +48,6 @@ const PeopleSelector = ({
const [itemsList, setItemsList] = useState(items); const [itemsList, setItemsList] = useState(items);
const [searchValue, setSearchValue] = useState(""); const [searchValue, setSearchValue] = useState("");
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [page, setPage] = useState(0);
const [hasNextPage, setHasNextPage] = useState(true); const [hasNextPage, setHasNextPage] = useState(true);
const [isNextPageLoading, setIsNextPageLoading] = useState(false); const [isNextPageLoading, setIsNextPageLoading] = useState(false);
const [isFirstLoad, setIsFirstLoad] = useState(true); const [isFirstLoad, setIsFirstLoad] = useState(true);
@ -103,57 +102,42 @@ const PeopleSelector = ({
loadNextPage(0, value); loadNextPage(0, value);
}; };
const setDefaultTranslations = () => {
headerLabel = headerLabel || t("ListAccounts");
searchPlaceholder = searchPlaceholder || t("Common:Search");
acceptButtonLabel = acceptButtonLabel || t("PeopleTranslations:AddMembers");
cancelButtonLabel = cancelButtonLabel || t("Common:CancelButton");
selectAllLabel = selectAllLabel || t("AllAccounts");
selectAllIcon =
selectAllIcon || "/static/images/catalog.accounts.react.svg";
emptyScreenImage =
emptyScreenImage || "/static/images/empty_screen_persons.png";
emptyScreenHeader = emptyScreenHeader || t("EmptyHeader");
emptyScreenDescription = emptyScreenDescription || t("EmptyDescription");
searchEmptyScreenImage =
searchEmptyScreenImage || "/static/images/empty_screen_persons.png";
searchEmptyScreenHeader = searchEmptyScreenHeader || t("SearchEmptyHeader");
searchEmptyScreenDescription =
searchEmptyScreenDescription || t("SearchEmptyDescription");
};
setDefaultTranslations();
return ( return (
<Selector <Selector
id={id} id={id}
className={className} className={className}
style={style} style={style}
headerLabel={headerLabel} headerLabel={headerLabel || t("ListAccounts")}
onBackClick={onBackClick} onBackClick={onBackClick}
searchPlaceholder={searchPlaceholder} searchPlaceholder={searchPlaceholder || t("Common:Search")}
searchValue={searchValue} searchValue={searchValue}
onSearch={onSearch} onSearch={onSearch}
items={itemsList} items={itemsList}
isMultiSelect={isMultiSelect} isMultiSelect={isMultiSelect}
selectedItems={selectedItems} selectedItems={selectedItems}
acceptButtonLabel={acceptButtonLabel} acceptButtonLabel={
acceptButtonLabel || t("PeopleTranslations:AddMembers")
}
onAccept={onAccept} onAccept={onAccept}
withSelectAll={withSelectAll} withSelectAll={withSelectAll}
selectAllLabel={selectAllLabel} selectAllLabel={selectAllLabel || t("AllAccounts")}
selectAllIcon={selectAllIcon} selectAllIcon={selectAllIcon}
withAccessRights={withAccessRights} withAccessRights={withAccessRights}
accessRights={accessRights} accessRights={accessRights}
selectedAccessRight={selectedAccessRight} selectedAccessRight={selectedAccessRight}
withCancelButton={withCancelButton} withCancelButton={withCancelButton}
cancelButtonLabel={cancelButtonLabel} cancelButtonLabel={cancelButtonLabel || t("Common:CancelButton")}
onCancel={onCancel} onCancel={onCancel}
emptyScreenImage={emptyScreenImage} emptyScreenImage={emptyScreenImage}
emptyScreenHeader={emptyScreenHeader} emptyScreenHeader={emptyScreenHeader || t("EmptyHeader")}
emptyScreenDescription={emptyScreenDescription} emptyScreenDescription={emptyScreenDescription || t("EmptyDescription")}
searchEmptyScreenImage={searchEmptyScreenImage} searchEmptyScreenImage={searchEmptyScreenImage}
searchEmptyScreenHeader={searchEmptyScreenHeader} searchEmptyScreenHeader={
searchEmptyScreenDescription={searchEmptyScreenDescription} searchEmptyScreenHeader || t("SearchEmptyHeader")
}
searchEmptyScreenDescription={
searchEmptyScreenDescription || t("SearchEmptyDescription")
}
hasNextPage={hasNextPage} hasNextPage={hasNextPage}
isNextPageLoading={isNextPageLoading} isNextPageLoading={isNextPageLoading}
loadNextPage={loadNextPage} loadNextPage={loadNextPage}
@ -164,6 +148,7 @@ const PeopleSelector = ({
<Loaders.SelectorRowLoader <Loaders.SelectorRowLoader
isMultiSelect={false} isMultiSelect={false}
isContainer={isFirstLoad} isContainer={isFirstLoad}
isUser={true}
/> />
} }
/> />
@ -172,7 +157,11 @@ const PeopleSelector = ({
PeopleSelector.propTypes = {}; PeopleSelector.propTypes = {};
PeopleSelector.defaultProps = {}; PeopleSelector.defaultProps = {
selectAllIcon: "/static/images/catalog.accounts.react.svg",
emptyScreenImage: "/static/images/empty_screen_persons.png",
searchEmptyScreenImage: "/static/images/empty_screen_persons.png",
};
const ExtendedPeopleSelector = inject(({ auth }) => { const ExtendedPeopleSelector = inject(({ auth }) => {
return { theme: auth.settingsStore.theme }; return { theme: auth.settingsStore.theme };

221
packages/client/src/components/panels/AddUsersPanel/index.js
View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useState, useEffect } from "react";
import { inject, observer } from "mobx-react"; import { inject, observer } from "mobx-react";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Backdrop from "@docspace/components/backdrop"; import Backdrop from "@docspace/components/backdrop";
@ -8,55 +8,51 @@ import IconButton from "@docspace/components/icon-button";
import { ShareAccessRights } from "@docspace/common/constants"; import { ShareAccessRights } from "@docspace/common/constants";
import PeopleSelector from "@docspace/client/src/components/PeopleSelector"; import PeopleSelector from "@docspace/client/src/components/PeopleSelector";
import { withTranslation } from "react-i18next"; import { withTranslation } from "react-i18next";
import {
StyledAddUsersPanelPanel,
StyledContent,
StyledHeaderContent,
StyledBody,
} from "../StyledPanels";
import AccessComboBox from "../SharingPanel/AccessComboBox";
import Loaders from "@docspace/common/components/Loaders"; import Loaders from "@docspace/common/components/Loaders";
import withLoader from "../../../HOCs/withLoader"; import withLoader from "../../../HOCs/withLoader";
class AddUsersPanelComponent extends React.Component { const AddUsersPanel = ({
constructor(props) { isEncrypted,
super(props); onClose,
onParentPanelClose,
shareDataItems,
setShareDataItems,
t,
visible,
groupsCaption,
accessOptions,
isMultiSelect,
theme,
}) => {
const accessRight = isEncrypted
? ShareAccessRights.FullAccess
: ShareAccessRights.ReadOnly;
const accessRight = props.isEncrypted const onArrowClick = () => onClose();
? ShareAccessRights.FullAccess
: ShareAccessRights.ReadOnly;
this.state = { const onKeyPress = (e) => {
showActionPanel: false, if (e.key === "Esc" || e.key === "Escape") onClose();
accessRight,
};
}
onPlusClick = () =>
this.setState({ showActionPanel: !this.state.showActionPanel });
onArrowClick = () => this.props.onClose();
onKeyPress = (event) => {
if (event.key === "Esc" || event.key === "Escape") {
this.props.onClose();
}
}; };
onClosePanels = () => { useEffect(() => {
this.props.onClose(); window.addEventListener("keyup", onKeyPress);
this.props.onSharingPanelClose();
return () => window.removeEventListener("keyup", onKeyPress);
});
const onClosePanels = () => {
onClose();
onParentPanelClose();
}; };
onPeopleSelect = (users) => { const onPeopleSelect = (users) => {
const { shareDataItems, setShareDataItems, onClose } = this.props;
const items = shareDataItems; const items = shareDataItems;
for (let item of users) { for (let item of users) {
const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id); const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id);
if (!currentItem) { if (!currentItem) {
const newItem = { const newItem = {
access: this.state.accessRight, access: accessRight,
isLocked: false, isLocked: false,
isOwner: false, isOwner: false,
sharedTo: item, sharedTo: item,
@ -69,8 +65,7 @@ class AddUsersPanelComponent extends React.Component {
onClose(); onClose();
}; };
onOwnerSelect = (owner) => { const onOwnerSelect = (owner) => {
const { setShareDataItems, shareDataItems, onClose } = this.props;
const ownerItem = shareDataItems.find((x) => x.isOwner); const ownerItem = shareDataItems.find((x) => x.isOwner);
ownerItem.sharedTo = owner[0]; ownerItem.sharedTo = owner[0];
@ -82,118 +77,54 @@ class AddUsersPanelComponent extends React.Component {
onClose(); onClose();
}; };
componentDidMount() { const accessRights = accessOptions.map((access) => {
window.addEventListener("keyup", this.onKeyPress); return {
} key: access,
label: t(access),
};
});
componentWillUnmount() { const selectedAccess = accesses.filter(
window.removeEventListener("keyup", this.onKeyPress); (access) => access.key === "Review"
} )[0];
onAccessChange = (e) => { return (
const accessRight = +e.currentTarget.dataset.access; <div visible={visible}>
this.setState({ accessRight }); <Backdrop
}; onClick={onClosePanels}
visible={visible}
render() { zIndex={310}
const { isAside={true}
t, />
visible, <Aside
groupsCaption, className="header_aside-panel"
accessOptions, visible={visible}
isMultiSelect, onClose={onClosePanels}
theme, >
shareDataItems, <PeopleSelector
} = this.props; isMultiSelect={isMultiSelect}
const { accessRight } = this.state; onAccept={isMultiSelect ? onPeopleSelect : onOwnerSelect}
onBackClick={onArrowClick}
const selectedOptions = []; headerLabel={
shareDataItems.forEach((item) => { isMultiSelect
const { sharedTo } = item; ? t("Common:AddUsers")
: t("PeopleTranslations:OwnerChange")
if (item.isUser) { }
const groups = sharedTo?.groups accessRights={accessRights}
? sharedTo.groups.map((group) => group.id) selectedAccessRight={selectedAccess}
: []; onCancel={onClosePanels}
selectedOptions.push({ key: sharedTo.id, id: sharedTo.id, groups }); withCancelButton={!isMultiSelect}
} withAccessRights={isMultiSelect}
}); withSelectAll={isMultiSelect}
const zIndex = 310;
const embeddedComponent = isMultiSelect
? {
embeddedComponent: (
<AccessComboBox
t={t}
access={accessRight}
directionX="right"
directionY="top"
onAccessChange={this.onAccessChange}
accessOptions={accessOptions}
arrowIconColor={theme.filesPanels.addUsers.arrowColor}
isEmbedded={true}
/>
),
}
: null;
//console.log("AddUsersPanel render");
const accesses = accessOptions.map((access) => {
return {
key: access,
label: t(access),
};
});
const selectedAccess = accesses.filter(
(access) => access.key === "Review"
)[0];
return (
<StyledAddUsersPanelPanel visible={visible}>
<Backdrop
onClick={this.onClosePanels}
visible={visible}
zIndex={zIndex}
isAside={true}
/> />
<Aside </Aside>
className="header_aside-panel" </div>
visible={visible} );
onClose={this.onClosePanels} };
>
<PeopleSelector
className="peopleSelector"
isMultiSelect={isMultiSelect}
onAccept={isMultiSelect ? this.onPeopleSelect : this.onOwnerSelect}
{...embeddedComponent}
selectedOptions={selectedOptions}
groupsCaption={groupsCaption}
showCounter
onBackClick={this.onArrowClick}
headerLabel={
isMultiSelect
? t("Common:AddUsers")
: t("PeopleTranslations:OwnerChange")
}
accessRights={accesses}
selectedAccessRight={selectedAccess}
onCancel={this.onClosePanels}
withCancelButton={!isMultiSelect}
withAccessRights={isMultiSelect}
withSelectAll={isMultiSelect}
/>
</Aside>
</StyledAddUsersPanelPanel>
);
}
}
AddUsersPanelComponent.propTypes = { AddUsersPanel.propTypes = {
visible: PropTypes.bool, visible: PropTypes.bool,
onSharingPanelClose: PropTypes.func, onParentPanelClose: PropTypes.func,
onClose: PropTypes.func, onClose: PropTypes.func,
}; };
@ -202,7 +133,7 @@ export default inject(({ auth }) => {
})( })(
observer( observer(
withTranslation(["SharingPanel", "PeopleTranslations", "Common"])( withTranslation(["SharingPanel", "PeopleTranslations", "Common"])(
withLoader(AddUsersPanelComponent)(<Loaders.DialogAsideLoader isPanel />) withLoader(AddUsersPanel)(<Loaders.DialogAsideLoader isPanel />)
) )
) )
); );

4
packages/client/src/components/panels/SharingPanel/index.js
View File

@ -773,7 +773,7 @@ class SharingPanelComponent extends React.Component {
{showAddUsersPanel && ( {showAddUsersPanel && (
<AddUsersPanel <AddUsersPanel
onSharingPanelClose={this.onClose} onParentPanelClose={this.onClose}
onClose={this.onShowUsersPanel} onClose={this.onShowUsersPanel}
visible={showAddUsersPanel} visible={showAddUsersPanel}
shareDataItems={filteredShareDataItems} shareDataItems={filteredShareDataItems}
@ -799,7 +799,7 @@ class SharingPanelComponent extends React.Component {
{showChangeOwnerPanel && ( {showChangeOwnerPanel && (
<AddUsersPanel <AddUsersPanel
onSharingPanelClose={this.onClose} onParentPanelClose={this.onClose}
onClose={this.onShowChangeOwnerPanel} onClose={this.onShowChangeOwnerPanel}
visible={showChangeOwnerPanel} visible={showChangeOwnerPanel}
shareDataItems={filteredShareDataItems} shareDataItems={filteredShareDataItems}

21
packages/client/src/components/panels/StyledPanels.js
View File

@ -23,19 +23,6 @@ const PanelStyles = css`
} }
} }
.groupSelector,
.peopleSelector {
.combo-buttons_arrow-icon {
flex: 0 0 6px;
width: 6px;
margin-top: auto;
margin-bottom: auto;
display: flex;
justify-content: center;
align-items: center;
}
}
.footer { .footer {
padding: 16px; padding: 16px;
width: 100%; width: 100%;
@ -137,13 +124,6 @@ const StyledVersionHistoryPanel = styled.div`
StyledVersionHistoryPanel.defaultProps = { theme: Base }; StyledVersionHistoryPanel.defaultProps = { theme: Base };
const StyledAddUsersPanelPanel = styled.div`
${PanelStyles}
.combo-button-label {
font-size: 14px;
}
`;
const StyledAddGroupsPanel = styled.div` const StyledAddGroupsPanel = styled.div`
${PanelStyles} ${PanelStyles}
.combo-button-label { .combo-button-label {
@ -695,7 +675,6 @@ StyledModalRowContainer.defaultProps = { theme: Base };
export { export {
StyledAsidePanel, StyledAsidePanel,
StyledAddGroupsPanel, StyledAddGroupsPanel,
StyledAddUsersPanelPanel,
StyledEmbeddingPanel, StyledEmbeddingPanel,
StyledVersionHistoryPanel, StyledVersionHistoryPanel,
StyledContent, StyledContent,