feat: phone number column

package.json

@@ -4,11 +4,11 @@
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",
-    "@seafile/seafile-calendar": "0.0.31",
+    "@seafile/seafile-calendar": "~0.0.32",
     "@seafile/seafile-editor": "~2.0.14",
     "classnames": "~2.5.*",
     "dayjs": "1.10.7",
-    "dtable-utils": "~5.0.22",
+    "dtable-utils": "~5.0.26",
     "is-hotkey": "0.2.0",
     "rc-checkbox": "3.5.0",
     "react-color": "2.19.3",

src/CheckboxEditor/mb-editor.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import SvgIcon from '../SvgIcon';
+import DTableIcon from '../DTableIcon';
 import { DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
 
 class MBCheckboxEditor extends Component {
@@ -49,10 +49,13 @@ class MBCheckboxEditor extends Component {
 
   renderIcon = (symbol, color) => {
     const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
-    if (symbol.startsWith('dtable-icon')) {
-      return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
-    }
-    return (<SvgIcon className={className} symbol={symbol} color={color} />);
+    return (
+      <DTableIcon
+        className={className}
+        symbol={symbol}
+        color={color}
+      />
+    );
   };
 
   render() {

src/CheckboxEditor/pc-editor.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import SvgIcon from '../SvgIcon';
+import DTableIcon from '../DTableIcon';
 import { KeyCodes, DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
 
 class PCCheckboxEditor extends Component {
@@ -66,10 +66,13 @@ class PCCheckboxEditor extends Component {
 
   renderIcon = (symbol, color) => {
     const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
-    if (symbol.startsWith('dtable-icon')) {
-      return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
-    }
-    return (<SvgIcon className={className} symbol={symbol} color={color} />);
+    return (
+      <DTableIcon
+        className={className}
+        symbol={symbol}
+        color={color}
+      />
+    );
   };
 
   render() {

src/CheckboxFormatter/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import SvgIcon from '../SvgIcon';
+import DTableIcon from '../DTableIcon';
 import { DEFAULT_CHECKBOX_MARK_STYLE, isMobile } from '../constants';
 
 import './index.css';
@@ -18,12 +18,14 @@ class CheckboxFormatter extends React.PureComponent {
   };
 
   renderIcon = (symbol, color) => {
-    let className = 'dtable-ui-checkbox-check-mark';
-    if (symbol.startsWith('dtable-icon')) {
-      return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
-    }
-    className = classnames(className, { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon'), 'scale-icon': isMobile });
-    return (<SvgIcon className={className} symbol={symbol} color={color} />);
+    const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon'), 'scale-icon-150': isMobile });
+    return (
+      <DTableIcon
+        className={className}
+        symbol={symbol}
+        color={color}
+      />
+    );
   };
 
   render() {

src/DTableColumnIcon/index.jsx

@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CellType, getColumnDisplayType, TEXT_DISPLAY_TYPE_MAP } from 'dtable-utils';
+import DTableIcon from '../DTableIcon';
+
+const COLUMNS_ICON_CONFIG = {
+  [CellType.DEFAULT]: 'dtable-font dtable-icon-single-line-text',
+  [CellType.TEXT]: 'dtable-font dtable-icon-single-line-text',
+  [CellType.STRING]: 'dtable-font dtable-icon-single-line-text',
+  [CellType.NUMBER]: 'dtable-font dtable-icon-number',
+  [CellType.CHECKBOX]: 'dtable-font dtable-icon-check-square-solid',
+  [CellType.DATE]: 'dtable-font dtable-icon-calendar-alt-solid',
+  [CellType.SINGLE_SELECT]: 'dtable-font dtable-icon-single-election',
+  [CellType.LONG_TEXT]: 'dtable-font dtable-icon-long-text',
+  [CellType.IMAGE]: 'dtable-font dtable-icon-picture',
+  [CellType.FILE]: 'dtable-font dtable-icon-file-alt-solid',
+  [CellType.MULTIPLE_SELECT]: 'dtable-font dtable-icon-multiple-selection',
+  [CellType.COLLABORATOR]: 'dtable-font dtable-icon-collaborator',
+  [CellType.LINK]: 'dtable-font dtable-icon-link-other-record',
+  [CellType.FORMULA]: 'dtable-font dtable-icon-formula',
+  [CellType.LINK_FORMULA]: 'dtable-font dtable-icon-link-formulas',
+  [CellType.CREATOR]: 'dtable-font dtable-icon-creator',
+  [CellType.CTIME]: 'dtable-font dtable-icon-creation-time',
+  [CellType.LAST_MODIFIER]: 'dtable-font dtable-icon-creator',
+  [CellType.MTIME]: 'dtable-font dtable-icon-creation-time',
+  [CellType.GEOLOCATION]: 'dtable-font dtable-icon-location',
+  [CellType.AUTO_NUMBER]: 'dtable-font dtable-icon-autonumber',
+  [CellType.URL]: 'dtable-font dtable-icon-url',
+  [CellType.EMAIL]: 'dtable-font dtable-icon-email',
+  [CellType.DURATION]: 'dtable-font dtable-icon-duration',
+  [CellType.BUTTON]: 'dtable-font dtable-icon-button',
+  [CellType.RATE]: 'dtable-font dtable-icon-rate',
+  [CellType.DIGITAL_SIGN]: 'dtable-font dtable-icon-handwritten-signature',
+  [CellType.DEPARTMENT_SINGLE_SELECT]: 'dtable-font dtable-icon-department-single-selection',
+};
+
+const COLUMN_DISPLAY_TYPE_ICON_CONFIG = {
+  [CellType.TEXT]: {
+    [TEXT_DISPLAY_TYPE_MAP.PHONE]: 'telephone',
+  }
+};
+
+const DTableColumnIcon = ({ column, color, className, ariaHidden = false, getSvg }) => {
+  const columnType = column?.type;
+  if (!columnType) return null;
+  const columnDisplayType = getColumnDisplayType(column);
+  let symbol = null;
+  let displayTypeIconConfig = COLUMN_DISPLAY_TYPE_ICON_CONFIG[columnType];
+  if (displayTypeIconConfig && columnDisplayType) {
+    symbol = displayTypeIconConfig[columnDisplayType];
+  }
+  if (!symbol) {
+    symbol = COLUMNS_ICON_CONFIG[columnType];
+  }
+
+  return (
+    <DTableIcon
+      className={classnames('dtable-column-icon', className)}
+      symbol={symbol}
+      color={color}
+      ariaHidden={ariaHidden}
+      getSvg={getSvg}
+    />
+  );
+};
+
+DTableColumnIcon.propTypes = {
+  column: PropTypes.object,
+  color: PropTypes.string,
+  className: PropTypes.string,
+  ariaHidden: PropTypes.bool,
+  getSvg: PropTypes.func,
+};
+
+export default DTableColumnIcon;

src/DTableFiltersPopover/utils/filter-item-utils.js

@@ -1,18 +1,18 @@
 import React, { Fragment } from 'react';
-import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
+import DTableColumnIcon from '../../DTableColumnIcon';
 import { getLocale } from '../../lang';
 
 class FilterItemUtils {
 
   static generatorColumnOption(column) {
     if (!column) return null;
-    const { type, name } = column;
+    const { name } = column;
     return {
       value: { column },
       label: (
         <Fragment>
           <span className="filter-header-icon">
-            <i className={COLUMNS_ICON_CONFIG[type]}></i>
+            <DTableColumnIcon column={column} />
           </span>
           <span className='select-option-name' title={name} aria-label={name} >
             {name}

src/DTableFiltersPopover/utils/index.js

@@ -1,6 +1,5 @@
 import {
   FILTER_PREDICATE_TYPE,
-  FILTER_COLUMN_OPTIONS,
   filterTermModifierNotWithin,
   filterTermModifierIsWithin,
   CellType,
@@ -11,6 +10,8 @@ import {
   COLLABORATOR_COLUMN_TYPES,
   DATE_COLUMN_OPTIONS,
   FORMULA_COLUMN_TYPES_MAP,
+  getColumnFilterOptions,
+  checkColumnHasFilterOptions,
 } from 'dtable-utils';
 import FilterItemUtils from './filter-item-utils';
 import {
@@ -118,37 +119,37 @@ export const getColumnOptions = (column) => {
     return getFormulaColumnFilterOptions(column);
   }
   if (type === CellType.LINK) {
-    const { array_type } = data || {};
+    const { array_type, array_data } = data || {};
     if (array_type === FORMULA_RESULT_TYPE.BOOL) {
-      return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
+      return getColumnFilterOptions({ type: CellType.CHECKBOX });
     }
     if (array_type === FORMULA_RESULT_TYPE.STRING) {
-      return FILTER_COLUMN_OPTIONS[CellType.TEXT];
+      return getColumnFilterOptions({ type: CellType.TEXT });
     }
-    return getFilterOptionsByArrayType(array_type);
+    return getFilterOptionsByArrayType(array_type, array_data);
   }
-  return FILTER_COLUMN_OPTIONS[type] || {};
+  return getColumnFilterOptions(column);
 };
 
 const getFormulaColumnFilterOptions = (column) => {
   const { data } = column;
-  const { result_type, array_type } = data || {};
+  const { result_type, array_type, array_data } = data || {};
   if (result_type === FORMULA_RESULT_TYPE.BOOL) {
-    return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
+    return getColumnFilterOptions({ type: CellType.CHECKBOX });
   }
   if (result_type === FORMULA_RESULT_TYPE.STRING) {
-    return FILTER_COLUMN_OPTIONS[CellType.TEXT];
+    return getColumnFilterOptions({ type: CellType.TEXT });
   }
   if ([FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.DATE].includes(result_type)) {
-    return FILTER_COLUMN_OPTIONS[result_type];
+    return getColumnFilterOptions({ type: result_type });
   }
   if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
-    return getFilterOptionsByArrayType(array_type);
+    return getFilterOptionsByArrayType(array_type, array_data);
   }
-  return FILTER_COLUMN_OPTIONS[CellType.TEXT];
+  return getColumnFilterOptions({ type: CellType.TEXT });
 };
 
-const getFilterOptionsByArrayType = (array_type) => {
+const getFilterOptionsByArrayType = (array_type, array_data) => {
   if (!array_type) {
     return {};
   }
@@ -165,11 +166,13 @@ const getFilterOptionsByArrayType = (array_type) => {
 
   // only support: is
   if (checkType === CellType.CHECKBOX || checkType === CellType.BOOL) {
-    return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
+    return getColumnFilterOptions({ type: CellType.CHECKBOX });
   }
 
-  let filterOptions = FILTER_COLUMN_OPTIONS[checkType] || FILTER_COLUMN_OPTIONS[CellType.TEXT];
-  let { filterPredicateList } = filterOptions;
+  const filterOptions = checkColumnHasFilterOptions({ type: checkType, data: array_data }) ?
+    getColumnFilterOptions({ type: checkType, data: array_data }) :
+    getColumnFilterOptions({ type: CellType.TEXT, data: array_data });
+  const { filterPredicateList } = filterOptions;
   if (filterPredicateList && !filterPredicateList.includes(FILTER_PREDICATE_TYPE.EMPTY)) {
     filterPredicateList.push(FILTER_PREDICATE_TYPE.EMPTY);
   }
@@ -340,8 +343,8 @@ export const generateDefaultUser = (name) => {
 export const getDefaultFilter = (columns) => {
   if (!columns) return null;
   let defaultColumn = columns[0];
-  if (!FILTER_COLUMN_OPTIONS[defaultColumn.type]) {
-    defaultColumn = columns.find((c) => FILTER_COLUMN_OPTIONS[c.type]);
+  if (!checkColumnHasFilterOptions(defaultColumn)) {
+    defaultColumn = columns.find((c) => checkColumnHasFilterOptions(c));
   }
   if (!defaultColumn) return null;
   return getFilterByColumn(defaultColumn);
@@ -377,9 +380,9 @@ export const getFilterColumns = (columns) => {
     if (data && (type === CellType.LINK ||
       (FORMULA_COLUMN_TYPES_MAP[type] && data.result_type === FORMULA_RESULT_TYPE.ARRAY))
     ) {
-      return Object.prototype.hasOwnProperty.call(FILTER_COLUMN_OPTIONS, data.array_type);
+      return checkColumnHasFilterOptions({ type: data.array_type, data: data.array_data });
     }
-    return Object.prototype.hasOwnProperty.call(FILTER_COLUMN_OPTIONS, type);
+    return checkColumnHasFilterOptions(column);
   });
 };
 
@@ -580,16 +583,16 @@ export const getFilterConfigOptions = (column) => {
     return getFormulaColumnFilterOptions(column);
   }
   if (type === CellType.LINK) {
-    const { array_type } = data || {};
+    const { array_type, array_data } = data || {};
     if (array_type === FORMULA_RESULT_TYPE.BOOL) {
-      return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
+      return getColumnFilterOptions({ type: CellType.CHECKBOX });
     }
     if (array_type === FORMULA_RESULT_TYPE.STRING) {
-      return FILTER_COLUMN_OPTIONS[CellType.TEXT];
+      return getColumnFilterOptions({ type: CellType.TEXT });
     }
-    return getFilterOptionsByArrayType(array_type);
+    return getFilterOptionsByArrayType(array_type, array_data);
   }
-  return FILTER_COLUMN_OPTIONS[type] || {};
+  return getColumnFilterOptions(column) || {};
 };
 
 export const getMultipleSelectUpdatedFilterTerm = (filterTerm, option) => {

src/DTableFiltersPopover/widgets/filter-list/index.css

@@ -420,13 +420,15 @@
   margin-left: -0.3125rem;
 }
 
-.filter-header-icon .dtable-font {
+.filter-header-icon .dtable-font,
+.filter-header-icon .multicolor-icon {
   font-size: 14px;
   color: #aaa;
   cursor: default;
 }
 
-.option.option-active .filter-header-icon .dtable-font {
+.option.option-active .filter-header-icon .dtable-font,
+.option.option-active .filter-header-icon .multicolor-icon {
   color: #fff;
 }
 

src/SvgIcon/index.css → src/DTableIcon/index.css

@@ -1,10 +1,10 @@
-.dtable-ui-multicolor-icon {
+.multicolor-icon {
   width: 1em;
   height: 1em;
   fill: currentColor;
   overflow: hidden;
 }
 
-.dtable-ui-multicolor-icon.scale-icon {
+.multicolor-icon.scale-icon-150 {
   transform: scale(1.5);
 }