@douyinfe/semi-ui 2.42.3 → 2.42.4
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/umd/semi-ui.js +21 -12
- 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/dropdown/dropdownItem.js +5 -1
- package/lib/cjs/table/ResizableTable.js +12 -7
- package/lib/cjs/typography/base.d.ts +25 -4
- package/lib/cjs/typography/base.js +4 -4
- package/lib/cjs/typography/paragraph.d.ts +21 -0
- package/lib/cjs/typography/text.d.ts +21 -0
- package/lib/cjs/typography/title.d.ts +21 -0
- package/lib/es/dropdown/dropdownItem.js +5 -1
- package/lib/es/table/ResizableTable.js +12 -7
- package/lib/es/typography/base.d.ts +25 -4
- package/lib/es/typography/base.js +4 -4
- package/lib/es/typography/paragraph.d.ts +21 -0
- package/lib/es/typography/text.d.ts +21 -0
- package/lib/es/typography/title.d.ts +21 -0
- package/package.json +8 -8
|
@@ -44,7 +44,11 @@ class DropdownItem extends _baseComponent.default {
|
|
|
44
44
|
const events = {};
|
|
45
45
|
if (!disabled) {
|
|
46
46
|
['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
|
|
47
|
-
|
|
47
|
+
if (eventName === "onClick") {
|
|
48
|
+
events["onMouseDown"] = this.props[eventName];
|
|
49
|
+
} else {
|
|
50
|
+
events[eventName] = this.props[eventName];
|
|
51
|
+
}
|
|
48
52
|
});
|
|
49
53
|
}
|
|
50
54
|
let tick = null;
|
|
@@ -123,20 +123,25 @@ const ResizableTable = function () {
|
|
|
123
123
|
};
|
|
124
124
|
const resizableRender = function (col, index) {
|
|
125
125
|
let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
126
|
+
let originalHeaderCellProps = arguments.length > 3 ? arguments[3] : undefined;
|
|
126
127
|
return Object.assign(Object.assign({}, col), {
|
|
127
|
-
onHeaderCell: column =>
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
128
|
+
onHeaderCell: column => {
|
|
129
|
+
return Object.assign(Object.assign({}, originalHeaderCellProps), {
|
|
130
|
+
width: column.width,
|
|
131
|
+
onResize: handleResize(column),
|
|
132
|
+
onResizeStart: handleResizeStart(column),
|
|
133
|
+
onResizeStop: handleResizeStop(column)
|
|
134
|
+
});
|
|
135
|
+
}
|
|
133
136
|
});
|
|
134
137
|
};
|
|
135
138
|
const assignResizableRender = function () {
|
|
136
139
|
let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
137
140
|
let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
138
141
|
return Array.isArray(columns) && columns.length ? columns.map((col, index) => {
|
|
139
|
-
|
|
142
|
+
var _a, _b;
|
|
143
|
+
const originalHeaderCellProps = (_b = (_a = col.onHeaderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, index, level)) !== null && _b !== void 0 ? _b : {};
|
|
144
|
+
Object.assign(col, resizableRender(col, index, level, originalHeaderCellProps));
|
|
140
145
|
const children = col[childrenColumnName];
|
|
141
146
|
if (Array.isArray(children) && children.length) {
|
|
142
147
|
col[childrenColumnName] = assignResizableRender(children, level + 1);
|
|
@@ -8,6 +8,27 @@ export interface BaseTypographyProps extends BaseProps {
|
|
|
8
8
|
delete?: boolean;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
icon?: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* ellipsis 用于设置截断相关参数.
|
|
13
|
+
* Ellipsis is used to set ellipsis related parameters.
|
|
14
|
+
* ellipsis 仅支持纯文本的截断,不支持 reactNode 等复杂类型,请确保 children 传入内容类型为 string.
|
|
15
|
+
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
|
|
16
|
+
* Please ensure that the content type of children is string.
|
|
17
|
+
* Semi 截断有两种策略, CSS 截断和 JS 截断。
|
|
18
|
+
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
|
|
19
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
20
|
+
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
|
|
21
|
+
* the JS ellipsis strategy is enabled
|
|
22
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
23
|
+
* - Otherwise, enable the CSS ellipsis strategy
|
|
24
|
+
*
|
|
25
|
+
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变, 容器尺寸不变的情况下,CSS 截断只涉及 1-2 次计算,js 截断基于二分法,可能涉及多次计算。
|
|
26
|
+
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
|
|
27
|
+
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
|
|
28
|
+
* 同时使用大量带有截断功能的 Typography 需注意性能消耗,如在 Table 中,可通过设置合理的页容量进行分页减少性能损耗
|
|
29
|
+
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
|
|
30
|
+
* you can reduce performance loss by setting a reasonable pageSize for paging
|
|
31
|
+
*/
|
|
11
32
|
ellipsis?: Ellipsis | boolean;
|
|
12
33
|
mark?: boolean;
|
|
13
34
|
underline?: boolean;
|
|
@@ -125,8 +146,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
|
|
|
125
146
|
* 获取文本的缩略class和style
|
|
126
147
|
*
|
|
127
148
|
* 截断类型:
|
|
128
|
-
* -
|
|
129
|
-
* -
|
|
149
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
150
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
130
151
|
* 相关变量
|
|
131
152
|
* props:
|
|
132
153
|
* - ellipsis:
|
|
@@ -142,8 +163,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
|
|
|
142
163
|
* Get the abbreviated class and style of the text
|
|
143
164
|
*
|
|
144
165
|
* Truncation type:
|
|
145
|
-
* -
|
|
146
|
-
* -
|
|
166
|
+
* -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
|
|
167
|
+
* -Otherwise, enable the CSS ellipsis strategy
|
|
147
168
|
* related variables
|
|
148
169
|
* props:
|
|
149
170
|
* -ellipsis:
|
|
@@ -218,8 +218,8 @@ class Base extends _react.Component {
|
|
|
218
218
|
* 获取文本的缩略class和style
|
|
219
219
|
*
|
|
220
220
|
* 截断类型:
|
|
221
|
-
* -
|
|
222
|
-
* -
|
|
221
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
222
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
223
223
|
* 相关变量
|
|
224
224
|
* props:
|
|
225
225
|
* - ellipsis:
|
|
@@ -235,8 +235,8 @@ class Base extends _react.Component {
|
|
|
235
235
|
* Get the abbreviated class and style of the text
|
|
236
236
|
*
|
|
237
237
|
* Truncation type:
|
|
238
|
-
* -
|
|
239
|
-
* -
|
|
238
|
+
* -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
|
|
239
|
+
* -Otherwise, enable the CSS ellipsis strategy
|
|
240
240
|
* related variables
|
|
241
241
|
* props:
|
|
242
242
|
* -ellipsis:
|
|
@@ -9,6 +9,27 @@ export interface ParagraphProps extends Omit<React.HTMLAttributes<HTMLParagraphE
|
|
|
9
9
|
copyable?: CopyableConfig | boolean;
|
|
10
10
|
delete?: boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* ellipsis 用于设置截断相关参数.
|
|
14
|
+
* Ellipsis is used to set ellipsis related parameters.
|
|
15
|
+
* ellipsis 仅支持纯文本的截断,不支持 reactNode 等复杂类型,请确保 children 传入内容类型为 string.
|
|
16
|
+
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
|
|
17
|
+
* Please ensure that the content type of children is string.
|
|
18
|
+
* Semi 截断有两种策略, CSS 截断和 JS 截断。
|
|
19
|
+
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
|
|
20
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
21
|
+
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
|
|
22
|
+
* the JS ellipsis strategy is enabled
|
|
23
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
24
|
+
* - Otherwise, enable the CSS ellipsis strategy
|
|
25
|
+
*
|
|
26
|
+
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变, 容器尺寸不变的情况下,CSS 截断只涉及 1-2 次计算,js 截断基于二分法,可能涉及多次计算。
|
|
27
|
+
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
|
|
28
|
+
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
|
|
29
|
+
* 同时使用大量带有截断功能的 Typography 需注意性能消耗,如在 Table 中,可通过设置合理的页容量进行分页减少性能损耗
|
|
30
|
+
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
|
|
31
|
+
* you can reduce performance loss by setting a reasonable pageSize for paging
|
|
32
|
+
*/
|
|
12
33
|
ellipsis?: Ellipsis | boolean;
|
|
13
34
|
link?: LinkType;
|
|
14
35
|
mark?: boolean;
|
|
@@ -11,6 +11,27 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, O
|
|
|
11
11
|
copyable?: CopyableConfig | boolean;
|
|
12
12
|
delete?: boolean;
|
|
13
13
|
disabled?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* ellipsis 用于设置截断相关参数.
|
|
16
|
+
* Ellipsis is used to set ellipsis related parameters.
|
|
17
|
+
* ellipsis 仅支持纯文本的截断,不支持 reactNode 等复杂类型,请确保 children 传入内容类型为 string.
|
|
18
|
+
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
|
|
19
|
+
* Please ensure that the content type of children is string.
|
|
20
|
+
* Semi 截断有两种策略, CSS 截断和 JS 截断。
|
|
21
|
+
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
|
|
22
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
23
|
+
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
|
|
24
|
+
* the JS ellipsis strategy is enabled
|
|
25
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
26
|
+
* - Otherwise, enable the CSS ellipsis strategy
|
|
27
|
+
*
|
|
28
|
+
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变, 容器尺寸不变的情况下,CSS 截断只涉及 1-2 次计算,js 截断基于二分法,可能涉及多次计算。
|
|
29
|
+
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
|
|
30
|
+
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
|
|
31
|
+
* 同时使用大量带有截断功能的 Typography 需注意性能消耗,如在 Table 中,可通过设置合理的页容量进行分页减少性能损耗
|
|
32
|
+
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
|
|
33
|
+
* you can reduce performance loss by setting a reasonable pageSize for paging
|
|
34
|
+
*/
|
|
14
35
|
ellipsis?: Ellipsis | boolean;
|
|
15
36
|
icon?: React.ReactNode | string;
|
|
16
37
|
link?: LinkType;
|
|
@@ -18,6 +18,27 @@ export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement
|
|
|
18
18
|
copyable?: CopyableConfig | boolean;
|
|
19
19
|
delete?: boolean;
|
|
20
20
|
disabled?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* ellipsis 用于设置截断相关参数.
|
|
23
|
+
* Ellipsis is used to set ellipsis related parameters.
|
|
24
|
+
* ellipsis 仅支持纯文本的截断,不支持 reactNode 等复杂类型,请确保 children 传入内容类型为 string.
|
|
25
|
+
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
|
|
26
|
+
* Please ensure that the content type of children is string.
|
|
27
|
+
* Semi 截断有两种策略, CSS 截断和 JS 截断。
|
|
28
|
+
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
|
|
29
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
30
|
+
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
|
|
31
|
+
* the JS ellipsis strategy is enabled
|
|
32
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
33
|
+
* - Otherwise, enable the CSS ellipsis strategy
|
|
34
|
+
*
|
|
35
|
+
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变, 容器尺寸不变的情况下,CSS 截断只涉及 1-2 次计算,js 截断基于二分法,可能涉及多次计算。
|
|
36
|
+
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
|
|
37
|
+
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
|
|
38
|
+
* 同时使用大量带有截断功能的 Typography 需注意性能消耗,如在 Table 中,可通过设置合理的页容量进行分页减少性能损耗
|
|
39
|
+
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
|
|
40
|
+
* you can reduce performance loss by setting a reasonable pageSize for paging
|
|
41
|
+
*/
|
|
21
42
|
ellipsis?: Ellipsis | boolean;
|
|
22
43
|
heading?: ArrayElement<typeof strings.HEADING>;
|
|
23
44
|
link?: LinkType;
|
|
@@ -37,7 +37,11 @@ class DropdownItem extends BaseComponent {
|
|
|
37
37
|
const events = {};
|
|
38
38
|
if (!disabled) {
|
|
39
39
|
['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
|
|
40
|
-
|
|
40
|
+
if (eventName === "onClick") {
|
|
41
|
+
events["onMouseDown"] = this.props[eventName];
|
|
42
|
+
} else {
|
|
43
|
+
events[eventName] = this.props[eventName];
|
|
44
|
+
}
|
|
41
45
|
});
|
|
42
46
|
}
|
|
43
47
|
let tick = null;
|
|
@@ -113,20 +113,25 @@ const ResizableTable = function () {
|
|
|
113
113
|
};
|
|
114
114
|
const resizableRender = function (col, index) {
|
|
115
115
|
let level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
116
|
+
let originalHeaderCellProps = arguments.length > 3 ? arguments[3] : undefined;
|
|
116
117
|
return Object.assign(Object.assign({}, col), {
|
|
117
|
-
onHeaderCell: column =>
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
118
|
+
onHeaderCell: column => {
|
|
119
|
+
return Object.assign(Object.assign({}, originalHeaderCellProps), {
|
|
120
|
+
width: column.width,
|
|
121
|
+
onResize: handleResize(column),
|
|
122
|
+
onResizeStart: handleResizeStart(column),
|
|
123
|
+
onResizeStop: handleResizeStop(column)
|
|
124
|
+
});
|
|
125
|
+
}
|
|
123
126
|
});
|
|
124
127
|
};
|
|
125
128
|
const assignResizableRender = function () {
|
|
126
129
|
let columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
127
130
|
let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
128
131
|
return Array.isArray(columns) && columns.length ? columns.map((col, index) => {
|
|
129
|
-
|
|
132
|
+
var _a, _b;
|
|
133
|
+
const originalHeaderCellProps = (_b = (_a = col.onHeaderCell) === null || _a === void 0 ? void 0 : _a.call(col, col, index, level)) !== null && _b !== void 0 ? _b : {};
|
|
134
|
+
Object.assign(col, resizableRender(col, index, level, originalHeaderCellProps));
|
|
130
135
|
const children = col[childrenColumnName];
|
|
131
136
|
if (Array.isArray(children) && children.length) {
|
|
132
137
|
col[childrenColumnName] = assignResizableRender(children, level + 1);
|
|
@@ -8,6 +8,27 @@ export interface BaseTypographyProps extends BaseProps {
|
|
|
8
8
|
delete?: boolean;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
icon?: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* ellipsis 用于设置截断相关参数.
|
|
13
|
+
* Ellipsis is used to set ellipsis related parameters.
|
|
14
|
+
* ellipsis 仅支持纯文本的截断,不支持 reactNode 等复杂类型,请确保 children 传入内容类型为 string.
|
|
15
|
+
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
|
|
16
|
+
* Please ensure that the content type of children is string.
|
|
17
|
+
* Semi 截断有两种策略, CSS 截断和 JS 截断。
|
|
18
|
+
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
|
|
19
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
20
|
+
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
|
|
21
|
+
* the JS ellipsis strategy is enabled
|
|
22
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
23
|
+
* - Otherwise, enable the CSS ellipsis strategy
|
|
24
|
+
*
|
|
25
|
+
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变, 容器尺寸不变的情况下,CSS 截断只涉及 1-2 次计算,js 截断基于二分法,可能涉及多次计算。
|
|
26
|
+
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
|
|
27
|
+
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
|
|
28
|
+
* 同时使用大量带有截断功能的 Typography 需注意性能消耗,如在 Table 中,可通过设置合理的页容量进行分页减少性能损耗
|
|
29
|
+
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
|
|
30
|
+
* you can reduce performance loss by setting a reasonable pageSize for paging
|
|
31
|
+
*/
|
|
11
32
|
ellipsis?: Ellipsis | boolean;
|
|
12
33
|
mark?: boolean;
|
|
13
34
|
underline?: boolean;
|
|
@@ -125,8 +146,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
|
|
|
125
146
|
* 获取文本的缩略class和style
|
|
126
147
|
*
|
|
127
148
|
* 截断类型:
|
|
128
|
-
* -
|
|
129
|
-
* -
|
|
149
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
150
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
130
151
|
* 相关变量
|
|
131
152
|
* props:
|
|
132
153
|
* - ellipsis:
|
|
@@ -142,8 +163,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
|
|
|
142
163
|
* Get the abbreviated class and style of the text
|
|
143
164
|
*
|
|
144
165
|
* Truncation type:
|
|
145
|
-
* -
|
|
146
|
-
* -
|
|
166
|
+
* -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
|
|
167
|
+
* -Otherwise, enable the CSS ellipsis strategy
|
|
147
168
|
* related variables
|
|
148
169
|
* props:
|
|
149
170
|
* -ellipsis:
|
|
@@ -209,8 +209,8 @@ export default class Base extends Component {
|
|
|
209
209
|
* 获取文本的缩略class和style
|
|
210
210
|
*
|
|
211
211
|
* 截断类型:
|
|
212
|
-
* -
|
|
213
|
-
* -
|
|
212
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
213
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
214
214
|
* 相关变量
|
|
215
215
|
* props:
|
|
216
216
|
* - ellipsis:
|
|
@@ -226,8 +226,8 @@ export default class Base extends Component {
|
|
|
226
226
|
* Get the abbreviated class and style of the text
|
|
227
227
|
*
|
|
228
228
|
* Truncation type:
|
|
229
|
-
* -
|
|
230
|
-
* -
|
|
229
|
+
* -When setting middle ellipsis (pos='middle')、expandable、suffix is not empty、copyable, the JS ellipsis strategy is enabled
|
|
230
|
+
* -Otherwise, enable the CSS ellipsis strategy
|
|
231
231
|
* related variables
|
|
232
232
|
* props:
|
|
233
233
|
* -ellipsis:
|
|
@@ -9,6 +9,27 @@ export interface ParagraphProps extends Omit<React.HTMLAttributes<HTMLParagraphE
|
|
|
9
9
|
copyable?: CopyableConfig | boolean;
|
|
10
10
|
delete?: boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* ellipsis 用于设置截断相关参数.
|
|
14
|
+
* Ellipsis is used to set ellipsis related parameters.
|
|
15
|
+
* ellipsis 仅支持纯文本的截断,不支持 reactNode 等复杂类型,请确保 children 传入内容类型为 string.
|
|
16
|
+
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
|
|
17
|
+
* Please ensure that the content type of children is string.
|
|
18
|
+
* Semi 截断有两种策略, CSS 截断和 JS 截断。
|
|
19
|
+
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
|
|
20
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
21
|
+
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
|
|
22
|
+
* the JS ellipsis strategy is enabled
|
|
23
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
24
|
+
* - Otherwise, enable the CSS ellipsis strategy
|
|
25
|
+
*
|
|
26
|
+
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变, 容器尺寸不变的情况下,CSS 截断只涉及 1-2 次计算,js 截断基于二分法,可能涉及多次计算。
|
|
27
|
+
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
|
|
28
|
+
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
|
|
29
|
+
* 同时使用大量带有截断功能的 Typography 需注意性能消耗,如在 Table 中,可通过设置合理的页容量进行分页减少性能损耗
|
|
30
|
+
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
|
|
31
|
+
* you can reduce performance loss by setting a reasonable pageSize for paging
|
|
32
|
+
*/
|
|
12
33
|
ellipsis?: Ellipsis | boolean;
|
|
13
34
|
link?: LinkType;
|
|
14
35
|
mark?: boolean;
|
|
@@ -11,6 +11,27 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, O
|
|
|
11
11
|
copyable?: CopyableConfig | boolean;
|
|
12
12
|
delete?: boolean;
|
|
13
13
|
disabled?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* ellipsis 用于设置截断相关参数.
|
|
16
|
+
* Ellipsis is used to set ellipsis related parameters.
|
|
17
|
+
* ellipsis 仅支持纯文本的截断,不支持 reactNode 等复杂类型,请确保 children 传入内容类型为 string.
|
|
18
|
+
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
|
|
19
|
+
* Please ensure that the content type of children is string.
|
|
20
|
+
* Semi 截断有两种策略, CSS 截断和 JS 截断。
|
|
21
|
+
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
|
|
22
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
23
|
+
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
|
|
24
|
+
* the JS ellipsis strategy is enabled
|
|
25
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
26
|
+
* - Otherwise, enable the CSS ellipsis strategy
|
|
27
|
+
*
|
|
28
|
+
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变, 容器尺寸不变的情况下,CSS 截断只涉及 1-2 次计算,js 截断基于二分法,可能涉及多次计算。
|
|
29
|
+
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
|
|
30
|
+
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
|
|
31
|
+
* 同时使用大量带有截断功能的 Typography 需注意性能消耗,如在 Table 中,可通过设置合理的页容量进行分页减少性能损耗
|
|
32
|
+
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
|
|
33
|
+
* you can reduce performance loss by setting a reasonable pageSize for paging
|
|
34
|
+
*/
|
|
14
35
|
ellipsis?: Ellipsis | boolean;
|
|
15
36
|
icon?: React.ReactNode | string;
|
|
16
37
|
link?: LinkType;
|
|
@@ -18,6 +18,27 @@ export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement
|
|
|
18
18
|
copyable?: CopyableConfig | boolean;
|
|
19
19
|
delete?: boolean;
|
|
20
20
|
disabled?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* ellipsis 用于设置截断相关参数.
|
|
23
|
+
* Ellipsis is used to set ellipsis related parameters.
|
|
24
|
+
* ellipsis 仅支持纯文本的截断,不支持 reactNode 等复杂类型,请确保 children 传入内容类型为 string.
|
|
25
|
+
* Ellipsis only supports ellipsis of plain text, and does not support complex types such as reactNode.
|
|
26
|
+
* Please ensure that the content type of children is string.
|
|
27
|
+
* Semi 截断有两种策略, CSS 截断和 JS 截断。
|
|
28
|
+
* Semi ellipsis has two strategies, CSS ellipsis and JS ellipsis.
|
|
29
|
+
* - 当设置中间截断(pos='middle')、可展开(expandable)、有后缀(suffix 非空)、可复制(copyable),启用 JS 截断策略
|
|
30
|
+
* - When setting middle ellipsis (pos='middle')、expandable、suffix is not empty string、copyable,
|
|
31
|
+
* the JS ellipsis strategy is enabled
|
|
32
|
+
* - 非以上场景,启用 CSS 截断策略
|
|
33
|
+
* - Otherwise, enable the CSS ellipsis strategy
|
|
34
|
+
*
|
|
35
|
+
* 通常来说 CSS 截断的性能优于 JS 截断。在 children 不变, 容器尺寸不变的情况下,CSS 截断只涉及 1-2 次计算,js 截断基于二分法,可能涉及多次计算。
|
|
36
|
+
* In general CSS ellipsis performs better than JS ellipsis. when the children and container size remain unchanged,
|
|
37
|
+
* CSS ellipsis only involves 1-2 calculations, while JS ellipsis is based on dichotomy and may require multiple calculations.
|
|
38
|
+
* 同时使用大量带有截断功能的 Typography 需注意性能消耗,如在 Table 中,可通过设置合理的页容量进行分页减少性能损耗
|
|
39
|
+
* Pay attention to performance consumption when using a large number of Typography with ellipsis. For example, in Table,
|
|
40
|
+
* you can reduce performance loss by setting a reasonable pageSize for paging
|
|
41
|
+
*/
|
|
21
42
|
ellipsis?: Ellipsis | boolean;
|
|
22
43
|
heading?: ArrayElement<typeof strings.HEADING>;
|
|
23
44
|
link?: LinkType;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@douyinfe/semi-ui",
|
|
3
|
-
"version": "2.42.
|
|
3
|
+
"version": "2.42.4",
|
|
4
4
|
"description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es/index.js",
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
"@dnd-kit/core": "^6.0.8",
|
|
21
21
|
"@dnd-kit/sortable": "^7.0.2",
|
|
22
22
|
"@dnd-kit/utilities": "^3.2.1",
|
|
23
|
-
"@douyinfe/semi-animation": "2.42.
|
|
24
|
-
"@douyinfe/semi-animation-react": "2.42.
|
|
25
|
-
"@douyinfe/semi-foundation": "2.42.
|
|
26
|
-
"@douyinfe/semi-icons": "2.42.
|
|
27
|
-
"@douyinfe/semi-illustrations": "2.42.
|
|
28
|
-
"@douyinfe/semi-theme-default": "2.42.
|
|
23
|
+
"@douyinfe/semi-animation": "2.42.4",
|
|
24
|
+
"@douyinfe/semi-animation-react": "2.42.4",
|
|
25
|
+
"@douyinfe/semi-foundation": "2.42.4",
|
|
26
|
+
"@douyinfe/semi-icons": "2.42.4",
|
|
27
|
+
"@douyinfe/semi-illustrations": "2.42.4",
|
|
28
|
+
"@douyinfe/semi-theme-default": "2.42.4",
|
|
29
29
|
"async-validator": "^3.5.0",
|
|
30
30
|
"classnames": "^2.2.6",
|
|
31
31
|
"copy-text-to-clipboard": "^2.1.1",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
],
|
|
76
76
|
"author": "",
|
|
77
77
|
"license": "MIT",
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "97b2682be0dc724811ddb918f36415692a23c89f",
|
|
79
79
|
"devDependencies": {
|
|
80
80
|
"@babel/plugin-proposal-decorators": "^7.15.8",
|
|
81
81
|
"@babel/plugin-transform-runtime": "^7.15.8",
|