feat: metadata image display

frontend/package.json

@@ -14,7 +14,7 @@
     "@seafile/sdoc-editor": "1.0.133",
     "@seafile/seafile-calendar": "0.0.28",
     "@seafile/seafile-editor": "^1.0.122",
-    "@seafile/sf-metadata-ui-component": "^0.0.51",
+    "@seafile/sf-metadata-ui-component": "^0.0.53",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/codemirror-themes": "^4.23.5",
     "@uiw/react-codemirror": "^4.19.4",

frontend/src/metadata/components/cell-formatter/file-name.js

@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { FileNameFormatter } from '@seafile/sf-metadata-ui-component';
+import { Utils } from '../../../utils/utils';
+import { siteRoot, thumbnailDefaultSize } from '../../../utils/constants';
+import { getParentDirFromRecord } from '../../utils/cell';
+import { checkIsDir } from '../../utils/row';
+
+const FileName = ({ record, className: propsClassName, value, ...params }) => {
+  const parentDir = useMemo(() => getParentDirFromRecord(record), [record]);
+  const isDir = useMemo(() => checkIsDir(record), [record]);
+  const className = useMemo(() => {
+    if (!Utils.imageCheck(value)) return propsClassName;
+    return classnames(propsClassName, 'sf-metadata-image-file-formatter');
+  }, [propsClassName, value]);
+
+  const iconUrl = useMemo(() => {
+    if (isDir) {
+      const icon = Utils.getFolderIconUrl();
+      return { iconUrl: icon, defaultIconUrl: icon };
+    }
+    const defaultIconUrl = Utils.getFileIconUrl(value);
+    if (Utils.imageCheck(value)) {
+      const path = Utils.encodePath(Utils.joinPath(parentDir, value));
+      const repoID = window.sfMetadataStore.repoId;
+      const thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}${path}`;
+      return { iconUrl: thumbnail, defaultIconUrl };
+    }
+    return { iconUrl: defaultIconUrl, defaultIconUrl };
+  }, [isDir, value, parentDir]);
+
+  return (<FileNameFormatter { ...params } className={className} value={value} { ...iconUrl } />);
+
+};
+
+FileName.propTypes = {
+  value: PropTypes.string,
+  record: PropTypes.object.isRequired,
+  className: PropTypes.string,
+};
+
+export default FileName;

frontend/src/metadata/components/cell-formatter/index.js

@@ -2,9 +2,10 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
 import { useCollaborators } from '../../hooks';
-import { Utils } from '../../../utils/utils';
+import { CellType } from '../../constants';
+import FileName from './file-name';
 
-const CellFormatter = ({ readonly, value, field, ...params }) => {
+const CellFormatter = ({ readonly, value, field, record, ...params }) => {
   const { collaborators, collaboratorsCache, updateCollaboratorsCache, queryUser } = useCollaborators();
   const props = useMemo(() => {
     return {
@@ -15,11 +16,13 @@ const CellFormatter = ({ readonly, value, field, ...params }) => {
       value,
       field,
       queryUserAPI: queryUser,
-      getFileIconUrl: Utils.getFileIconUrl,
-      getFolderIconUrl: Utils.getFolderIconUrl,
     };
   }, [readonly, value, field, collaborators, collaboratorsCache, updateCollaboratorsCache, queryUser]);
 
+  if (field.type === CellType.FILE_NAME) {
+    return (<FileName { ...props } { ...params } record={record} />);
+  }
+
   return (
     <Formatter { ...props } { ...params } />
   );
@@ -29,6 +32,7 @@ CellFormatter.propTypes = {
   readonly: PropTypes.bool,
   value: PropTypes.any,
   field: PropTypes.object.isRequired,
+  record: PropTypes.object,
 };
 
 export default CellFormatter;

frontend/src/metadata/metadata-view/index.css

@@ -4,3 +4,10 @@
   margin-bottom: 14px;
   background-color: #eee;
 }
+
+.sf-metadata-ui.file-name-formatter.sf-metadata-image-file-formatter .sf-metadata-file-icon {
+  transform: translateY(0);
+  max-width: 24px;
+  max-height: 24px;
+  height: unset;
+}

frontend/src/metadata/views/kanban/boards/board/card/index.css

@@ -67,11 +67,11 @@
   white-space: nowrap;
 }
 
-.sf-metadata-kanban-card .file-name-formatter {
+.sf-metadata-kanban-card .file-name-formatter:not(.sf-metadata-image-file-formatter) {
   margin-left: -4px;
 }
 
-.sf-metadata-kanban-card .sf-metadata-special-file-name-formatter {
+.sf-metadata-kanban-card .sf-metadata-special-file-name-formatter:not(.sf-metadata-image-file-formatter) {
   margin-left: -2px;
 }
 

frontend/src/metadata/views/kanban/boards/board/card/index.js

@@ -21,7 +21,7 @@ const Card = ({
     <article data-id={record._id} className={classnames('sf-metadata-kanban-card', { 'readonly': readonly })}>
       {titleColumn && (
         <div className="sf-metadata-kanban-card-header">
-          <Formatter value={titleValue} column={titleColumn}/>
+          <Formatter value={titleValue} column={titleColumn} record={record}/>
         </div>
       )}
       <div className="sf-metadata-kanban-card-body">
@@ -41,7 +41,7 @@ const Card = ({
           return (
             <div className="sf-metadata-kanban-card-record" key={column.key}>
               {displayColumnName && (<div className="sf-metadata-kanban-card-record-name">{column.name}</div>)}
-              <Formatter value={value} column={column}/>
+              <Formatter value={value} column={column} record={record}/>
             </div>
           );
         })}

frontend/src/metadata/views/kanban/boards/board/formatter.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import CellFormatter from '../../../../components/cell-formatter';
 import { CellType } from '../../../../constants';
 import { Utils } from '../../../../../utils/utils';
@@ -13,7 +14,7 @@ const SPECIAL_FILE_ICON = [
   'word.png',
 ];
 
-const Formatter = ({ value, column }) => {
+const Formatter = ({ value, column, record }) => {
   let className = '';
 
   if (column.type === CellType.FILE_NAME && value) {
@@ -23,7 +24,13 @@ const Formatter = ({ value, column }) => {
     }
   }
 
-  return (<CellFormatter className={className} value={value} field={column}/>);
+  return (<CellFormatter readonly={true} className={className} value={value} field={column} record={record} />);
+};
+
+Formatter.propTypes = {
+  value: PropTypes.any,
+  column: PropTypes.object,
+  record: PropTypes.object,
 };
 
 export default Formatter;

frontend/src/metadata/views/kanban/boards/board/header/index.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import CellFormatter from '../../../../../components/cell-formatter';
 import { gettext } from '../../../../../../utils/constants';
 import OpMenu from './op-menu';
+import { CellType } from '../../../../../constants';
 
 import './index.css';
-import { CellType } from '../../../../../constants';
 
 const Header = ({ readonly, haveFreezed, value, groupByColumn, onDelete, onFreezed, onUnFreezed }) => {
   const [active, setActive] = useState(false);

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

@@ -15,7 +15,7 @@ const Formatter = ({ isCellSelected, isDir, field, value, onChange, record }) =>
   if (type === CellType.RATE && cellEditAble) {
     return (<RateEditor isCellSelected={isCellSelected} value={value} field={field} onChange={onChange} />);
   }
-  return (<CellFormatter readonly={true} value={value} field={field} isDir={isDir} />);
+  return (<CellFormatter readonly={true} value={value} field={field} record={record} />);
 };
 
 Formatter.propTypes = {