Merge branch 'feature/selector' of github.com:ONLYOFFICE/DocSpace into feature/selector
This commit is contained in:
commit
67cdfd1a9e
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import PropTypes from "prop-types";
|
||||
import { I18nextProvider, withTranslation } from "react-i18next";
|
||||
@ -48,7 +48,6 @@ const PeopleSelector = ({
|
||||
const [itemsList, setItemsList] = useState(items);
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(0);
|
||||
const [hasNextPage, setHasNextPage] = useState(true);
|
||||
const [isNextPageLoading, setIsNextPageLoading] = useState(false);
|
||||
const [isFirstLoad, setIsFirstLoad] = useState(true);
|
||||
@ -103,57 +102,42 @@ const PeopleSelector = ({
|
||||
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 (
|
||||
<Selector
|
||||
id={id}
|
||||
className={className}
|
||||
style={style}
|
||||
headerLabel={headerLabel}
|
||||
headerLabel={headerLabel || t("ListAccounts")}
|
||||
onBackClick={onBackClick}
|
||||
searchPlaceholder={searchPlaceholder}
|
||||
searchPlaceholder={searchPlaceholder || t("Common:Search")}
|
||||
searchValue={searchValue}
|
||||
onSearch={onSearch}
|
||||
items={itemsList}
|
||||
isMultiSelect={isMultiSelect}
|
||||
selectedItems={selectedItems}
|
||||
acceptButtonLabel={acceptButtonLabel}
|
||||
acceptButtonLabel={
|
||||
acceptButtonLabel || t("PeopleTranslations:AddMembers")
|
||||
}
|
||||
onAccept={onAccept}
|
||||
withSelectAll={withSelectAll}
|
||||
selectAllLabel={selectAllLabel}
|
||||
selectAllLabel={selectAllLabel || t("AllAccounts")}
|
||||
selectAllIcon={selectAllIcon}
|
||||
withAccessRights={withAccessRights}
|
||||
accessRights={accessRights}
|
||||
selectedAccessRight={selectedAccessRight}
|
||||
withCancelButton={withCancelButton}
|
||||
cancelButtonLabel={cancelButtonLabel}
|
||||
cancelButtonLabel={cancelButtonLabel || t("Common:CancelButton")}
|
||||
onCancel={onCancel}
|
||||
emptyScreenImage={emptyScreenImage}
|
||||
emptyScreenHeader={emptyScreenHeader}
|
||||
emptyScreenDescription={emptyScreenDescription}
|
||||
emptyScreenHeader={emptyScreenHeader || t("EmptyHeader")}
|
||||
emptyScreenDescription={emptyScreenDescription || t("EmptyDescription")}
|
||||
searchEmptyScreenImage={searchEmptyScreenImage}
|
||||
searchEmptyScreenHeader={searchEmptyScreenHeader}
|
||||
searchEmptyScreenDescription={searchEmptyScreenDescription}
|
||||
searchEmptyScreenHeader={
|
||||
searchEmptyScreenHeader || t("SearchEmptyHeader")
|
||||
}
|
||||
searchEmptyScreenDescription={
|
||||
searchEmptyScreenDescription || t("SearchEmptyDescription")
|
||||
}
|
||||
hasNextPage={hasNextPage}
|
||||
isNextPageLoading={isNextPageLoading}
|
||||
loadNextPage={loadNextPage}
|
||||
@ -164,6 +148,7 @@ const PeopleSelector = ({
|
||||
<Loaders.SelectorRowLoader
|
||||
isMultiSelect={false}
|
||||
isContainer={isFirstLoad}
|
||||
isUser={true}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@ -172,7 +157,11 @@ const PeopleSelector = ({
|
||||
|
||||
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 }) => {
|
||||
return { theme: auth.settingsStore.theme };
|
||||
|
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import PropTypes from "prop-types";
|
||||
import Backdrop from "@docspace/components/backdrop";
|
||||
@ -8,55 +8,51 @@ import IconButton from "@docspace/components/icon-button";
|
||||
import { ShareAccessRights } from "@docspace/common/constants";
|
||||
import PeopleSelector from "@docspace/client/src/components/PeopleSelector";
|
||||
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 withLoader from "../../../HOCs/withLoader";
|
||||
|
||||
class AddUsersPanelComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const AddUsersPanel = ({
|
||||
isEncrypted,
|
||||
onClose,
|
||||
onParentPanelClose,
|
||||
shareDataItems,
|
||||
setShareDataItems,
|
||||
t,
|
||||
visible,
|
||||
groupsCaption,
|
||||
accessOptions,
|
||||
isMultiSelect,
|
||||
theme,
|
||||
}) => {
|
||||
const accessRight = isEncrypted
|
||||
? ShareAccessRights.FullAccess
|
||||
: ShareAccessRights.ReadOnly;
|
||||
|
||||
const accessRight = props.isEncrypted
|
||||
? ShareAccessRights.FullAccess
|
||||
: ShareAccessRights.ReadOnly;
|
||||
const onArrowClick = () => onClose();
|
||||
|
||||
this.state = {
|
||||
showActionPanel: false,
|
||||
accessRight,
|
||||
};
|
||||
}
|
||||
|
||||
onPlusClick = () =>
|
||||
this.setState({ showActionPanel: !this.state.showActionPanel });
|
||||
|
||||
onArrowClick = () => this.props.onClose();
|
||||
|
||||
onKeyPress = (event) => {
|
||||
if (event.key === "Esc" || event.key === "Escape") {
|
||||
this.props.onClose();
|
||||
}
|
||||
const onKeyPress = (e) => {
|
||||
if (e.key === "Esc" || e.key === "Escape") onClose();
|
||||
};
|
||||
|
||||
onClosePanels = () => {
|
||||
this.props.onClose();
|
||||
this.props.onSharingPanelClose();
|
||||
useEffect(() => {
|
||||
window.addEventListener("keyup", onKeyPress);
|
||||
|
||||
return () => window.removeEventListener("keyup", onKeyPress);
|
||||
});
|
||||
|
||||
const onClosePanels = () => {
|
||||
onClose();
|
||||
onParentPanelClose();
|
||||
};
|
||||
|
||||
onPeopleSelect = (users) => {
|
||||
const { shareDataItems, setShareDataItems, onClose } = this.props;
|
||||
const onPeopleSelect = (users) => {
|
||||
const items = shareDataItems;
|
||||
for (let item of users) {
|
||||
const currentItem = shareDataItems.find((x) => x.sharedTo.id === item.id);
|
||||
|
||||
if (!currentItem) {
|
||||
const newItem = {
|
||||
access: this.state.accessRight,
|
||||
access: accessRight,
|
||||
isLocked: false,
|
||||
isOwner: false,
|
||||
sharedTo: item,
|
||||
@ -69,8 +65,7 @@ class AddUsersPanelComponent extends React.Component {
|
||||
onClose();
|
||||
};
|
||||
|
||||
onOwnerSelect = (owner) => {
|
||||
const { setShareDataItems, shareDataItems, onClose } = this.props;
|
||||
const onOwnerSelect = (owner) => {
|
||||
const ownerItem = shareDataItems.find((x) => x.isOwner);
|
||||
ownerItem.sharedTo = owner[0];
|
||||
|
||||
@ -82,118 +77,54 @@ class AddUsersPanelComponent extends React.Component {
|
||||
onClose();
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
const accessRights = accessOptions.map((access) => {
|
||||
return {
|
||||
key: access,
|
||||
label: t(access),
|
||||
};
|
||||
});
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener("keyup", this.onKeyPress);
|
||||
}
|
||||
const selectedAccess = accesses.filter(
|
||||
(access) => access.key === "Review"
|
||||
)[0];
|
||||
|
||||
onAccessChange = (e) => {
|
||||
const accessRight = +e.currentTarget.dataset.access;
|
||||
this.setState({ accessRight });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
t,
|
||||
visible,
|
||||
groupsCaption,
|
||||
accessOptions,
|
||||
isMultiSelect,
|
||||
theme,
|
||||
shareDataItems,
|
||||
} = this.props;
|
||||
const { accessRight } = this.state;
|
||||
|
||||
const selectedOptions = [];
|
||||
shareDataItems.forEach((item) => {
|
||||
const { sharedTo } = item;
|
||||
|
||||
if (item.isUser) {
|
||||
const groups = sharedTo?.groups
|
||||
? sharedTo.groups.map((group) => group.id)
|
||||
: [];
|
||||
selectedOptions.push({ key: sharedTo.id, id: sharedTo.id, groups });
|
||||
}
|
||||
});
|
||||
|
||||
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}
|
||||
return (
|
||||
<div visible={visible}>
|
||||
<Backdrop
|
||||
onClick={onClosePanels}
|
||||
visible={visible}
|
||||
zIndex={310}
|
||||
isAside={true}
|
||||
/>
|
||||
<Aside
|
||||
className="header_aside-panel"
|
||||
visible={visible}
|
||||
onClose={onClosePanels}
|
||||
>
|
||||
<PeopleSelector
|
||||
isMultiSelect={isMultiSelect}
|
||||
onAccept={isMultiSelect ? onPeopleSelect : onOwnerSelect}
|
||||
onBackClick={onArrowClick}
|
||||
headerLabel={
|
||||
isMultiSelect
|
||||
? t("Common:AddUsers")
|
||||
: t("PeopleTranslations:OwnerChange")
|
||||
}
|
||||
accessRights={accessRights}
|
||||
selectedAccessRight={selectedAccess}
|
||||
onCancel={onClosePanels}
|
||||
withCancelButton={!isMultiSelect}
|
||||
withAccessRights={isMultiSelect}
|
||||
withSelectAll={isMultiSelect}
|
||||
/>
|
||||
<Aside
|
||||
className="header_aside-panel"
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
</Aside>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AddUsersPanelComponent.propTypes = {
|
||||
AddUsersPanel.propTypes = {
|
||||
visible: PropTypes.bool,
|
||||
onSharingPanelClose: PropTypes.func,
|
||||
onParentPanelClose: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
};
|
||||
|
||||
@ -202,7 +133,7 @@ export default inject(({ auth }) => {
|
||||
})(
|
||||
observer(
|
||||
withTranslation(["SharingPanel", "PeopleTranslations", "Common"])(
|
||||
withLoader(AddUsersPanelComponent)(<Loaders.DialogAsideLoader isPanel />)
|
||||
withLoader(AddUsersPanel)(<Loaders.DialogAsideLoader isPanel />)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
@ -773,7 +773,7 @@ class SharingPanelComponent extends React.Component {
|
||||
|
||||
{showAddUsersPanel && (
|
||||
<AddUsersPanel
|
||||
onSharingPanelClose={this.onClose}
|
||||
onParentPanelClose={this.onClose}
|
||||
onClose={this.onShowUsersPanel}
|
||||
visible={showAddUsersPanel}
|
||||
shareDataItems={filteredShareDataItems}
|
||||
@ -799,7 +799,7 @@ class SharingPanelComponent extends React.Component {
|
||||
|
||||
{showChangeOwnerPanel && (
|
||||
<AddUsersPanel
|
||||
onSharingPanelClose={this.onClose}
|
||||
onParentPanelClose={this.onClose}
|
||||
onClose={this.onShowChangeOwnerPanel}
|
||||
visible={showChangeOwnerPanel}
|
||||
shareDataItems={filteredShareDataItems}
|
||||
|
@ -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 {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
@ -137,13 +124,6 @@ const StyledVersionHistoryPanel = styled.div`
|
||||
|
||||
StyledVersionHistoryPanel.defaultProps = { theme: Base };
|
||||
|
||||
const StyledAddUsersPanelPanel = styled.div`
|
||||
${PanelStyles}
|
||||
.combo-button-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledAddGroupsPanel = styled.div`
|
||||
${PanelStyles}
|
||||
.combo-button-label {
|
||||
@ -695,7 +675,6 @@ StyledModalRowContainer.defaultProps = { theme: Base };
|
||||
export {
|
||||
StyledAsidePanel,
|
||||
StyledAddGroupsPanel,
|
||||
StyledAddUsersPanelPanel,
|
||||
StyledEmbeddingPanel,
|
||||
StyledVersionHistoryPanel,
|
||||
StyledContent,
|
||||
|
Loading…
Reference in New Issue
Block a user