tntd 3.0.0-beta.1 → 3.0.0-beta.2

package/es/drawer/drawer.js

@@ -1,13 +1,10 @@
-var __rest = (this && this.__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;
+var __rest = this && this.__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;
 };
 import { ConfigConsumer } from 'antd/es/config-provider';
 import { default as AntdDrawer } from 'antd/es/drawer';
@@ -16,50 +13,106 @@ import classNames from 'classnames';
 import React, { useEffect } from 'react';
 import { Button } from '../button';
 import Icon from '../icon';
-const DefaultFooter = ({ locale, onClose, onSubmit, okText, okType, cancelText, confirmLoading, okButtonProps, cancelButtonProps, }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, Object.assign({ onClick: onClose, style: { marginRight: 8 }, type: 'tertiary' }, cancelButtonProps), cancelText || (locale === null || locale === void 0 ? void 0 : locale.cancelText)),
-        React.createElement(Button, Object.assign({ onClick: onSubmit, type: okType, loading: confirmLoading }, okButtonProps), okText || (locale === null || locale === void 0 ? void 0 : locale.okText))));
+const DefaultFooter = ({
+  locale,
+  onClose,
+  onSubmit,
+  okText,
+  okType,
+  cancelText,
+  confirmLoading,
+  okButtonProps,
+  cancelButtonProps
+}) => {
+  return React.createElement(React.Fragment, null, React.createElement(Button, Object.assign({
+    onClick: onClose,
+    style: {
+      marginRight: 8
+    },
+    type: 'tertiary'
+  }, cancelButtonProps), cancelText || (locale === null || locale === void 0 ? void 0 : locale.cancelText)), React.createElement(Button, Object.assign({
+    onClick: onSubmit,
+    type: okType,
+    loading: confirmLoading
+  }, okButtonProps), okText || (locale === null || locale === void 0 ? void 0 : locale.okText)));
 };
-export const Drawer = (_a) => {
-    var { closable = true, className, footer, showFooter, onClose, onSubmit, okText = '', cancelText = '', locale, okType = 'primary', confirmLoading = false, okButtonProps = {}, cancelButtonProps = {}, clickOnBlankToClose = false } = _a, rest = __rest(_a, ["closable", "className", "footer", "showFooter", "onClose", "onSubmit", "okText", "cancelText", "locale", "okType", "confirmLoading", "okButtonProps", "cancelButtonProps", "clickOnBlankToClose"]);
-    const drawerDom = React.useRef(null);
-    useEffect(() => {
-        if (clickOnBlankToClose) {
-            const handleOutsideClick = (event) => {
-                const drawer = drawerDom.current;
-                const targetElement = event.target;
-                let isInDrawer = false;
-                if (drawer && targetElement) {
-                    isInDrawer = drawer.contains(targetElement) || targetElement === drawer;
-                }
-                drawerDom.current = null;
-                if (rest.visible && !isInDrawer && onClose) {
-                    onClose();
-                }
-            };
-            document.removeEventListener('click', handleOutsideClick);
-            document.addEventListener('click', handleOutsideClick);
-            return () => {
-                document.removeEventListener('click', handleOutsideClick);
-            };
+export const Drawer = _a => {
+  var {
+      closable = true,
+      className,
+      footer,
+      showFooter,
+      onClose,
+      onSubmit,
+      okText = '',
+      cancelText = '',
+      locale,
+      okType = 'primary',
+      confirmLoading = false,
+      okButtonProps = {},
+      cancelButtonProps = {},
+      clickOnBlankToClose = false
+    } = _a,
+    rest = __rest(_a, ["closable", "className", "footer", "showFooter", "onClose", "onSubmit", "okText", "cancelText", "locale", "okType", "confirmLoading", "okButtonProps", "cancelButtonProps", "clickOnBlankToClose"]);
+  const drawerDom = React.useRef(null);
+  useEffect(() => {
+    if (clickOnBlankToClose) {
+      const handleOutsideClick = event => {
+        const drawer = drawerDom.current;
+        const targetElement = event.target;
+        let isInDrawer = false;
+        if (drawer && targetElement) {
+          isInDrawer = drawer.contains(targetElement) || targetElement === drawer;
         }
-    }, [rest.visible, clickOnBlankToClose, onClose]);
-    return (React.createElement(ConfigConsumer, null, ({ getPrefixCls }) => {
-        const prefixCls = getPrefixCls('drawer');
-        return (React.createElement(LocaleReceiver, { componentName: "Drawer", defaultLocale: locale }, (locale) => {
-            return (React.createElement("div", { onClick: (event) => {
-                    drawerDom.current = event.target;
-                } },
-                React.createElement(AntdDrawer, Object.assign({ className: classNames(prefixCls, 'tnt-drawer', className, {
-                        [`${prefixCls}-contain-closable`]: closable !== false,
-                        [`${prefixCls}-footer`]: showFooter,
-                    }), closable: false, onClose: onClose, width: 480 }, rest),
-                    React.createElement(React.Fragment, null,
-                        closable !== false && (React.createElement(Icon, { type: "close", className: `${prefixCls}-close`, onClick: onClose })),
-                        rest.children,
-                        showFooter && (React.createElement("div", { className: `${prefixCls}-footer-style` }, showFooter && !footer ? (React.createElement(DefaultFooter, { confirmLoading: confirmLoading, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, okType: okType, locale: locale, okText: okText, cancelText: cancelText, onClose: onClose, onSubmit: onSubmit })) : (footer)))))));
-        }));
-    }));
-};
-//# sourceMappingURL=drawer.js.map
+        drawerDom.current = null;
+        if (rest.visible && !isInDrawer && onClose) {
+          onClose();
+        }
+      };
+      document.removeEventListener('click', handleOutsideClick);
+      document.addEventListener('click', handleOutsideClick);
+      return () => {
+        document.removeEventListener('click', handleOutsideClick);
+      };
+    }
+  }, [rest.visible, clickOnBlankToClose, onClose]);
+  return React.createElement(ConfigConsumer, null, ({
+    getPrefixCls
+  }) => {
+    const prefixCls = getPrefixCls('drawer');
+    return React.createElement(LocaleReceiver, {
+      componentName: "Drawer",
+      defaultLocale: locale
+    }, locale => {
+      return React.createElement("div", {
+        onClick: event => {
+          drawerDom.current = event.target;
+        }
+      }, React.createElement(AntdDrawer, Object.assign({
+        className: classNames(prefixCls, 'tnt-drawer', className, {
+          [`${prefixCls}-contain-closable`]: closable !== false,
+          [`${prefixCls}-footer`]: showFooter
+        }),
+        closable: false,
+        onClose: onClose,
+        width: 480
+      }, rest), React.createElement(React.Fragment, null, closable !== false && React.createElement(Icon, {
+        type: "close",
+        className: `${prefixCls}-close`,
+        onClick: onClose
+      }), rest.children, showFooter && React.createElement("div", {
+        className: `${prefixCls}-footer-style`
+      }, showFooter && !footer ? React.createElement(DefaultFooter, {
+        confirmLoading: confirmLoading,
+        okButtonProps: okButtonProps,
+        cancelButtonProps: cancelButtonProps,
+        okType: okType,
+        locale: locale,
+        okText: okText,
+        cancelText: cancelText,
+        onClose: onClose,
+        onSubmit: onSubmit
+      }) : footer))));
+    });
+  });
+};

package/es/drawer/drawer.less

@@ -0,0 +1,20 @@
+@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
+
+.tntd-drawer{
+    &.@{drawer-prefix-cls} {
+        .@{drawer-prefix-cls}-title {
+            font-size: calc(@font-size-lg + 2px);
+        }
+
+        .@{drawer-prefix-cls}-close {
+            color: fade(@text-color, 50%);;
+            top: -4px;
+        }
+
+        .@{drawer-prefix-cls}-contain-closable{
+            .@{drawer-prefix-cls}-header{
+                padding: 12px 36px 12px 20px;
+            }
+        }
+    }
+}

package/es/drawer/index.js

@@ -2,5 +2,4 @@ import './style';
 import { Drawer } from './drawer';
 import './index.less';
 export * from 'antd/es/drawer';
-export default Drawer;
-//# sourceMappingURL=index.js.map
+export default Drawer;

package/es/drawer/style/drawer.less

@@ -168,7 +168,7 @@
     padding: 0;
     color: @text-color-secondary;
     font-weight: 700;
-    font-size: @font-size-lg;
+    font-size: 20px;
     font-style: normal;
     line-height: 56px;
     text-align: center;
@@ -180,7 +180,9 @@
     cursor: pointer;
     transition: color @animation-duration-slow;
     text-rendering: auto;
-
+    .tntd-anticon {
+      font-size: 20px;
+    }
     &:focus,
     &:hover {
       color: @icon-color-hover;

package/es/drawer/style/index.js

@@ -1,5 +1,4 @@
 // deps-lint-skip: empty
 import '../../style/index.less';
 import './index.less';
-import '../index.less';
-//# sourceMappingURL=index.js.map
+import '../index.less';

package/es/dropdown/index.js

@@ -1,5 +1,4 @@
 import Dropdown from 'antd/es/dropdown';
 import './style';
 export * from 'antd/es/dropdown';
-export default Dropdown;
-//# sourceMappingURL=index.js.map
+export default Dropdown;

package/es/dropdown/style/index.js

@@ -1,5 +1,4 @@
 import '../../style/index.less';
 import './index.less';
 // style dependencies
-import '../../button/style';
-//# sourceMappingURL=index.js.map
+import '../../button/style';

package/es/dropdown/style/index.less

@@ -102,7 +102,8 @@
       > span > .anticon:first-child {
         min-width: 12px;
         margin-right: 8px;
-        font-size: @font-size-sm;
+        // font-size: @font-size-sm;
+        font-size: 16px;
       }
 
       > a {

package/es/ellipsis/Svg/CopySVG.js

@@ -1,17 +1,64 @@
 import React from 'react';
-export default (props) => {
-    return (React.createElement("svg", Object.assign({ width: "16px", height: "16px", viewBox: "0 0 16 16" }, props),
-        React.createElement("g", { id: "\u5168\u5BB6\u6876\u89C6\u89C9\u65B9\u6848\u4F18\u5316", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
-            React.createElement("g", { id: "\u5DE5\u4F5C\u53F01", transform: "translate(-730.000000, -299.000000)" },
-                React.createElement("g", { id: "\u5206\u7EC4-6", transform: "translate(240.000000, 96.000000)" },
-                    React.createElement("g", { id: "\u7F16\u7EC4-18", transform: "translate(0.000000, 171.000000)" },
-                        React.createElement("g", { id: "\u590D\u5236", transform: "translate(490.000000, 32.000000)" },
-                            React.createElement("rect", { id: "\u77E9\u5F62", fill: "#D8D8D8", opacity: "0", x: "0", y: "0", width: "16", height: "16" }),
-                            React.createElement("g", { id: "\u7F16\u7EC4-5", transform: "translate(2.223389, 1.330322)", stroke: "#1e90ff", strokeLinecap: "round", strokeWidth: "1.2" },
-                                React.createElement("polygon", { id: "\u8DEF\u5F84", strokeLinejoin: "round", points: "2 11.3333333 11.3333333 11.3333333 11.3333333 4 7.66666667 -8.8817842e-15 2 -8.8817842e-15" }),
-                                React.createElement("polyline", { id: "\u8DEF\u5F84", strokeLinejoin: "round", points: "7.66666667 0 7.66666667 4 11.3333333 4" }),
-                                React.createElement("polyline", { id: "\u8DEF\u5F84", strokeLinejoin: "round", points: "0 5.33333333 0 13.3333333 7 13.3333333" }),
-                                React.createElement("line", { x1: "4", y1: "5.33333333", x2: "5.33333333", y2: "5.33333333", id: "\u8DEF\u5F84" }),
-                                React.createElement("line", { x1: "4", y1: "8", x2: "8", y2: "8", id: "\u8DEF\u5F84" })))))))));
-};
-//# sourceMappingURL=CopySVG.js.map
+export default (props => {
+  return React.createElement("svg", Object.assign({
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 16 16"
+  }, props), React.createElement("g", {
+    id: "\u5168\u5BB6\u6876\u89C6\u89C9\u65B9\u6848\u4F18\u5316",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, React.createElement("g", {
+    id: "\u5DE5\u4F5C\u53F01",
+    transform: "translate(-730.000000, -299.000000)"
+  }, React.createElement("g", {
+    id: "\u5206\u7EC4-6",
+    transform: "translate(240.000000, 96.000000)"
+  }, React.createElement("g", {
+    id: "\u7F16\u7EC4-18",
+    transform: "translate(0.000000, 171.000000)"
+  }, React.createElement("g", {
+    id: "\u590D\u5236",
+    transform: "translate(490.000000, 32.000000)"
+  }, React.createElement("rect", {
+    id: "\u77E9\u5F62",
+    fill: "#D8D8D8",
+    opacity: "0",
+    x: "0",
+    y: "0",
+    width: "16",
+    height: "16"
+  }), React.createElement("g", {
+    id: "\u7F16\u7EC4-5",
+    transform: "translate(2.223389, 1.330322)",
+    stroke: "#1e90ff",
+    strokeLinecap: "round",
+    strokeWidth: "1.2"
+  }, React.createElement("polygon", {
+    id: "\u8DEF\u5F84",
+    strokeLinejoin: "round",
+    points: "2 11.3333333 11.3333333 11.3333333 11.3333333 4 7.66666667 -8.8817842e-15 2 -8.8817842e-15"
+  }), React.createElement("polyline", {
+    id: "\u8DEF\u5F84",
+    strokeLinejoin: "round",
+    points: "7.66666667 0 7.66666667 4 11.3333333 4"
+  }), React.createElement("polyline", {
+    id: "\u8DEF\u5F84",
+    strokeLinejoin: "round",
+    points: "0 5.33333333 0 13.3333333 7 13.3333333"
+  }), React.createElement("line", {
+    x1: "4",
+    y1: "5.33333333",
+    x2: "5.33333333",
+    y2: "5.33333333",
+    id: "\u8DEF\u5F84"
+  }), React.createElement("line", {
+    x1: "4",
+    y1: "8",
+    x2: "8",
+    y2: "8",
+    id: "\u8DEF\u5F84"
+  }))))))));
+});

package/es/ellipsis/Svg/TickSVG.js

@@ -1,12 +1,42 @@
 import React from 'react';
-export default (props) => {
-    return (React.createElement("svg", Object.assign({ width: "17px", height: "16px", viewBox: "0 0 17 16" }, props),
-        React.createElement("g", { id: "\u5168\u5BB6\u6876\u89C6\u89C9\u65B9\u6848\u4F18\u5316", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
-            React.createElement("g", { id: "\u5DE5\u4F5C\u53F01", transform: "translate(-754.000000, -299.000000)" },
-                React.createElement("g", { id: "\u5206\u7EC4-6", transform: "translate(240.000000, 96.000000)" },
-                    React.createElement("g", { id: "\u7F16\u7EC4-18", transform: "translate(0.000000, 171.000000)" },
-                        React.createElement("g", { id: "\u590D\u5236\u6210\u529F", transform: "translate(514.500000, 32.000000)" },
-                            React.createElement("rect", { id: "\u77E9\u5F62", fillOpacity: "0.01", fill: "#FFFFFF", fillRule: "nonzero", x: "0", y: "0", width: "16", height: "16" }),
-                            React.createElement("polyline", { id: "\u8DEF\u5F84", stroke: "#07C790", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", points: "14.3333333 3.66666667 5.625 12.3333333 1.66666667 8.39393333" }))))))));
-};
-//# sourceMappingURL=TickSVG.js.map
+export default (props => {
+  return React.createElement("svg", Object.assign({
+    width: "17px",
+    height: "16px",
+    viewBox: "0 0 17 16"
+  }, props), React.createElement("g", {
+    id: "\u5168\u5BB6\u6876\u89C6\u89C9\u65B9\u6848\u4F18\u5316",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, React.createElement("g", {
+    id: "\u5DE5\u4F5C\u53F01",
+    transform: "translate(-754.000000, -299.000000)"
+  }, React.createElement("g", {
+    id: "\u5206\u7EC4-6",
+    transform: "translate(240.000000, 96.000000)"
+  }, React.createElement("g", {
+    id: "\u7F16\u7EC4-18",
+    transform: "translate(0.000000, 171.000000)"
+  }, React.createElement("g", {
+    id: "\u590D\u5236\u6210\u529F",
+    transform: "translate(514.500000, 32.000000)"
+  }, React.createElement("rect", {
+    id: "\u77E9\u5F62",
+    fillOpacity: "0.01",
+    fill: "#FFFFFF",
+    fillRule: "nonzero",
+    x: "0",
+    y: "0",
+    width: "16",
+    height: "16"
+  }), React.createElement("polyline", {
+    id: "\u8DEF\u5F84",
+    stroke: "#07C790",
+    strokeWidth: "1.2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    points: "14.3333333 3.66666667 5.625 12.3333333 1.66666667 8.39393333"
+  })))))));
+});

package/es/ellipsis/index.js

@@ -11,109 +11,146 @@ import CopySVG from './Svg/CopySVG';
 import TickSVG from './Svg/TickSVG';
 import './index.less';
 const tolerance = 0; // In px. Depends on the font you are using
-const isEllipsisActive = (e) => {
-    var _a, _b;
-    if (e.offsetWidth === e.scrollWidth && e.offsetHeight === e.scrollHeight) {
-        let styleStr = 'overflow:visible; ';
-        if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.parentNode) === null || _a === void 0 ? void 0 : _a.getAttribute('style')) === null || _b === void 0 ? void 0 : _b.includes('width'))) {
-            styleStr += 'max-width:100%;';
-        }
-        e.parentNode.setAttribute('style', styleStr);
-        e.setAttribute("style", 'overflow:inherit');
+const isEllipsisActive = e => {
+  var _a, _b;
+  if (e.offsetWidth === e.scrollWidth && e.offsetHeight === e.scrollHeight) {
+    let styleStr = 'overflow:visible; ';
+    if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.parentNode) === null || _a === void 0 ? void 0 : _a.getAttribute('style')) === null || _b === void 0 ? void 0 : _b.includes('width'))) {
+      styleStr += 'max-width:100%;';
     }
-    else {
-        e.setAttribute("style", "");
-    }
-    return e.offsetWidth + tolerance < e.scrollWidth || e.offsetHeight < e.scrollHeight;
+    e.parentNode.setAttribute('style', styleStr);
+    e.setAttribute("style", 'overflow:inherit');
+  } else {
+    e.setAttribute("style", "");
+  }
+  return e.offsetWidth + tolerance < e.scrollWidth || e.offsetHeight < e.scrollHeight;
 };
-export default (props) => {
-    let { _popover = props.Popover, // `Popover` or `Tooltip` ?
-    title, // in most cases for `Tooltip`
-    content, // in most cases for `Popover`
-    className, style, widthLimit, // width trigger value
-    _lines = props.lines !== 1 && props.lines, // number or lines, default 1 line;
-    children, // children Node
-    emptyText, // default: null
-    _copyable = props.copyable, // copy function
-    prefix, // 前缀dom
-    suffix, // 后缀dom
+export default (props => {
+  let {
+    _popover = props.Popover,
+    // `Popover` or `Tooltip` ?
+    title,
+    // in most cases for `Tooltip`
+    content,
+    // in most cases for `Popover`
+    className,
+    style,
+    widthLimit,
+    // width trigger value
+    _lines = props.lines !== 1 && props.lines,
+    // number or lines, default 1 line;
+    children,
+    // children Node
+    emptyText,
+    // default: null
+    _copyable = props.copyable,
+    // copy function
+    prefix,
+    // 前缀dom
+    suffix,
+    // 后缀dom
     needRefresh = true // select.options的情况下不要刷新
-     } = props;
-    const [renderId, setRenderId] = useState(1);
-    // allow visible or not state
-    const [flag, setFlag] = useState(true);
-    // visible[Tooltip/Popover] state
-    const [tipVisible, setTipVisible] = useState(false);
-    // copy animation state
-    const [hasCopy, setHasCopy] = useState(false);
-    const [lineHeight, setLineHeight] = useState();
-    const elementRef = useRef();
-    const computeElement = () => {
-        elementRef.current && isEllipsisActive(elementRef.current)
-            ? setFlag(true)
-            : (setFlag(false), setTipVisible(false));
-        if (elementRef.current) {
-            setLineHeight(getComputedStyle(elementRef.current, null).getPropertyValue('line-height'));
-        }
-    };
-    useLayoutEffect(() => {
-        if (needRefresh) {
-            setRenderId(id => id + 1);
-        }
-        else {
-            if (renderId < 2) {
-                setRenderId(id => id + 1);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [title, needRefresh, content, children]);
-    useEffect(() => {
-        computeElement();
-    }, [renderId]);
-    useEffect(() => {
-        window.addEventListener("resize", computeElement);
-        return () => {
-            window.removeEventListener('resize', computeElement);
-        };
-    }, []);
-    // original Node
-    const inner = typeof children === 'string' ? children : _popover ? content : title;
-    // for className
-    const getClassName = () => {
-        return `overflow min-width-0 ${_lines ? 'ellipsis-wrap' : 'ellipsis-nowrap'} ${className || ''}`;
-    };
-    // Tooltip.trigger(default 'hover') ==trigger==> onVisibleChange(visible)
-    const handleVisibleChange = (visible) => {
-        // const { onVisibleChange } = props;
-        // onVisibleChange(visible);
-        flag && setTipVisible(visible);
-    };
-    // onClick Copy Button
-    const handleCopy = (innerText) => {
-        copy(innerText);
-        setHasCopy(!hasCopy);
-        setTimeout(() => {
-            setHasCopy(false);
-        }, 1000);
-    };
-    const renderNode = () => {
-        const popoverNode = (React.createElement(Popover, Object.assign({}, props, { content: content || children, visible: tipVisible, onVisibleChange: (visible) => handleVisibleChange(visible) }),
-            React.createElement("div", { className: className, style: { WebkitLineClamp: _lines }, ref: elementRef }, children || content)));
-        const tooltipNode = (React.createElement(Tooltip, Object.assign({}, props, { title: title || children, visible: tipVisible, onVisibleChange: (visible) => handleVisibleChange(visible) }),
-            React.createElement("div", { className: className, style: { WebkitLineClamp: _lines }, ref: elementRef }, children || title)));
-        return _popover ? popoverNode : tooltipNode;
+  } = props;
+  const [renderId, setRenderId] = useState(1);
+  // allow visible or not state
+  const [flag, setFlag] = useState(true);
+  // visible[Tooltip/Popover] state
+  const [tipVisible, setTipVisible] = useState(false);
+  // copy animation state
+  const [hasCopy, setHasCopy] = useState(false);
+  const [lineHeight, setLineHeight] = useState();
+  const elementRef = useRef();
+  const computeElement = () => {
+    elementRef.current && isEllipsisActive(elementRef.current) ? setFlag(true) : (setFlag(false), setTipVisible(false));
+    if (elementRef.current) {
+      setLineHeight(getComputedStyle(elementRef.current, null).getPropertyValue('line-height'));
+    }
+  };
+  useLayoutEffect(() => {
+    if (needRefresh) {
+      setRenderId(id => id + 1);
+    } else {
+      if (renderId < 2) {
+        setRenderId(id => id + 1);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [title, needRefresh, content, children]);
+  useEffect(() => {
+    computeElement();
+  }, [renderId]);
+  useEffect(() => {
+    window.addEventListener("resize", computeElement);
+    return () => {
+      window.removeEventListener('resize', computeElement);
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "tntd-ellipsis", style: Object.assign(Object.assign({}, style), { maxWidth: widthLimit }) },
-            prefix && prefix,
-            React.createElement("div", { className: getClassName(), key: renderId }, inner ? renderNode() : emptyText),
-            suffix && suffix,
-            inner && _copyable && lineHeight && (React.createElement("div", { className: "svg-button", style: {
-                    height: lineHeight,
-                }, onClick: () => handleCopy(elementRef.current.innerText) }, !hasCopy ? (React.createElement(CopySVG, { style: {
-                    height: lineHeight,
-                } })) : (React.createElement(TickSVG, { style: {
-                    height: lineHeight,
-                } })))))));
-};
-//# sourceMappingURL=index.js.map
+  }, []);
+  // original Node
+  const inner = typeof children === 'string' ? children : _popover ? content : title;
+  // for className
+  const getClassName = () => {
+    return `overflow min-width-0 ${_lines ? 'ellipsis-wrap' : 'ellipsis-nowrap'} ${className || ''}`;
+  };
+  // Tooltip.trigger(default 'hover') ==trigger==> onVisibleChange(visible)
+  const handleVisibleChange = visible => {
+    // const { onVisibleChange } = props;
+    // onVisibleChange(visible);
+    flag && setTipVisible(visible);
+  };
+  // onClick Copy Button
+  const handleCopy = innerText => {
+    copy(innerText);
+    setHasCopy(!hasCopy);
+    setTimeout(() => {
+      setHasCopy(false);
+    }, 1000);
+  };
+  const renderNode = () => {
+    const popoverNode = React.createElement(Popover, Object.assign({}, props, {
+      content: content || children,
+      visible: tipVisible,
+      onVisibleChange: visible => handleVisibleChange(visible)
+    }), React.createElement("div", {
+      className: className,
+      style: {
+        WebkitLineClamp: _lines
+      },
+      ref: elementRef
+    }, children || content));
+    const tooltipNode = React.createElement(Tooltip, Object.assign({}, props, {
+      title: title || children,
+      visible: tipVisible,
+      onVisibleChange: visible => handleVisibleChange(visible)
+    }), React.createElement("div", {
+      className: className,
+      style: {
+        WebkitLineClamp: _lines
+      },
+      ref: elementRef
+    }, children || title));
+    return _popover ? popoverNode : tooltipNode;
+  };
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "tntd-ellipsis",
+    style: Object.assign(Object.assign({}, style), {
+      maxWidth: widthLimit
+    })
+  }, prefix && prefix, React.createElement("div", {
+    className: getClassName(),
+    key: renderId
+  }, inner ? renderNode() : emptyText), suffix && suffix, inner && _copyable && lineHeight && React.createElement("div", {
+    className: "svg-button",
+    style: {
+      height: lineHeight
+    },
+    onClick: () => handleCopy(elementRef.current.innerText)
+  }, !hasCopy ? React.createElement(CopySVG, {
+    style: {
+      height: lineHeight
+    }
+  }) : React.createElement(TickSVG, {
+    style: {
+      height: lineHeight
+    }
+  }))));
+});