antd-mobile 5.0.0-rc.2 → 5.0.0-rc.23

package/cjs/components/dropdown/dropdown.css

@@ -15,26 +15,27 @@
   cursor: pointer;
 }
 .adm-dropdown-item .adm-dropdown-item-title {
+  display: flex;
+  align-items: center;
   position: relative;
   max-width: 100%;
   font-size: 13px;
   padding: 12px;
 }
-.adm-dropdown-item .adm-dropdown-item-title span {
-  display: block;
+.adm-dropdown-item .adm-dropdown-item-title-text {
+  margin-right: 5px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.adm-dropdown-item .adm-dropdown-item-title:after {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border: 3px solid;
-  border-color: transparent transparent var(--adm-color-text) var(--adm-color-text);
-  transform: rotate(-45deg);
-  content: ' ';
+.adm-dropdown-item .adm-dropdown-item-title-arrow {
+  color: var(--adm-color-light);
+  font-size: 9px;
+  transform: rotate(0deg) translateY(-1px);
+  transition: all ease 0.2s;
+}
+.adm-dropdown-item .adm-dropdown-item-title-arrow-active {
+  transform: rotate(-180deg) translateY(-1px);
 }
 .adm-dropdown-item .adm-dropdown-item-title:active {
   opacity: 0.7;

package/cjs/components/dropdown/dropdown.d.ts

@@ -1,13 +1,24 @@
-import React, { FC } from 'react';
-import { DropdownItemProps } from './item';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type DropdownProps = {
     activeKey?: string | null;
     defaultActiveKey?: string | null;
     closeOnMaskClick?: boolean;
+    closeOnClickAway?: boolean;
     onChange?: (key: string | null) => void;
+    arrow?: React.ReactNode;
 } & NativeProps;
-declare const Dropdown: FC<DropdownProps> & {
-    Item: React.FC<DropdownItemProps>;
+export declare type DropdownRef = {
+    close: () => void;
 };
+declare const Dropdown: React.ForwardRefExoticComponent<{
+    activeKey?: string | null | undefined;
+    defaultActiveKey?: string | null | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    closeOnClickAway?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+    arrow?: React.ReactNode;
+} & NativeProps<never> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<DropdownRef>>;
 export default Dropdown;

package/cjs/components/dropdown/dropdown.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _ahooks = require("ahooks");
 
@@ -13,62 +13,54 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _popup = _interopRequireDefault(require("../popup"));
 
-var _item = _interopRequireWildcard(require("./item"));
+var _item = require("./item");
 
 var _nativeProps = require("../../utils/native-props");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-var _usePropsValue2 = require("../../utils/use-props-value");
+var _usePropsValue = require("../../utils/use-props-value");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _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 }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-dropdown";
-var defaultProps = {
+const classPrefix = `adm-dropdown`;
+const defaultProps = {
   defaultActiveKey: null,
-  closeOnMaskClick: true
+  closeOnMaskClick: true,
+  closeOnClickAway: false
 };
-
-var Dropdown = function Dropdown(p) {
-  var _classNames;
-
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-
-  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
+const Dropdown = (0, _react.forwardRef)((p, ref) => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)({
     value: props.activeKey,
     defaultValue: props.defaultActiveKey,
     onChange: props.onChange
-  }),
-      value = _usePropsValue[0],
-      setValue = _usePropsValue[1];
-
-  var navRef = (0, _react.useRef)(null);
-  var contentRef = (0, _react.useRef)(null); // 点击外部区域，关闭
+  });
+  const navRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null); // 点击外部区域，关闭
 
-  (0, _ahooks.useClickAway)(function () {
+  (0, _ahooks.useClickAway)(() => {
+    if (!props.closeOnClickAway) return;
     setValue(null);
   }, [navRef, contentRef]); // 计算 navs 的 top 值
 
-  var _useState = (0, _react.useState)(),
-      top = _useState[0],
-      setTop = _useState[1];
-
-  var containerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    var container = containerRef.current;
+  const [top, setTop] = (0, _react.useState)();
+  const containerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const container = containerRef.current;
     if (!container) return;
 
     if (value) {
-      var rect = container.getBoundingClientRect();
+      const rect = container.getBoundingClientRect();
       setTop(rect.bottom);
     }
   }, [value]);
 
-  var changeActive = function changeActive(key) {
+  const changeActive = key => {
     if (value === key) {
       setValue(null);
     } else {
@@ -76,60 +68,63 @@ var Dropdown = function Dropdown(p) {
     }
   };
 
-  var popupForceRender = false;
-  var items = [];
+  let popupForceRender = false;
+  const items = [];
 
-  var navs = _react["default"].Children.map(props.children, function (child) {
-    if ( /*#__PURE__*/_react["default"].isValidElement(child)) {
-      var childProps = Object.assign(Object.assign({}, child.props), {
-        onClick: function onClick() {
+  const navs = _react.default.Children.map(props.children, child => {
+    if (_react.default.isValidElement(child)) {
+      const childProps = Object.assign(Object.assign({}, child.props), {
+        onClick: () => {
           changeActive(child.key);
         },
-        active: child.key === value
+        active: child.key === value,
+        arrow: child.props.arrow === undefined ? props.arrow : child.props.arrow
       });
       items.push(child);
       if (child.props.forceRender) popupForceRender = true;
-      return /*#__PURE__*/(0, _react.cloneElement)(child, childProps);
+      return (0, _react.cloneElement)(child, childProps);
     } else {
       return child;
     }
   });
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-open"] = !!value, _classNames)),
+  (0, _react.useImperativeHandle)(ref, () => ({
+    close: () => {
+      setValue(null);
+    }
+  }), [setValue]);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, {
+      [`${classPrefix}-open`]: !!value
+    }),
     ref: containerRef
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-nav",
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-nav`,
     ref: navRef
-  }, navs), /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+  }, navs), _react.default.createElement(_popup.default, {
     visible: !!value,
     position: 'top',
-    className: classPrefix + "-popup",
-    maskClassName: classPrefix + "-popup-mask",
-    bodyClassName: classPrefix + "-popup-body",
+    className: `${classPrefix}-popup`,
+    maskClassName: `${classPrefix}-popup-mask`,
+    bodyClassName: `${classPrefix}-popup-body`,
     style: {
-      top: top
+      top
     },
     forceRender: popupForceRender,
-    onMaskClick: props.closeOnMaskClick ? function () {
+    onMaskClick: props.closeOnMaskClick ? () => {
       changeActive(null);
     } : undefined
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, _react.default.createElement("div", {
     ref: contentRef
-  }, items.map(function (item) {
-    var isActive = item.key === value;
-    return /*#__PURE__*/_react["default"].createElement(_item.ItemChildrenWrap, {
+  }, items.map(item => {
+    const isActive = item.key === value;
+    return _react.default.createElement(_item.ItemChildrenWrap, {
       key: item.key,
       active: isActive,
       forceRender: item.props.forceRender,
-      destroyOnClose: item.props.destroyOnClose,
-      onClick: item.props.closeOnContentClick ? function () {
-        changeActive(null);
-      } : undefined
+      destroyOnClose: item.props.destroyOnClose
     }, item.props.children);
   })))));
-};
-
-Dropdown.Item = _item["default"];
+});
 var _default = Dropdown;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/dropdown/index.d.ts

@@ -1,5 +1,17 @@
+/// <reference types="react" />
 import './dropdown.less';
-import Dropdown from './dropdown';
-export type { DropdownProps } from './dropdown';
+export type { DropdownProps, DropdownRef } from './dropdown';
 export type { DropdownItemProps } from './item';
-export default Dropdown;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    activeKey?: string | null | undefined;
+    defaultActiveKey?: string | null | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    closeOnClickAway?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+    arrow?: import("react").ReactNode;
+} & import("../../utils/native-props").NativeProps<never> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("./dropdown").DropdownRef>> & {
+    Item: import("react").FC<import("./item").DropdownItemProps>;
+};
+export default _default;

package/cjs/components/dropdown/index.js

@@ -3,13 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./dropdown.css");
 
 var _dropdown2 = _interopRequireDefault(require("./dropdown"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
 
-var _default = _dropdown2["default"];
-exports["default"] = _default;
+var _item = _interopRequireDefault(require("./item"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_dropdown2.default, {
+  Item: _item.default
+});
+
+exports.default = _default;

package/cjs/components/dropdown/item.d.ts

@@ -7,8 +7,8 @@ export declare type DropdownItemProps = {
     highlight?: boolean;
     forceRender?: boolean;
     destroyOnClose?: boolean;
-    closeOnContentClick?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    arrow?: React.ReactNode;
 } & NativeProps;
 declare const Item: FC<DropdownItemProps>;
 export default Item;

package/cjs/components/dropdown/item.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ItemChildrenWrap = void 0;
+exports.default = exports.ItemChildrenWrap = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -13,33 +13,43 @@ var _nativeProps = require("../../utils/native-props");
 
 var _useShouldRender = require("../../utils/use-should-render");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _antdMobileIcons = require("antd-mobile-icons");
 
-var classPrefix = "adm-dropdown-item";
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Item = function Item(props) {
-  var _classNames;
+const classPrefix = `adm-dropdown-item`;
 
-  var cls = (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = props.active, _classNames[classPrefix + "-highlight"] = props.highlight, _classNames));
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+const Item = props => {
+  const cls = (0, _classnames.default)(classPrefix, {
+    [`${classPrefix}-active`]: props.active,
+    [`${classPrefix}-highlight`]: props.highlight
+  });
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: cls,
     onClick: props.onClick
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-title"
-  }, /*#__PURE__*/_react["default"].createElement("span", null, props.title))));
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-title`
+  }, _react.default.createElement("span", {
+    className: `${classPrefix}-title-text`
+  }, props.title), _react.default.createElement("span", {
+    className: (0, _classnames.default)(`${classPrefix}-title-arrow`, {
+      [`${classPrefix}-title-arrow-active`]: props.active
+    })
+  }, props.arrow === undefined ? _react.default.createElement(_antdMobileIcons.DownFill, null) : props.arrow))));
 };
 
 var _default = Item;
-exports["default"] = _default;
-
-var ItemChildrenWrap = function ItemChildrenWrap(props) {
-  var _classNames2;
-
-  var _props$active = props.active,
-      active = _props$active === void 0 ? false : _props$active;
-  var shouldRender = (0, _useShouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
-  var cls = (0, _classnames["default"])(classPrefix + "-content", (_classNames2 = {}, _classNames2[classPrefix + "-content-hidden"] = !active, _classNames2));
-  return shouldRender ? /*#__PURE__*/_react["default"].createElement("div", {
+exports.default = _default;
+
+const ItemChildrenWrap = props => {
+  const {
+    active = false
+  } = props;
+  const shouldRender = (0, _useShouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
+  const cls = (0, _classnames.default)(`${classPrefix}-content`, {
+    [`${classPrefix}-content-hidden`]: !active
+  });
+  return shouldRender ? _react.default.createElement("div", {
     className: cls,
     onClick: props.onClick
   }, props.children) : null;

package/cjs/components/ellipsis/ellipsis.js

@@ -13,41 +13,32 @@ var _nativeProps = require("../../utils/native-props");
 
 var _useResizeEffect = require("../../utils/use-resize-effect");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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 _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; }
 
-var classPrefix = "adm-ellipsis";
-var defaultProps = {
+const classPrefix = `adm-ellipsis`;
+const defaultProps = {
   direction: 'end',
   rows: 1,
   expandText: '',
   collapseText: ''
 };
 
-var Ellipsis = function Ellipsis(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  var rootRef = (0, _react.useRef)(null);
+const Ellipsis = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const rootRef = (0, _react.useRef)(null);
+  const [ellipsised, setEllipsised] = (0, _react.useState)({});
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const [exceeded, setExceeded] = (0, _react.useState)(false);
 
-  var _useState = (0, _react.useState)({}),
-      ellipsised = _useState[0],
-      setEllipsised = _useState[1];
-
-  var _useState2 = (0, _react.useState)(false),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      exceeded = _useState3[0],
-      setExceeded = _useState3[1];
-
-  (0, _useResizeEffect.useResizeEffect)(function () {
-    var root = rootRef.current;
+  function calcEllipsised() {
+    const root = rootRef.current;
     if (!root) return;
-    var originStyle = window.getComputedStyle(root);
-    var container = document.createElement('div');
-    var styleNames = Array.prototype.slice.apply(originStyle);
-    styleNames.forEach(function (name) {
+    const originStyle = window.getComputedStyle(root);
+    const container = document.createElement('div');
+    const styleNames = Array.prototype.slice.apply(originStyle);
+    styleNames.forEach(name => {
       container.style.setProperty(name, originStyle.getPropertyValue(name));
     });
     container.style.position = 'fixed';
@@ -62,15 +53,19 @@ var Ellipsis = function Ellipsis(p) {
     container.style.webkitLineClamp = 'unset';
     container.style.webkitBoxOrient = 'unset';
     container.style.display = 'block';
-    var lineHeight = pxToNumber(originStyle.lineHeight);
-    var maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
+    const lineHeight = pxToNumber(originStyle.lineHeight);
+    const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
     container.innerText = props.content;
     document.body.appendChild(container);
 
     if (container.offsetHeight <= maxHeight) {
       setExceeded(false);
     } else {
-      var check = function check(left, right) {
+      setExceeded(true);
+      const end = props.content.length;
+      const actionText = expanded ? props.collapseText : props.expandText;
+
+      function check(left, right) {
         if (right - left <= 1) {
           if (props.direction === 'end') {
             return {
@@ -83,7 +78,7 @@ var Ellipsis = function Ellipsis(p) {
           }
         }
 
-        var middle = Math.round((left + right) / 2);
+        const middle = Math.round((left + right) / 2);
 
         if (props.direction === 'end') {
           container.innerText = props.content.slice(0, middle) + '...' + actionText;
@@ -104,9 +99,9 @@ var Ellipsis = function Ellipsis(p) {
             return check(middle, right);
           }
         }
-      };
+      }
 
-      var checkMiddle = function checkMiddle(leftPart, rightPart) {
+      function checkMiddle(leftPart, rightPart) {
         if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
           return {
             leading: props.content.slice(0, leftPart[0]) + '...',
@@ -114,8 +109,8 @@ var Ellipsis = function Ellipsis(p) {
           };
         }
 
-        var leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
-        var rightPartMiddle = Math.floor((rightPart[0] + rightPart[1]) / 2);
+        const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+        const rightPartMiddle = Math.floor((rightPart[0] + rightPart[1]) / 2);
         container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {
@@ -123,44 +118,44 @@ var Ellipsis = function Ellipsis(p) {
         } else {
           return checkMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
         }
-      };
-
-      setExceeded(true);
-      var end = props.content.length;
-      var actionText = expanded ? props.collapseText : props.expandText;
-      var middle = Math.floor((0 + end) / 2);
-
-      var _ellipsised = props.direction === 'middle' ? checkMiddle([0, middle], [middle, end]) : check(0, end);
+      }
 
-      setEllipsised(_ellipsised);
+      const middle = Math.floor((0 + end) / 2);
+      const ellipsised = props.direction === 'middle' ? checkMiddle([0, middle], [middle, end]) : check(0, end);
+      setEllipsised(ellipsised);
     }
 
     document.body.removeChild(container);
-  }, rootRef);
-  var expandActionElement = exceeded && props.expandText ? /*#__PURE__*/_react["default"].createElement("a", {
-    onClick: function onClick() {
+  }
+
+  (0, _useResizeEffect.useResizeEffect)(calcEllipsised, rootRef);
+  (0, _react.useLayoutEffect)(() => {
+    calcEllipsised();
+  }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
+  const expandActionElement = exceeded && props.expandText ? _react.default.createElement("a", {
+    onClick: () => {
       setExpanded(true);
     }
   }, props.expandText) : null;
-  var collapseActionElement = exceeded && props.expandText ? /*#__PURE__*/_react["default"].createElement("a", {
-    onClick: function onClick() {
+  const collapseActionElement = exceeded && props.expandText ? _react.default.createElement("a", {
+    onClick: () => {
       setExpanded(false);
     }
   }, props.collapseText) : null;
 
-  var renderContent = function renderContent() {
+  const renderContent = () => {
     if (!exceeded) {
       return props.content;
     }
 
     if (expanded) {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.content, collapseActionElement);
+      return _react.default.createElement(_react.default.Fragment, null, props.content, collapseActionElement);
     } else {
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
+      return _react.default.createElement(_react.default.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
     }
   };
 
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     ref: rootRef,
     className: classPrefix
   }, renderContent()));
@@ -170,6 +165,6 @@ exports.Ellipsis = Ellipsis;
 
 function pxToNumber(value) {
   if (!value) return 0;
-  var match = value.match(/^\d*(\.\d*)?/);
+  const match = value.match(/^\d*(\.\d*)?/);
   return match ? Number(match[0]) : 0;
 }

package/cjs/components/ellipsis/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./ellipsis.css");
 
 var _ellipsis2 = require("./ellipsis");
 
 var _default = _ellipsis2.Ellipsis;
-exports["default"] = _default;
+exports.default = _default;

package/cjs/components/empty/empty.js

@@ -15,27 +15,27 @@ var _nativeProps = require("../../utils/native-props");
 
 var _emptyIcon = _interopRequireDefault(require("../../assets/empty-icon.svg"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var classPrefix = "adm-empty";
-var defaultProps = {
-  image: _emptyIcon["default"]
+const classPrefix = `adm-empty`;
+const defaultProps = {
+  image: _emptyIcon.default
 };
 
-var Empty = function Empty(p) {
-  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  var imageNode = typeof props.image === 'string' ? /*#__PURE__*/_react["default"].createElement("img", {
-    className: classPrefix + "-image",
+const Empty = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const imageNode = typeof props.image === 'string' ? _react.default.createElement("img", {
+    className: `${classPrefix}-image`,
     style: props.imageStyle,
     src: props.image,
     alt: 'empty'
   }) : props.image;
-  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-image-container"
-  }, imageNode), props.description && /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(classPrefix + "-description")
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-image-container`
+  }, imageNode), props.description && _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}-description`)
   }, props.description)));
 };
 

package/cjs/components/empty/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 require("./empty.css");
 
 var _empty2 = require("./empty");
 
 var _default = _empty2.Empty;
-exports["default"] = _default;
+exports.default = _default;