fix(metadata-table): open file via click (#6796)

frontend/src/metadata/components/cell-editors/file-name-editor.js

@@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
 import { ModalPortal } from '@seafile/sf-metadata-ui-component';
 import { Utils } from '../../../utils/utils';
 import ImageDialog from '../../../components/dialog/image-dialog';
-import { EVENT_BUS_TYPE } from '../../../components/common/event-bus-type';
 import { siteRoot, thumbnailSizeForOriginal, fileServerRoot } from '../../../utils/constants';
 import { PRIVATE_COLUMN_KEY } from '../../constants';
 
-
 const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
   const [imageIndex, setImageIndex] = useState(0);
 
@@ -67,24 +65,6 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
     return '';
   }, [_isDir, fileName]);
 
-  const parentDir = useMemo(() => {
-    const value = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
-    if (value === '/') return '';
-    return value;
-  }, [record]);
-
-  const repoID = useMemo(() => {
-    return window.sfMetadataContext.getSetting('repoID');
-  }, []);
-
-  const path = useMemo(() => {
-    return Utils.encodePath(Utils.joinPath(parentDir, fileName));
-  }, [parentDir, fileName]);
-
-  const url = useMemo(() => {
-    return `${siteRoot}lib/${repoID}/file${path}`;
-  }, [path, repoID]);
-
   const moveToPrevImage = () => {
     const imageItemsLength = imageItems.length;
     setImageIndex((prevState) => (prevState + imageItemsLength - 1) % imageItemsLength);
@@ -95,19 +75,6 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
     setImageIndex((prevState) => (prevState + 1) % imageItemsLength);
   };
 
-  useEffect(() => {
-    if (fileType === 'markdown') {
-      const fileName = record[PRIVATE_COLUMN_KEY.FILE_NAME];
-      const parentDir = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
-      window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, parentDir, fileName);
-    }
-    return () => {};
-  }, [record, fileType]);
-
-  if (fileType === 'markdown') {
-    return null;
-  }
-
   if (fileType === 'image') {
     return (
       <ModalPortal>
@@ -122,15 +89,6 @@ const FileNameEditor = ({ column, record, table, onCommitCancel }) => {
     );
   }
 
-  if (!fileType || fileType === 'sdoc') {
-    window.open(url);
-  } else {
-    let pathname = window.location.pathname;
-    if (pathname.endsWith('/')) {
-      pathname = pathname.slice(0, -1);
-    }
-    window.open(window.location.origin + pathname + Utils.encodePath(Utils.joinPath(parentDir, fileName)));
-  }
   return null;
 };
 

frontend/src/metadata/views/table/table-main/records/record/cell/index.js

@@ -6,7 +6,7 @@ import CellOperationBtn from './operation-btn';
 import { Utils } from '../../../../../../../utils/utils';
 import ObjectUtils from '../../../../../../utils/object-utils';
 import { isCellValueChanged, getCellValueByColumn } from '../../../../../../utils/cell';
-import { PRIVATE_COLUMN_KEY, PRIVATE_COLUMN_KEYS, TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../../../constants';
+import { CellType, PRIVATE_COLUMN_KEY, PRIVATE_COLUMN_KEYS, TABLE_SUPPORT_EDIT_TYPE_MAP } from '../../../../../../constants';
 
 import './index.css';
 
@@ -37,6 +37,9 @@ const Cell = React.memo(({
       // 'row-comment-cell': ,
     });
   }, [column, highlightClassName, isLastCell, isLastFrozenCell, isCellSelected]);
+  const isFileNameColumn = useMemo(() => {
+    return column.type === CellType.FILE_NAME;
+  }, [column]);
   const isDir = useMemo(() => {
     const isDirValue = record[PRIVATE_COLUMN_KEY.IS_DIR];
     if (typeof isDirValue === 'string') return isDirValue.toUpperCase() === 'TRUE';
@@ -148,16 +151,23 @@ const Cell = React.memo(({
 
   const cellValue = getCellValueByColumn(record, column);
   const cellEvents = needBindEvents && getEvents();
-  const props = {
+  const containerProps = {
     className,
     style,
     ...cellEvents,
   };
 
   return (
-    <div key={`${record._id}-${column.key}`} {...props}>
+    <div key={`${record._id}-${column.key}`} {...containerProps}>
       <Formatter isCellSelected={isCellSelected} isDir={isDir} value={cellValue} field={column} onChange={modifyRecord} record={record} />
-      {isCellSelected && (<CellOperationBtn value={cellValue} column={column} isDir={isDir} />)}
+      {(isCellSelected && isFileNameColumn) && (
+        <CellOperationBtn
+          record={record}
+          cellValue={cellValue}
+          column={column}
+          isDir={isDir}
+        />
+      )}
     </div>
   );
 }, (props, nextProps) => {

frontend/src/metadata/views/table/table-main/records/record/cell/operation-btn/index.js

@@ -1,21 +1,121 @@
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { UncontrolledTooltip } from 'reactstrap';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
-import { gettext } from '../../../../../../../../utils/constants';
+import { Utils } from '../../../../../../../../utils/utils';
-import { CellType, EVENT_BUS_TYPE, EDITOR_TYPE } from '../../../../../../../constants';
+import { gettext, siteRoot } from '../../../../../../../../utils/constants';
+import { EVENT_BUS_TYPE } from '../../../../../../../..//components/common/event-bus-type';
+import { EVENT_BUS_TYPE as METADATA_EVENT_BUS_TYPE, EDITOR_TYPE, PRIVATE_COLUMN_KEY } from '../../../../../../../constants';
 
 import './index.css';
 
-const CellOperationBtn = ({ isDir, column, value }) => {
+const FILE_TYPE = {
+  FOLDER: 'folder',
+  MARKDOWN: 'markdown',
+  SDOC: 'sdoc',
+  IMAGE: 'image',
+};
 
-  const openFile = useCallback((event) => {
+const CellOperationBtn = ({ isDir, column, record, cellValue, ...props }) => {
+
+  const _isDir = useMemo(() => {
+    const isDirValue = record[PRIVATE_COLUMN_KEY.IS_DIR];
+    if (typeof isDirValue === 'string') return isDirValue.toUpperCase() === 'TRUE';
+    return isDirValue;
+  }, [record]);
+
+  const fileName = useMemo(() => {
+    const { key } = column;
+    return record[key];
+  }, [column, record]);
+
+  const fileType = useMemo(() => {
+    if (_isDir) return FILE_TYPE.FOLDER;
+    if (!fileName) return '';
+    const index = fileName.lastIndexOf('.');
+    if (index === -1) return '';
+    const suffix = fileName.slice(index).toLowerCase();
+    if (suffix.indexOf(' ') > -1) return '';
+    if (Utils.imageCheck(fileName)) return FILE_TYPE.IMAGE;
+    if (Utils.isMarkdownFile(fileName)) return FILE_TYPE.MARKDOWN;
+    if (Utils.isSdocFile(fileName)) return FILE_TYPE.SDOC;
+    return '';
+  }, [_isDir, fileName]);
+
+  const getParentDir = () => {
+    const parentDir = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
+    if (parentDir === '/') {
+      return '';
+    }
+    return parentDir;
+  };
+
+  const generateUrl = () => {
+    const repoID = window.sfMetadataContext.getSetting('repoID');
+    const parentDir = getParentDir();
+    const path = Utils.encodePath(Utils.joinPath(parentDir, fileName));
+    return `${siteRoot}lib/${repoID}/file${path}`;
+  };
+
+  const openUrl = (url) => {
+    window.open(url);
+  };
+
+  const openMarkdown = () => {
+    const fileName = record[PRIVATE_COLUMN_KEY.FILE_NAME];
+    const parentDir = record[PRIVATE_COLUMN_KEY.PARENT_DIR];
+    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_MARKDOWN_DIALOG, parentDir, fileName);
+  };
+
+  const openByNewWindow = (fileType) => {
+    if (!fileType) {
+      const url = generateUrl();
+      openUrl(url);
+    } else {
+      const parentDir = getParentDir();
+      let pathname = window.location.pathname;
+      if (pathname.endsWith('/')) {
+        pathname = pathname.slice(0, -1);
+      }
+      openUrl(window.location.origin + pathname + Utils.encodePath(Utils.joinPath(parentDir, fileName)));
+    }
+  };
+
+  const openSdoc = () => {
+    const url = generateUrl();
+    openUrl(url);
+  };
+
+  const openOthers = () => {
+    openByNewWindow(fileType);
+  };
+
+  const openFile = (event) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
-    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER);
-  }, []);
 
-  if (!value || column.type !== CellType.FILE_NAME) return null;
+    switch (fileType) {
+      case FILE_TYPE.MARKDOWN: {
+        openMarkdown();
+        break;
+      }
+      case FILE_TYPE.SDOC: {
+        openSdoc();
+        break;
+      }
+      case FILE_TYPE.IMAGE: {
+        // render image previewer via FileNameEditor
+        window.sfMetadataContext.eventBus.dispatch(METADATA_EVENT_BUS_TYPE.OPEN_EDITOR, EDITOR_TYPE.PREVIEWER);
+        break;
+      }
+      default: {
+        openOthers();
+        break;
+      }
+    }
+  };
+
+  if (!cellValue) return null;
 
   return (
     <>