feat: optimize code

frontend/src/components/cur-dir-path/dir-tool.js

@@ -10,6 +10,7 @@ import ViewModes from '../../components/view-modes';
 import ReposSortMenu from '../../components/repos-sort-menu';
 import MetadataViewToolBar from '../../metadata/components/view-toolbar';
 import { PRIVATE_FILE_TYPE } from '../../constants';
+import { DIRENT_DETAIL_MODE } from '../dir-view-mode/constants';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -97,10 +98,14 @@ class DirTool extends React.Component {
     this.props.sortItems(sortBy, sortOrder);
   };
 
+  showDirentDetail = () => {
+    this.props.switchViewMode(DIRENT_DETAIL_MODE);
+  };
+
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, switchViewMode, isCustomPermission } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
 
@@ -114,18 +119,18 @@ class DirTool extends React.Component {
     if (isFileExtended) {
       return (
         <div className="dir-tool">
-          <MetadataViewToolBar viewId={viewId} isCustomPermission={isCustomPermission} switchViewMode={switchViewMode} />
+          <MetadataViewToolBar viewId={viewId} isCustomPermission={isCustomPermission} showDetail={this.showDirentDetail} />
         </div>
       );
     }
 
     return (
       <React.Fragment>
         <div className="dir-tool d-flex">
-          <ViewModes currentViewMode={currentMode} switchViewMode={switchViewMode} />
+          <ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
           <ReposSortMenu sortOptions={sortOptions} onSelectSortOption={this.onSelectSortOption}/>
           {(!isCustomPermission) &&
-            <div className="cur-view-path-btn" onClick={() => switchViewMode('detail')}>
+            <div className="cur-view-path-btn" onClick={this.showDirentDetail}>
               <span className="sf3-font sf3-font-info" aria-label={propertiesText} title={propertiesText}></span>
             </div>
           }

frontend/src/components/dir-view-mode/constants.js

@@ -1,5 +1,5 @@
-export { VIEW_TYPE } from '../../metadata/constants';
 export const LIST_MODE = 'list';
 export const GRID_MODE = 'grid';
+export const DIRENT_DETAIL_MODE = 'detail';
 export const METADATA_MODE = 'metadata';
 export const FACE_RECOGNITION_MODE = 'person_image';

frontend/src/components/dir-view-mode/dir-column-view.js

@@ -80,6 +80,7 @@ const propTypes = {
   fullDirentList: PropTypes.array,
   onItemsScroll: PropTypes.func.isRequired,
   eventBus: PropTypes.object,
+  updateCurrentDirent: PropTypes.func.isRequired,
 };
 
 class DirColumnView extends React.Component {
@@ -202,6 +203,7 @@ class DirColumnView extends React.Component {
               viewID={this.props.viewId}
               deleteFilesCallback={this.props.deleteFilesCallback}
               renameFileCallback={this.props.renameFileCallback}
+              updateCurrentDirent={this.props.updateCurrentDirent}
             />
           }
           {currentMode === FACE_RECOGNITION_MODE &&

frontend/src/components/dirent-detail/detail-container.js

@@ -2,40 +2,53 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LibDetail from './lib-details';
 import DirentDetail from './dirent-details';
-import GalleryDetail from '../../metadata/components/gallery-details';
+import ViewDetails from '../../metadata/components/view-details';
 import ObjectUtils from '../../metadata/utils/object-utils';
 import { MetadataContext } from '../../metadata';
-import { METADATA_MODE } from '../dir-view-mode/constants';
+import { PRIVATE_FILE_TYPE } from '../../constants';
 
-const DetailContainer = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged, mode }) => {
+const DetailContainer = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
 
   useEffect(() => {
-    // init context
-    if (!window.sfMetadataContext) {
-      const context = new MetadataContext();
-      window.sfMetadataContext = context;
-      window.sfMetadataContext.init({ repoID, repoInfo: currentRepoInfo });
-    }
+    if (path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) return;
 
+    // init context
+    const context = new MetadataContext();
+    window.sfMetadataContext = context;
+    window.sfMetadataContext.init({ repoID, repoInfo: currentRepoInfo });
     return () => {
-      if (window.sfMetadataContext && mode !== METADATA_MODE) {
-        window.sfMetadataContext.destroy();
-        delete window['sfMetadataContext'];
-      }
+      window.sfMetadataContext.destroy();
+      delete window['sfMetadataContext'];
     };
-  }, [repoID, currentRepoInfo, mode]);
+  }, [repoID, currentRepoInfo, path]);
 
-  if (mode === METADATA_MODE) {
-    const viewID = path.split('/').pop();
-    return <GalleryDetail currentRepoInfo={currentRepoInfo} viewID={viewID} onClose={onClose} />;
+  if (path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES)) {
+    const viewId = path.split('/').pop();
+    if (!dirent) return (
+      <ViewDetails viewId={viewId} onClose={onClose} />
+    );
+    return (
+      <DirentDetail
+        repoID={repoID}
+        path={dirent.path}
+        dirent={dirent}
+        currentRepoInfo={currentRepoInfo}
+        repoTags={repoTags}
+        fileTags={fileTags}
+        onFileTagChanged={onFileTagChanged}
+        onClose={onClose}
+      />
+    );
   }
 
   if (path === '/' && !dirent) {
     return (
-      <LibDetail currentRepoInfo={currentRepoInfo} onClose={onClose} />
+      <LibDetail
+        currentRepoInfo={currentRepoInfo}
+        onClose={onClose}
+      />
     );
   }
-
   return (
     <DirentDetail
       repoID={repoID}
@@ -68,7 +81,6 @@ DetailContainer.propTypes = {
   fileTags: PropTypes.array,
   onClose: PropTypes.func,
   onFileTagChanged: PropTypes.func,
-  mode: PropTypes.string,
 };
 
 export default DetailContainer;

frontend/src/components/dirent-detail/detail/header/index.css

@@ -16,6 +16,15 @@
   width: 0; /* prevent strut flex layout */
 }
 
+.detail-header .detail-title .detail-header-icon-container {
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 .detail-header .detail-title .name {
   margin: 0 0.5rem 0 6px;
   line-height: 1.5rem;

frontend/src/components/dirent-detail/detail/header/index.js

@@ -4,12 +4,14 @@ import Icon from '../../../icon';
 
 import './index.css';
 
-const Header = ({ title, icon, onClose, component = {} }) => {
+const Header = ({ title, icon, iconSize = 32, onClose, component = {} }) => {
   const { closeIcon } = component;
   return (
     <div className="detail-header">
       <div className="detail-title dirent-title">
-        <img src={icon} width="32" height="32" alt="" />
+        <div className="detail-header-icon-container">
+          <img src={icon} width={iconSize} height={iconSize} alt="" />
+        </div>
         <span className="name ellipsis" title={title}>{title}</span>
       </div>
       <div className="detail-control" onClick={onClose}>
@@ -22,6 +24,7 @@ const Header = ({ title, icon, onClose, component = {} }) => {
 Header.propTypes = {
   title: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
+  iconSize: PropTypes.number,
   component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
 };

frontend/src/components/dirent-detail/dirent-details/index.css

@@ -42,3 +42,8 @@
 .detail-body .sf-metadata-property-detail-tags.tags-empty {
   padding: 6.5px 6px;;
 }
+
+.detail-body .detail-content.detail-content-empty {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,3 @@
+.sf-metadata-view-detail .detail-content-empty .empty-tip {
+  margin: 0;
+}

frontend/src/metadata/components/view-details/index.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { gettext, mediaUrl } from '../../../utils/constants';
+import { Detail, Header, Body } from '../../../components/dirent-detail/detail';
+import EmptyTip from '../../../components/empty-tip';
+import { useMetadata } from '../../hooks';
+import { VIEW_TYPE } from '../../constants';
+
+import './index.css';
+
+const ViewDetails = ({ viewId, onClose }) => {
+  const { viewsMap } = useMetadata();
+
+  const view = useMemo(() => viewsMap[viewId], [viewId, viewsMap]);
+  const icon = useMemo(() => {
+    const type = view.type;
+    if (type === VIEW_TYPE.GALLERY) return `${mediaUrl}favicons/gallery.png`;
+    if (type === VIEW_TYPE.TABLE) return `${mediaUrl}favicons/table.png`;
+  }, [view]);
+
+  return (
+    <Detail className="sf-metadata-view-detail">
+      <Header title={view.name} icon={icon} iconSize={28} onClose={onClose} />
+      <Body>
+        <div className="detail-content detail-content-empty">
+          <EmptyTip text={gettext('There is no information to display.')} />
+        </div>
+      </Body>
+    </Detail>
+  );
+};
+
+ViewDetails.propTypes = {
+  viewId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ViewDetails;