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

2022-09-06 16:55:17 +03:00 · 2022-09-06 16:55:17 +03:00 · 67cdfd1a9e
commit 67cdfd1a9e
parent ac70355311 c9cdcd08af
4 changed files with 100 additions and 201 deletions
--- 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 (
    <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 };
--- 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: (
-            <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 />)
    )
  )
 );
--- 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 && (
              <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}
--- a/packages/client/src/components/panels/StyledPanels.js
+++ b/packages/client/src/components/panels/StyledPanels.js
@ -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,