@arco-design/mobile-react 2.23.0 → 2.24.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.24.1](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.24.0...@arco-design/mobile-react@2.24.1) (2023-01-04)
+
+
+### Bug Fixes
+
+* `Ellipsis` support floatEllipsisNode ([#76](https://github.com/arco-design/arco-design-mobile/issues/76)) ([cc8e3d6](https://github.com/arco-design/arco-design-mobile/commit/cc8e3d6df1eec5a528a47c255c49ca94a326ca18))
+
+
+
+
+
+# [2.24.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.23.0...@arco-design/mobile-react@2.24.0) (2022-12-20)
+
+
+### Bug Fixes
+
+* support accessibility mode ([#65](https://github.com/arco-design/arco-design-mobile/issues/65)) ([fa7789c](https://github.com/arco-design/arco-design-mobile/commit/fa7789c1866341244cbffcbef1d1be375880bd82))
+
+
+### Features
+
+* component function support custom context ([#52](https://github.com/arco-design/arco-design-mobile/issues/52)) ([e5bd260](https://github.com/arco-design/arco-design-mobile/commit/e5bd260f6df128f8cd44e26464f1b5e5e6deff11))
+
+
+
+
+
 # [2.23.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.3...@arco-design/mobile-react@2.23.0) (2022-11-29)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.22.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.24.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.24.0/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.22.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.24.0/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.24.0/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/_helpers/render.d.ts

@@ -1,10 +1,12 @@
 import { FunctionComponent } from 'react';
 import { RootType } from './react-dom';
+import { GlobalContextParams } from '../context-provider';
 export declare class ReactDOMRender {
     root: RootType | undefined;
     app: FunctionComponent;
     container: Element | DocumentFragment;
-    constructor(app: FunctionComponent, container: Element | DocumentFragment);
+    context: GlobalContextParams | undefined;
+    constructor(app: FunctionComponent, container: Element | DocumentFragment, context?: GlobalContextParams);
     render: (props: any) => void;
     unmount: () => void;
 }

package/cjs/_helpers/render.js

@@ -5,24 +5,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.ReactDOMRender = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _reactDom = require("./react-dom");
 
-var ReactDOMRender = function ReactDOMRender(app, container) {
+var ReactDOMRender = function ReactDOMRender(app, container, context) {
   var _this = this;
 
   this.root = void 0;
   this.app = void 0;
   this.container = void 0;
+  this.context = void 0;
 
   this.render = function (props) {
     var CustomApp = _this.app;
+    var propsWithContext = (0, _extends2.default)({}, props, {
+      context: _this.context
+    });
 
     if (_this.root) {
-      _this.root.render( /*#__PURE__*/_react.default.createElement(CustomApp, props));
+      _this.root.render( /*#__PURE__*/_react.default.createElement(CustomApp, propsWithContext));
     } else {
-      _this.root = (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(CustomApp, props), _this.container);
+      _this.root = (0, _reactDom.render)( /*#__PURE__*/_react.default.createElement(CustomApp, propsWithContext), _this.container);
     }
   };
 
@@ -35,6 +41,7 @@ var ReactDOMRender = function ReactDOMRender(app, container) {
 
   this.app = app;
   this.container = container;
+  this.context = context;
 };
 
 exports.ReactDOMRender = ReactDOMRender;

package/cjs/action-sheet/index.d.ts

@@ -72,7 +72,7 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
      */
     open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;
-    }) => {
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
@@ -86,18 +86,18 @@ declare const _default: React.ForwardRefExoticComponent<ActionSheetProps & React
      * @param {ActionSheetProps} config setting
      * @returns {{ close: () => void; update: (newConfig: ActionSheetProps) => void; }}
      */
-    open: (config: Pick<ActionSheetProps & React.RefAttributes<ActionSheetRef>, "title" | "ref" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
         key?: string | undefined;
-    }) => {
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<ActionSheetProps & React.RefAttributes<ActionSheetRef>, "title" | "ref" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<ActionSheetProps & React.RefAttributes<ActionSheetRef>>, "title" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "needBottomOffset" | "translateZ" | "items" | "cancelText" | "subTitle"> & {
             key?: string | undefined;
         }) => void;
     };
 };
 /**
  * 动作面板组件
- * @en ActionSheet Commponent
+ * @en ActionSheet Component
  * @type 反馈
  * @type_en FeedBack
  * @name 动作面板

package/cjs/action-sheet/index.js

@@ -107,16 +107,17 @@ function methodsGenerator(Comp) {
     open: (0, _methods.open)(Comp)
   };
 }
+
+var ActionSheetWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(ActionSheet);
 /**
  * 动作面板组件
- * @en ActionSheet Commponent
+ * @en ActionSheet Component
  * @type 反馈
  * @type_en FeedBack
  * @name 动作面板
  * @name_en ActionSheet
  */
 
-
-var _default = (0, _mobileUtils.componentWrapper)(ActionSheet, methodsGenerator(ActionSheet));
+var _default = (0, _mobileUtils.componentWrapper)(ActionSheet, methodsGenerator(ActionSheetWithGlobalContext));
 
 exports.default = _default;

package/cjs/action-sheet/methods.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { OpenBaseProps } from '../masking/methods';
 export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
     key?: string | undefined;
-}) => {
+}, context?: import("../context-provider").GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;

package/cjs/badge/style/css/index.css

@@ -9,8 +9,7 @@
             transform: scale(1);
     opacity: 1;
   }
-}
-@keyframes scale-on {
+}@keyframes scale-on {
   0% {
     -webkit-transform: scale(0);
             transform: scale(0);

package/cjs/checkbox/checkbox.js

@@ -158,6 +158,10 @@ var Checkbox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "checkbox",
+      "aria-checked": checked,
+      "aria-disabled": disabled,
+      tabIndex: 0,
       ref: domRef,
       style: style,
       className: (0, _mobileUtils.cls)(className, prefixCls + "-" + componentName, "shape-" + shape, {

package/cjs/circle-progress/index.js

@@ -164,6 +164,10 @@ var CircleProgress = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   function renderCircleProgress(_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percentage,
       className: (0, _mobileUtils.cls)(prefixCls + "-circle-progress", disabled ? prefixCls + "-circle-progress-disabled" : '', "" + className),
       style: (0, _extends2.default)({
         width: circleSize,

package/cjs/context-provider/index.d.ts

@@ -41,6 +41,9 @@ export declare const GlobalContext: React.Context<GlobalContextParams>;
 export interface ContextProviderProps extends GlobalContextParams {
     children: React.ReactNode;
 }
+export declare type WithGlobalContext<T> = T & {
+    context?: GlobalContextParams;
+};
 /**
  * 全局数据控制组件，用于替换全局数据。
  * @en Global data control component, used to replace global data.
@@ -51,3 +54,4 @@ export interface ContextProviderProps extends GlobalContextParams {
  */
 export default function ContextProvider(props: ContextProviderProps): JSX.Element;
 export declare const ContextLayout: React.Consumer<GlobalContextParams>;
+export declare function CompWithGlobalContext<P extends JSX.IntrinsicAttributes>(Component: React.FunctionComponent<P>): (props: WithGlobalContext<P>) => JSX.Element;

package/cjs/context-provider/index.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.CompWithGlobalContext = CompWithGlobalContext;
 exports.GlobalContext = exports.ContextLayout = void 0;
 exports.default = ContextProvider;
 exports.defaultContext = void 0;
@@ -15,7 +16,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _mobileUtils = require("@arco-design/mobile-utils");
 
-var _excluded = ["children", "useDarkMode", "isDarkMode", "theme", "locale"];
+var _excluded = ["children", "useDarkMode", "isDarkMode", "theme", "locale"],
+    _excluded2 = ["context"];
 
 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); }
 
@@ -100,4 +102,14 @@ function ContextProvider(props) {
 }
 
 var ContextLayout = GlobalContext.Consumer;
-exports.ContextLayout = ContextLayout;
+exports.ContextLayout = ContextLayout;
+
+function CompWithGlobalContext(Component) {
+  return function (props) {
+    var propsContext = props.context,
+        others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    return /*#__PURE__*/_react.default.createElement(ContextLayout, null, function (context) {
+      return /*#__PURE__*/_react.default.createElement(ContextProvider, (0, _extends2.default)({}, context, propsContext), /*#__PURE__*/_react.default.createElement(Component, others));
+    });
+  };
+}

package/cjs/dialog/index.d.ts

@@ -137,7 +137,7 @@ export declare function methodsGenerator<P extends OpenBaseProps, A = AlertOptio
      * @param {AlertOptions & DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
      */
-    alert: (config: A) => {
+    alert: (config: A, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: A) => void;
     };
@@ -147,7 +147,7 @@ export declare function methodsGenerator<P extends OpenBaseProps, A = AlertOptio
      * @param {ConfirmOptions & AlertOptions} config Configuration
      * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
      */
-    confirm: (config: C) => {
+    confirm: (config: C, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: C) => void;
     };
@@ -159,7 +159,7 @@ export declare function methodsGenerator<P extends OpenBaseProps, A = AlertOptio
      */
     open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;
-    }) => {
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
@@ -173,7 +173,7 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {AlertOptions & DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: AlertOptions & DialogProps) => void; }}
      */
-    alert: (config: AlertOptions) => {
+    alert: (config: AlertOptions, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: AlertOptions) => void;
     };
@@ -183,7 +183,7 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {ConfirmOptions & AlertOptions} config Configuration
      * @returns {{ close: () => void; update: (newConfig: ConfirmOptions & AlertOptions) => void; }}
      */
-    confirm: (config: ConfirmOptions) => {
+    confirm: (config: ConfirmOptions, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
         update: (newConfig: ConfirmOptions) => void;
     };
@@ -193,11 +193,11 @@ declare const _default: React.ForwardRefExoticComponent<DialogProps & React.RefA
      * @param {DialogProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: DialogProps) => void; }}
      */
-    open: (config: Pick<DialogProps & React.RefAttributes<DialogRef>, "platform" | "footer" | "title" | "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
         key?: string | undefined;
-    }) => {
+    }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<DialogProps & React.RefAttributes<DialogRef>, "platform" | "footer" | "title" | "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<DialogProps & React.RefAttributes<DialogRef>>, "platform" | "footer" | "title" | "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer" | "footerType" | "renderFooter" | "footerCollapseCount" | "titleAlign" | "contentAlign" | "extra"> & {
             key?: string | undefined;
         }) => void;
     };

package/cjs/dialog/index.js

@@ -172,6 +172,8 @@ function methodsGenerator(Comp) {
     open: (0, _methods.open)(Comp)
   };
 }
+
+var DialogWithGlobalContext = (0, _contextProvider.CompWithGlobalContext)(Dialog);
 /**
  * 模态对话框，在浮层中显示，引导用户进行相关操作。默认做了防滚动穿透处理，如果弹层内容中需要滚动，则需将滚动容器传入`getScrollContainer`属性以在未滚动到顶部或底部时释放滚动。
  * @en A modal dialog, displayed in a floating layer, guides the user to perform related operations. By default, anti-scroll penetration processing is performed. If scrolling is required in the content of the bullet layer, you need to pass the scroll container to `getScrollContainer` to release scrolling when it is not scrolled to the top or bottom.
@@ -181,7 +183,6 @@ function methodsGenerator(Comp) {
  * @name_en Dialog
  */
 
-
-var _default = (0, _mobileUtils.componentWrapper)(Dialog, methodsGenerator(Dialog));
+var _default = (0, _mobileUtils.componentWrapper)(Dialog, methodsGenerator(DialogWithGlobalContext));
 
 exports.default = _default;

package/cjs/dialog/methods.d.ts

@@ -2,17 +2,17 @@ import React from 'react';
 import { OpenBaseProps } from '../masking/methods';
 export declare function normalizeAlert<AlertOptions, P>(config: AlertOptions): P;
 export declare function normalizeConfirm<ConfirmOptions, P>(config: ConfirmOptions): P;
-export declare function alert<AlertOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: AlertOptions) => {
+export declare function alert<AlertOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: AlertOptions, context?: import("../context-provider").GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: AlertOptions) => void;
 };
-export declare function confirm<ConfirmOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: ConfirmOptions) => {
+export declare function confirm<ConfirmOptions, P extends OpenBaseProps>(Component: React.FunctionComponent<P>, normalize?: <T, Props>(config: T) => Props): (config: ConfirmOptions, context?: import("../context-provider").GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: ConfirmOptions) => void;
 };
 export declare function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>): (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
     key?: string | undefined;
-}) => {
+}, context?: import("../context-provider").GlobalContextParams | undefined) => {
     close: () => void;
     update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;

package/cjs/dialog/style/css/index.css

@@ -9,8 +9,7 @@
     -webkit-transform: scale(1);
             transform: scale(1);
   }
-}
-@keyframes fade-scale-on {
+}@keyframes fade-scale-on {
   0% {
     opacity: 0;
     -webkit-transform: scale(0.5);

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

@@ -1,4 +1,6 @@
 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>>>;
+import { JsEllipsisRef } from '../type';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("../type").EllipsisBaseProps & {
+    prefixCls: string;
+} & Pick<import("../type").EllipsisProps, "maxHeight" | "endExcludes" | "reflowOnResize" | "onReflow"> & React.RefAttributes<JsEllipsisRef>>>;
 export default _default;

package/cjs/ellipsis/components/js-ellipsis.js

@@ -220,7 +220,20 @@ var JsEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     ref: textRef,
     className: prefixCls + "-js-content"
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }, dangerouslyUseInnerHTML ? /*#__PURE__*/_react.default.createElement("span", {
+    className: prefixCls + "-js-content-initial",
+    style: {
+      WebkitLineClamp: maxLine
+    },
+    dangerouslySetInnerHTML: {
+      __html: text
+    }
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: prefixCls + "-js-content-initial",
+    style: {
+      WebkitLineClamp: maxLine
+    }
+  }, text)), /*#__PURE__*/_react.default.createElement("span", {
     ref: ellipsisRef,
     className: prefixCls + "-js-content-ellipsis",
     onClick: onEllipsisNodeClick

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

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

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

@@ -15,8 +15,10 @@ function NativeEllipsis(_ref) {
       dangerouslyUseInnerHTML = _ref.dangerouslyUseInnerHTML,
       text = _ref.text,
       maxLine = _ref.maxLine,
+      ellipsisNode = _ref.ellipsisNode,
       _ref$collapseNode = _ref.collapseNode,
       collapseNode = _ref$collapseNode === void 0 ? '' : _ref$collapseNode,
+      onEllipsisNodeClick = _ref.onEllipsisNodeClick,
       onCollapseNodeClick = _ref.onCollapseNodeClick;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefixCls + "-native", {
@@ -35,7 +37,10 @@ function NativeEllipsis(_ref) {
   }) : /*#__PURE__*/_react.default.createElement("span", null, text), !ellipsis && collapseNode && /*#__PURE__*/_react.default.createElement("span", {
     onClick: onCollapseNodeClick,
     className: (0, _mobileUtils.cls)(prefixCls + "-native-collapse")
-  }, collapseNode));
+  }, collapseNode), ellipsis && (ellipsisNode !== '...' || onEllipsisNodeClick) ? /*#__PURE__*/_react.default.createElement("span", {
+    onClick: onEllipsisNodeClick,
+    className: (0, _mobileUtils.cls)(prefixCls + "-native-ellipsis-node")
+  }, ellipsisNode) : null);
 }
 
 var _default = /*#__PURE__*/_react.default.memo(NativeEllipsis);

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

@@ -1,4 +1,4 @@
-#demo-ellipsis {
+#demo-ellipsis .arco-ellipsis {
   line-height: 26px;
 }
 #demo-ellipsis .demo-link,

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

@@ -1,7 +1,9 @@
 @import '../../../../style/mixin.less';
 
 #demo-ellipsis {
-    line-height: 26px;
+    .@{prefix}-ellipsis {
+        line-height: 26px;
+    }
     .demo-link,
     .demo-link-line {
         .use-var(color, primary-color);

package/cjs/ellipsis/index.js

@@ -52,15 +52,17 @@ var Ellipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ellipsisNode = _props$ellipsisNode === void 0 ? '...' : _props$ellipsisNode,
       _props$collapseNode = props.collapseNode,
       collapseNode = _props$collapseNode === void 0 ? '' : _props$collapseNode,
-      onCollapseNodeClick = props.onCollapseNodeClick,
       endExcludes = props.endExcludes,
       _props$reflowOnResize = props.reflowOnResize,
       reflowOnResize = _props$reflowOnResize === void 0 ? false : _props$reflowOnResize,
+      _props$floatEllipsisN = props.floatEllipsisNode,
+      floatEllipsisNode = _props$floatEllipsisN === void 0 ? false : _props$floatEllipsisN,
       onReflow = props.onReflow,
+      onCollapseNodeClick = props.onCollapseNodeClick,
       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 || endExcludes.length === 0) && !onReflow && !onEllipsisNodeClick;
+  var useNativeEllipsis = (0, _is.isSupportWebkitLineClamp)() && maxHeight === void 0 && (!endExcludes || endExcludes.length === 0) && !onReflow && (floatEllipsisNode || ellipsisNode === '...' && !onEllipsisNodeClick);
   (0, _react.useImperativeHandle)(ref, function () {
     var _jsEllipsisRef$curren;
 
@@ -80,7 +82,9 @@ var Ellipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
       text: text,
       maxLine: maxLine,
+      ellipsisNode: ellipsisNode,
       collapseNode: collapseNode,
+      onEllipsisNodeClick: onEllipsisNodeClick,
       onCollapseNodeClick: onCollapseNodeClick
     }) : /*#__PURE__*/_react.default.createElement(_jsEllipsis.default, {
       ref: jsEllipsisRef,

package/cjs/ellipsis/style/css/index.css

@@ -1,10 +1,23 @@
 .arco-ellipsis {
   font-size:  0.32rem ;
 }
-.arco-ellipsis-native.ellipsis {
+.arco-ellipsis-native.ellipsis,
+.arco-ellipsis-js-content-initial {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
   -webkit-box-orient: vertical;
+  position: relative;
+}
+.arco-ellipsis-native-ellipsis-node {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background:  -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) ;
+  background:  linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) ;
+  padding-left:  20PX ;
+}
+.arco-ellipsis-js-content-ellipsis {
+  display: none;
 }

package/cjs/ellipsis/style/index.less

@@ -3,11 +3,25 @@
 .@{prefix}-ellipsis {
     .use-var(font-size, ellipsis-default-text-size);
 
-    &-native.ellipsis {
+    &-native.ellipsis,
+    &-js-content-initial {
         display: -webkit-box;
         overflow: hidden;
         text-overflow: ellipsis;
         word-break: break-word;
         -webkit-box-orient: vertical;
+        position: relative;
+    }
+
+    &-native-ellipsis-node {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        .use-var(background, ellipsis-float-ellipsis-node-background);
+        .use-var(padding-left, ellipsis-float-ellipsis-node-padding-left);
+    }
+
+    &-js-content-ellipsis {
+        display: none;
     }
 }