@douyinfe/semi-ui 2.47.0 → 2.48.0-beta.0

package/dist/umd/semi-ui.js

@@ -27299,8 +27299,27 @@ class AvatarFoundation extends foundation {
     this.handleBlur = () => {
       this._adapter.setFocusVisible(false);
     };
+    this.changeScale = () => {
+      const {
+        gap
+      } = this.getProps();
+      const node = this._adapter.getAvatarNode();
+      const stringNode = node === null || node === void 0 ? void 0 : node.firstChild;
+      const [nodeWidth, stringNodeWidth] = [(node === null || node === void 0 ? void 0 : node.offsetWidth) || 0, (stringNode === null || stringNode === void 0 ? void 0 : stringNode.offsetWidth) || 0];
+      if (nodeWidth !== 0 && stringNodeWidth !== 0 && gap * 2 < nodeWidth) {
+        const scale = nodeWidth - gap * 2 > stringNodeWidth ? 1 : (nodeWidth - gap * 2) / stringNodeWidth;
+        this._adapter.setScale(scale);
+      }
+    };
+  }
+  init() {
+    const {
+      children
+    } = this.getProps();
+    if (typeof children === "string") {
+      this.changeScale();
+    }
   }
-  init() {}
   destroy() {}
   handleImgLoadError() {
     const {
@@ -27399,8 +27418,12 @@ class Avatar extends BaseComponent {
           })
         };
         const finalProps = clickable ? Object.assign(Object.assign({}, props), a11yFocusProps) : props;
+        const stringStyle = {
+          transform: `scale(${this.state.scale})`
+        };
         content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
-          className: `${avatar_prefixCls}-content`
+          className: `${avatar_prefixCls}-content`,
+          style: stringStyle
         }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", Object.assign({}, finalProps, {
           "x-semi-prop": "children"
         }), children));
@@ -27410,13 +27433,15 @@ class Avatar extends BaseComponent {
     this.state = {
       isImgExist: true,
       hoverContent: '',
-      focusVisible: false
+      focusVisible: false,
+      scale: 1
     };
     this.onEnter = this.onEnter.bind(this);
     this.onLeave = this.onLeave.bind(this);
     this.handleError = this.handleError.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.getContent = this.getContent.bind(this);
+    this.avatarRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createRef();
   }
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
@@ -27453,6 +27478,15 @@ class Avatar extends BaseComponent {
         this.setState({
           focusVisible
         });
+      },
+      setScale: scale => {
+        this.setState({
+          scale
+        });
+      },
+      getAvatarNode: () => {
+        var _a;
+        return (_a = this.avatarRef) === null || _a === void 0 ? void 0 : _a.current;
       }
     });
   }
@@ -27480,6 +27514,9 @@ class Avatar extends BaseComponent {
         });
       };
     }
+    if (typeof this.props.children === "string" && this.props.children !== prevProps.children) {
+      this.foundation.changeScale();
+    }
   }
   componentWillUnmount() {
     this.foundation.destroy();
@@ -27523,9 +27560,10 @@ class Avatar extends BaseComponent {
         src,
         srcSet,
         style,
-        alt
+        alt,
+        gap
       } = _a,
-      others = avatar_rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt"]);
+      others = avatar_rest(_a, ["shape", "children", "size", "color", "className", "hoverMask", "onClick", "imgAttr", "src", "srcSet", "style", "alt", "gap"]);
     const {
       isImgExist,
       hoverContent,
@@ -27549,7 +27587,8 @@ class Avatar extends BaseComponent {
       onClick: onClick,
       onMouseEnter: this.onEnter,
       onMouseLeave: this.onLeave,
-      role: 'listitem'
+      role: 'listitem',
+      ref: this.avatarRef
     }), this.getContent(), hoverRender);
   }
 }
@@ -27557,6 +27596,7 @@ Avatar.defaultProps = {
   size: 'medium',
   color: 'grey',
   shape: 'circle',
+  gap: 3,
   onClick: function_noop,
   onMouseEnter: function_noop,
   onMouseLeave: function_noop
@@ -27569,6 +27609,7 @@ Avatar.propTypes = {
   hoverMask: (prop_types_default()).node,
   className: (prop_types_default()).string,
   style: (prop_types_default()).object,
+  gap: (prop_types_default()).number,
   imgAttr: (prop_types_default()).object,
   src: (prop_types_default()).string,
   srcSet: (prop_types_default()).string,
@@ -76254,6 +76295,7 @@ class Slider extends BaseComponent {
       });
       const handleContents = !range ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(Tooltip, {
         content: tipChildren.min,
+        showArrow: this.props.showArrow,
         position: "top",
         trigger: "custom",
         rePosKey: minPercent,
@@ -76452,7 +76494,7 @@ class Slider extends BaseComponent {
           [`${slider_prefixCls}-dot-active`]: this.foundation.isMarkActive(Number(mark)) === 'active'
         });
         const markPercent = (Number(mark) - min) / (max - min);
-        return activeResult ?
+        const dotDOM =
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
@@ -76462,11 +76504,17 @@ class Slider extends BaseComponent {
           style: {
             [stylePos]: `calc(${markPercent * 100}% - 2px)`
           }
-        }) : null;
+        });
+        return activeResult ? this.props.tooltipOnMark ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(Tooltip, {
+          content: marks[mark]
+        }, dotDOM) : dotDOM : null;
       })) : null;
       return labelContent;
     };
     this.renderLabel = () => {
+      if (!this.props.showMarkLabel) {
+        return null;
+      }
       const {
         min,
         max,
@@ -76795,6 +76843,7 @@ Slider.propTypes = {
   // allowClear: PropTypes.bool,
   defaultValue: prop_types_default().oneOfType([(prop_types_default()).number, (prop_types_default()).array]),
   disabled: (prop_types_default()).bool,
+  showMarkLabel: (prop_types_default()).bool,
   included: (prop_types_default()).bool,
   marks: (prop_types_default()).object,
   max: (prop_types_default()).number,
@@ -76807,7 +76856,9 @@ Slider.propTypes = {
   onAfterChange: (prop_types_default()).func,
   onChange: (prop_types_default()).func,
   onMouseUp: (prop_types_default()).func,
+  tooltipOnMark: (prop_types_default()).bool,
   tooltipVisible: (prop_types_default()).bool,
+  showArrow: (prop_types_default()).bool,
   style: (prop_types_default()).object,
   className: (prop_types_default()).string,
   showBoundary: (prop_types_default()).bool,
@@ -76818,10 +76869,13 @@ Slider.propTypes = {
 Slider.defaultProps = {
   // allowClear: false,
   disabled: false,
+  showMarkLabel: true,
+  tooltipOnMark: false,
   included: true,
   max: 100,
   min: 0,
   range: false,
+  showArrow: true,
   step: 1,
   tipFormatter: value => value,
   vertical: false,
@@ -80504,9 +80558,6 @@ class HeadTable extends (external_root_React_commonjs2_react_commonjs_react_amd_
       bodyHasScrollBar,
       sticky
     } = this.props;
-    if (!showHeader) {
-      return null;
-    }
     const Table = get_default()(components, 'header.outer', 'table');
     const x = get_default()(scroll, 'x');
     const headStyle = {};
@@ -80527,7 +80578,8 @@ class HeadTable extends (external_root_React_commonjs2_react_commonjs_react_amd_
       onDidUpdate: onDidUpdate
     }));
     const headTableCls = classnames_default()(`${prefixCls}-header`, {
-      [`${prefixCls}-header-sticky`]: sticky
+      [`${prefixCls}-header-sticky`]: sticky,
+      [`${prefixCls}-header-hidden`]: !showHeader
     });
     const stickyTop = get_default()(sticky, 'top', 0);
     if (typeof stickyTop === 'number') {