@douyinfe/semi-ui 2.47.0-beta.0 → 2.48.0-beta.0
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 +3 -1
- package/dist/css/semi.min.css +1 -1
- package/dist/umd/semi-ui.js +71 -15
- 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/avatar/index.d.ts +4 -0
- package/lib/cjs/avatar/index.js +27 -5
- package/lib/cjs/avatar/interface.d.ts +1 -0
- package/lib/cjs/dropdown/dropdownItem.js +5 -1
- package/lib/cjs/slider/index.js +15 -2
- package/lib/cjs/table/HeadTable.js +2 -4
- package/lib/es/avatar/index.d.ts +4 -0
- package/lib/es/avatar/index.js +27 -5
- package/lib/es/avatar/interface.d.ts +1 -0
- package/lib/es/dropdown/dropdownItem.js +5 -1
- package/lib/es/slider/index.js +15 -2
- package/lib/es/table/HeadTable.js +2 -4
- package/package.json +8 -8
package/dist/umd/semi-ui.js
CHANGED
|
@@ -27299,8 +27299,27 @@ class AvatarFoundation extends foundation {
|
|
|
27299
27299
|
this.handleBlur = () => {
|
|
27300
27300
|
this._adapter.setFocusVisible(false);
|
|
27301
27301
|
};
|
|
27302
|
+
this.changeScale = () => {
|
|
27303
|
+
const {
|
|
27304
|
+
gap
|
|
27305
|
+
} = this.getProps();
|
|
27306
|
+
const node = this._adapter.getAvatarNode();
|
|
27307
|
+
const stringNode = node === null || node === void 0 ? void 0 : node.firstChild;
|
|
27308
|
+
const [nodeWidth, stringNodeWidth] = [(node === null || node === void 0 ? void 0 : node.offsetWidth) || 0, (stringNode === null || stringNode === void 0 ? void 0 : stringNode.offsetWidth) || 0];
|
|
27309
|
+
if (nodeWidth !== 0 && stringNodeWidth !== 0 && gap * 2 < nodeWidth) {
|
|
27310
|
+
const scale = nodeWidth - gap * 2 > stringNodeWidth ? 1 : (nodeWidth - gap * 2) / stringNodeWidth;
|
|
27311
|
+
this._adapter.setScale(scale);
|
|
27312
|
+
}
|
|
27313
|
+
};
|
|
27314
|
+
}
|
|
27315
|
+
init() {
|
|
27316
|
+
const {
|
|
27317
|
+
children
|
|
27318
|
+
} = this.getProps();
|
|
27319
|
+
if (typeof children === "string") {
|
|
27320
|
+
this.changeScale();
|
|
27321
|
+
}
|
|
27302
27322
|
}
|
|
27303
|
-
init() {}
|
|
27304
27323
|
destroy() {}
|
|
27305
27324
|
handleImgLoadError() {
|
|
27306
27325
|
const {
|
|
@@ -27399,8 +27418,12 @@ class Avatar extends BaseComponent {
|
|
|
27399
27418
|
})
|
|
27400
27419
|
};
|
|
27401
27420
|
const finalProps = clickable ? Object.assign(Object.assign({}, props), a11yFocusProps) : props;
|
|
27421
|
+
const stringStyle = {
|
|
27422
|
+
transform: `scale(${this.state.scale})`
|
|
27423
|
+
};
|
|
27402
27424
|
content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
|
|
27403
|
-
className: `${avatar_prefixCls}-content
|
|
27425
|
+
className: `${avatar_prefixCls}-content`,
|
|
27426
|
+
style: stringStyle
|
|
27404
27427
|
}, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", Object.assign({}, finalProps, {
|
|
27405
27428
|
"x-semi-prop": "children"
|
|
27406
27429
|
}), children));
|
|
@@ -27410,13 +27433,15 @@ class Avatar extends BaseComponent {
|
|
|
27410
27433
|
this.state = {
|
|
27411
27434
|
isImgExist: true,
|
|
27412
27435
|
hoverContent: '',
|
|
27413
|
-
focusVisible: false
|
|
27436
|
+
focusVisible: false,
|
|
27437
|
+
scale: 1
|
|
27414
27438
|
};
|
|
27415
27439
|
this.onEnter = this.onEnter.bind(this);
|
|
27416
27440
|
this.onLeave = this.onLeave.bind(this);
|
|
27417
27441
|
this.handleError = this.handleError.bind(this);
|
|
27418
27442
|
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
27419
27443
|
this.getContent = this.getContent.bind(this);
|
|
27444
|
+
this.avatarRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
|
|
27420
27445
|
}
|
|
27421
27446
|
get adapter() {
|
|
27422
27447
|
return Object.assign(Object.assign({}, super.adapter), {
|
|
@@ -27453,6 +27478,15 @@ class Avatar extends BaseComponent {
|
|
|
27453
27478
|
this.setState({
|
|
27454
27479
|
focusVisible
|
|
27455
27480
|
});
|
|
27481
|
+
},
|
|
27482
|
+
setScale: scale => {
|
|
27483
|
+
this.setState({
|
|
27484
|
+
scale
|
|
27485
|
+
});
|
|
27486
|
+
},
|
|
27487
|
+
getAvatarNode: () => {
|
|
27488
|
+
var _a;
|
|
27489
|
+
return (_a = this.avatarRef) === null || _a === void 0 ? void 0 : _a.current;
|
|
27456
27490
|
}
|
|
27457
27491
|
});
|
|
27458
27492
|
}
|
|
@@ -27480,6 +27514,9 @@ class Avatar extends BaseComponent {
|
|
|
27480
27514
|
});
|
|
27481
27515
|
};
|
|
27482
27516
|
}
|
|
27517
|
+
if (typeof this.props.children === "string" && this.props.children !== prevProps.children) {
|
|
27518
|
+
this.foundation.changeScale();
|
|
27519
|
+
}
|
|
27483
27520
|
}
|
|
27484
27521
|
componentWillUnmount() {
|
|
27485
27522
|
this.foundation.destroy();
|
|
@@ -27523,9 +27560,10 @@ class Avatar extends BaseComponent {
|
|
|
27523
27560
|
src,
|
|
27524
27561
|
srcSet,
|
|
27525
27562
|
style,
|
|
27526
|
-
alt
|
|
27563
|
+
alt,
|
|
27564
|
+
gap
|
|
27527
27565
|
} = _a,
|
|
27528
|
-
others = avatar_rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt"]);
|
|
27566
|
+
others = avatar_rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap"]);
|
|
27529
27567
|
const {
|
|
27530
27568
|
isImgExist,
|
|
27531
27569
|
hoverContent,
|
|
@@ -27549,7 +27587,8 @@ class Avatar extends BaseComponent {
|
|
|
27549
27587
|
onClick: onClick,
|
|
27550
27588
|
onMouseEnter: this.onEnter,
|
|
27551
27589
|
onMouseLeave: this.onLeave,
|
|
27552
|
-
role: 'listitem'
|
|
27590
|
+
role: 'listitem',
|
|
27591
|
+
ref: this.avatarRef
|
|
27553
27592
|
}), this.getContent(), hoverRender);
|
|
27554
27593
|
}
|
|
27555
27594
|
}
|
|
@@ -27557,6 +27596,7 @@ Avatar.defaultProps = {
|
|
|
27557
27596
|
size: 'medium',
|
|
27558
27597
|
color: 'grey',
|
|
27559
27598
|
shape: 'circle',
|
|
27599
|
+
gap: 3,
|
|
27560
27600
|
onClick: function_noop,
|
|
27561
27601
|
onMouseEnter: function_noop,
|
|
27562
27602
|
onMouseLeave: function_noop
|
|
@@ -27569,6 +27609,7 @@ Avatar.propTypes = {
|
|
|
27569
27609
|
hoverMask: (prop_types_default()).node,
|
|
27570
27610
|
className: (prop_types_default()).string,
|
|
27571
27611
|
style: (prop_types_default()).object,
|
|
27612
|
+
gap: (prop_types_default()).number,
|
|
27572
27613
|
imgAttr: (prop_types_default()).object,
|
|
27573
27614
|
src: (prop_types_default()).string,
|
|
27574
27615
|
srcSet: (prop_types_default()).string,
|
|
@@ -62664,7 +62705,11 @@ class DropdownItem extends BaseComponent {
|
|
|
62664
62705
|
if (!disabled) {
|
|
62665
62706
|
['onClick', 'onMouseEnter', 'onMouseLeave', 'onContextMenu'].forEach(eventName => {
|
|
62666
62707
|
if (eventName === "onClick") {
|
|
62667
|
-
events["onMouseDown"] =
|
|
62708
|
+
events["onMouseDown"] = e => {
|
|
62709
|
+
if (e.button === 0) {
|
|
62710
|
+
this.props[eventName](e);
|
|
62711
|
+
}
|
|
62712
|
+
};
|
|
62668
62713
|
} else {
|
|
62669
62714
|
events[eventName] = this.props[eventName];
|
|
62670
62715
|
}
|
|
@@ -76250,6 +76295,7 @@ class Slider extends BaseComponent {
|
|
|
76250
76295
|
});
|
|
76251
76296
|
const handleContents = !range ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(Tooltip, {
|
|
76252
76297
|
content: tipChildren.min,
|
|
76298
|
+
showArrow: this.props.showArrow,
|
|
76253
76299
|
position: "top",
|
|
76254
76300
|
trigger: "custom",
|
|
76255
76301
|
rePosKey: minPercent,
|
|
@@ -76448,7 +76494,7 @@ class Slider extends BaseComponent {
|
|
|
76448
76494
|
[`${slider_prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active'
|
|
76449
76495
|
});
|
|
76450
76496
|
const markPercent = (Number(mark) - min) / (max - min);
|
|
76451
|
-
|
|
76497
|
+
const dotDOM =
|
|
76452
76498
|
/*#__PURE__*/
|
|
76453
76499
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
76454
76500
|
external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
|
|
@@ -76458,11 +76504,17 @@ class Slider extends BaseComponent {
|
|
|
76458
76504
|
style: {
|
|
76459
76505
|
[stylePos]: `calc(${markPercent * 100}% - 2px)`
|
|
76460
76506
|
}
|
|
76461
|
-
})
|
|
76507
|
+
});
|
|
76508
|
+
return activeResult ? this.props.tooltipOnMark ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(Tooltip, {
|
|
76509
|
+
content: marks[mark]
|
|
76510
|
+
}, dotDOM) : dotDOM : null;
|
|
76462
76511
|
})) : null;
|
|
76463
76512
|
return labelContent;
|
|
76464
76513
|
};
|
|
76465
76514
|
this.renderLabel = () => {
|
|
76515
|
+
if (!this.props.showMarkLabel) {
|
|
76516
|
+
return null;
|
|
76517
|
+
}
|
|
76466
76518
|
const {
|
|
76467
76519
|
min,
|
|
76468
76520
|
max,
|
|
@@ -76791,6 +76843,7 @@ Slider.propTypes = {
|
|
|
76791
76843
|
// allowClear: PropTypes.bool,
|
|
76792
76844
|
defaultValue: prop_types_default().oneOfType([(prop_types_default()).number, (prop_types_default()).array]),
|
|
76793
76845
|
disabled: (prop_types_default()).bool,
|
|
76846
|
+
showMarkLabel: (prop_types_default()).bool,
|
|
76794
76847
|
included: (prop_types_default()).bool,
|
|
76795
76848
|
marks: (prop_types_default()).object,
|
|
76796
76849
|
max: (prop_types_default()).number,
|
|
@@ -76803,7 +76856,9 @@ Slider.propTypes = {
|
|
|
76803
76856
|
onAfterChange: (prop_types_default()).func,
|
|
76804
76857
|
onChange: (prop_types_default()).func,
|
|
76805
76858
|
onMouseUp: (prop_types_default()).func,
|
|
76859
|
+
tooltipOnMark: (prop_types_default()).bool,
|
|
76806
76860
|
tooltipVisible: (prop_types_default()).bool,
|
|
76861
|
+
showArrow: (prop_types_default()).bool,
|
|
76807
76862
|
style: (prop_types_default()).object,
|
|
76808
76863
|
className: (prop_types_default()).string,
|
|
76809
76864
|
showBoundary: (prop_types_default()).bool,
|
|
@@ -76814,10 +76869,13 @@ Slider.propTypes = {
|
|
|
76814
76869
|
Slider.defaultProps = {
|
|
76815
76870
|
// allowClear: false,
|
|
76816
76871
|
disabled: false,
|
|
76872
|
+
showMarkLabel: true,
|
|
76873
|
+
tooltipOnMark: false,
|
|
76817
76874
|
included: true,
|
|
76818
76875
|
max: 100,
|
|
76819
76876
|
min: 0,
|
|
76820
76877
|
range: false,
|
|
76878
|
+
showArrow: true,
|
|
76821
76879
|
step: 1,
|
|
76822
76880
|
tipFormatter: value => value,
|
|
76823
76881
|
vertical: false,
|
|
@@ -78888,9 +78946,9 @@ class TableFoundation extends foundation {
|
|
|
78888
78946
|
}, pagination);
|
|
78889
78947
|
if (!this._pagerIsControlled()) {
|
|
78890
78948
|
const total = get_default()(propPagination, 'total', dataSource.length);
|
|
78891
|
-
const pageSize = get_default()(propPagination, 'pageSize', pagination.pageSize);
|
|
78892
78949
|
const {
|
|
78893
|
-
currentPage
|
|
78950
|
+
currentPage,
|
|
78951
|
+
pageSize
|
|
78894
78952
|
} = pagination;
|
|
78895
78953
|
const realTotalPage = Math.ceil(total / pageSize);
|
|
78896
78954
|
pagination.total = total;
|
|
@@ -80500,9 +80558,6 @@ class HeadTable extends (external_root_React_commonjs2_react_commonjs_react_amd_
|
|
|
80500
80558
|
bodyHasScrollBar,
|
|
80501
80559
|
sticky
|
|
80502
80560
|
} = this.props;
|
|
80503
|
-
if (!showHeader) {
|
|
80504
|
-
return null;
|
|
80505
|
-
}
|
|
80506
80561
|
const Table = get_default()(components, 'header.outer', 'table');
|
|
80507
80562
|
const x = get_default()(scroll, 'x');
|
|
80508
80563
|
const headStyle = {};
|
|
@@ -80523,7 +80578,8 @@ class HeadTable extends (external_root_React_commonjs2_react_commonjs_react_amd_
|
|
|
80523
80578
|
onDidUpdate: onDidUpdate
|
|
80524
80579
|
}));
|
|
80525
80580
|
const headTableCls = classnames_default()(`${prefixCls}-header`, {
|
|
80526
|
-
[`${prefixCls}-header-sticky`]: sticky
|
|
80581
|
+
[`${prefixCls}-header-sticky`]: sticky,
|
|
80582
|
+
[`${prefixCls}-header-hidden`]: !showHeader
|
|
80527
80583
|
});
|
|
80528
80584
|
const stickyTop = get_default()(sticky, 'top', 0);
|
|
80529
80585
|
if (typeof stickyTop === 'number') {
|