Client: rewrite indexing components to typescript
This commit is contained in:
parent
cc644180a5
commit
a7307c94da
@ -28,17 +28,32 @@ import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
|
||||
import {
|
||||
ModalDialog,
|
||||
ModalDialogType,
|
||||
} from "@docspace/shared/components/modal-dialog";
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { Button } from "@docspace/shared/components/button";
|
||||
import { Button, ButtonSize } from "@docspace/shared/components/button";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
import DialogsStore from "SRC_DIR/store/DialogsStore";
|
||||
import SelectedFolderStore from "SRC_DIR/store/SelectedFolderStore";
|
||||
import FilesActionsStore from "SRC_DIR/store/FilesActionsStore";
|
||||
import { TSelectedFolder } from "@docspace/client/src/store/SelectedFolderStore";
|
||||
|
||||
export interface ReorderIndexDialogProps {
|
||||
reorder: (id: number | string | null) => void;
|
||||
setIsVisible: (visible: boolean) => void;
|
||||
visible: boolean;
|
||||
selectedFolder: TSelectedFolder;
|
||||
}
|
||||
|
||||
const ReorderIndexDialog = ({
|
||||
visible,
|
||||
setIsVisible,
|
||||
reorder,
|
||||
selectedFolder,
|
||||
}) => {
|
||||
}: ReorderIndexDialogProps) => {
|
||||
const { t, ready } = useTranslation(["Files", "Common"]);
|
||||
|
||||
const onClose = () => {
|
||||
@ -51,7 +66,13 @@ const ReorderIndexDialog = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalDialog isLarge isLoading={!ready} visible={visible} onClose={onClose}>
|
||||
<ModalDialog
|
||||
displayType={ModalDialogType.modal}
|
||||
isLarge
|
||||
isLoading={!ready}
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
>
|
||||
<ModalDialog.Header>{t("Common:Warning")}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<Text fontSize="13px" fontWeight={400} noSelect>
|
||||
@ -63,7 +84,7 @@ const ReorderIndexDialog = ({
|
||||
id="create-room"
|
||||
key="OkButton"
|
||||
label={t("Files:Reorder")}
|
||||
size="normal"
|
||||
size={ButtonSize.normal}
|
||||
primary
|
||||
onClick={onReorder}
|
||||
scale={isMobile}
|
||||
@ -72,7 +93,7 @@ const ReorderIndexDialog = ({
|
||||
id="cancel-share-folder"
|
||||
key="CancelButton"
|
||||
label={t("Common:CancelButton")}
|
||||
size="normal"
|
||||
size={ButtonSize.normal}
|
||||
onClick={onClose}
|
||||
scale={isMobile}
|
||||
/>
|
||||
@ -82,7 +103,15 @@ const ReorderIndexDialog = ({
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({ dialogsStore, filesActionsStore, selectedFolderStore }) => {
|
||||
({
|
||||
dialogsStore,
|
||||
filesActionsStore,
|
||||
selectedFolderStore,
|
||||
}: {
|
||||
dialogsStore: DialogsStore;
|
||||
filesActionsStore: FilesActionsStore;
|
||||
selectedFolderStore: SelectedFolderStore;
|
||||
}) => {
|
||||
const { reorderDialogVisible, setReorderDialogVisible } = dialogsStore;
|
||||
const selectedFolder = selectedFolderStore.getSelectedFolder();
|
||||
const { reorder } = filesActionsStore;
|
@ -80,7 +80,7 @@ import {
|
||||
getCategoryUrl,
|
||||
} from "SRC_DIR/helpers/utils";
|
||||
import TariffBar from "SRC_DIR/components/TariffBar";
|
||||
import TableIndexHeader from "../IndexHeader";
|
||||
import IndexMenu from "../IndexHeader";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
width: 100%;
|
||||
@ -851,7 +851,7 @@ const SectionHeaderContent = (props) => {
|
||||
isMobileView: currentDeviceType === DeviceType.mobile,
|
||||
};
|
||||
|
||||
const tableIndexHeaderProps = {
|
||||
const indexMenuProps = {
|
||||
setIsIndexEditingMode,
|
||||
t,
|
||||
setReorderDialogVisible,
|
||||
@ -954,7 +954,7 @@ const SectionHeaderContent = (props) => {
|
||||
{tableGroupMenuVisible ? (
|
||||
<TableGroupMenu {...tableGroupMenuProps} withComboBox />
|
||||
) : isIndexEditingMode ? (
|
||||
<TableIndexHeader {...tableIndexHeaderProps} />
|
||||
<IndexMenu {...indexMenuProps} />
|
||||
) : (
|
||||
<div className="header-container">
|
||||
<Navigation
|
||||
|
@ -25,16 +25,23 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { TTranslation } from "@docspace/shared/types";
|
||||
import RoundedArrowSvgUrl from "PUBLIC_DIR/images/rounded arrow.react.svg?url";
|
||||
import CrossIconSvgUrl from "PUBLIC_DIR/images/cross.react.svg?url";
|
||||
import { IconButton } from "@docspace/shared/components/icon-button";
|
||||
import { StyledTableIndexMenu } from "./StyledIndexHeader";
|
||||
|
||||
const TableIndexHeader = ({
|
||||
export interface IndexMenuProps {
|
||||
setIsIndexEditingMode: (mode: boolean) => void;
|
||||
setReorderDialogVisible: (visible: boolean) => void;
|
||||
t: TTranslation;
|
||||
}
|
||||
|
||||
const IndexMenu = ({
|
||||
setIsIndexEditingMode,
|
||||
t,
|
||||
setReorderDialogVisible,
|
||||
}) => {
|
||||
}: IndexMenuProps) => {
|
||||
return (
|
||||
<StyledTableIndexMenu>
|
||||
<div className="table-header_index-container">
|
||||
@ -49,10 +56,10 @@ const TableIndexHeader = ({
|
||||
>
|
||||
<IconButton
|
||||
className="table-header_reorder-icon"
|
||||
size="16"
|
||||
size={16}
|
||||
onClick={() => {}}
|
||||
iconName={RoundedArrowSvgUrl}
|
||||
isFill={true}
|
||||
isFill
|
||||
isClickable={false}
|
||||
/>
|
||||
<Text fontSize="12px" lineHeight="16px" fontWeight={600}>
|
||||
@ -62,7 +69,7 @@ const TableIndexHeader = ({
|
||||
</div>
|
||||
<IconButton
|
||||
className="table-header_cross-icon"
|
||||
size="16"
|
||||
size={16}
|
||||
onClick={() => setIsIndexEditingMode(false)}
|
||||
iconName={CrossIconSvgUrl}
|
||||
isFill
|
||||
@ -72,4 +79,4 @@ const TableIndexHeader = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default TableIndexHeader;
|
||||
export default IndexMenu;
|
@ -25,20 +25,23 @@
|
||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||
|
||||
import { makeAutoObservable } from "mobx";
|
||||
import InfoPanelStore from "SRC_DIR/store/InfoPanelStore";
|
||||
|
||||
class IndexingStore {
|
||||
infoPanelStore;
|
||||
|
||||
isIndexEditingMode = false;
|
||||
isIndexing = false;
|
||||
updateSelection = [];
|
||||
isIndexEditingMode: boolean = false;
|
||||
|
||||
constructor(infoPanelStore) {
|
||||
isIndexing: boolean = false;
|
||||
|
||||
updateSelection: any[] = [];
|
||||
|
||||
constructor(infoPanelStore: InfoPanelStore) {
|
||||
this.infoPanelStore = infoPanelStore;
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
setIsIndexing = (indexing) => {
|
||||
setIsIndexing = (indexing: boolean) => {
|
||||
// turn off the mode if we are no longer in indexed folders
|
||||
const { setIsVisible } = this.infoPanelStore;
|
||||
if (!indexing && this.isIndexEditingMode) this.setIsIndexEditingMode(false);
|
||||
@ -47,13 +50,14 @@ class IndexingStore {
|
||||
this.isIndexing = indexing;
|
||||
};
|
||||
|
||||
setUpdateSelection = (selection) => {
|
||||
setUpdateSelection = (selection: any[]) => {
|
||||
this.updateSelection = selection;
|
||||
};
|
||||
|
||||
setUpdateItems = (items) => {
|
||||
setUpdateItems = (items: any) => {
|
||||
const newSelection = [...this.updateSelection];
|
||||
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const item of items) {
|
||||
const exist = this.updateSelection.find(
|
||||
(selectionItem) =>
|
||||
@ -61,13 +65,14 @@ class IndexingStore {
|
||||
selectionItem.fileExst === item.fileExst,
|
||||
);
|
||||
|
||||
// eslint-disable-next-line no-continue
|
||||
if (exist) continue;
|
||||
newSelection.push(item);
|
||||
}
|
||||
this.setUpdateSelection(newSelection);
|
||||
};
|
||||
|
||||
setIsIndexEditingMode = (mode) => {
|
||||
setIsIndexEditingMode = (mode: boolean) => {
|
||||
if (!mode) {
|
||||
this.setUpdateSelection([]);
|
||||
}
|
Loading…
Reference in New Issue
Block a user