@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.1-alpha.0

package/lib/cjs/trigger/index.js

@@ -4,25 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* eslint-disable @typescript-eslint/ban-types */
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 /**
  * `Trigger` is a HOC that will cover the inner of components which have popups
  */
@@ -30,23 +23,19 @@ class Trigger extends _react.default.PureComponent {
   render() {
     // eslint-disable-next-line no-unused-vars
     const _a = this.props,
-          {
-      triggerRender,
-      componentName
-    } = _a,
-          rest = __rest(_a, ["triggerRender", "componentName"]);
-
+      {
+        triggerRender,
+        componentName
+      } = _a,
+      rest = __rest(_a, ["triggerRender", "componentName"]);
     return triggerRender(Object.assign({}, rest));
   }
-
 }
-
 Trigger.propTypes = {
   /**
    * ({ value?: any, className?: string, style?: React.CSSProperties, ... }) => React.ReactNode
    */
   triggerRender: _propTypes.default.func.isRequired,
-
   /**
    * e.g. "AutoComplete", "DatePicker", ...
    */

package/lib/cjs/typography/base.d.ts

@@ -111,7 +111,6 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
     shouldTruncated: (rows: number) => boolean;
     showTooltip: () => boolean | ShowTooltip | {
         type: string;
-        opts: {};
     };
     getEllipsisState(): boolean;
     /**
@@ -170,7 +169,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
     renderCopy(): JSX.Element;
     renderIcon(): JSX.Element;
     renderContent(): JSX.Element;
-    renderTipWrapper(): JSX.Element;
+    renderTipWrapper(): string | number | boolean | React.ReactFragment | JSX.Element;
     render(): JSX.Element;
 }
 export {};

package/lib/cjs/typography/base.js

@@ -4,65 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
-
 var _isString2 = _interopRequireDefault(require("lodash/isString"));
-
 var _merge2 = _interopRequireDefault(require("lodash/merge"));
-
 var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
 var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _constants = require("@douyinfe/semi-foundation/lib/cjs/typography/constants");
-
 var _typography = _interopRequireDefault(require("./typography"));
-
 var _copyable = _interopRequireDefault(require("./copyable"));
-
 var _index = _interopRequireDefault(require("../tooltip/index"));
-
 var _index2 = _interopRequireDefault(require("../popover/index"));
-
 var _util = _interopRequireDefault(require("./util"));
-
 var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
-
 var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
-
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
 var _utils = require("../_utils");
-
 var _resizeObserver = _interopRequireDefault(require("../resizeObserver"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 const prefixCls = _constants.cssClasses.PREFIX;
 const ELLIPSIS_STR = '...';
-
 const wrapperDecorations = (props, content) => {
   const {
     mark,
@@ -73,21 +47,16 @@ const wrapperDecorations = (props, content) => {
     disabled
   } = props;
   let wrapped = content;
-
   const wrap = (isNeeded, tag) => {
     let wrapProps = {};
-
     if (!isNeeded) {
       return;
     }
-
     if (typeof isNeeded === 'object') {
       wrapProps = Object.assign({}, isNeeded);
     }
-
     wrapped = /*#__PURE__*/_react.default.createElement(tag, wrapProps, wrapped);
   };
-
   wrap(mark, 'mark');
   wrap(code, 'code');
   wrap(underline && !link, 'u');
@@ -96,21 +65,17 @@ const wrapperDecorations = (props, content) => {
   wrap(link, disabled ? 'span' : 'a');
   return wrapped;
 };
-
 class Base extends _react.Component {
   constructor(props) {
     super(props);
-
     this.onResize = () => {
       if (this.rafId) {
         window.cancelAnimationFrame(this.rafId);
       }
-
       this.rafId = window.requestAnimationFrame(this.getEllipsisState.bind(this));
-    }; // if it needs to use js overflowed:
+    };
+    // if it needs to use js overflowed:
     // 1. text is expandable 2. expandText need to be shown  3. has extra operation 4. text need to ellipse from mid
-
-
     this.canUseCSSEllipsis = () => {
       const {
         copyable
@@ -130,18 +95,15 @@ class Base extends _react.Component {
      * @param {Number} rows
      * @returns {Boolean}
      */
-
-
     this.shouldTruncated = rows => {
       if (!rows || rows < 1) {
         return false;
       }
-
       const updateOverflow = rows <= 1 ? this.wrapperRef.current.scrollWidth > this.wrapperRef.current.offsetWidth : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
       return updateOverflow;
     };
-
     this.showTooltip = () => {
+      var _a, _b;
       const {
         isOverflowed,
         isTruncated,
@@ -155,16 +117,12 @@ class Base extends _react.Component {
       const overflowed = !expanded && (isOverflowed || isTruncated);
       const noExpandText = !expandable && (0, _isUndefined2.default)(expandText);
       const show = noExpandText && overflowed && showTooltip;
-
       if (!show) {
         return show;
       }
-
       const defaultOpts = {
-        type: 'tooltip',
-        opts: {}
+        type: 'tooltip'
       };
-
       if (typeof showTooltip === 'object') {
         if (showTooltip.type && showTooltip.type.toLowerCase() === 'popover') {
           return (0, _merge2.default)({
@@ -174,20 +132,23 @@ class Base extends _react.Component {
               },
               showArrow: true
             }
-          }, showTooltip);
+          }, showTooltip, {
+            opts: {
+              className: (0, _classnames.default)({
+                [`${prefixCls}-ellipsis-popover`]: true,
+                [(_a = showTooltip === null || showTooltip === void 0 ? void 0 : showTooltip.opts) === null || _a === void 0 ? void 0 : _a.className]: Boolean((_b = showTooltip === null || showTooltip === void 0 ? void 0 : showTooltip.opts) === null || _b === void 0 ? void 0 : _b.className)
+              })
+            }
+          });
         }
-
         return Object.assign(Object.assign({}, defaultOpts), showTooltip);
       }
-
       return defaultOpts;
     };
     /**
      * Triggered when the fold button is clicked to save the latest expanded state
      * @param {Event} e
      */
-
-
     this.toggleOverflow = e => {
       const {
         onExpand,
@@ -198,23 +159,19 @@ class Base extends _react.Component {
         expanded
       } = this.state;
       onExpand && onExpand(!expanded, e);
-
       if (expandable && !expanded || collapsible && expanded) {
         this.setState({
           expanded: !expanded
         });
       }
     };
-
     this.getEllipsisOpt = () => {
       const {
         ellipsis
       } = this.props;
-
       if (!ellipsis) {
         return {};
       }
-
       const opt = Object.assign({
         rows: 1,
         expandable: false,
@@ -227,7 +184,6 @@ class Base extends _react.Component {
       }, typeof ellipsis === 'object' ? ellipsis : null);
       return opt;
     };
-
     this.renderExpandable = () => {
       const {
         expanded,
@@ -243,13 +199,11 @@ class Base extends _react.Component {
       const noExpandText = !expandable && (0, _isUndefined2.default)(expandText);
       const noCollapseText = !collapsible && (0, _isUndefined2.default)(collapseText);
       let text;
-
       if (!expanded && !noExpandText) {
         text = expandText;
       } else if (expanded && !noCollapseText) {
         text = collapseText;
       }
-
       if (!noExpandText || !noCollapseText) {
         return (
           /*#__PURE__*/
@@ -268,7 +222,6 @@ class Base extends _react.Component {
           }, text)
         );
       }
-
       return null;
     };
     /**
@@ -307,19 +260,16 @@ class Base extends _react.Component {
      *      -isTruncated, whether the text is truncated by js
      * @returns {Object}
      */
-
-
     this.getEllipsisStyle = () => {
       const {
         ellipsis,
         component
       } = this.props;
-
       if (!ellipsis) {
         return {
           ellipsisCls: '',
-          ellipsisStyle: {} // ellipsisAttr: {}
-
+          ellipsisStyle: {}
+          // ellipsisAttr: {}
         };
       }
 
@@ -348,7 +298,6 @@ class Base extends _react.Component {
         ellipsisStyle
       };
     };
-
     this.renderEllipsisText = opt => {
       const {
         suffix
@@ -361,14 +310,11 @@ class Base extends _react.Component {
         expanded,
         ellipsisContent
       } = this.state;
-
       if (expanded || !isTruncated) {
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, suffix && suffix.length ? suffix : null);
       }
-
       return /*#__PURE__*/_react.default.createElement("span", null, ellipsisContent, suffix);
     };
-
     this.state = {
       editable: false,
       copied: false,
@@ -385,20 +331,17 @@ class Base extends _react.Component {
     this.expandRef = /*#__PURE__*/_react.default.createRef();
     this.copyRef = /*#__PURE__*/_react.default.createRef();
   }
-
   componentDidMount() {
     if (this.props.ellipsis) {
       this.onResize();
     }
   }
-
   static getDerivedStateFromProps(props, prevState) {
     const {
       prevChildren
     } = prevState;
     const newState = {};
     newState.prevChildren = props.children;
-
     if (props.ellipsis && prevChildren !== props.children) {
       // reset ellipsis state if children update
       newState.isOverflowed = true;
@@ -406,27 +349,22 @@ class Base extends _react.Component {
       newState.expanded = false;
       newState.isTruncated = true;
     }
-
     return newState;
   }
-
   componentDidUpdate(prevProps) {
     // Render was based on outdated refs and needs to be rerun
     if (this.props.children !== prevProps.children) {
       this.forceUpdate();
-
       if (this.props.ellipsis) {
         this.onResize();
       }
     }
   }
-
   componentWillUnmount() {
     if (this.rafId) {
       window.cancelAnimationFrame(this.rafId);
     }
   }
-
   getEllipsisState() {
     const {
       rows,
@@ -435,85 +373,75 @@ class Base extends _react.Component {
     } = this.getEllipsisOpt();
     const {
       children
-    } = this.props; // wait until element mounted
-
+    } = this.props;
+    // wait until element mounted
     if (!this.wrapperRef || !this.wrapperRef.current) {
       this.onResize();
       return false;
     }
-
     const {
       expanded
     } = this.state;
-    const canUseCSSEllipsis = this.canUseCSSEllipsis(); // If children is null, css/js truncated flag isTruncate is false
-
+    const canUseCSSEllipsis = this.canUseCSSEllipsis();
+    // If children is null, css/js truncated flag isTruncate is false
     if ((0, _isNull2.default)(children)) {
       this.setState({
         isTruncated: false,
         isOverflowed: false
       });
       return undefined;
-    } // Currently only text truncation is supported, if there is non-text, 
+    }
+    // Currently only text truncation is supported, if there is non-text, 
     // both css truncation and js truncation should throw a warning
-
-
     (0, _warning.default)('children' in this.props && typeof children !== 'string', "[Semi Typography] Only children with pure text could be used with ellipsis at this moment.");
-
     if (!rows || rows < 0 || expanded) {
       return undefined;
     }
-
     if (canUseCSSEllipsis) {
-      const updateOverflow = this.shouldTruncated(rows); // isOverflowed needs to be updated to show tooltip when using css ellipsis
-
+      const updateOverflow = this.shouldTruncated(rows);
+      // isOverflowed needs to be updated to show tooltip when using css ellipsis
       this.setState({
         isOverflowed: updateOverflow,
         isTruncated: false
       });
       return undefined;
     }
-
     const extraNode = {
       expand: this.expandRef.current,
       copy: this.copyRef && this.copyRef.current
     };
-    const content = (0, _util.default)(this.wrapperRef.current, rows, // Perform type conversion on children to prevent component crash due to non-string type of children
+    const content = (0, _util.default)(this.wrapperRef.current, rows,
+    // Perform type conversion on children to prevent component crash due to non-string type of children
     String(children), extraNode, ELLIPSIS_STR, suffix, pos);
     this.setState({
+      isOverflowed: false,
       ellipsisContent: content,
       isTruncated: children !== content
     });
     return undefined;
   }
-
   renderOperations() {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderExpandable(), this.renderCopy());
   }
-
   renderCopy() {
     var _a;
-
     const {
       copyable,
       children
     } = this.props;
-
     if (!copyable) {
       return null;
-    } // If it is configured in the content of copyable, the copied content will be the content in copyable
-
-
+    }
+    // If it is configured in the content of copyable, the copied content will be the content in copyable
     const willCopyContent = (_a = copyable === null || copyable === void 0 ? void 0 : copyable.content) !== null && _a !== void 0 ? _a : children;
     let copyContent;
     let hasObject = false;
-
     if (Array.isArray(willCopyContent)) {
       copyContent = '';
       willCopyContent.forEach(value => {
         if (typeof value === 'object') {
           hasObject = true;
         }
-
         copyContent += String(value);
       });
     } else if (typeof willCopyContent !== 'object') {
@@ -522,7 +450,6 @@ class Base extends _react.Component {
       hasObject = true;
       copyContent = String(willCopyContent);
     }
-
     (0, _warning.default)(hasObject, 'Content to be copied in Typography is a object, it will case a [object Object] mistake when copy to clipboard.');
     const copyConfig = Object.assign({
       content: copyContent,
@@ -532,17 +459,14 @@ class Base extends _react.Component {
       forwardRef: this.copyRef
     }));
   }
-
   renderIcon() {
     const {
       icon,
       size
     } = this.props;
-
     if (!icon) {
       return null;
     }
-
     const iconSize = size === 'small' ? 'small' : 'default';
     return /*#__PURE__*/_react.default.createElement("span", {
       className: `${prefixCls}-icon`,
@@ -551,27 +475,26 @@ class Base extends _react.Component {
       size: iconSize
     }) : icon);
   }
-
   renderContent() {
     const _a = this.props,
-          {
-      component,
-      children,
-      className,
-      type,
-      spacing,
-      disabled,
-      style,
-      ellipsis,
-      icon,
-      size,
-      link,
-      heading,
-      weight
-    } = _a,
-          rest = __rest(_a, ["component", "children", "className", "type", "spacing", "disabled", "style", "ellipsis", "icon", "size", "link", "heading", "weight"]);
-
-    const textProps = (0, _omit2.default)(rest, ['strong', 'editable', 'mark', 'copyable', 'underline', 'code', // 'link',
+      {
+        component,
+        children,
+        className,
+        type,
+        spacing,
+        disabled,
+        style,
+        ellipsis,
+        icon,
+        size,
+        link,
+        heading,
+        weight
+      } = _a,
+      rest = __rest(_a, ["component", "children", "className", "type", "spacing", "disabled", "style", "ellipsis", "icon", "size", "link", "heading", "weight"]);
+    const textProps = (0, _omit2.default)(rest, ['strong', 'editable', 'mark', 'copyable', 'underline', 'code',
+    // 'link',
     'delete']);
     const iconNode = this.renderIcon();
     const ellipsisOpt = this.getEllipsisOpt();
@@ -597,7 +520,7 @@ class Base extends _react.Component {
       [`${prefixCls}-disabled`]: disabled,
       [`${prefixCls}-${spacing}`]: spacing,
       [`${prefixCls}-${heading}`]: isHeader,
-      [`${prefixCls}-${heading}-weight-${weight}`]: isHeader && isNaN(Number(weight))
+      [`${prefixCls}-${heading}-weight-${weight}`]: isHeader && weight && isNaN(Number(weight))
     });
     const textStyle = Object.assign(Object.assign({}, isNaN(Number(weight)) ? {} : {
       fontWeight: weight
@@ -609,27 +532,26 @@ class Base extends _react.Component {
       forwardRef: this.wrapperRef
     }, textProps), textNode, this.renderOperations());
   }
-
   renderTipWrapper() {
     const {
       children
     } = this.props;
     const showTooltip = this.showTooltip();
     const content = this.renderContent();
-
     if (showTooltip) {
       const {
         type,
-        opts
+        opts,
+        renderTooltip
       } = showTooltip;
-
-      if (type.toLowerCase() === 'popover') {
+      if ((0, _isFunction2.default)(renderTooltip)) {
+        return renderTooltip(children, content);
+      } else if (type.toLowerCase() === 'popover') {
         return /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({
           content: children,
           position: "top"
         }, opts), content);
       }
-
       return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({
         content: children,
         position: "top"
@@ -638,7 +560,6 @@ class Base extends _react.Component {
       return content;
     }
   }
-
   render() {
     const content = /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
       componentName: "Typography"
@@ -647,19 +568,15 @@ class Base extends _react.Component {
       this.collapseStr = locale.collapse;
       return this.renderTipWrapper();
     });
-
     if (this.props.ellipsis) {
       return /*#__PURE__*/_react.default.createElement(_resizeObserver.default, {
         onResize: this.onResize,
         observeParent: true
       }, content);
     }
-
     return content;
   }
-
 }
-
 exports.default = Base;
 Base.propTypes = {
   children: _propTypes.default.node,