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

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,6 +4,7 @@ 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"));
@@ -102,6 +103,7 @@ class Base extends _react.Component {
       return updateOverflow;
     };
     this.showTooltip = () => {
+      var _a, _b;
       const {
         isOverflowed,
         isTruncated,
@@ -119,8 +121,7 @@ class Base extends _react.Component {
         return show;
       }
       const defaultOpts = {
-        type: 'tooltip',
-        opts: {}
+        type: 'tooltip'
       };
       if (typeof showTooltip === 'object') {
         if (showTooltip.type && showTooltip.type.toLowerCase() === 'popover') {
@@ -131,7 +132,14 @@ 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);
       }
@@ -406,6 +414,7 @@ class Base extends _react.Component {
     // 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
     });
@@ -532,9 +541,12 @@ class Base extends _react.Component {
     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"

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { PopoverProps } from '../popover';
 import { TooltipProps } from '../tooltip';
 import { ArrayElement } from '../_base/base';
@@ -7,6 +7,7 @@ export type EllipsisPos = 'end' | 'middle';
 export type ShowTooltip = {
     type?: string;
     opts?: Partial<PopoverProps> & Partial<TooltipProps>;
+    renderTooltip?: (content: TooltipProps['content'], children: ReactNode) => ReactNode;
 };
 export type Ellipsis = {
     collapseText?: string;

package/lib/es/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/es/typography/base.js

@@ -1,3 +1,4 @@
+import _isFunction from "lodash/isFunction";
 import _isNull from "lodash/isNull";
 import _isString from "lodash/isString";
 import _merge from "lodash/merge";
@@ -93,6 +94,7 @@ export default class Base extends Component {
       return updateOverflow;
     };
     this.showTooltip = () => {
+      var _a, _b;
       const {
         isOverflowed,
         isTruncated,
@@ -110,8 +112,7 @@ export default class Base extends Component {
         return show;
       }
       const defaultOpts = {
-        type: 'tooltip',
-        opts: {}
+        type: 'tooltip'
       };
       if (typeof showTooltip === 'object') {
         if (showTooltip.type && showTooltip.type.toLowerCase() === 'popover') {
@@ -122,7 +123,14 @@ export default class Base extends Component {
               },
               showArrow: true
             }
-          }, showTooltip);
+          }, showTooltip, {
+            opts: {
+              className: cls({
+                [`${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);
       }
@@ -397,6 +405,7 @@ export default class Base extends Component {
     // 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
     });
@@ -523,9 +532,12 @@ export default class Base extends Component {
     if (showTooltip) {
       const {
         type,
-        opts
+        opts,
+        renderTooltip
       } = showTooltip;
-      if (type.toLowerCase() === 'popover') {
+      if (_isFunction(renderTooltip)) {
+        return renderTooltip(children, content);
+      } else if (type.toLowerCase() === 'popover') {
         return /*#__PURE__*/React.createElement(Popover, Object.assign({
           content: children,
           position: "top"

package/lib/es/typography/interface.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { PopoverProps } from '../popover';
 import { TooltipProps } from '../tooltip';
 import { ArrayElement } from '../_base/base';
@@ -7,6 +7,7 @@ export type EllipsisPos = 'end' | 'middle';
 export type ShowTooltip = {
     type?: string;
     opts?: Partial<PopoverProps> & Partial<TooltipProps>;
+    renderTooltip?: (content: TooltipProps['content'], children: ReactNode) => ReactNode;
 };
 export type Ellipsis = {
     collapseText?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.36.0",
+    "version": "2.36.1-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.36.0",
-        "@douyinfe/semi-animation-react": "2.36.0",
-        "@douyinfe/semi-foundation": "2.36.0",
-        "@douyinfe/semi-icons": "2.36.0",
-        "@douyinfe/semi-illustrations": "2.36.0",
-        "@douyinfe/semi-theme-default": "2.36.0",
+        "@douyinfe/semi-animation": "2.36.1-alpha.0",
+        "@douyinfe/semi-animation-react": "2.36.1-alpha.0",
+        "@douyinfe/semi-foundation": "2.36.1-alpha.0",
+        "@douyinfe/semi-icons": "2.36.1-alpha.0",
+        "@douyinfe/semi-illustrations": "2.36.1-alpha.0",
+        "@douyinfe/semi-theme-default": "2.36.1-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "597a4a6279411ed623d2072f1bcde3f2f3983985",
+    "gitHead": "fd127e225a36521b18f4c4f57f18163864d99cd2",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",