@arco-design/mobile-react 2.19.0

package/umd/dropdown-menu/type.d.ts

@@ -0,0 +1,167 @@
+import { CSSProperties, ReactNode } from 'react';
+import { OptionsItem, DropdownCommonProps } from '../dropdown';
+export type { OptionsItem, DropdownCommonProps };
+export interface CascadeOptions extends OptionsItem {
+    /**
+     * 级联选择的下一级内容
+     * @en The next level content of the cascade selection
+     */
+    children?: OptionsItem[];
+}
+export interface DropdownMenuBasicProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 初始被选择的选择器的序号
+     * @en The number of the selector that is initially selected
+     */
+    defaultSelectIndex?: number;
+    /**
+     * (受控) 被选择的选择器的序号
+     * @en The selected number of selector (controlled)
+     */
+    selectIndex?: number;
+    /**
+     * 自定义选择器
+     * @en Custom selector
+     */
+    renderSelectLabel?: (op: OptionsItem, index: number) => ReactNode;
+    /**
+     * 选择器禁用状态
+     * @en Selector disabled state
+     */
+    disabled?: boolean[];
+    /**
+     * 选择器的说明
+     * @en Description of selectors
+     */
+    selectTips?: string[];
+    /**
+     * 当选中的选择器改变的时候触发的回调函数
+     * @en Callback when the selected selector changes
+     */
+    onSelectChange?: (selectIndex: number) => void;
+    /**
+     * 选择器右侧的图标
+     * @en Icon to the right of the selector
+     */
+    icon?: ReactNode;
+    /**
+     * 初始状态,下拉框状态
+     * @en Initial dropdown state
+     */
+    defaultShowDropdown?: boolean;
+    /**
+     * 可选受控，组件挂载时下拉框的状态
+     * @en Optionally controlled, the state of the dropdown box when the component is mounted
+     */
+    showDropdown?: boolean;
+    /**
+     * 下拉框展示状态改变时触发的回调函数
+     * @en Callback when displayed status of drop-down box changes
+     */
+    onDropdownChange?: (dropdown: boolean, selectIndex?: number) => void;
+    /**
+     * 获得下拉框的容器
+     * @en Get the dropdown box's container
+     */
+    getContainer?: () => HTMLDivElement;
+    /**
+     * 选择后是否收起面板，仅单选有效
+     * @en Whether to close the panel after selection, only single selection is valid
+     * @default true
+     */
+    chooseAndClose?: boolean;
+    /**
+     * 取消选择
+     * @en Callback for cancelling selection
+     */
+    onCancel?: () => void;
+    /**
+     * 自定义下拉框元素
+     * @en Custom dropdown element
+     */
+    children?: ReactNode;
+    /**
+     * dropdown参数
+     * @en Dropdown parameter
+     */
+    extraForDropdown?: DropdownCommonProps;
+}
+export interface SingleOptionProps {
+    /**
+     * 是否支持多选
+     * @en Whether to support multiple selection
+     * @default false
+     */
+    multiple?: false;
+    /**
+     * 下拉框展示的选择项，其中级联选项仅单选支持
+     * @en The options displayed in the dropdown box, in which the cascade option only supports single selection
+     *  */
+    options: string[] | OptionsItem[][] | CascadeOptions[];
+    /**
+     * 初始选择项
+     * @en initial selection item
+     *  */
+    defaultValues?: number[];
+    /**
+     * (受控) 每个选择器选中的项
+     * @en (Controlled) The item selected by each selector
+     *  */
+    values?: number[];
+    /**
+     * 点击选项时触发的回调函数
+     * @en Callback when clicking option
+     *  */
+    onOptionClick?: (value: number, item: OptionsItem, selectIndex?: number) => void;
+    /**
+     * 选项改变时触发的回调函数
+     * @en Callback when options change
+     *  */
+    onOptionChange?: (value: number, item: OptionsItem, selectIndex?: number) => void;
+    /**
+     * 所有选择器选项总值改变时的回调函数
+     * @en Callback when the total value of all selector options changes
+     *  */
+    onValuesChange?: (values: number[]) => void;
+    /**
+     * 格式化传入的options
+     * @en Format the input options
+     *  */
+    getFormattedOptions?: (options: SingleOptionProps['options'], values?: number[]) => {
+        formattedOptions: OptionsItem[][];
+        formattedValue: number[];
+    };
+}
+export interface MultipleOptionProps {
+    multiple: true;
+    options: string[] | OptionsItem[][];
+    defaultValues?: number[][];
+    values?: number[][];
+    onOptionClick?: (selected: boolean, val: number, item: OptionsItem, selectIndex?: number) => void;
+    onOptionChange?: (vals: number[], item: OptionsItem, selectIndex?: number) => void;
+    onValuesChange?: (values: number[][]) => void;
+    getFormattedOptions?: (options: SingleOptionProps['options'], values?: number[][]) => {
+        formattedOptions: OptionsItem[][];
+        formattedValue: number[][];
+    };
+}
+export declare type OptionProps = SingleOptionProps | MultipleOptionProps;
+export declare type DropdownMenuProps = DropdownMenuBasicProps & OptionProps;
+export declare type ValueType = NonNullable<OptionProps['values']>;
+export interface DropdownMenuRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/umd/dropdown-menu/type.js

@@ -0,0 +1,17 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.type = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
+  "use strict";
+
+  _exports.__esModule = true;
+});

package/umd/ellipsis/components/js-ellipsis.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { JsEllipsisProps, JsEllipsisRef } from '../type';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<JsEllipsisProps, "text" | "ellipsis" | "maxHeight" | "prefixCls" | "ellipsisNode" | "collapseNode" | "endExcludes" | "reflowOnResize" | "onReflow" | "onEllipsisNodeClick" | "onCollapseNodeClick" | "maxLine" | "dangerouslyUseInnerHTML"> & React.RefAttributes<JsEllipsisRef>>>;
+export default _default;

package/umd/ellipsis/components/js-ellipsis.js

@@ -0,0 +1,240 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "resize-observer-polyfill", "../utils/dom"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("resize-observer-polyfill"), require("../utils/dom"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.resizeObserverPolyfill, global.dom);
+    global.jsEllipsis = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _resizeObserverPolyfill, _dom) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _react = _interopRequireWildcard(_react);
+  _resizeObserverPolyfill = _interopRequireDefault(_resizeObserverPolyfill);
+
+  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 _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 JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var prefixCls = props.prefixCls,
+        text = props.text,
+        ellipsis = props.ellipsis,
+        dangerouslyUseInnerHTML = props.dangerouslyUseInnerHTML,
+        _props$maxLine = props.maxLine,
+        maxLine = _props$maxLine === void 0 ? 1 : _props$maxLine,
+        maxHeight = props.maxHeight,
+        ellipsisNode = props.ellipsisNode,
+        collapseNode = props.collapseNode,
+        _props$endExcludes = props.endExcludes,
+        endExcludes = _props$endExcludes === void 0 ? [] : _props$endExcludes,
+        reflowOnResize = props.reflowOnResize,
+        onReflow = props.onReflow,
+        onEllipsisNodeClick = props.onEllipsisNodeClick,
+        onCollapseNodeClick = props.onCollapseNodeClick;
+    var truncating = (0, _react.useRef)(false);
+    var domRef = (0, _react.useRef)(null);
+    var textRef = (0, _react.useRef)(null);
+    var ellipsisRef = (0, _react.useRef)(null);
+    var lineHeightRef = (0, _react.useRef)(0);
+    var setCurLineHeight = (0, _react.useCallback)(function () {
+      if (domRef.current) {
+        lineHeightRef.current = (0, _dom.getLineHeight)(domRef.current);
+      }
+    }, []);
+    (0, _react.useEffect)(function () {
+      setCurLineHeight();
+    }, []);
+
+    function handleOnReflow(isEllipsis, result) {
+      if (onReflow && typeof onReflow === 'function') {
+        onReflow(isEllipsis, result);
+      }
+    }
+
+    function truncateText(container, textContainer, max) {
+      var content = textContainer.textContent || '';
+      var currentText = '';
+      var l = 0;
+      var r = content.length - 1; // Binary truncate text until get the max limit fragment of text.
+
+      while (l < r) {
+        var m = Math.floor((l + r) / 2);
+
+        if (l === m) {
+          break;
+        }
+
+        var temp = content.slice(l, m);
+        textContainer.innerText = currentText + temp;
+
+        var _container$getBoundin = container.getBoundingClientRect(),
+            height = _container$getBoundin.height;
+
+        if (height > max) {
+          r = m;
+        } else {
+          currentText += temp;
+          l = m;
+        }
+      } // Remove the exclude char at the end of the content.
+
+
+      while (endExcludes.includes(currentText[currentText.length - 1])) {
+        currentText = currentText.slice(0, -1);
+      } // Callback after reflow.
+
+
+      handleOnReflow(true, currentText);
+      textContainer.innerText = currentText;
+    }
+
+    function truncateHTML(container, textContainer, max) {
+      // only enter this function when container overflow.
+      var children = textContainer.childNodes;
+
+      if (children.length === 1) {
+        var node = children[0];
+
+        if (node.nodeType === Node.TEXT_NODE) {
+          truncateText(container, textContainer, max);
+        } else {
+          var html = node.innerHTML; // clear content to determine whether the empty node can be placed.
+
+          node.innerHTML = '';
+
+          var _container$getBoundin2 = container.getBoundingClientRect(),
+              height = _container$getBoundin2.height;
+
+          if (height > max) {
+            // return after remove the node, if overflow with empty node.
+            textContainer.removeChild(node);
+            handleOnReflow(true, textContainer.innerHTML);
+            return;
+          }
+
+          node.innerHTML = html; // recursive truncate node
+
+          truncateHTML(container, node, max);
+        }
+      } else {
+        var nodes = [].slice.call(children);
+        textContainer.innerHTML = '';
+        var i = 0; // find the critical node
+
+        while (i < nodes.length) {
+          textContainer.appendChild(nodes[i]);
+
+          var _container$getBoundin3 = container.getBoundingClientRect(),
+              _height = _container$getBoundin3.height;
+
+          if (_height > max) {
+            break;
+          }
+
+          i++;
+        }
+
+        if (textContainer.childNodes[i]) {
+          // truncate the critical node
+          truncateHTML(container, textContainer.childNodes[i], max);
+        }
+      }
+    } // reflow when the main props change.
+
+
+    var reflow = (0, _react.useCallback)(function () {
+      if (!domRef.current || !textRef.current || !ellipsisRef.current || truncating.current) {
+        return;
+      }
+
+      ellipsisRef.current.style.display = 'none';
+
+      if (dangerouslyUseInnerHTML) {
+        textRef.current.innerHTML = text;
+      } else {
+        textRef.current.innerText = text;
+      }
+
+      if (!ellipsis) {
+        return;
+      }
+
+      var _domRef$current$getBo = domRef.current.getBoundingClientRect(),
+          height = _domRef$current$getBo.height;
+
+      var max = isNaN(Number(maxHeight)) ? lineHeightRef.current * maxLine : Number(maxHeight);
+
+      if (height <= max) {
+        handleOnReflow(false, text);
+        return;
+      }
+
+      truncating.current = true;
+      ellipsisRef.current.style.display = 'inline';
+
+      if (dangerouslyUseInnerHTML) {
+        // wrap the text children node with span element.
+        (0, _dom.wrapTextChildNodesWithSpan)(textRef.current, prefixCls + "-js-content-text");
+        truncateHTML(domRef.current, textRef.current, max);
+      } else {
+        truncateText(domRef.current, textRef.current, max);
+      }
+
+      truncating.current = false;
+    }, [text, ellipsis, dangerouslyUseInnerHTML, maxLine, maxHeight, ellipsisNode, endExcludes]);
+    (0, _react.useEffect)(function () {
+      reflow();
+    }, [reflow]);
+    var observerRef = (0, _react.useRef)(null); // Observe resize event of container if reflowOnResize is true.
+
+    (0, _react.useEffect)(function () {
+      if (domRef.current && reflowOnResize) {
+        if (!observerRef.current && ellipsis) {
+          observerRef.current = new _resizeObserverPolyfill.default(reflow);
+          observerRef.current.observe(domRef.current);
+        }
+      }
+
+      return function () {
+        // Remove observer when component unmounted.
+        if (observerRef.current && domRef.current) {
+          observerRef.current.unobserve(domRef.current);
+          observerRef.current = null;
+        }
+      };
+    }, [ellipsis]);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current,
+        reflow: reflow
+      };
+    }, [reflow]);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: domRef,
+      className: prefixCls + "-js"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      ref: textRef,
+      className: prefixCls + "-js-content"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      ref: ellipsisRef,
+      className: prefixCls + "-js-content-ellipsis",
+      onClick: onEllipsisNodeClick
+    }, ellipsisNode), !ellipsis && collapseNode && /*#__PURE__*/_react.default.createElement("span", {
+      className: prefixCls + "-js-content-collapse",
+      onClick: onCollapseNodeClick
+    }, collapseNode));
+  });
+
+  var _default = /*#__PURE__*/_react.default.memo(JsEllipsis);
+
+  _exports.default = _default;
+});

package/umd/ellipsis/components/native-ellipsis.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NativeEllipsisProps } from '../type';
+declare function NativeEllipsis({ prefixCls, ellipsis, dangerouslyUseInnerHTML, text, maxLine, collapseNode, onCollapseNodeClick, }: NativeEllipsisProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof NativeEllipsis>;
+export default _default;

package/umd/ellipsis/components/native-ellipsis.js

@@ -0,0 +1,54 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "@arco-design/mobile-utils"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("@arco-design/mobile-utils"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.mobileUtils);
+    global.nativeEllipsis = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _react = _interopRequireDefault(_react);
+
+  function NativeEllipsis(_ref) {
+    var prefixCls = _ref.prefixCls,
+        ellipsis = _ref.ellipsis,
+        dangerouslyUseInnerHTML = _ref.dangerouslyUseInnerHTML,
+        text = _ref.text,
+        maxLine = _ref.maxLine,
+        _ref$collapseNode = _ref.collapseNode,
+        collapseNode = _ref$collapseNode === void 0 ? '' : _ref$collapseNode,
+        onCollapseNodeClick = _ref.onCollapseNodeClick;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-native", {
+        ellipsis: ellipsis
+      }),
+      style: {
+        WebkitLineClamp: maxLine
+      }
+    }, dangerouslyUseInnerHTML ?
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-danger,@typescript-eslint/naming-convention
+    _react.default.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: text
+      }
+    }) : /*#__PURE__*/_react.default.createElement("span", null, text), !ellipsis && collapseNode && /*#__PURE__*/_react.default.createElement("span", {
+      onClick: onCollapseNodeClick,
+      className: (0, _mobileUtils.cls)(prefixCls + "-native-collapse")
+    }, collapseNode));
+  }
+
+  var _default = /*#__PURE__*/_react.default.memo(NativeEllipsis);
+
+  _exports.default = _default;
+});

package/umd/ellipsis/demo/style/css/mobile.css

@@ -0,0 +1,10 @@
+#demo-ellipsis {
+  line-height: 26px;
+}
+#demo-ellipsis .demo-link,
+#demo-ellipsis .demo-link-line {
+  color:  #165dff ;
+}
+#demo-ellipsis .demo-link-line {
+  text-decoration: underline;
+}

package/umd/ellipsis/demo/style/mobile.less

@@ -0,0 +1,12 @@
+@import '../../../../style/mixin.less';
+
+#demo-ellipsis {
+    line-height: 26px;
+    .demo-link,
+    .demo-link-line {
+        .use-var(color, primary-color);
+    }
+    .demo-link-line {
+        text-decoration: underline;
+    }
+}

package/umd/ellipsis/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EllipsisProps, EllipsisRef } from './type';
+export * from './type';
+/**
+ * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
+ * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
+ * @type 数据展示
+ * @type_en Data Display
+ * @name 文本缩略
+ * @name_en Ellipsis
+ */
+declare const Ellipsis: React.ForwardRefExoticComponent<EllipsisProps & React.RefAttributes<EllipsisRef>>;
+export default Ellipsis;

package/umd/ellipsis/index.js

@@ -0,0 +1,107 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "./utils/is", "./components/js-ellipsis", "./components/native-ellipsis", "./type"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("./utils/is"), require("./components/js-ellipsis"), require("./components/native-ellipsis"), require("./type"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global.is, global.jsEllipsis, global.nativeEllipsis, global.type);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _is, _jsEllipsis, _nativeEllipsis, _type) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  var _exportNames = {};
+  _exports.default = void 0;
+  _react = _interopRequireWildcard(_react);
+  _jsEllipsis = _interopRequireDefault(_jsEllipsis);
+  _nativeEllipsis = _interopRequireDefault(_nativeEllipsis);
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
+
+  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 _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; }
+
+  /**
+   * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
+   * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
+   * @type 数据展示
+   * @type_en Data Display
+   * @name 文本缩略
+   * @name_en Ellipsis
+   */
+  var Ellipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var className = props.className,
+        text = props.text,
+        dangerouslyUseInnerHTML = props.dangerouslyUseInnerHTML,
+        _props$maxLine = props.maxLine,
+        maxLine = _props$maxLine === void 0 ? 1 : _props$maxLine,
+        maxHeight = props.maxHeight,
+        _props$ellipsis = props.ellipsis,
+        ellipsis = _props$ellipsis === void 0 ? true : _props$ellipsis,
+        _props$ellipsisNode = props.ellipsisNode,
+        ellipsisNode = _props$ellipsisNode === void 0 ? '...' : _props$ellipsisNode,
+        _props$collapseNode = props.collapseNode,
+        collapseNode = _props$collapseNode === void 0 ? '' : _props$collapseNode,
+        onCollapseNodeClick = props.onCollapseNodeClick,
+        _props$endExcludes = props.endExcludes,
+        endExcludes = _props$endExcludes === void 0 ? [] : _props$endExcludes,
+        _props$reflowOnResize = props.reflowOnResize,
+        reflowOnResize = _props$reflowOnResize === void 0 ? false : _props$reflowOnResize,
+        onReflow = props.onReflow,
+        onEllipsisNodeClick = props.onEllipsisNodeClick;
+    var domRef = (0, _react.useRef)(null);
+    var jsEllipsisRef = (0, _react.useRef)(null);
+    var useNativeEllipsis = (0, _is.isSupportWebkitLineClamp)() && maxHeight === void 0 && ellipsisNode === '...' && endExcludes.length === 0 && !onReflow && !onEllipsisNodeClick;
+    (0, _react.useImperativeHandle)(ref, function () {
+      var _jsEllipsisRef$curren;
+
+      return {
+        dom: domRef.current,
+        reflow: jsEllipsisRef == null ? void 0 : (_jsEllipsisRef$curren = jsEllipsisRef.current) == null ? void 0 : _jsEllipsisRef$curren.reflow
+      };
+    });
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var prefixCls = _ref.prefixCls;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-ellipsis", className),
+        ref: domRef
+      }, useNativeEllipsis ? /*#__PURE__*/_react.default.createElement(_nativeEllipsis.default, {
+        prefixCls: prefixCls + "-ellipsis",
+        ellipsis: ellipsis,
+        dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
+        text: text,
+        maxLine: maxLine,
+        collapseNode: collapseNode,
+        onCollapseNodeClick: onCollapseNodeClick
+      }) : /*#__PURE__*/_react.default.createElement(_jsEllipsis.default, {
+        ref: jsEllipsisRef,
+        prefixCls: prefixCls + "-ellipsis",
+        text: text,
+        ellipsis: ellipsis,
+        dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
+        maxLine: maxLine,
+        maxHeight: maxHeight,
+        ellipsisNode: ellipsisNode,
+        collapseNode: collapseNode,
+        endExcludes: endExcludes,
+        reflowOnResize: reflowOnResize,
+        onReflow: onReflow,
+        onEllipsisNodeClick: onEllipsisNodeClick,
+        onCollapseNodeClick: onCollapseNodeClick
+      }));
+    });
+  });
+  var _default = Ellipsis;
+  _exports.default = _default;
+});

package/umd/ellipsis/style/css/index.css

@@ -0,0 +1,10 @@
+.arco-ellipsis {
+  font-size:  0.32rem ;
+}
+.arco-ellipsis-native.ellipsis {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  -webkit-box-orient: vertical;
+}

package/umd/ellipsis/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/umd/ellipsis/style/css/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/ellipsis/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';