refactor(metadata): remove ui-component (#7492)

1. ModalPortal 2. Icon 3. IconBtn 4. Loading 5. CenteredLoading 6. ClickOutside 7. SearchInput 8. Switch 9. CustomizeAddTool 10. SfCalendar 11. SfFilterCalendar 12. CustomizeSelect 13. CustomizePopover 14. FieldDisplaySettings 15. Formatters 16. remove duplicate codes
2025-09-21 11:27:18 +00:00 · 2025-03-01 10:12:48 +08:00
parent 67083238c2
commit 890880a5c8
281 changed files with 3523 additions and 1271 deletions
--- a/frontend/src/components/sf-table/editors/editor-container/normal-editor-container.js
+++ b/frontend/src/components/sf-table/editors/editor-container/normal-editor-container.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { ClickOutside } from '@seafile/sf-metadata-ui-component';
+import ClickOutside from '../../../click-outside';
 import Editor from './editor';
 import { EDITOR_CONTAINER as Z_INDEX_EDITOR_CONTAINER } from '../../constants/z-index';
 import { Utils } from '../../../../utils/utils';
-import { getEventClassName } from '../../utils';
+import { getEventClassName } from '../../../../utils/dom';
 import { checkCellValueChanged } from '../../utils/cell-comparer';
 import { getCellValueByColumn } from '../../utils/cell';
 import { isCtrlKeyHeldDown, isKeyPrintable } from '../../../../utils/keyboard-utils';
--- a/frontend/src/components/sf-table/editors/editor-container/popup-editor-container.js
+++ b/frontend/src/components/sf-table/editors/editor-container/popup-editor-container.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { ClickOutside } from '@seafile/sf-metadata-ui-component';
+import ClickOutside from '../../../click-outside';
 import Editor from './editor';
 import { Utils } from '../../../../utils/utils';
 import { EDITOR_CONTAINER as Z_INDEX_EDITOR_CONTAINER } from '../../constants/z-index';
--- a/frontend/src/components/sf-table/editors/tags-editor/delete-tags/index.css
+++ b/frontend/src/components/sf-table/editors/tags-editor/delete-tags/index.css
@@ -50,7 +50,7 @@
  left: 2px;
 }

-.sf-metadata-delete-select-tags .sf-metadata-delete-select-remove .sf-metadata-icon-x-01 {
+.sf-metadata-delete-select-tags .sf-metadata-delete-select-remove .seafile-multicolor-icon-x-01 {
  fill: #666;
  font-size: 12px;
 }
--- a/frontend/src/components/sf-table/editors/tags-editor/delete-tags/index.js
+++ b/frontend/src/components/sf-table/editors/tags-editor/delete-tags/index.js
@@ -1,6 +1,6 @@
 import React from './index';
 import PropTypes from 'prop-types';
-import { IconBtn } from '@seafile/sf-metadata-ui-component';
+import IconBtn from '../../../../icon-btn';
 import { getTagColor, getTagName } from '../../../../../tag/utils/cell';
 import { getRowById } from '../../../utils/table';

@@ -18,7 +18,7 @@ const DeleteTag = ({ value, tagsTable, onDelete }) => {
          <div className="sf-metadata-delete-select-tag" key={tagId}>
            <div className="sf-metadata-delete-select-tag-color" style={{ backgroundColor: tagColor }}></div>
            <div className="sf-metadata-delete-select-tag-name">{tagName}</div>
-            <IconBtn className="sf-metadata-delete-select-remove" onClick={(event) => onDelete(tagId, event)} iconName="x-01" />
+            <IconBtn className="sf-metadata-delete-select-remove" onClick={(event) => onDelete(tagId, event)} symbol="x-01" />
          </div>
        );
      })}
--- a/frontend/src/components/sf-table/editors/tags-editor/index.js
+++ b/frontend/src/components/sf-table/editors/tags-editor/index.js
@@ -1,7 +1,9 @@
 import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { SearchInput, CustomizeAddTool, Icon } from '@seafile/sf-metadata-ui-component';
+import CommonAddTool from '../../../common-add-tool';
+import SearchInput from '../../../search-input';
+import Icon from '../../../icon';
 import DeleteTags from './delete-tags';
 import { Utils } from '../../../../utils/utils';
 import { KeyCodes } from '../../../../constants';
@@ -219,7 +221,7 @@ const TagsEditor = ({
              <div className="sf-metadata-tag-name">{tagName}</div>
            </div>
            <div className="sf-metadata-tags-editor-tag-check-icon">
-              {isSelected && (<Icon iconName="check-mark" />)}
+              {isSelected && (<Icon className="sf-metadata-icon" symbol="check-mark" />)}
            </div>
          </div>
        </div>
@@ -244,7 +246,7 @@ const TagsEditor = ({
        {renderOptions()}
      </div>
      {isShowCreateBtn && (
-        <CustomizeAddTool
+        <CommonAddTool
          callBack={createTag}
          footerName={`${gettext('Add tag')} ${searchValue}`}
          className="add-search-result"
--- a/frontend/src/components/sf-table/index.css
+++ b/frontend/src/components/sf-table/index.css
@@ -271,31 +271,6 @@
  border-left-color: #303133;
 }

-.add-item-btn {
-  display: flex;
-  align-items: center;
-  height: 40px;
-  font-size: 14px;
-  font-weight: 500;
-  border-top: 1px solid #dedede;
-  background: #fff;
-  padding: 0 1rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-.add-item-btn:hover {
-  cursor: pointer;
-  background: #f5f5f5;
-}
-
-.add-item-btn .sf-metadata-icon-add-table {
-  margin-right: 10px;
-  font-size: 12px;
-  font-weight: 600;
-  transform: translateY(1px);
-}
-
 .formula-formatter-content-item {
  margin-right: 10px;
  font-size: 13px;
--- a/frontend/src/components/sf-table/searcher/index.js
+++ b/frontend/src/components/sf-table/searcher/index.js
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { gettext } from '../../../utils/constants';
 import { KeyCodes } from '../../../constants';
-import { isModG, isModShiftG } from '../../../metadata/utils/hotkey';
+import { isModG, isModShiftG } from '../../../utils/hotkey';
 import SFTableSearcherInput from './searcher-input';
 import { checkHasSearchResult } from '../utils/search';

--- a/frontend/src/components/sf-table/table-main/records-footer/index.js
+++ b/frontend/src/components/sf-table/table-main/records-footer/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from '@seafile/sf-metadata-ui-component';
+import Loading from '../../../loading';
 import toaster from '../../../toast';
 import LoadAllTip from '../load-all-tip';
 import { RecordMetrics } from '../../utils/record-metrics';
@@ -8,7 +8,7 @@ import { TreeMetrics } from '../../utils/tree-metrics';
 import { gettext } from '../../../../utils/constants';
 import { CANVAS_RIGHT_INTERVAL } from '../../constants/grid';
 import { GRID_FOOTER as Z_INDEX_GRID_FOOTER } from '../../constants/z-index';
-import { addClassName, removeClassName } from '../../utils';
+import { addClassName, removeClassName } from '../../../../utils/dom';
 import { getRecordsFromSelectedRange } from '../../utils/selected-cell-utils';

 import './index.css';
@@ -151,7 +151,7 @@ class RecordsFooter extends React.Component {
          {isLoadingMoreRecords &&
            <span className="loading-message ml-4">
              <span className="mr-2">{gettext('Loading')}</span>
-              <Loading />
+              <Loading className="sf-metadata-loading-tip center" />
            </span>
          }
        </div>
--- a/frontend/src/components/sf-table/table-main/records-header/cell/index.css
+++ b/frontend/src/components/sf-table/table-main/records-header/cell/index.css
@@ -2,7 +2,7 @@
  fill: #aaa;
 }

-.sf-table-header-cell .sf-metadata-icon-drop-down {
+.sf-table-header-cell .seafile-multicolor-icon-drop-down {
  fill: #aaa;
  font-size: 12px;
  transform: scale(.8);
--- a/frontend/src/components/sf-table/table-main/records-header/cell/index.js
+++ b/frontend/src/components/sf-table/table-main/records-header/cell/index.js
@@ -2,7 +2,7 @@ import React, { useRef, useCallback, useMemo, isValidElement, useState } from 'r
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { UncontrolledTooltip } from 'reactstrap';
-import { Icon } from '@seafile/sf-metadata-ui-component';
+import Icon from '../../../../icon';
 import ResizeColumnHandle from '../resize-column-handle';
 import HeaderDropdownMenu from '../dropdown-menu';
 import EventBus from '../../../../common/event-bus';
@@ -157,7 +157,7 @@ const Cell = ({
    return (
      <>
        <span className="mr-2" id={`header-icon-${key}`}>
-          {icon_name && <Icon iconName={icon_name} className="sf-table-column-icon" />}
+          {icon_name && <Icon symbol={icon_name} className="sf-metadata-icon sf-table-column-icon" />}
        </span>
        {icon_tooltip &&
          <UncontrolledTooltip placement="bottom" target={`header-icon-${key}`} fade={false} trigger="hover" className="sf-table-tooltip">
--- a/frontend/src/components/sf-table/table-main/records-header/dropdown-menu/column-dropdown-item.js
+++ b/frontend/src/components/sf-table/table-main/records-header/dropdown-menu/column-dropdown-item.js
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { UncontrolledTooltip, DropdownItem } from 'reactstrap';
 import classnames from 'classnames';
-import { Icon } from '@seafile/sf-metadata-ui-component';
+import Icon from '../../../../icon';

 const ColumnDropdownItem = ({
  disabled = false,
@@ -32,7 +32,7 @@ const ColumnDropdownItem = ({
  if (!disabled) {
    return (
      <DropdownItem id={target} onClick={onChange} onMouseEnter={onMouseEnter} className={className}>
-        <Icon iconName={iconName} />
+        <Icon symbol={iconName} />
        <span className="item-text">{title}</span>
      </DropdownItem>
    );
@@ -47,7 +47,7 @@ const ColumnDropdownItem = ({
        onMouseEnter={onMouseEnter}
        id={target}
      >
-        <Icon iconName={iconName} />
+        <Icon symbol={iconName} />
        <span className="item-text">{title}</span>
        {isShowToolTip && (
          <UncontrolledTooltip placement="right" target={target} fade={false} delay={{ show: 0, hide: 0 }} className="sf-table-tooltip">
--- a/frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.css
+++ b/frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.css
@@ -1,10 +1,10 @@
-.sf-table-dropdown-menu .dropdown-item .sf-metadata-icon {
+.sf-table-dropdown-menu .dropdown-item .seafile-multicolor-icon {
  margin-right: 10px;
  font-size: 14px;
  fill: #666;
 }

-.sf-table-dropdown-menu .dropdown-item:hover .sf-metadata-icon {
+.sf-table-dropdown-menu .dropdown-item:hover .seafile-multicolor-icon {
  fill: #fff;
 }

@@ -32,6 +32,6 @@
  color: #c2c2c2;
 }

-.sf-table-dropdown-menu .disabled.dropdown-item .sf-metadata-icon {
+.sf-table-dropdown-menu .disabled.dropdown-item .seafile-multicolor-icon {
  fill: #c2c2c2;
 }
--- a/frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.js
+++ b/frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
-import { ModalPortal } from '@seafile/sf-metadata-ui-component';
+import ModalPortal from '../../../../modal-portal';
 import { gettext } from '../../../../../utils/constants';
 import { isMobile } from '../../../../../utils/utils';

--- a/frontend/src/components/sf-table/table-main/records-header/insert-column/index.js
+++ b/frontend/src/components/sf-table/table-main/records-header/insert-column/index.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from '@seafile/sf-metadata-ui-component';
+import Icon from '../../../../icon';
 import { isEnter } from '../../../../../utils/hotkey';

 import './index.css';
@@ -45,7 +45,7 @@ const InsertColumn = ({ lastColumn, height, groupOffsetLeft, NewColumnComponent,
    <>
      <div className="sf-table-header-cell">
        <div className="sf-table-cell column insert-column" style={style} id={id} ref={ref}>
-          <Icon iconName="add-table" />
+          <Icon symbol="add-table" />
        </div>
      </div>
      {cloneElement(NewColumnComponent, { target: id, onChange: insertColumn })}
--- a/frontend/src/components/sf-table/table-main/records-header/select-all.js
+++ b/frontend/src/components/sf-table/table-main/records-header/select-all.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from '@seafile/sf-metadata-ui-component';
+import Icon from '../../../icon';
 import { gettext } from '../../../../utils/constants';

 class SelectAll extends Component {
@@ -45,7 +45,7 @@ class SelectAll extends Component {
        {isMobile ?
          <label className='mobile-select-all-container'>
            {isSelectedParts ?
-              (<Icon iconName="partially-selected" />) :
+              (<Icon symbol="partially-selected" />) :
              (
                <>
                  <input
@@ -62,7 +62,7 @@ class SelectAll extends Component {
          </label> :
          <>
            {isSelectedParts ?
-              (<Icon iconName="partially-selected" />) :
+              (<Icon symbol="partially-selected" />) :
              (
                <input
                  id="select-all-checkbox"
--- a/frontend/src/components/sf-table/table-main/records/body.js
+++ b/frontend/src/components/sf-table/table-main/records/body.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from '@seafile/sf-metadata-ui-component';
+import Loading from '../../../loading';
 import { RightScrollbar } from '../../scrollbar';
 import Record from './record';
 import InteractionMasks from '../../masks/interaction-masks';
@@ -522,14 +522,14 @@ class RecordsBody extends Component {
    // add top placeholder
    if (upperHeight > 0) {
      const style = { height: upperHeight, width: '100%' };
-      const upperRow = <div key="upper-placeholder" className="d-flex align-items-end" style={style}><Loading /></div>;
+      const upperRow = <div key="upper-placeholder" className="d-flex align-items-end" style={style}><Loading className="sf-metadata-loading-tip center" /></div>;
      shownRecords.unshift(upperRow);
    }

    // add bottom placeholder
    if (belowHeight > 0) {
      const style = { height: belowHeight, width: '100%' };
-      const belowRow = <div key="below-placeholder" style={style}><Loading /></div>;
+      const belowRow = <div key="below-placeholder" style={style}><Loading className="sf-metadata-loading-tip center" /></div>;
      shownRecords.push(belowRow);
    }
    return shownRecords;
--- a/frontend/src/components/sf-table/table-main/records/group-body/group-container/group-header-left.js
+++ b/frontend/src/components/sf-table/table-main/records/group-body/group-container/group-header-left.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { IconBtn } from '@seafile/sf-metadata-ui-component';
+import IconBtn from '../../../../../icon-btn';
 import GroupTitle from './group-title';
 import { GROUP_HEADER_HEIGHT } from '../../../../constants/group';
 import { GROUP_FROZEN_HEADER as Z_INDEX_GROUP_FROZEN_HEADER } from '../../../../constants/z-index';
@@ -32,7 +32,7 @@ class GroupHeaderLeft extends Component {
      >
        <IconBtn
          className={classnames('group-toggle-btn', { 'hide': !isExpanded })}
-          iconName="drop-down"
+          symbol="drop-down"
          onClick={this.props.onExpandGroupToggle}
        />
        <GroupTitle
--- a/frontend/src/components/sf-table/table-main/records/group-body/group-container/index.css
+++ b/frontend/src/components/sf-table/table-main/records/group-body/group-container/index.css
@@ -173,13 +173,13 @@
  cursor: pointer;
 }

-.canvas-groups-rows .group-toggle-btn .sf-metadata-icon-drop-down {
+.canvas-groups-rows .group-toggle-btn .seafile-multicolor-icon-drop-down {
  font-size: 12px;
  fill: #666666;
  transition: all .3s;
 }

-.canvas-groups-rows .group-toggle-btn.hide .sf-metadata-icon-drop-down {
+.canvas-groups-rows .group-toggle-btn.hide .seafile-multicolor-icon-drop-down {
  transform: rotate(-90deg);
 }

@@ -389,7 +389,7 @@
  -moz-transition-property: none;
 }

-.canvas-groups-rows .group-title .group-cell-value .sf-metadata-group-title-rate-item .sf-metadata-icon {
+.canvas-groups-rows .group-title .group-cell-value .sf-metadata-group-title-rate-item .seafile-multicolor-icon {
  font-size: 16px;
  fill: inherit;
 }
--- a/frontend/src/components/sf-table/table-main/records/group-body/index.js
+++ b/frontend/src/components/sf-table/table-main/records/group-body/index.js
@@ -8,7 +8,7 @@ import Record from '../record';
 import { isShiftKeyDown } from '../../../../../utils/keyboard-utils';
 import { RecordMetrics } from '../../../utils/record-metrics';
 import { getColumnScrollPosition, getColVisibleEndIdx, getColVisibleStartIdx } from '../../../utils/records-body-utils';
-import { addClassName, removeClassName } from '../../../utils';
+import { addClassName, removeClassName } from '../../../../../utils/dom';
 import { createGroupMetrics, getGroupRecordByIndex, isNestedGroupRow } from '../../../utils/group-metrics';
 import { checkIsColumnSupportDirectEdit, checkIsColumnFrozen, checkIsNameColumn, getColumnByIndex, checkIsColumnEditable } from '../../../utils/column';
 import { checkIsCellSupportOpenEditor } from '../../../utils/selected-cell-utils';
--- a/frontend/src/components/sf-table/table-main/records/index.js
+++ b/frontend/src/components/sf-table/table-main/records/index.js
@@ -16,7 +16,8 @@ import { getVisibleBoundaries } from '../../utils/viewport';
 import { getColOverScanEndIdx, getColOverScanStartIdx } from '../../utils/grid';
 import { isShiftKeyDown } from '../../../../utils/keyboard-utils';
 import { isMobile } from '../../../../utils/utils';
-import { isWindowsBrowser, isWebkitBrowser, addClassName, removeClassName, getEventClassName } from '../../utils';
+import { addClassName, removeClassName, getEventClassName } from '../../../../utils/dom';
+import { isWindowsBrowser, isWebkitBrowser } from '../../utils';
 import EventBus from '../../../common/event-bus';
 import { EVENT_BUS_TYPE } from '../../constants/event-bus-type';
 import { CANVAS_RIGHT_INTERVAL } from '../../constants/grid';
--- a/frontend/src/components/sf-table/table-main/records/record/cell/index.css
+++ b/frontend/src/components/sf-table/table-main/records/record/cell/index.css
@@ -83,7 +83,7 @@
  flex-shrink: 0;
 }

-.sf-table-cell .select-all-checkbox-container .sf-metadata-icon-partially-selected {
+.sf-table-cell .select-all-checkbox-container .seafile-multicolor-icon-partially-selected {
  cursor: pointer;
  font-size: 12px;
  fill: #2b76f6;
@@ -132,7 +132,7 @@
  transform: rotate(45deg);
 }

-.sf-table-cell .mobile-select-all-container .sf-metadata-icon-partially-selected {
+.sf-table-cell .mobile-select-all-container .seafile-multicolor-icon-partially-selected {
  font-size: 14px;
  line-height: 1;
 }
--- a/frontend/src/components/sf-table/table-main/records/tree-body.js
+++ b/frontend/src/components/sf-table/table-main/records/tree-body.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from '@seafile/sf-metadata-ui-component';
+import Loading from '../../../loading';
 import { RightScrollbar } from '../../scrollbar';
 import InteractionMasks from '../../masks/interaction-masks';
 import Record from './record';
@@ -628,14 +628,14 @@ class TreeBody extends Component {
    // add top placeholder
    if (upperHeight > 0) {
      const style = { height: upperHeight, width: '100%' };
-      const upperRow = <div key="upper-placeholder" className="d-flex align-items-end" style={style}><Loading /></div>;
+      const upperRow = <div key="upper-placeholder" className="d-flex align-items-end" style={style}><Loading className="sf-metadata-loading-tip center" /></div>;
      shownNodes.unshift(upperRow);
    }

    // add bottom placeholder
    if (belowHeight > 0) {
      const style = { height: belowHeight, width: '100%' };
-      const belowRow = <div key="below-placeholder" style={style}><Loading /></div>;
+      const belowRow = <div key="below-placeholder" style={style}><Loading className="sf-metadata-loading-tip center" /></div>;
      shownNodes.push(belowRow);
    }
    return shownNodes;
--- a/frontend/src/components/sf-table/utils/index.js
+++ b/frontend/src/components/sf-table/utils/index.js
@@ -1,23 +1,3 @@
-export const addClassName = (originClassName, targetClassName) => {
-  const originClassNames = originClassName.split(' ');
-  if (originClassNames.indexOf(targetClassName) > -1) return originClassName;
-  return originClassName + ' ' + targetClassName;
-};
-
-export const removeClassName = (originClassName, targetClassName) => {
-  let originClassNames = originClassName.split(' ');
-  const targetClassNameIndex = originClassNames.indexOf(targetClassName);
-  if (targetClassNameIndex < 0) return originClassName;
-  originClassNames.splice(targetClassNameIndex, 1);
-  return originClassNames.join(' ');
-};
-
-export const getEventClassName = (e) => {
-  // svg mouseEvent event.target.className is an object
-  if (!e || !e.target) return '';
-  return e.target.getAttribute('class') || '';
-};
-
 /* is weiXin built-in browser */
 export const isWeiXinBuiltInBrowser = () => {
  const agent = navigator.userAgent.toLowerCase();