Skip to content

Commit e3e2044

Browse files
renjie-runrenjie-run
committed
feat: phone number column
1 parent 9517e7d commit e3e2044

File tree

37 files changed

+407
-153
lines changed

37 files changed

+407
-153
lines changed

‎package-lock.json

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
"main": "./lib/index.js",
55
"dependencies": {
66
"@seafile/react-image-lightbox": "4.0.2",
7-
"@seafile/seafile-calendar": "0.0.31",
7+
"@seafile/seafile-calendar": "~0.0.32",
88
"@seafile/seafile-editor": "~2.0.14",
99
"classnames": "~2.5.*",
1010
"dayjs": "1.10.7",
11-
"dtable-utils": "~5.0.22",
11+
"dtable-utils": "~5.0.26-beta.1",
1212
"is-hotkey": "0.2.0",
1313
"rc-checkbox": "3.5.0",
1414
"react-color": "2.19.3",

‎src/CheckboxEditor/mb-editor.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
4-
import SvgIcon from '../SvgIcon';
4+
import DTableIcon from '../DTableIcon';
55
import { DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
66

77
class MBCheckboxEditor extends Component {
@@ -49,10 +49,13 @@ class MBCheckboxEditor extends Component {
4949

5050
renderIcon = (symbol, color) => {
5151
const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
52-
if (symbol.startsWith('dtable-icon')) {
53-
return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
54-
}
55-
return (<SvgIcon className={className} symbol={symbol} color={color} />);
52+
return (
53+
<DTableIcon
54+
className={className}
55+
symbol={symbol}
56+
color={color}
57+
/>
58+
);
5659
};
5760

5861
render() {

‎src/CheckboxEditor/pc-editor.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
4-
import SvgIcon from '../SvgIcon';
4+
import DTableIcon from '../DTableIcon';
55
import { KeyCodes, DEFAULT_CHECKBOX_MARK_STYLE } from '../constants';
66

77
class PCCheckboxEditor extends Component {
@@ -66,10 +66,13 @@ class PCCheckboxEditor extends Component {
6666

6767
renderIcon = (symbol, color) => {
6868
const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon') });
69-
if (symbol.startsWith('dtable-icon')) {
70-
return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
71-
}
72-
return (<SvgIcon className={className} symbol={symbol} color={color} />);
69+
return (
70+
<DTableIcon
71+
className={className}
72+
symbol={symbol}
73+
color={color}
74+
/>
75+
);
7376
};
7477

7578
render() {

‎src/CheckboxFormatter/index.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
4-
import SvgIcon from '../SvgIcon';
4+
import DTableIcon from '../DTableIcon';
55
import { DEFAULT_CHECKBOX_MARK_STYLE, isMobile } from '../constants';
66

77
import './index.css';
@@ -18,12 +18,14 @@ class CheckboxFormatter extends React.PureComponent {
1818
};
1919

2020
renderIcon = (symbol, color) => {
21-
let className = 'dtable-ui-checkbox-check-mark';
22-
if (symbol.startsWith('dtable-icon')) {
23-
return (<span className={`dtable-font ${symbol} ${className || ''}`} style={{ color }} />);
24-
}
25-
className = classnames(className, { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon'), 'scale-icon': isMobile });
26-
return (<SvgIcon className={className} symbol={symbol} color={color} />);
21+
const className = classnames('dtable-ui-checkbox-check-mark', { 'dtable-ui-checkbox-check-svg': !symbol?.startsWith('dtable-icon'), 'scale-icon-150': isMobile });
22+
return (
23+
<DTableIcon
24+
className={className}
25+
symbol={symbol}
26+
color={color}
27+
/>
28+
);
2729
};
2830

2931
render() {

‎src/DTableColumnIcon/index.jsx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import PropTypes from 'prop-types';
2+
import { CellType, TEXT_DISPLAY_TYPE_MAP } from 'dtable-utils';
3+
import DTableIcon from '../DTableIcon';
4+
5+
const COLUMNS_ICON_CONFIG = {
6+
[CellType.DEFAULT]: 'dtable-font dtable-icon-single-line-text',
7+
[CellType.TEXT]: 'dtable-font dtable-icon-single-line-text',
8+
[CellType.STRING]: 'dtable-font dtable-icon-single-line-text',
9+
[CellType.NUMBER]: 'dtable-font dtable-icon-number',
10+
[CellType.CHECKBOX]: 'dtable-font dtable-icon-check-square-solid',
11+
[CellType.DATE]: 'dtable-font dtable-icon-calendar-alt-solid',
12+
[CellType.SINGLE_SELECT]: 'dtable-font dtable-icon-single-election',
13+
[CellType.LONG_TEXT]: 'dtable-font dtable-icon-long-text',
14+
[CellType.IMAGE]: 'dtable-font dtable-icon-picture',
15+
[CellType.FILE]: 'dtable-font dtable-icon-file-alt-solid',
16+
[CellType.MULTIPLE_SELECT]: 'dtable-font dtable-icon-multiple-selection',
17+
[CellType.COLLABORATOR]: 'dtable-font dtable-icon-collaborator',
18+
[CellType.LINK]: 'dtable-font dtable-icon-link-other-record',
19+
[CellType.FORMULA]: 'dtable-font dtable-icon-formula',
20+
[CellType.LINK_FORMULA]: 'dtable-font dtable-icon-link-formulas',
21+
[CellType.CREATOR]: 'dtable-font dtable-icon-creator',
22+
[CellType.CTIME]: 'dtable-font dtable-icon-creation-time',
23+
[CellType.LAST_MODIFIER]: 'dtable-font dtable-icon-creator',
24+
[CellType.MTIME]: 'dtable-font dtable-icon-creation-time',
25+
[CellType.GEOLOCATION]: 'dtable-font dtable-icon-location',
26+
[CellType.AUTO_NUMBER]: 'dtable-font dtable-icon-autonumber',
27+
[CellType.URL]: 'dtable-font dtable-icon-url',
28+
[CellType.EMAIL]: 'dtable-font dtable-icon-email',
29+
[CellType.DURATION]: 'dtable-font dtable-icon-duration',
30+
[CellType.BUTTON]: 'dtable-font dtable-icon-button',
31+
[CellType.RATE]: 'dtable-font dtable-icon-rate',
32+
[CellType.DIGITAL_SIGN]: 'dtable-font dtable-icon-handwritten-signature',
33+
[CellType.DEPARTMENT_SINGLE_SELECT]: 'dtable-font dtable-icon-department-single-selection',
34+
};
35+
36+
const COLUMN_DISPLAY_TYPE_ICON_CONFIG = {
37+
[CellType.TEXT]: {
38+
[TEXT_DISPLAY_TYPE_MAP.PHONE]: 'telephone',
39+
}
40+
};
41+
42+
const DTableColumnIcon = ({ columnType, columnDisplayType, color, className, ariaHidden = false, getSvg }) => {
43+
let symbol = null;
44+
let displayTypeIconConfig = COLUMN_DISPLAY_TYPE_ICON_CONFIG[columnType];
45+
if (displayTypeIconConfig && columnDisplayType) {
46+
symbol = displayTypeIconConfig[columnDisplayType];
47+
}
48+
if (!symbol) {
49+
symbol = COLUMNS_ICON_CONFIG[columnType];
50+
}
51+
52+
return (
53+
<DTableIcon
54+
className={className}
55+
symbol={symbol}
56+
color={color}
57+
ariaHidden={ariaHidden}
58+
getSvg={getSvg}
59+
/>
60+
);
61+
};
62+
63+
DTableColumnIcon.propTypes = {
64+
columnType: PropTypes.string,
65+
columnDisplayType: PropTypes.string,
66+
color: PropTypes.string,
67+
className: PropTypes.string,
68+
ariaHidden: PropTypes.bool,
69+
getSvg: PropTypes.func,
70+
};
71+
72+
export default DTableColumnIcon;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React, { Fragment } from 'react';
2-
import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
2+
import DTableColumnIcon from '../../DTableColumnIcon';
33
import { getLocale } from '../../lang';
44

55
class FilterItemUtils {
66

77
static generatorColumnOption(column) {
88
if (!column) return null;
9-
const { type, name } = column;
9+
const { type, name, data } = column;
1010
return {
1111
value: { column },
1212
label: (
1313
<Fragment>
1414
<span className="filter-header-icon">
15-
<i className={COLUMNS_ICON_CONFIG[type]}></i>
15+
<DTableColumnIcon columnType={type} columnDisplayType={data?.display_type} />
1616
</span>
1717
<span className='select-option-name' title={name} aria-label={name} >
1818
{name}

‎src/DTableFiltersPopover/utils/index.js

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
FILTER_PREDICATE_TYPE,
3-
FILTER_COLUMN_OPTIONS,
43
filterTermModifierNotWithin,
54
filterTermModifierIsWithin,
65
CellType,
@@ -11,6 +10,7 @@ import {
1110
COLLABORATOR_COLUMN_TYPES,
1211
DATE_COLUMN_OPTIONS,
1312
FORMULA_COLUMN_TYPES_MAP,
13+
getColumnFilterOptions,
1414
} from 'dtable-utils';
1515
import FilterItemUtils from './filter-item-utils';
1616
import {
@@ -118,37 +118,37 @@ export const getColumnOptions = (column) => {
118118
return getFormulaColumnFilterOptions(column);
119119
}
120120
if (type === CellType.LINK) {
121-
const { array_type } = data || {};
121+
const { array_type, array_data } = data || {};
122122
if (array_type === FORMULA_RESULT_TYPE.BOOL) {
123-
return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
123+
return getColumnFilterOptions({ columnType: CellType.CHECKBOX });
124124
}
125125
if (array_type === FORMULA_RESULT_TYPE.STRING) {
126-
return FILTER_COLUMN_OPTIONS[CellType.TEXT];
126+
return getColumnFilterOptions({ columnType: CellType.TEXT });
127127
}
128-
return getFilterOptionsByArrayType(array_type);
128+
return getFilterOptionsByArrayType(array_type, array_data);
129129
}
130-
return FILTER_COLUMN_OPTIONS[type] || {};
130+
return getColumnFilterOptions({ columnType: type, columnDisplayType: data?.display_type });
131131
};
132132

133133
const getFormulaColumnFilterOptions = (column) => {
134134
const { data } = column;
135-
const { result_type, array_type } = data || {};
135+
const { result_type, array_type, array_data } = data || {};
136136
if (result_type === FORMULA_RESULT_TYPE.BOOL) {
137-
return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
137+
return getColumnFilterOptions({ columnType: CellType.CHECKBOX });
138138
}
139139
if (result_type === FORMULA_RESULT_TYPE.STRING) {
140-
return FILTER_COLUMN_OPTIONS[CellType.TEXT];
140+
return getColumnFilterOptions({ columnType: CellType.TEXT });
141141
}
142142
if ([FORMULA_RESULT_TYPE.NUMBER, FORMULA_RESULT_TYPE.DATE].includes(result_type)) {
143-
return FILTER_COLUMN_OPTIONS[result_type];
143+
return getColumnFilterOptions({ columnType: result_type });
144144
}
145145
if (result_type === FORMULA_RESULT_TYPE.ARRAY) {
146-
return getFilterOptionsByArrayType(array_type);
146+
return getFilterOptionsByArrayType(array_type, array_data);
147147
}
148-
return FILTER_COLUMN_OPTIONS[CellType.TEXT];
148+
return getColumnFilterOptions({ columnType: CellType.TEXT });
149149
};
150150

151-
const getFilterOptionsByArrayType = (array_type) => {
151+
const getFilterOptionsByArrayType = (array_type, array_data) => {
152152
if (!array_type) {
153153
return {};
154154
}
@@ -165,11 +165,13 @@ const getFilterOptionsByArrayType = (array_type) => {
165165

166166
// only support: is
167167
if (checkType === CellType.CHECKBOX || checkType === CellType.BOOL) {
168-
return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
168+
return getColumnFilterOptions({ columnType: CellType.CHECKBOX });
169169
}
170170

171-
let filterOptions = FILTER_COLUMN_OPTIONS[checkType] || FILTER_COLUMN_OPTIONS[CellType.TEXT];
172-
let { filterPredicateList } = filterOptions;
171+
const filterOptions = checkColumnHasFilterOptions({ columnType: checkType, columnDisplayType: array_data?.display_type }) ?
172+
getColumnFilterOptions({ columnType: checkType, columnDisplayType: array_data?.display_type }) :
173+
getColumnFilterOptions({ columnType: CellType.TEXT, columnDisplayType: array_data?.display_type });
174+
const { filterPredicateList } = filterOptions;
173175
if (filterPredicateList && !filterPredicateList.includes(FILTER_PREDICATE_TYPE.EMPTY)) {
174176
filterPredicateList.push(FILTER_PREDICATE_TYPE.EMPTY);
175177
}
@@ -337,11 +339,16 @@ export const generateDefaultUser = (name) => {
337339
};
338340
};
339341

342+
export const checkColumnHasFilterOptions = ({ columnType, columnDisplayType }) => {
343+
const filterOptions = getColumnFilterOptions({ columnType, columnDisplayType });
344+
return filterOptions ? Object.keys(filterOptions).length > 0 : false;
345+
};
346+
340347
export const getDefaultFilter = (columns) => {
341348
if (!columns) return null;
342349
let defaultColumn = columns[0];
343-
if (!FILTER_COLUMN_OPTIONS[defaultColumn.type]) {
344-
defaultColumn = columns.find((c) => FILTER_COLUMN_OPTIONS[c.type]);
350+
if (!checkColumnHasFilterOptions({ columnType: defaultColumn.type, columnDisplayType: defaultColumn.data?.display_type })) {
351+
defaultColumn = columns.find((c) => checkColumnHasFilterOptions({ columnType: c.type, columnDisplayType: c.data?.display_type }));
345352
}
346353
if (!defaultColumn) return null;
347354
return getFilterByColumn(defaultColumn);
@@ -377,9 +384,9 @@ export const getFilterColumns = (columns) => {
377384
if (data && (type === CellType.LINK ||
378385
(FORMULA_COLUMN_TYPES_MAP[type] && data.result_type === FORMULA_RESULT_TYPE.ARRAY))
379386
) {
380-
return Object.prototype.hasOwnProperty.call(FILTER_COLUMN_OPTIONS, data.array_type);
387+
return checkColumnHasFilterOptions({ columnType: data.array_type, columnDisplayType: data.array_data?.display_type });
381388
}
382-
return Object.prototype.hasOwnProperty.call(FILTER_COLUMN_OPTIONS, type);
389+
return checkColumnHasFilterOptions({ columnType: type, columnDisplayType: data?.display_type });
383390
});
384391
};
385392

@@ -580,16 +587,16 @@ export const getFilterConfigOptions = (column) => {
580587
return getFormulaColumnFilterOptions(column);
581588
}
582589
if (type === CellType.LINK) {
583-
const { array_type } = data || {};
590+
const { array_type, array_data } = data || {};
584591
if (array_type === FORMULA_RESULT_TYPE.BOOL) {
585-
return FILTER_COLUMN_OPTIONS[CellType.CHECKBOX];
592+
return getColumnFilterOptions({ columnType: CellType.CHECKBOX });
586593
}
587594
if (array_type === FORMULA_RESULT_TYPE.STRING) {
588-
return FILTER_COLUMN_OPTIONS[CellType.TEXT];
595+
return getColumnFilterOptions({ columnType: CellType.TEXT });
589596
}
590-
return getFilterOptionsByArrayType(array_type);
597+
return getFilterOptionsByArrayType(array_type, array_data);
591598
}
592-
return FILTER_COLUMN_OPTIONS[type] || {};
599+
return getColumnFilterOptions({ columnType: type, columnDisplayType: data?.display_type }) || {};
593600
};
594601

595602
export const getMultipleSelectUpdatedFilterTerm = (filterTerm, option) => {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -420,13 +420,15 @@
420420
margin-left: -0.3125rem;
421421
}
422422

423-
.filter-header-icon .dtable-font {
423+
.filter-header-icon .dtable-font,
424+
.filter-header-icon .multicolor-icon {
424425
font-size: 14px;
425426
color: #aaa;
426427
cursor: default;
427428
}
428429

429-
.option.option-active .filter-header-icon .dtable-font {
430+
.option.option-active .filter-header-icon .dtable-font,
431+
.option.option-active .filter-header-icon .multicolor-icon {
430432
color: #fff;
431433
}
432434

‎src/SvgIcon/index.css renamed to ‎src/DTableIcon/index.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
.dtable-ui-multicolor-icon {
1+
.multicolor-icon {
22
width: 1em;
33
height: 1em;
44
fill: currentColor;
55
overflow: hidden;
66
}
77

8-
.dtable-ui-multicolor-icon.scale-icon {
8+
.multicolor-icon.scale-icon-150 {
99
transform: scale(1.5);
1010
}

0 commit comments

Comments
 (0)