fix: search zindex (#6947)

* fix: search zindex

* feat: update ui version

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/package-lock.json

@@ -19,7 +19,7 @@
         "@seafile/sdoc-editor": "1.0.112",
         "@seafile/seafile-calendar": "0.0.28",
         "@seafile/seafile-editor": "^1.0.122",
-        "@seafile/sf-metadata-ui-component": "^0.0.47",
+        "@seafile/sf-metadata-ui-component": "^0.0.48",
         "@uiw/codemirror-extensions-langs": "^4.19.4",
         "@uiw/codemirror-themes": "^4.23.5",
         "@uiw/react-codemirror": "^4.19.4",
@@ -5038,9 +5038,9 @@
       }
     },
     "node_modules/@seafile/sf-metadata-ui-component": {
-      "version": "0.0.47",
+      "version": "0.0.48",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.47.tgz",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.48.tgz",
-      "integrity": "sha512-3EO6NwU+PDBRsvv8UsIRAETf4QPw3spRwbusKTa2ls86sIxTmB/tbTt2Z2FiUpQH9ITrahy1OlCuAZZBnte2rA==",
+      "integrity": "sha512-5/kWI4ABMwvRL5C3+PeEnd/yXX/x+vgguvS/+okEiJbiuOLw85i4FURWg1pHPh7MuVPsn0iinyxdPcIMYS8URg==",
       "dependencies": {
         "@seafile/seafile-calendar": "0.0.28",
         "@seafile/seafile-editor": "^1.0.122",

frontend/package.json

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

frontend/src/components/search/search.js

@@ -721,13 +721,13 @@ class Search extends Component {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
     const { isMaskShow } = this.state;
-    const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + k )`}`;
+    const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + k)`}`;
     return (
       <Fragment>
         <MediaQuery query="(min-width: 768px)">
           <div className="search">
-            <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
+            <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler} style={isMaskShow ? { zIndex: SEARCH_MASK } : {}}></div>
-            <div className={`search-container ${isMaskShow ? 'show' : ''}`} style={{ zIndex: SEARCH_CONTAINER }}>
+            <div className={`search-container ${isMaskShow ? 'show' : ''}`} style={isMaskShow ? { zIndex: SEARCH_CONTAINER } : {}}>
               <div className={`input-icon ${isMaskShow ? 'mb-1' : ''}`}>
                 <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                 <input

frontend/src/constants/zIndexes.js

@@ -1,33 +1,9 @@
-// CellMasks should render in front of the cells
-// Unfrozen cells do not have a zIndex specifed
-export const CELL_MASK = 1;
-export const TABLE_MAIN_INTERVAL = 1;
-export const RESIZE_HANDLE = 1;
-export const SEQUENCE_COLUMN = 1;
-
-// higher than unfrozen header cell(0), RESIZE_HANDLE
-export const FROZEN_HEADER_CELL = 2;
-export const GROUP_FROZEN_HEADER = 2;
-export const SCROLL_BAR = 2;
-// In front of CELL_MASK/non-frozen cell(1)、back of the frozen cells (2)
-export const GROUP_BACKDROP = 2;
-export const MOBILE_RECORDS_COLUMN_NAMES = 2;
-export const FROZEN_GROUP_CELL = 2;
 export const RESIZE_BAR = 2;
+
 export const FOLDED_SIDE_NAV_FILES = 2;
 
-// Frozen cells have a zIndex value of 2 so CELL_MASK should have a higher value
-export const FROZEN_CELL_MASK = 3;
 export const FOLDED_SIDE_NAV = 3;
 
-// need higher than the doms(etc. cell, cell_mask) which behind of the grid header
-export const GRID_HEADER = 4;
-export const GRID_FOOTER = 4;
-export const UPLOAD_PROGRESS = 4;
-
-// EditorContainer is rendered outside the grid and it higher FROZEN_GROUP_CELL(2)
-export const EDITOR_CONTAINER = 9;
-
 // search mask should higher than file tags (20) but lower than modal mask (1050)
 export const SEARCH_MASK = 1045;
 
@@ -37,4 +13,3 @@ export const SEARCH_CONTAINER_SETTINGS = 1047;
 
 export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048;
 
-export const DROPDOWN_MENU = 1051;

frontend/src/metadata/components/cell-editors/editor-container/normal-editor-container.js

@@ -8,8 +8,7 @@ import { getEventClassName } from '../../../utils/common';
 import { isCellValueChanged, getCellValueByColumn } from '../../../utils/cell';
 import { canEditCell } from '../../../utils/column';
 import { isCtrlKeyHeldDown, isKeyPrintable } from '../../../utils/keyboard-utils';
-import { EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS } from '../../../constants';
+import { EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS, metadataZIndexes } from '../../../constants';
-import { zIndexes } from '../../../../constants';
 
 class NormalEditorContainer extends React.Component {
 
@@ -316,7 +315,7 @@ class NormalEditorContainer extends React.Component {
 
   render() {
     const { width, height, left, top } = this.props;
-    const style = { position: 'absolute', height, width, left, top, zIndex: zIndexes.EDITOR_CONTAINER };
+    const style = { position: 'absolute', height, width, left, top, zIndex: metadataZIndexes.EDITOR_CONTAINER };
     return (
       <ClickOutside onClickOutside={this.onClickOutside}>
         <div

frontend/src/metadata/components/cell-editors/editor-container/popup-editor-container.js

@@ -6,8 +6,7 @@ import Editor from '../editor';
 import { Utils } from '../../../../utils/utils';
 import { isCellValueChanged, getCellValueByColumn, getColumnOptionNameById, getColumnOptionNamesByIds } from '../../../utils/cell';
 import { canEditCell, getColumnOriginName } from '../../../utils/column';
-import { CellType, EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS } from '../../../constants';
+import { CellType, metadataZIndexes, EVENT_BUS_TYPE, PRIVATE_COLUMN_KEYS } from '../../../constants';
-import { zIndexes } from '../../../../constants';
 
 const NOT_SUPPORT_EDITOR_COLUMN_TYPES = [
   CellType.CTIME, CellType.MTIME, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.FILE_NAME,
@@ -28,7 +27,7 @@ class PopupEditorContainer extends React.Component {
       isInvalid: false,
       style: {
         position: 'absolute',
-        zIndex: zIndexes.EDITOR_CONTAINER,
+        zIndex: metadataZIndexes.EDITOR_CONTAINER,
         left,
         top,
         ...additionalStyles

frontend/src/metadata/components/scrollbar/horizontal-scrollbar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { zIndexes } from '../../../constants';
+import { metadataZIndexes } from '../../constants';
 
 const propTypes = {
   innerWidth: PropTypes.number,
@@ -35,7 +35,7 @@ class HorizontalScrollbar extends React.Component {
   };
 
   getContainerStyle = () => {
-    return { zIndex: zIndexes.SCROLL_BAR };
+    return { zIndex: metadataZIndexes.SCROLL_BAR };
   };
 
   setScrollbarRef = (ref) => {

frontend/src/metadata/components/scrollbar/right-scrollbar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { zIndexes } from '../../../constants';
+import { metadataZIndexes } from '../../constants';
 
 const propTypes = {
   onScrollbarScroll: PropTypes.func.isRequired,
@@ -49,7 +49,7 @@ class RightScrollbar extends React.Component {
     const component = window.sfMetadataBody;
     if (component && component.resultContentRef) {
       style.height = component.resultContentRef.clientHeight;
-      style.zIndex = zIndexes.SCROLL_BAR;
+      style.zIndex = metadataZIndexes.SCROLL_BAR;
     }
 
     /* sf-metadata-header have 33px height */

frontend/src/metadata/constants/index.js

@@ -1,6 +1,7 @@
 import CellType from './column/type';
 import { EVENT_BUS_TYPE } from './event-bus-type';
 import TRANSFER_TYPES from './TransferTypes';
+import * as metadataZIndexes from './z-index';
 
 export * from './column';
 export * from './filter';
@@ -115,6 +116,7 @@ export const EDITOR_TYPE = {
 export {
   EVENT_BUS_TYPE,
   TRANSFER_TYPES,
+  metadataZIndexes,
 };
 
 export const DATE_TAG_HEIGHT = 44;

frontend/src/metadata/constants/z-index.js

@@ -0,0 +1,29 @@
+// CellMasks should render in front of the cells
+// Unfrozen cells do not have a zIndex specifed
+export const CELL_MASK = 1;
+export const TABLE_MAIN_INTERVAL = 1;
+export const RESIZE_HANDLE = 1;
+export const SEQUENCE_COLUMN = 1;
+
+//  higher than unfrozen header cell(0), RESIZE_HANDLE
+export const FROZEN_HEADER_CELL = 2;
+export const GROUP_FROZEN_HEADER = 2;
+export const SCROLL_BAR = 2;
+
+// In front of CELL_MASK/non-frozen cell(1)、back of the frozen cells (2)
+export const GROUP_BACKDROP = 2;
+export const MOBILE_RECORDS_COLUMN_NAMES = 2;
+export const FROZEN_GROUP_CELL = 2;
+
+// Frozen cells have a zIndex value of 2 so CELL_MASK should have a higher value
+export const FROZEN_CELL_MASK = 3;
+
+// need higher than the doms(etc. cell, cell_mask) which behind of the grid header
+export const GRID_HEADER = 4;
+export const GRID_FOOTER = 4;
+export const UPLOAD_PROGRESS = 4;
+
+// EditorContainer is rendered outside the grid and it higher FROZEN_GROUP_CELL(2)
+export const EDITOR_CONTAINER = 9;
+
+export const DROPDOWN_MENU = 1051;

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

@@ -5,8 +5,7 @@ import toaster from '../../../../../components/toast';
 import LoadAllTip from '../load-all-tip';
 import RecordMetrics from '../../utils/record-metrics';
 import { gettext } from '../../../../../utils/constants';
-import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL } from '../../../../constants';
+import { SEQUENCE_COLUMN_WIDTH, CANVAS_RIGHT_INTERVAL, metadataZIndexes } from '../../../../constants';
-import { zIndexes } from '../../../../../constants';
 import { addClassName, removeClassName } from '../../utils';
 import { getRecordsFromSelectedRange } from '../../utils/selected-cell-utils';
 
@@ -136,7 +135,7 @@ class RecordsFooter extends React.Component {
     const recordWidth = (isLoadingMore || hasMore ? SEQUENCE_COLUMN_WIDTH + columns[0].width : SEQUENCE_COLUMN_WIDTH) + groupOffsetLeft;
 
     return (
-      <div className="sf-metadata-result-footer" style={{ zIndex: zIndexes.GRID_FOOTER }} ref={ref => this.ref = ref}>
+      <div className="sf-metadata-result-footer" style={{ zIndex: metadataZIndexes.GRID_FOOTER }} ref={ref => this.ref = ref}>
         <div className="rows-record d-flex text-nowrap" style={{ width: recordWidth }}>
           <span>{this.getRecord()}</span>
           {!isLoadingMore && hasMore &&

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

@@ -6,8 +6,9 @@ import InsertColumn from './insert-column';
 import { isMobile } from '../../../../../utils/utils';
 import { isFrozen, recalculateColumnMetricsByResizeColumn, getFrozenColumns } from '../../../../utils/column';
 import { isEmptyObject } from '../../../../utils/common';
-import { GRID_HEADER_DEFAULT_HEIGHT, GRID_HEADER_DOUBLE_HEIGHT, HEADER_HEIGHT_TYPE, SEQUENCE_COLUMN_WIDTH } from '../../../../constants';
+import { GRID_HEADER_DEFAULT_HEIGHT, GRID_HEADER_DOUBLE_HEIGHT, HEADER_HEIGHT_TYPE, SEQUENCE_COLUMN_WIDTH,
-import { zIndexes } from '../../../../../constants';
+  metadataZIndexes,
+} from '../../../../constants';
 
 const RecordsHeader = ({
   isGroupView,
@@ -40,7 +41,7 @@ const RecordsHeader = ({
     return {
       width: containerWidth,
       minWidth: '100%',
-      zIndex: zIndexes.GRID_HEADER,
+      zIndex: metadataZIndexes.GRID_HEADER,
       height
     };
   }, [containerWidth, height]);
@@ -56,7 +57,7 @@ const RecordsHeader = ({
       position: (isMobile ? 'absolute' : 'fixed'),
       marginLeft: '0px',
       height,
-      zIndex: zIndexes.SEQUENCE_COLUMN,
+      zIndex: metadataZIndexes.SEQUENCE_COLUMN,
     };
     if ((isGroupView && !isFrozen(columns[0])) || isMobile) {
       value.position = 'absolute';

frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-container-left.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import GroupHeaderLeft from './group-header-left';
-import { zIndexes } from '../../../../../../../constants';
+import { metadataZIndexes } from '../../../../../../constants';
 
 class GroupContainerLeft extends Component {
 
@@ -31,7 +31,7 @@ class GroupContainerLeft extends Component {
       firstColumnFrozen, lastColumnFrozen, firstColumnKey,
     } = this.props;
     let containerStyle = {
-      zIndex: firstColumnFrozen ? zIndexes.GROUP_FROZEN_HEADER : 0,
+      zIndex: firstColumnFrozen ? metadataZIndexes.GROUP_FROZEN_HEADER : 0,
       width: leftPaneWidth,
       height,
     };

frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-header-cell.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { isFrozen } from '../../../../../../utils/column';
-import { GROUP_HEADER_HEIGHT, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
+import { GROUP_HEADER_HEIGHT, SEQUENCE_COLUMN_WIDTH, metadataZIndexes } from '../../../../../../constants';
-import { zIndexes } from '../../../../../../../constants';
 
 class GroupHeaderCell extends React.PureComponent {
 
@@ -33,7 +32,7 @@ class GroupHeaderCell extends React.PureComponent {
       left: offsetLeft
     };
     if (isFrozen(column)) {
-      style.zIndex = zIndexes.GROUP_FROZEN_HEADER;
+      style.zIndex = metadataZIndexes.GROUP_FROZEN_HEADER;
     }
     return style;
   };

frontend/src/metadata/views/table/table-main/records/group-body/group-container/group-header-left.js

@@ -4,8 +4,7 @@ import classnames from 'classnames';
 import { IconBtn } from '@seafile/sf-metadata-ui-component';
 import GroupTitle from './group-title';
 import { gettext } from '../../../../../../../utils/constants';
-import { zIndexes } from '../../../../../../../constants';
+import { GROUP_HEADER_HEIGHT, metadataZIndexes } from '../../../../../../constants';
-import { GROUP_HEADER_HEIGHT } from '../../../../../../constants';
 
 class GroupHeaderLeft extends Component {
 
@@ -16,7 +15,7 @@ class GroupHeaderLeft extends Component {
     } = this.props;
     const { column, count, level, cell_value, original_cell_value } = group;
     const groupHeaderLeftStyle = {
-      zIndex: firstColumnFrozen && zIndexes.GROUP_FROZEN_HEADER,
+      zIndex: firstColumnFrozen && metadataZIndexes.GROUP_FROZEN_HEADER,
       height: GROUP_HEADER_HEIGHT,
       width,
     };

frontend/src/metadata/views/table/table-main/records/group-body/group-container/index.js

@@ -5,8 +5,7 @@ import GroupContainerLeft from './group-container-left';
 import GroupContainerRight from './group-container-right';
 import { isMobile } from '../../../../../../../utils/utils';
 import { isFrozen } from '../../../../../../utils/column';
-import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH } from '../../../../../../constants';
+import { GROUP_VIEW_OFFSET, SEQUENCE_COLUMN_WIDTH, metadataZIndexes } from '../../../../../../constants';
-import { zIndexes } from '../../../../../../../constants';
 
 import './index.css';
 
@@ -102,7 +101,7 @@ class GroupContainer extends Component {
     let backDropStyle = {
       height: backdropHeight,
       width: leftPaneWidth + scrollLeft ? GROUP_VIEW_OFFSET : 0,
-      zIndex: zIndexes.GROUP_BACKDROP
+      zIndex: metadataZIndexes.GROUP_BACKDROP
     };
 
     return (

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

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import Cell from './cell';
 import ActionsCell from './actions-cell';
 import { getFrozenColumns } from '../../../../../utils/column';
-import { zIndexes } from '../../../../../../constants';
+import { metadataZIndexes } from '../../../../../constants';
 
 import './index.css';
 
@@ -191,12 +191,12 @@ class Record extends React.Component {
   getFrozenColumnsStyle = () => {
     const { isGroupView, lastFrozenColumnKey, height } = this.props;
     let style = {
-      zIndex: zIndexes.SEQUENCE_COLUMN,
+      zIndex: metadataZIndexes.SEQUENCE_COLUMN,
       height: height - 1,
     };
     if (isGroupView) {
       style.height = height;
-      style.zIndex = zIndexes.FROZEN_GROUP_CELL;
+      style.zIndex = metadataZIndexes.FROZEN_GROUP_CELL;
       if (!lastFrozenColumnKey) {
         style.marginLeft = '0px';
       }

frontend/src/metadata/views/table/utils/selected-cell-utils.js

@@ -2,8 +2,7 @@ import { Utils } from '../../../../utils/utils';
 import { getCellValueByColumn, getFileNameFromRecord } from '../../../utils/cell';
 import { getGroupByPath } from '../../../utils/view';
 import { getColumnByIndex, canEditCell } from '../../../utils/column';
-import { PRIVATE_COLUMN_KEY, SUPPORT_PREVIEW_COLUMN_TYPES } from '../../../constants';
+import { PRIVATE_COLUMN_KEY, SUPPORT_PREVIEW_COLUMN_TYPES, metadataZIndexes } from '../../../constants';
-import { zIndexes } from '../../../../constants';
 import { getGroupRecordByIndex } from './group-metrics';
 
 const SELECT_DIRECTION = {
@@ -87,7 +86,7 @@ export const getSelectedDimensions = ({
     } else {
       top = getRecordTopFromRecordsBody(rowIdx);
     }
-    const zIndex = frozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK;
+    const zIndex = frozen ? metadataZIndexes.FROZEN_CELL_MASK : metadataZIndexes.CELL_MASK;
     return { width, left, top, height: rowHeight, zIndex };
   }
   return defaultDimensions;
@@ -123,7 +122,7 @@ export const getSelectedRangeDimensions = ({
 }) => {
   const { topLeft, bottomRight, startCell, cursorCell } = selectedRange;
   if (topLeft.idx < 0) {
-    return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: zIndexes.CELL_MASK };
+    return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: metadataZIndexes.CELL_MASK };
   }
 
   let { totalWidth, anyColFrozen, left } = getColumnRangeProperties(topLeft.idx, bottomRight.idx, columns);
@@ -169,7 +168,7 @@ export const getSelectedRangeDimensions = ({
     top = getRecordTopFromRecordsBody(topLeft.rowIdx);
   }
 
-  const zIndex = anyColFrozen ? zIndexes.FROZEN_CELL_MASK : zIndexes.CELL_MASK;
+  const zIndex = anyColFrozen ? metadataZIndexes.FROZEN_CELL_MASK : metadataZIndexes.CELL_MASK;
   return { width: totalWidth, left, top, height, zIndex };
 };