diff --git a/packages/client/src/components/PeopleSelector/index.js b/packages/client/src/components/PeopleSelector/index.js
index 25ea5c6055..9efc04b08a 100644
--- a/packages/client/src/components/PeopleSelector/index.js
+++ b/packages/client/src/components/PeopleSelector/index.js
@@ -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 (
}
/>
@@ -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 };
diff --git a/packages/client/src/components/panels/AddUsersPanel/index.js b/packages/client/src/components/panels/AddUsersPanel/index.js
index b0d3c50c9b..503cce5c09 100644
--- a/packages/client/src/components/panels/AddUsersPanel/index.js
+++ b/packages/client/src/components/panels/AddUsersPanel/index.js
@@ -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: (
-
- ),
- }
- : 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 (
-
-
+
+
- );
- }
-}
+
+
+ );
+};
-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)()
+ withLoader(AddUsersPanel)()
)
)
);
diff --git a/packages/client/src/components/panels/SharingPanel/index.js b/packages/client/src/components/panels/SharingPanel/index.js
index 9fb2cdd5ac..371d324341 100644
--- a/packages/client/src/components/panels/SharingPanel/index.js
+++ b/packages/client/src/components/panels/SharingPanel/index.js
@@ -773,7 +773,7 @@ class SharingPanelComponent extends React.Component {
{showAddUsersPanel && (