@douyinfe/semi-ui 2.34.0-beta.0 → 2.34.1-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/semi.css +20 -44
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +33404 -33022
- package/dist/umd/semi-ui.js.map +1 -1
- package/dist/umd/semi-ui.min.js +1 -1
- package/dist/umd/semi-ui.min.js.map +1 -1
- package/lib/cjs/breadcrumb/item.js +1 -1
- package/lib/cjs/calendar/interface.d.ts +2 -2
- package/lib/cjs/card/index.d.ts +36 -4
- package/lib/cjs/card/index.js +244 -67
- package/lib/cjs/cascader/index.d.ts +0 -2
- package/lib/cjs/cascader/index.js +0 -13
- package/lib/cjs/form/baseForm.d.ts +1 -1
- package/lib/cjs/form/field.d.ts +1 -1
- package/lib/cjs/modal/confirm.d.ts +6 -6
- package/lib/cjs/steps/basicStep.js +13 -7
- package/lib/cjs/steps/basicSteps.js +4 -2
- package/lib/cjs/steps/fillStep.js +13 -7
- package/lib/cjs/steps/fillSteps.js +3 -2
- package/lib/cjs/steps/index.d.ts +1 -0
- package/lib/cjs/steps/index.js +5 -2
- package/lib/cjs/steps/navStep.js +12 -4
- package/lib/cjs/steps/navSteps.js +4 -2
- package/lib/cjs/table/Body/index.d.ts +0 -1
- package/lib/cjs/table/Body/index.js +3 -3
- package/lib/cjs/table/HeadTable.d.ts +4 -4
- package/lib/cjs/table/HeadTable.js +3 -3
- package/lib/cjs/table/Table.js +4 -29
- package/lib/cjs/table/TableCell.js +3 -14
- package/lib/cjs/table/TableHeader.d.ts +0 -1
- package/lib/cjs/table/TableHeader.js +2 -11
- package/lib/cjs/table/TableHeaderRow.js +1 -2
- package/lib/cjs/table/interface.d.ts +1 -2
- package/lib/cjs/typography/base.d.ts +2 -1
- package/lib/cjs/typography/base.js +68 -66
- package/lib/cjs/typography/title.d.ts +1 -1
- package/lib/cjs/typography/util.d.ts +1 -4
- package/lib/cjs/typography/util.js +13 -32
- package/lib/es/breadcrumb/item.js +1 -1
- package/lib/es/calendar/interface.d.ts +2 -2
- package/lib/es/card/index.d.ts +36 -4
- package/lib/es/card/index.js +243 -66
- package/lib/es/cascader/index.d.ts +0 -2
- package/lib/es/cascader/index.js +0 -13
- package/lib/es/form/baseForm.d.ts +1 -1
- package/lib/es/form/field.d.ts +1 -1
- package/lib/es/modal/confirm.d.ts +6 -6
- package/lib/es/steps/basicStep.js +12 -7
- package/lib/es/steps/basicSteps.js +4 -2
- package/lib/es/steps/fillStep.js +12 -7
- package/lib/es/steps/fillSteps.js +3 -2
- package/lib/es/steps/index.d.ts +1 -0
- package/lib/es/steps/index.js +3 -0
- package/lib/es/steps/navStep.js +11 -4
- package/lib/es/steps/navSteps.js +4 -2
- package/lib/es/table/Body/index.d.ts +0 -1
- package/lib/es/table/Body/index.js +3 -3
- package/lib/es/table/HeadTable.d.ts +4 -4
- package/lib/es/table/HeadTable.js +3 -3
- package/lib/es/table/Table.js +5 -30
- package/lib/es/table/TableCell.js +4 -15
- package/lib/es/table/TableHeader.d.ts +0 -1
- package/lib/es/table/TableHeader.js +1 -9
- package/lib/es/table/TableHeaderRow.js +1 -2
- package/lib/es/table/interface.d.ts +1 -2
- package/lib/es/typography/base.d.ts +2 -1
- package/lib/es/typography/base.js +67 -64
- package/lib/es/typography/title.d.ts +1 -1
- package/lib/es/typography/util.d.ts +1 -4
- package/lib/es/typography/util.js +14 -32
- package/package.json +9 -8
|
@@ -260,6 +260,7 @@ class Body extends BaseComponent {
|
|
|
260
260
|
scroll,
|
|
261
261
|
prefixCls,
|
|
262
262
|
virtualized,
|
|
263
|
+
anyColumnFixed,
|
|
263
264
|
columns
|
|
264
265
|
} = this.props;
|
|
265
266
|
const {
|
|
@@ -479,8 +480,7 @@ class Body extends BaseComponent {
|
|
|
479
480
|
dataSource,
|
|
480
481
|
onScroll,
|
|
481
482
|
groups,
|
|
482
|
-
expandedRowRender
|
|
483
|
-
tableLayout
|
|
483
|
+
expandedRowRender
|
|
484
484
|
} = this.props;
|
|
485
485
|
|
|
486
486
|
const x = _get(scroll, 'x');
|
|
@@ -531,7 +531,7 @@ class Body extends BaseComponent {
|
|
|
531
531
|
"aria-colcount": columns && columns.length,
|
|
532
532
|
style: tableStyle,
|
|
533
533
|
className: classnames(prefixCls, {
|
|
534
|
-
[`${prefixCls}-fixed`]:
|
|
534
|
+
[`${prefixCls}-fixed`]: anyColumnFixed
|
|
535
535
|
})
|
|
536
536
|
}, colgroup, includeHeader && showHeader ? /*#__PURE__*/React.createElement(TableHeader, Object.assign({}, this.props, {
|
|
537
537
|
ref: headerRef,
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps, OnHeaderRow
|
|
2
|
+
import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps, OnHeaderRow } from './interface';
|
|
3
3
|
export interface HeadTableProps {
|
|
4
|
-
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
anyColumnFixed?: boolean;
|
|
5
6
|
bodyHasScrollBar?: boolean;
|
|
6
7
|
columns?: ColumnProps[];
|
|
7
8
|
components?: TableComponents;
|
|
@@ -15,7 +16,6 @@ export interface HeadTableProps {
|
|
|
15
16
|
showHeader?: boolean;
|
|
16
17
|
onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
|
|
17
18
|
onHeaderRow?: OnHeaderRow<any>;
|
|
18
|
-
sticky?: Sticky;
|
|
19
19
|
}
|
|
20
|
-
declare const _default: React.ForwardRefExoticComponent<HeadTableProps & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<HeadTableProps, keyof HeadTableProps> & React.RefAttributes<HTMLDivElement>>;
|
|
21
21
|
export default _default;
|
|
@@ -30,7 +30,7 @@ class HeadTable extends React.PureComponent {
|
|
|
30
30
|
components,
|
|
31
31
|
onDidUpdate,
|
|
32
32
|
showHeader,
|
|
33
|
-
|
|
33
|
+
anyColumnFixed,
|
|
34
34
|
bodyHasScrollBar,
|
|
35
35
|
sticky
|
|
36
36
|
} = this.props;
|
|
@@ -82,7 +82,7 @@ class HeadTable extends React.PureComponent {
|
|
|
82
82
|
}, /*#__PURE__*/React.createElement(Table, {
|
|
83
83
|
style: tableStyle,
|
|
84
84
|
className: classnames(prefixCls, {
|
|
85
|
-
[`${prefixCls}-fixed`]:
|
|
85
|
+
[`${prefixCls}-fixed`]: anyColumnFixed
|
|
86
86
|
})
|
|
87
87
|
}, colgroup, tableHeader));
|
|
88
88
|
}
|
|
@@ -90,7 +90,7 @@ class HeadTable extends React.PureComponent {
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
HeadTable.propTypes = {
|
|
93
|
-
|
|
93
|
+
anyColumnFixed: PropTypes.bool,
|
|
94
94
|
bodyHasScrollBar: PropTypes.bool,
|
|
95
95
|
columns: PropTypes.array,
|
|
96
96
|
components: PropTypes.object,
|
package/lib/es/table/Table.js
CHANGED
|
@@ -45,7 +45,7 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
45
45
|
import React, { createRef, isValidElement } from 'react';
|
|
46
46
|
import PropTypes from 'prop-types';
|
|
47
47
|
import classnames from 'classnames';
|
|
48
|
-
import { mergeQueries, equalWith, assignColumnKeys, flattenColumns, getAllDisabledRowKeys
|
|
48
|
+
import { mergeQueries, equalWith, assignColumnKeys, flattenColumns, getAllDisabledRowKeys } from '@douyinfe/semi-foundation/lib/es/table/utils';
|
|
49
49
|
import Store from '@douyinfe/semi-foundation/lib/es/utils/Store';
|
|
50
50
|
import TableFoundation from '@douyinfe/semi-foundation/lib/es/table/foundation';
|
|
51
51
|
import { strings, cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
|
|
@@ -457,12 +457,8 @@ class Table extends BaseComponent {
|
|
|
457
457
|
|
|
458
458
|
this.addFnsInColumn = function () {
|
|
459
459
|
let column = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
460
|
-
const {
|
|
461
|
-
prefixCls
|
|
462
|
-
} = _this.props;
|
|
463
460
|
|
|
464
461
|
if (column && (column.sorter || column.filters || column.useFullRender)) {
|
|
465
|
-
let hasSorterOrFilter = false;
|
|
466
462
|
const {
|
|
467
463
|
dataIndex,
|
|
468
464
|
title: rawTitle,
|
|
@@ -483,11 +479,8 @@ class Table extends BaseComponent {
|
|
|
483
479
|
const defaultSortOrder = _get(curQuery, 'defaultSortOrder', false);
|
|
484
480
|
|
|
485
481
|
const sortOrder = _this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
|
|
486
|
-
const
|
|
487
|
-
|
|
488
|
-
className: `${prefixCls}-row-head-title`,
|
|
489
|
-
key: strings.DEFAULT_KEY_COLUMN_TITLE,
|
|
490
|
-
title: showEllipsisTitle && typeof rawTitle === 'string' ? rawTitle : undefined
|
|
482
|
+
const TitleNode = typeof rawTitle !== 'function' && /*#__PURE__*/React.createElement(React.Fragment, {
|
|
483
|
+
key: strings.DEFAULT_KEY_COLUMN_TITLE
|
|
491
484
|
}, rawTitle);
|
|
492
485
|
|
|
493
486
|
if (typeof column.sorter === 'function' || column.sorter === true) {
|
|
@@ -500,7 +493,6 @@ class Table extends BaseComponent {
|
|
|
500
493
|
title: TitleNode
|
|
501
494
|
});
|
|
502
495
|
useFullRender && (titleMap.sorter = sorter);
|
|
503
|
-
hasSorterOrFilter = true;
|
|
504
496
|
titleArr.push(sorter);
|
|
505
497
|
} else {
|
|
506
498
|
titleArr.push(TitleNode);
|
|
@@ -521,13 +513,10 @@ class Table extends BaseComponent {
|
|
|
521
513
|
onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
|
|
522
514
|
}));
|
|
523
515
|
useFullRender && (titleMap.filter = filter);
|
|
524
|
-
hasSorterOrFilter = true;
|
|
525
516
|
titleArr.push(filter);
|
|
526
517
|
}
|
|
527
518
|
|
|
528
|
-
const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) :
|
|
529
|
-
className: `${prefixCls}-operate-wrapper`
|
|
530
|
-
}, titleArr) : titleArr;
|
|
519
|
+
const newTitle = typeof rawTitle === 'function' ? () => rawTitle(titleMap) : titleArr;
|
|
531
520
|
column = Object.assign(Object.assign({}, column), {
|
|
532
521
|
title: newTitle
|
|
533
522
|
});
|
|
@@ -674,10 +663,9 @@ class Table extends BaseComponent {
|
|
|
674
663
|
|
|
675
664
|
const selectedRowKeysSet = _get(rowSelection, 'selectedRowKeysSet', new Set());
|
|
676
665
|
|
|
677
|
-
const tableLayout = this.adapter.getTableLayout();
|
|
678
666
|
const headTable = fixed || useFixedHeader ? /*#__PURE__*/React.createElement(HeadTable, {
|
|
679
667
|
key: "head",
|
|
680
|
-
|
|
668
|
+
anyColumnFixed: anyColumnFixed,
|
|
681
669
|
ref: headerRef,
|
|
682
670
|
columns: filteredColumns,
|
|
683
671
|
prefixCls: prefixCls,
|
|
@@ -701,7 +689,6 @@ class Table extends BaseComponent {
|
|
|
701
689
|
handleWheel: this.handleWheel,
|
|
702
690
|
handleBodyScroll: this.handleBodyScroll,
|
|
703
691
|
anyColumnFixed: anyColumnFixed,
|
|
704
|
-
tableLayout: tableLayout,
|
|
705
692
|
includeHeader: includeHeader,
|
|
706
693
|
showHeader: showHeader,
|
|
707
694
|
scroll: scroll,
|
|
@@ -1036,18 +1023,6 @@ class Table extends BaseComponent {
|
|
|
1036
1023
|
|
|
1037
1024
|
return false;
|
|
1038
1025
|
},
|
|
1039
|
-
getTableLayout: () => {
|
|
1040
|
-
let isFixed = false;
|
|
1041
|
-
const {
|
|
1042
|
-
flattenColumns
|
|
1043
|
-
} = this.state;
|
|
1044
|
-
|
|
1045
|
-
if (Array.isArray(flattenColumns)) {
|
|
1046
|
-
isFixed = flattenColumns.some(column => Boolean(column.ellipsis) || Boolean(column.fixed));
|
|
1047
|
-
}
|
|
1048
|
-
|
|
1049
|
-
return isFixed ? 'fixed' : 'auto';
|
|
1050
|
-
},
|
|
1051
1026
|
setHeadWidths: function (headWidths) {
|
|
1052
1027
|
let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
1053
1028
|
|
|
@@ -13,7 +13,7 @@ import classnames from 'classnames';
|
|
|
13
13
|
import PropTypes from 'prop-types';
|
|
14
14
|
import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/table/constants';
|
|
15
15
|
import TableCellFoundation from '@douyinfe/semi-foundation/lib/es/table/cellFoundation';
|
|
16
|
-
import { isSelectionColumn, isExpandedColumn, getRTLAlign
|
|
16
|
+
import { isSelectionColumn, isExpandedColumn, getRTLAlign } from '@douyinfe/semi-foundation/lib/es/table/utils';
|
|
17
17
|
import BaseComponent from '../_base/baseComponent';
|
|
18
18
|
import Context from './table-context';
|
|
19
19
|
import { amendTableWidth } from './utils';
|
|
@@ -296,8 +296,7 @@ export default class TableCell extends BaseComponent {
|
|
|
296
296
|
} = this.context;
|
|
297
297
|
const isRTL = direction === 'rtl';
|
|
298
298
|
const {
|
|
299
|
-
className
|
|
300
|
-
ellipsis
|
|
299
|
+
className
|
|
301
300
|
} = column;
|
|
302
301
|
const fixedLeftFlag = fixedLeft || typeof fixedLeft === 'number';
|
|
303
302
|
const fixedRightFlag = fixedRight || typeof fixedRight === 'number';
|
|
@@ -316,14 +315,6 @@ export default class TableCell extends BaseComponent {
|
|
|
316
315
|
realExpandIcon,
|
|
317
316
|
tdProps: newTdProps
|
|
318
317
|
} = renderTextResult;
|
|
319
|
-
let title;
|
|
320
|
-
const shouldShowTitle = shouldShowEllipsisTitle(ellipsis);
|
|
321
|
-
|
|
322
|
-
if (shouldShowTitle) {
|
|
323
|
-
if (typeof text === 'string') {
|
|
324
|
-
title = text;
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
318
|
|
|
328
319
|
if (rowSpan === 0 || colSpan === 0) {
|
|
329
320
|
return null;
|
|
@@ -352,15 +343,13 @@ export default class TableCell extends BaseComponent {
|
|
|
352
343
|
[`${prefixCls}-cell-fixed-left`]: isFixedLeft,
|
|
353
344
|
[`${prefixCls}-cell-fixed-left-last`]: isFixedLeftLast,
|
|
354
345
|
[`${prefixCls}-cell-fixed-right`]: isFixedRight,
|
|
355
|
-
[`${prefixCls}-cell-fixed-right-first`]: isFixedRightFirst
|
|
356
|
-
[`${prefixCls}-row-cell-ellipsis`]: ellipsis
|
|
346
|
+
[`${prefixCls}-cell-fixed-right-first`]: isFixedRightFirst
|
|
357
347
|
});
|
|
358
348
|
return /*#__PURE__*/React.createElement(BodyCell, Object.assign({
|
|
359
349
|
role: "gridcell",
|
|
360
350
|
"aria-colindex": colIndex + 1,
|
|
361
351
|
className: columnCls,
|
|
362
|
-
onClick: this.handleClick
|
|
363
|
-
title: title
|
|
352
|
+
onClick: this.handleClick
|
|
364
353
|
}, newTdProps, {
|
|
365
354
|
ref: this.setRef
|
|
366
355
|
}), inner);
|
|
@@ -23,7 +23,6 @@ export interface TableHeaderCell {
|
|
|
23
23
|
rowSpan?: number;
|
|
24
24
|
colSpan?: number;
|
|
25
25
|
colEnd?: number;
|
|
26
|
-
title?: string;
|
|
27
26
|
}
|
|
28
27
|
declare const _default: React.ForwardRefExoticComponent<Omit<TableHeaderProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
|
|
29
28
|
export default _default;
|
|
@@ -3,10 +3,9 @@ import _noop from "lodash/noop";
|
|
|
3
3
|
|
|
4
4
|
/* eslint-disable max-len */
|
|
5
5
|
import React from 'react';
|
|
6
|
-
import PropTypes from 'prop-types';
|
|
7
6
|
import BaseComponent from '../_base/baseComponent';
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
8
|
import { strings, cssClasses } from '@douyinfe/semi-foundation/lib/es/table/constants';
|
|
9
|
-
import { shouldShowEllipsisTitle } from '@douyinfe/semi-foundation/lib/es/table/utils';
|
|
10
9
|
import TableHeaderRow from './TableHeaderRow';
|
|
11
10
|
|
|
12
11
|
function parseHeaderRows(columns) {
|
|
@@ -61,13 +60,6 @@ function parseHeaderRows(columns) {
|
|
|
61
60
|
cell.colEnd = cell.colStart + colSpan - 1;
|
|
62
61
|
rows[rowIndex].push(cell);
|
|
63
62
|
currentColIndex += colSpan;
|
|
64
|
-
const ellipsis = column === null || column === void 0 ? void 0 : column.ellipsis;
|
|
65
|
-
const shouldShowTitle = shouldShowEllipsisTitle(ellipsis);
|
|
66
|
-
|
|
67
|
-
if (shouldShowTitle && typeof cell.children === 'string') {
|
|
68
|
-
cell.title = cell.children;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
63
|
return colSpan;
|
|
72
64
|
});
|
|
73
65
|
return colSpans;
|
|
@@ -134,8 +134,7 @@ export default class TableHeaderRow extends BaseComponent {
|
|
|
134
134
|
[`${prefixCls}-cell-fixed-left`]: fixedLeft,
|
|
135
135
|
[`${prefixCls}-cell-fixed-left-last`]: fixedLeftLast,
|
|
136
136
|
[`${prefixCls}-cell-fixed-right`]: fixedRight,
|
|
137
|
-
[`${prefixCls}-cell-fixed-right-first`]: fixedRightFirst
|
|
138
|
-
[`${prefixCls}-row-head-ellipsis`]: column.ellipsis
|
|
137
|
+
[`${prefixCls}-cell-fixed-right-first`]: fixedRightFirst
|
|
139
138
|
});
|
|
140
139
|
|
|
141
140
|
if (headWidths.length && slicedColumns.length) {
|
|
@@ -6,7 +6,7 @@ import { DropdownProps } from '../dropdown';
|
|
|
6
6
|
import { Locale } from '../locale/interface';
|
|
7
7
|
import { ArrayElement } from '../_base/base';
|
|
8
8
|
import { strings } from '@douyinfe/semi-foundation/lib/es/table/constants';
|
|
9
|
-
import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord
|
|
9
|
+
import { BaseRowKeyType, BaseSortOrder, BaseGroupBy, BaseGroupByFn, BaseFixed, BaseAlign, BaseChangeInfoSorter, BaseSorter, BaseFilter, BaseChangeInfoFilter, BaseIncludeGroupRecord } from '@douyinfe/semi-foundation/lib/es/table/foundation';
|
|
10
10
|
import { ScrollDirection, CSSDirection } from 'react-window';
|
|
11
11
|
export interface TableProps<RecordType extends Record<string, any> = any> extends BaseProps {
|
|
12
12
|
bordered?: boolean;
|
|
@@ -89,7 +89,6 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
|
|
|
89
89
|
onFilter?: OnFilter<RecordType>;
|
|
90
90
|
onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
|
|
91
91
|
onHeaderCell?: OnHeaderCell<RecordType>;
|
|
92
|
-
ellipsis?: BaseEllipsis;
|
|
93
92
|
}
|
|
94
93
|
export declare type Align = BaseAlign;
|
|
95
94
|
export declare type SortOrder = BaseSortOrder;
|
|
@@ -27,9 +27,10 @@ interface BaseTypographyState {
|
|
|
27
27
|
editable: boolean;
|
|
28
28
|
copied: boolean;
|
|
29
29
|
isOverflowed: boolean;
|
|
30
|
-
ellipsisContent:
|
|
30
|
+
ellipsisContent: string;
|
|
31
31
|
expanded: boolean;
|
|
32
32
|
isTruncated: boolean;
|
|
33
|
+
first: boolean;
|
|
33
34
|
prevChildren: React.ReactNode;
|
|
34
35
|
}
|
|
35
36
|
export default class Base extends Component<BaseTypographyProps, BaseTypographyState> {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import _isNull from "lodash/isNull";
|
|
2
1
|
import _isString from "lodash/isString";
|
|
3
2
|
import _merge from "lodash/merge";
|
|
4
3
|
import _omit from "lodash/omit";
|
|
@@ -16,6 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
|
|
|
16
15
|
};
|
|
17
16
|
|
|
18
17
|
import React, { Component } from 'react';
|
|
18
|
+
import ReactDOM from 'react-dom';
|
|
19
19
|
import cls from 'classnames';
|
|
20
20
|
import PropTypes from 'prop-types';
|
|
21
21
|
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/typography/constants';
|
|
@@ -28,7 +28,6 @@ import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
|
|
|
28
28
|
import isEnterPress from '@douyinfe/semi-foundation/lib/es/utils/isEnterPress';
|
|
29
29
|
import LocaleConsumer from '../locale/localeConsumer';
|
|
30
30
|
import { isSemiIcon } from '../_utils';
|
|
31
|
-
import ResizeObserver from '../resizeObserver';
|
|
32
31
|
const prefixCls = cssClasses.PREFIX;
|
|
33
32
|
const ELLIPSIS_STR = '...';
|
|
34
33
|
|
|
@@ -106,7 +105,7 @@ export default class Base extends Component {
|
|
|
106
105
|
return false;
|
|
107
106
|
}
|
|
108
107
|
|
|
109
|
-
const updateOverflow = rows <= 1 ? this.wrapperRef.current.scrollWidth > this.wrapperRef.current.
|
|
108
|
+
const updateOverflow = rows <= 1 ? this.wrapperRef.current.scrollWidth > this.wrapperRef.current.clientWidth : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
|
|
110
109
|
return updateOverflow;
|
|
111
110
|
};
|
|
112
111
|
|
|
@@ -172,7 +171,8 @@ export default class Base extends Component {
|
|
|
172
171
|
|
|
173
172
|
if (expandable && !expanded || collapsible && expanded) {
|
|
174
173
|
this.setState({
|
|
175
|
-
expanded: !expanded
|
|
174
|
+
expanded: !expanded,
|
|
175
|
+
first: false
|
|
176
176
|
});
|
|
177
177
|
}
|
|
178
178
|
};
|
|
@@ -200,17 +200,16 @@ export default class Base extends Component {
|
|
|
200
200
|
};
|
|
201
201
|
|
|
202
202
|
this.renderExpandable = () => {
|
|
203
|
-
const {
|
|
204
|
-
expanded,
|
|
205
|
-
isTruncated
|
|
206
|
-
} = this.state;
|
|
207
|
-
if (!isTruncated) return null;
|
|
208
203
|
const {
|
|
209
204
|
expandText,
|
|
210
205
|
expandable,
|
|
211
206
|
collapseText,
|
|
212
207
|
collapsible
|
|
213
208
|
} = this.getEllipsisOpt();
|
|
209
|
+
const {
|
|
210
|
+
expanded,
|
|
211
|
+
first
|
|
212
|
+
} = this.state;
|
|
214
213
|
|
|
215
214
|
const noExpandText = !expandable && _isUndefined(expandText);
|
|
216
215
|
|
|
@@ -220,7 +219,8 @@ export default class Base extends Component {
|
|
|
220
219
|
|
|
221
220
|
if (!expanded && !noExpandText) {
|
|
222
221
|
text = expandText;
|
|
223
|
-
} else if (expanded && !noCollapseText) {
|
|
222
|
+
} else if (expanded && !first && !noCollapseText) {
|
|
223
|
+
// if expanded is true but the text is initally mounted, we dont show collapseText
|
|
224
224
|
text = collapseText;
|
|
225
225
|
}
|
|
226
226
|
|
|
@@ -285,9 +285,11 @@ export default class Base extends Component {
|
|
|
285
285
|
|
|
286
286
|
this.getEllipsisStyle = () => {
|
|
287
287
|
const {
|
|
288
|
-
ellipsis
|
|
289
|
-
component
|
|
288
|
+
ellipsis
|
|
290
289
|
} = this.props;
|
|
290
|
+
const {
|
|
291
|
+
expandable
|
|
292
|
+
} = this.getEllipsisOpt();
|
|
291
293
|
|
|
292
294
|
if (!ellipsis) {
|
|
293
295
|
return {
|
|
@@ -301,25 +303,23 @@ export default class Base extends Component {
|
|
|
301
303
|
rows
|
|
302
304
|
} = this.getEllipsisOpt();
|
|
303
305
|
const {
|
|
304
|
-
|
|
306
|
+
isOverflowed,
|
|
307
|
+
expanded,
|
|
308
|
+
isTruncated
|
|
305
309
|
} = this.state;
|
|
306
310
|
const useCSS = !expanded && this.canUseCSSEllipsis();
|
|
307
311
|
const ellipsisCls = cls({
|
|
308
312
|
[`${prefixCls}-ellipsis`]: true,
|
|
309
313
|
[`${prefixCls}-ellipsis-single-line`]: rows === 1,
|
|
310
314
|
[`${prefixCls}-ellipsis-multiple-line`]: rows > 1,
|
|
311
|
-
|
|
312
|
-
[`${prefixCls}-ellipsis-multiple-line-text`]: rows > 1 && component === 'span',
|
|
313
|
-
[`${prefixCls}-ellipsis-overflow-ellipsis`]: rows === 1 && useCSS,
|
|
314
|
-
// component === 'span', Text component, It should be externally displayed inline
|
|
315
|
-
[`${prefixCls}-ellipsis-overflow-ellipsis-text`]: rows === 1 && useCSS && component === 'span'
|
|
315
|
+
[`${prefixCls}-ellipsis-overflow-ellipsis`]: rows === 1 && useCSS
|
|
316
316
|
});
|
|
317
317
|
const ellipsisStyle = useCSS && rows > 1 ? {
|
|
318
318
|
WebkitLineClamp: rows
|
|
319
319
|
} : {};
|
|
320
320
|
return {
|
|
321
321
|
ellipsisCls,
|
|
322
|
-
ellipsisStyle
|
|
322
|
+
ellipsisStyle: isOverflowed ? ellipsisStyle : {}
|
|
323
323
|
};
|
|
324
324
|
};
|
|
325
325
|
|
|
@@ -333,6 +333,7 @@ export default class Base extends Component {
|
|
|
333
333
|
const {
|
|
334
334
|
isTruncated,
|
|
335
335
|
expanded,
|
|
336
|
+
isOverflowed,
|
|
336
337
|
ellipsisContent
|
|
337
338
|
} = this.state;
|
|
338
339
|
|
|
@@ -349,10 +350,12 @@ export default class Base extends Component {
|
|
|
349
350
|
// ellipsis
|
|
350
351
|
// if text is overflow in container
|
|
351
352
|
isOverflowed: true,
|
|
352
|
-
ellipsisContent:
|
|
353
|
+
ellipsisContent: null,
|
|
353
354
|
expanded: false,
|
|
354
355
|
// if text is truncated with js
|
|
355
|
-
isTruncated:
|
|
356
|
+
isTruncated: false,
|
|
357
|
+
// record if has click expanded
|
|
358
|
+
first: true,
|
|
356
359
|
prevChildren: null
|
|
357
360
|
};
|
|
358
361
|
this.wrapperRef = /*#__PURE__*/React.createRef();
|
|
@@ -362,7 +365,8 @@ export default class Base extends Component {
|
|
|
362
365
|
|
|
363
366
|
componentDidMount() {
|
|
364
367
|
if (this.props.ellipsis) {
|
|
365
|
-
this.
|
|
368
|
+
this.getEllipsisState();
|
|
369
|
+
window.addEventListener('resize', this.onResize);
|
|
366
370
|
}
|
|
367
371
|
}
|
|
368
372
|
|
|
@@ -376,9 +380,10 @@ export default class Base extends Component {
|
|
|
376
380
|
if (props.ellipsis && prevChildren !== props.children) {
|
|
377
381
|
// reset ellipsis state if children update
|
|
378
382
|
newState.isOverflowed = true;
|
|
379
|
-
newState.ellipsisContent =
|
|
383
|
+
newState.ellipsisContent = null;
|
|
380
384
|
newState.expanded = false;
|
|
381
|
-
newState.isTruncated =
|
|
385
|
+
newState.isTruncated = false;
|
|
386
|
+
newState.first = true;
|
|
382
387
|
}
|
|
383
388
|
|
|
384
389
|
return newState;
|
|
@@ -390,12 +395,16 @@ export default class Base extends Component {
|
|
|
390
395
|
this.forceUpdate();
|
|
391
396
|
|
|
392
397
|
if (this.props.ellipsis) {
|
|
393
|
-
this.
|
|
398
|
+
this.getEllipsisState();
|
|
394
399
|
}
|
|
395
400
|
}
|
|
396
401
|
}
|
|
397
402
|
|
|
398
403
|
componentWillUnmount() {
|
|
404
|
+
if (this.props.ellipsis) {
|
|
405
|
+
window.removeEventListener('resize', this.onResize);
|
|
406
|
+
}
|
|
407
|
+
|
|
399
408
|
if (this.rafId) {
|
|
400
409
|
window.cancelAnimationFrame(this.rafId);
|
|
401
410
|
}
|
|
@@ -417,45 +426,45 @@ export default class Base extends Component {
|
|
|
417
426
|
}
|
|
418
427
|
|
|
419
428
|
const {
|
|
429
|
+
ellipsisContent,
|
|
430
|
+
isOverflowed,
|
|
431
|
+
isTruncated,
|
|
420
432
|
expanded
|
|
421
433
|
} = this.state;
|
|
422
|
-
const
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
warning('children' in this.props && typeof children !== 'string', "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment."); // If children is null, css/js truncated flag isTruncate is false
|
|
434
|
+
const updateOverflow = this.shouldTruncated(rows);
|
|
435
|
+
const canUseCSSEllipsis = this.canUseCSSEllipsis();
|
|
436
|
+
const needUpdate = updateOverflow !== isOverflowed;
|
|
426
437
|
|
|
427
|
-
if (
|
|
428
|
-
this.setState({
|
|
429
|
-
isTruncated: false,
|
|
430
|
-
isOverflowed: false
|
|
431
|
-
});
|
|
438
|
+
if (!rows || rows < 0 || expanded) {
|
|
432
439
|
return undefined;
|
|
433
440
|
}
|
|
434
441
|
|
|
435
|
-
if (
|
|
442
|
+
if (canUseCSSEllipsis) {
|
|
443
|
+
if (needUpdate) {
|
|
444
|
+
this.setState({
|
|
445
|
+
expanded: !updateOverflow
|
|
446
|
+
});
|
|
447
|
+
}
|
|
448
|
+
|
|
436
449
|
return undefined;
|
|
437
450
|
}
|
|
438
451
|
|
|
439
|
-
|
|
440
|
-
|
|
452
|
+
const extraNode = [this.expandRef.current, this.copyRef && this.copyRef.current];
|
|
453
|
+
warning('children' in this.props && typeof children !== 'string', "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment.");
|
|
454
|
+
const content = getRenderText(ReactDOM.findDOMNode(this.wrapperRef.current), rows, children, extraNode, ELLIPSIS_STR, suffix, pos);
|
|
441
455
|
|
|
456
|
+
if (children === content) {
|
|
442
457
|
this.setState({
|
|
458
|
+
expanded: true
|
|
459
|
+
});
|
|
460
|
+
} else if (ellipsisContent !== content || isOverflowed !== updateOverflow) {
|
|
461
|
+
this.setState({
|
|
462
|
+
ellipsisContent: content,
|
|
443
463
|
isOverflowed: updateOverflow,
|
|
444
|
-
isTruncated:
|
|
464
|
+
isTruncated: children !== content
|
|
445
465
|
});
|
|
446
|
-
return undefined;
|
|
447
466
|
}
|
|
448
467
|
|
|
449
|
-
const extraNode = {
|
|
450
|
-
expand: this.expandRef.current,
|
|
451
|
-
copy: this.copyRef && this.copyRef.current
|
|
452
|
-
};
|
|
453
|
-
const content = getRenderText(this.wrapperRef.current, rows, // Perform type conversion on children to prevent component crash due to non-string type of children
|
|
454
|
-
String(children), extraNode, ELLIPSIS_STR, suffix, pos);
|
|
455
|
-
this.setState({
|
|
456
|
-
ellipsisContent: content,
|
|
457
|
-
isTruncated: children !== content
|
|
458
|
-
});
|
|
459
468
|
return undefined;
|
|
460
469
|
}
|
|
461
470
|
|
|
@@ -464,8 +473,6 @@ export default class Base extends Component {
|
|
|
464
473
|
}
|
|
465
474
|
|
|
466
475
|
renderCopy() {
|
|
467
|
-
var _a;
|
|
468
|
-
|
|
469
476
|
const {
|
|
470
477
|
copyable,
|
|
471
478
|
children
|
|
@@ -473,30 +480,28 @@ export default class Base extends Component {
|
|
|
473
480
|
|
|
474
481
|
if (!copyable) {
|
|
475
482
|
return null;
|
|
476
|
-
}
|
|
477
|
-
|
|
483
|
+
}
|
|
478
484
|
|
|
479
|
-
const willCopyContent = (_a = copyable === null || copyable === void 0 ? void 0 : copyable.content) !== null && _a !== void 0 ? _a : children;
|
|
480
485
|
let copyContent;
|
|
481
486
|
let hasObject = false;
|
|
482
487
|
|
|
483
|
-
if (Array.isArray(
|
|
488
|
+
if (Array.isArray(children)) {
|
|
484
489
|
copyContent = '';
|
|
485
|
-
|
|
490
|
+
children.forEach(value => {
|
|
486
491
|
if (typeof value === 'object') {
|
|
487
492
|
hasObject = true;
|
|
488
493
|
}
|
|
489
494
|
|
|
490
495
|
copyContent += String(value);
|
|
491
496
|
});
|
|
492
|
-
} else if (typeof
|
|
493
|
-
copyContent = String(
|
|
497
|
+
} else if (typeof children !== 'object') {
|
|
498
|
+
copyContent = String(children);
|
|
494
499
|
} else {
|
|
495
500
|
hasObject = true;
|
|
496
|
-
copyContent = String(
|
|
501
|
+
copyContent = String(children);
|
|
497
502
|
}
|
|
498
503
|
|
|
499
|
-
warning(hasObject, '
|
|
504
|
+
warning(hasObject, 'Children in Typography is a object, it will case a [object Object] mistake when copy to clipboard.');
|
|
500
505
|
const copyConfig = Object.assign({
|
|
501
506
|
content: copyContent,
|
|
502
507
|
duration: 3
|
|
@@ -608,15 +613,13 @@ export default class Base extends Component {
|
|
|
608
613
|
}
|
|
609
614
|
|
|
610
615
|
render() {
|
|
611
|
-
return /*#__PURE__*/React.createElement(
|
|
612
|
-
onResize: this.onResize
|
|
613
|
-
}, /*#__PURE__*/React.createElement(LocaleConsumer, {
|
|
616
|
+
return /*#__PURE__*/React.createElement(LocaleConsumer, {
|
|
614
617
|
componentName: "Typography"
|
|
615
618
|
}, locale => {
|
|
616
619
|
this.expandStr = locale.expand;
|
|
617
620
|
this.collapseStr = locale.collapse;
|
|
618
621
|
return this.renderTipWrapper();
|
|
619
|
-
})
|
|
622
|
+
});
|
|
620
623
|
}
|
|
621
624
|
|
|
622
625
|
}
|
|
@@ -38,7 +38,7 @@ export default class Title extends PureComponent<TitleProps> {
|
|
|
38
38
|
underline: PropTypes.Requireable<boolean>;
|
|
39
39
|
strong: PropTypes.Requireable<boolean>;
|
|
40
40
|
type: PropTypes.Requireable<"warning" | "success" | "primary" | "tertiary" | "secondary" | "danger" | "quaternary">;
|
|
41
|
-
heading: PropTypes.Requireable<
|
|
41
|
+
heading: PropTypes.Requireable<4 | 2 | 1 | 3 | 6 | 5>;
|
|
42
42
|
style: PropTypes.Requireable<object>;
|
|
43
43
|
className: PropTypes.Requireable<string>;
|
|
44
44
|
component: PropTypes.Requireable<string>;
|
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
declare const getRenderText: (originEle: HTMLElement, rows: number, content: string, fixedContent:
|
|
2
|
-
expand: Node;
|
|
3
|
-
copy: Node;
|
|
4
|
-
}, ellipsisStr: string, suffix: string, ellipsisPos: string) => string;
|
|
1
|
+
declare const getRenderText: (originEle: HTMLElement, rows: number, content: string, fixedContent: any[], ellipsisStr: string, suffix: string, ellipsisPos: string) => string;
|
|
5
2
|
export default getRenderText;
|