Web:Client: update SelectFolderDialog for editor

2023-06-22 15:59:20 +03:00 · 2023-06-22 15:59:20 +03:00 · a83b100f4e
commit a83b100f4e
parent 59166e26b8
16 changed files with 189 additions and 82 deletions
--- a/packages/client/src/components/FilesSelector/FilesSelector.types.ts
+++ b/packages/client/src/components/FilesSelector/FilesSelector.types.ts
@ -86,6 +86,7 @@ export type FilesSelectorProps = {
  withoutBasicSelection: boolean;
  withoutImmediatelyClose: boolean;
  isThirdParty: boolean;
+  isEditorDialog: boolean;

  onClose?: () => void;

@ -125,4 +126,16 @@ export type FilesSelectorProps = {
  onSetNewFolderPath?: (value: number | string | undefined) => void;
  onSelectFolder?: (value: number | string | undefined) => void;
  onSelectTreeNode?: (treeNode: any) => void;
+  onSave?: (
+    e: any,
+    folderId: string | number,
+    fileTitle: string,
+    openNewTab: boolean
+  ) => void;
+
+  withFooterInput?: boolean;
+  withFooterCheckbox?: boolean;
+  footerInputHeader?: string;
+  currentFooterInputValue?: string;
+  footerCheckboxLabel?: string;
 };
--- a/packages/client/src/components/FilesSelector/FilesSelectorWrapper.tsx
+++ b/packages/client/src/components/FilesSelector/FilesSelectorWrapper.tsx
@ -0,0 +1,29 @@
+import React from "react";
+import { Provider as MobxProvider, inject, observer } from "mobx-react";
+import { I18nextProvider } from "react-i18next";
+// @ts-ignore
+import store from "client/store";
+import FilesSelector from "./";
+import i18n from "./i18n";
+// @ts-ignore
+import { getFolder } from "@docspace/common/api/files";
+import { FilesSelectorProps } from "./FilesSelector.types";
+const { auth: authStore } = store;
+
+const FilesSelectorWrapper = (props: FilesSelectorProps) => {
+  React.useEffect(() => {
+    authStore.init(true);
+  }, []);
+
+  console.log(props);
+
+  return (
+    <MobxProvider {...store}>
+      <I18nextProvider i18n={i18n}>
+        <FilesSelector {...props} />
+      </I18nextProvider>
+    </MobxProvider>
+  );
+};
+
+export default FilesSelectorWrapper;
--- a/packages/client/src/components/FilesSelector/helpers/useRootHelper.ts
+++ b/packages/client/src/components/FilesSelector/helpers/useRootHelper.ts
@ -1,6 +1,8 @@
 import React from "react";

 import { FolderType } from "@docspace/common/constants";
+// @ts-ignore
+import { getFoldersTree } from "@docspace/common/api/files";

 import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
 import CatalogUserReactSvgUrl from "PUBLIC_DIR/images/catalog.user.react.svg?url";
@ -20,13 +22,21 @@ const useRootHelper = ({
 }: useRootHelperProps) => {
  const [isRoot, setIsRoot] = React.useState<boolean>(false);

-  const getRootData = React.useCallback(() => {
+  const getRootData = React.useCallback(async () => {
    setBreadCrumbs([defaultBreadCrumb]);
    setIsRoot(true);
    setIsBreadCrumbsLoading(false);
    const newItems: Item[] = [];

-    treeFolders?.forEach((folder) => {
+    let currentTree: Item[] | null = null;
+
+    if (treeFolders && treeFolders?.length > 0) {
+      currentTree = treeFolders;
+    } else {
+      currentTree = await getFoldersTree();
+    }
+
+    currentTree?.forEach((folder) => {
      if (
        folder.rootFolderType === FolderType.Rooms ||
        folder.rootFolderType === FolderType.USER
--- a/packages/client/src/components/FilesSelector/i18n.js
+++ b/packages/client/src/components/FilesSelector/i18n.js
@ -0,0 +1,39 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import Backend from "@docspace/common/utils/i18next-http-backend";
+import { LANGUAGE } from "@docspace/common/constants";
+import config from "PACKAGE_FILE";
+import { getCookie } from "@docspace/common/utils";
+import { loadLanguagePath } from "SRC_DIR/helpers/utils";
+const newInstance = i18n.createInstance();
+
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: getCookie(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
+    },
+
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
+
+    ns: ["Files", "Common", "Translations"],
+    defaultNS: "Files",
+
+    react: {
+      useSuspense: false,
+    },
+  });
+
+export default newInstance;
--- a/packages/client/src/components/FilesSelector/index.tsx
+++ b/packages/client/src/components/FilesSelector/index.tsx
@ -33,6 +33,7 @@ const FilesSelector = ({
  withoutBasicSelection = false,
  withoutImmediatelyClose = false,
  isThirdParty = false,
+  isEditorDialog = false,

  onClose,

@ -65,6 +66,13 @@ const FilesSelector = ({
  onSetBaseFolderPath,
  onSetNewFolderPath,
  onSelectTreeNode,
+  onSave,
+
+  withFooterInput,
+  withFooterCheckbox,
+  footerInputHeader,
+  currentFooterInputValue,
+  footerCheckboxLabel,
 }: FilesSelectorProps) => {
  const { t } = useTranslation(["Files", "Common", "Translations"]);

@ -194,6 +202,7 @@ const FilesSelector = ({
  const onClickBreadCrumb = (item: BreadCrumb) => {
    if (!isFirstLoad) {
      setSearchValue("");
+      setIsFirstLoad(true);

      if (+item.id === 0) {
        setSelectedItemSecurity(undefined);
@ -201,7 +210,6 @@ const FilesSelector = ({
        getRootData();
      } else {
        setItems(null);
-        setIsFirstLoad(true);

        const idx = breadCrumbs.findIndex(
          (value) => value.id.toString() === item.id.toString()
@ -263,8 +271,13 @@ const FilesSelector = ({
    setSearchValue("");
  };

-  const onAcceptAction = () => {
-    if (isMove || isCopy || isRestoreAll) {
+  const onAcceptAction = (
+    items: any,
+    accessRights: any,
+    fileName: string,
+    isChecked: boolean
+  ) => {
+    if ((isMove || isCopy || isRestoreAll) && !isEditorDialog) {
      const folderTitle = breadCrumbs[breadCrumbs.length - 1].label;

      let fileIds: any[] = [];
@ -326,7 +339,9 @@ const FilesSelector = ({
      setIsRequestRunning(true);
      onSetNewFolderPath && onSetNewFolderPath(selectedItemId);
      onSelectFolder && onSelectFolder(selectedItemId);
-
+      onSave &&
+        selectedItemId &&
+        onSave(null, selectedItemId, fileName, isChecked);
      onSelectTreeNode && onSelectTreeNode(selectedTreeNode);
      !withoutImmediatelyClose && onCloseAction();
    }
@ -425,6 +440,11 @@ const FilesSelector = ({
              : getFileList
          }
          disableAcceptButton={isDisabled}
+          withFooterInput={withFooterInput}
+          withFooterCheckbox={withFooterCheckbox}
+          footerInputHeader={footerInputHeader}
+          currentFooterInputValue={currentFooterInputValue}
+          footerCheckboxLabel={footerCheckboxLabel}
        />
      </Aside>
    </>
--- a/packages/client/src/components/FilesSelector/utils.ts
+++ b/packages/client/src/components/FilesSelector/utils.ts
@ -50,7 +50,7 @@ export const getIsDisabled = (
 ) => {
  if (isFirstLoad) return true;
  if (isRequestRunning) return true;
-  if (sameId) return true;
+  if (sameId && !isCopy) return true;
  if (isRooms) return true;
  if (isRoot) return true;
  if (isCopy) return !security?.CopyTo;
--- a/packages/client/webpack.config.js
+++ b/packages/client/webpack.config.js
@ -303,7 +303,7 @@ module.exports = (env, argv) => {
        "./SelectFileInput":
          "./src/components/panels/SelectFileInput/SelectFileInputWrapper",
        "./SelectFolderDialog":
-          "./src/components/panels/SelectFolderDialog/SelectFolderDialogWrapper",
+          "./src/components/FilesSelector/FilesSelectorWrapper",
        "./SelectFolderInput":
          "./src/components/panels/SelectFolderInput/SelectFolderInputWrapper",
        "./PeopleSelector": "./src/components/PeopleSelector",
--- a/packages/components/selector/Selector.types.ts
+++ b/packages/components/selector/Selector.types.ts
@ -67,6 +67,7 @@ export type SelectorProps = {
  isBreadCrumbsLoading?: boolean;

  withFooterInput?: boolean;
+  withFooterCheckbox?: boolean;
  footerInputHeader?: string;
  currentFooterInputValue?: string;
  footerCheckboxLabel?: string;
--- a/packages/components/selector/index.tsx
+++ b/packages/components/selector/index.tsx
@ -69,6 +69,7 @@ const Selector = ({
  isLoading,

  withFooterInput,
+  withFooterCheckbox,
  footerInputHeader,
  footerCheckboxLabel,
  currentFooterInputValue,
@ -335,6 +336,7 @@ const Selector = ({
        isBreadCrumbsLoading={isBreadCrumbsLoading}
        withSearch={withSearch}
        withFooterInput={withFooterInput}
+        withFooterCheckbox={withFooterCheckbox}
      />

      {(footerVisible || alwaysShowFooter) && (
@ -351,13 +353,18 @@ const Selector = ({
          onCancel={onCancelAction}
          onChangeAccessRights={onChangeAccessRightsAction}
          withFooterInput={withFooterInput}
+          withFooterCheckbox={withFooterCheckbox}
          footerInputHeader={footerInputHeader}
          footerCheckboxLabel={footerCheckboxLabel}
          currentFooterInputValue={newFooterInputValue}
          setNewFooterInputValue={setNewFooterInputValue}
          isFooterCheckboxChecked={isFooterCheckboxChecked}
          setIsFooterCheckboxChecked={setIsFooterCheckboxChecked}
-          disableAcceptButton={disableAcceptButton}
+          disableAcceptButton={
+            withFooterInput
+              ? disableAcceptButton
+              : disableAcceptButton && !newFooterInputValue.trim()
+          }
        />
      )}
    </StyledSelector>
--- a/packages/components/selector/sub-components/Body/Body.types.ts
+++ b/packages/components/selector/sub-components/Body/Body.types.ts
@ -38,4 +38,5 @@ export type BodyProps = {
  isBreadCrumbsLoading?: boolean;

  withFooterInput?: boolean;
+  withFooterCheckbox?: boolean;
 };
--- a/packages/components/selector/sub-components/Body/index.tsx
+++ b/packages/components/selector/sub-components/Body/index.tsx
@ -19,7 +19,8 @@ const BREAD_CRUMBS_HEIGHT = 38;
 const SEARCH_HEIGHT = 44;
 const SELECT_ALL_HEIGHT = 73;
 const FOOTER_HEIGHT = 73;
-const FOOTER_WITH_NEW_NAME_HEIGHT = 181;
+const FOOTER_WITH_NEW_NAME_HEIGHT = 145;
+const FOOTER_WITH_CHECKBOX_HEIGHT = 181;

 const Body = ({
  footerVisible,
@ -56,6 +57,7 @@ const Body = ({
  withSearch,
  isBreadCrumbsLoading,
  withFooterInput,
+  withFooterCheckbox,
 }: BodyProps) => {
  const [bodyHeight, setBodyHeight] = React.useState(0);

@ -111,7 +113,11 @@ const Body = ({
    <StyledBody
      ref={bodyRef}
      footerHeight={
-        withFooterInput ? FOOTER_WITH_NEW_NAME_HEIGHT : FOOTER_HEIGHT
+        withFooterCheckbox
+          ? FOOTER_WITH_CHECKBOX_HEIGHT
+          : withFooterInput
+          ? FOOTER_WITH_NEW_NAME_HEIGHT
+          : FOOTER_HEIGHT
      }
      headerHeight={HEADER_HEIGHT}
      footerVisible={footerVisible}
--- a/packages/components/selector/sub-components/Footer/Footer.types.ts
+++ b/packages/components/selector/sub-components/Footer/Footer.types.ts
@ -15,6 +15,7 @@ export type FooterProps = {
  onChangeAccessRights?: (access: AccessRight) => void;

  withFooterInput?: boolean;
+  withFooterCheckbox?: boolean;
  footerInputHeader?: string;
  currentFooterInputValue?: string;
  footerCheckboxLabel?: string;
--- a/packages/components/selector/sub-components/Footer/StyledFooter.ts
+++ b/packages/components/selector/sub-components/Footer/StyledFooter.ts
@ -4,11 +4,29 @@ import Combobox from "../../../combobox";
 import Text from "../../../text";
 import Base from "../../../themes/base";

-const StyledFooter = styled.div<{ withFooterInput?: boolean }>`
+const StyledFooter = styled.div<{
+  withFooterInput?: boolean;
+  withFooterCheckbox?: boolean;
+}>`
  width: calc(100% - 32px);
-  max-height: ${(props) => (props.withFooterInput ? "181px" : "73px")};
-  height: ${(props) => (props.withFooterInput ? "181px" : "73px")};
-  min-height: ${(props) => (props.withFooterInput ? "181px" : "73px")};
+  max-height: ${(props) =>
+    props.withFooterCheckbox
+      ? "181px"
+      : props.withFooterInput
+      ? "145px"
+      : "73px"};
+  height: ${(props) =>
+    props.withFooterCheckbox
+      ? "181px"
+      : props.withFooterInput
+      ? "145px"
+      : "73px"};
+  min-height: ${(props) =>
+    props.withFooterCheckbox
+      ? "181px"
+      : props.withFooterInput
+      ? "145px"
+      : "73px"};

  padding: 0 16px;

--- a/packages/components/selector/sub-components/Footer/index.tsx
+++ b/packages/components/selector/sub-components/Footer/index.tsx
@ -29,6 +29,7 @@ const Footer = React.memo(
    onChangeAccessRights,

    withFooterInput,
+    withFooterCheckbox,
    footerInputHeader,
    footerCheckboxLabel,
    currentFooterInputValue,
@ -52,7 +53,10 @@ const Footer = React.memo(
    };

    return (
-      <StyledFooter withFooterInput={withFooterInput}>
+      <StyledFooter
+        withFooterInput={withFooterInput}
+        withFooterCheckbox={withFooterCheckbox}
+      >
        {withFooterInput && (
          <StyledNewNameContainer>
            <StyledNewNameHeader
@ -68,11 +72,13 @@ const Footer = React.memo(
              scale
              onChange={onChangeFileName}
            />
+            {withFooterCheckbox && (
              <Checkbox
                label={footerCheckboxLabel}
                isChecked={isFooterCheckboxChecked}
                onChange={onChangeCheckbox}
              />
+            )}
          </StyledNewNameContainer>
        )}

--- a/packages/editor/src/client/components/SelectFolderDialog.js
+++ b/packages/editor/src/client/components/SelectFolderDialog.js
@ -1,10 +1,7 @@
 import React from "react";
 import DynamicComponent from "./DynamicComponent";
 import { CLIENT_REMOTE_ENTRY_URL, CLIENT_SCOPE } from "../helpers/constants";
-import Text from "@docspace/components/text";
-import TextInput from "@docspace/components/text-input";
-import Checkbox from "@docspace/components/checkbox";
-import { StyledSelectFolder } from "../components/StyledEditor";
+
 import { useTranslation } from "react-i18next";
 const SelectFolderDialog = ({
  successAuth,
@ -13,44 +10,13 @@ const SelectFolderDialog = ({
  onCloseFolderDialog,
  onClickSaveSelectFolder,
  titleSelectorFolder,
-  onChangeInput,
+
  extension,
-  onClickCheckbox,
+
  mfReady,
-  openNewTab,
 }) => {
  const { t } = useTranslation(["Editor", "Common"]);

-  const headerProps = {
-    header: (
-      <StyledSelectFolder>
-        <Text className="editor-select-folder_text">{t("FileName")}</Text>
-        <TextInput
-          className="editor-select-folder_text-input"
-          scale
-          onChange={onChangeInput}
-          value={titleSelectorFolder}
-        />
-      </StyledSelectFolder>
-    ),
-  };
-
-  const footerProps =
-    extension !== "fb2"
-      ? {
-          footer: (
-            <StyledSelectFolder>
-              <Checkbox
-                className="editor-select-folder_checkbox"
-                label={t("OpenSavedDocument")}
-                onChange={onClickCheckbox}
-                isChecked={openNewTab}
-              />
-            </StyledSelectFolder>
-          ),
-        }
-      : {};
-
  return (
    (mfReady && isVisible && successAuth && (
      <DynamicComponent
@ -60,14 +26,17 @@ const SelectFolderDialog = ({
          module: "./SelectFolderDialog",
        }}
        needProxy
-        folderId={folderId}
+        id={folderId}
        isPanelVisible={isVisible}
        onClose={onCloseFolderDialog}
-        filteredType="exceptSortedByTags"
        onSave={onClickSaveSelectFolder}
-        isDisableButton={!titleSelectorFolder.trim()}
-        {...headerProps}
-        {...footerProps}
+        isCopy={true}
+        isEditorDialog={true}
+        withFooterInput={true}
+        withFooterCheckbox={extension !== "fb2"}
+        footerInputHeader={t("FileName")}
+        currentFooterInputValue={titleSelectorFolder}
+        footerCheckboxLabel={t("OpenSavedDocument")}
      />
    )) ||
    null
--- a/packages/editor/src/client/helpers/withDialogs.js
+++ b/packages/editor/src/client/helpers/withDialogs.js
@ -20,7 +20,6 @@ const withDialogs = (WrappedComponent) => {
    const [titleSelectorFolder, setTitleSelectorFolder] = useState("");
    const [urlSelectorFolder, setUrlSelectorFolder] = useState("");
    const [extension, setExtension] = useState();
-    const [openNewTab, setNewOpenTab] = useState(false);

    const { t } = useTranslation(["Editor", "Common"]);

@ -198,10 +197,9 @@ const withDialogs = (WrappedComponent) => {

    const onCloseFolderDialog = () => {
      setIsFolderDialogVisible(false);
-      setNewOpenTab(false);
    };

-    const getSavingInfo = async (title, folderId) => {
+    const getSavingInfo = async (title, folderId, openNewTab) => {
      const savingInfo = await window.filesUtils.SaveAs(
        title,
        urlSelectorFolder,
@ -220,13 +218,13 @@ const withDialogs = (WrappedComponent) => {
      }
    };

-    const onClickSaveSelectFolder = (e, folderId) => {
-      const currentExst = titleSelectorFolder.split(".").pop();
+    const onClickSaveSelectFolder = (e, folderId, fileTitle, openNewTab) => {
+      const currentExst = fileTitle.split(".").pop();

      const title =
        currentExst !== extension
-          ? titleSelectorFolder.concat(`.${extension}`)
-          : titleSelectorFolder;
+          ? fileTitle.concat(`.${extension}`)
+          : fileTitle;

      if (openNewTab) {
        window.filesUtils.SaveAs(
@ -236,18 +234,10 @@ const withDialogs = (WrappedComponent) => {
          openNewTab
        );
      } else {
-        getSavingInfo(title, folderId);
+        getSavingInfo(title, folderId, openNewTab);
      }
    };

-    const onClickCheckbox = () => {
-      setNewOpenTab(!openNewTab);
-    };
-
-    const onChangeInput = (e) => {
-      setTitleSelectorFolder(e.target.value);
-    };
-
    // const sharingDialog = (
    //   <SharingDialog
    //     mfReady={mfReady}
@ -280,9 +270,6 @@ const withDialogs = (WrappedComponent) => {
        onCloseFolderDialog={onCloseFolderDialog}
        onClickSaveSelectFolder={onClickSaveSelectFolder}
        titleSelectorFolder={titleSelectorFolder}
-        onChangeInput={onChangeInput}
-        onClickCheckbox={onClickCheckbox}
-        openNewTab={openNewTab}
        mfReady={mfReady}
      />
    );