@arco-design/mobile-react 2.24.0 → 2.24.1

package/esm/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/esm/ellipsis/index.js

@@ -27,15 +27,17 @@ var Ellipsis = /*#__PURE__*/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 = useRef(null);
   var jsEllipsisRef = useRef(null);
-  var useNativeEllipsis = isSupportWebkitLineClamp() && maxHeight === void 0 && ellipsisNode === '...' && (!endExcludes || endExcludes.length === 0) && !onReflow && !onEllipsisNodeClick;
+  var useNativeEllipsis = isSupportWebkitLineClamp() && maxHeight === void 0 && (!endExcludes || endExcludes.length === 0) && !onReflow && (floatEllipsisNode || ellipsisNode === '...' && !onEllipsisNodeClick);
   useImperativeHandle(ref, function () {
     var _jsEllipsisRef$curren;
 
@@ -55,7 +57,9 @@ var Ellipsis = /*#__PURE__*/forwardRef(function (props, ref) {
       dangerouslyUseInnerHTML: dangerouslyUseInnerHTML,
       text: text,
       maxLine: maxLine,
+      ellipsisNode: ellipsisNode,
       collapseNode: collapseNode,
+      onEllipsisNodeClick: onEllipsisNodeClick,
       onCollapseNodeClick: onCollapseNodeClick
     }) : /*#__PURE__*/React.createElement(JsEllipsis, {
       ref: jsEllipsisRef,

package/esm/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/esm/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;
     }
 }

package/esm/ellipsis/type.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, Ref } from 'react';
-interface BaseProps {
+import { ReactNode } from 'react';
+export interface EllipsisBaseProps {
     /**
      * 需要缩略的文本内容
      * @en Text content to be omitted
@@ -23,68 +23,17 @@ interface BaseProps {
      * @default false
      */
     dangerouslyUseInnerHTML?: boolean;
-}
-export interface NativeEllipsisProps extends BaseProps {
-    /**
-     * className 前缀
-     * @en Prefix classname
-     */
-    prefixCls: string;
-    /**
-     * 自定义收起节点，不为空时文本展开插入文本尾部
-     * @en Customize the collapsed node, when the text is not empty, the text expand Text expand content inserts the end of the text
-     */
-    collapseNode?: ReactNode;
-    /**
-     * 收起节点点击事件
-     * @en Collapse node click event
-     */
-    onCollapseNodeClick?: () => void;
-}
-export interface JsEllipsisRef {
-    dom: HTMLDivElement | null;
-    reflow: () => void;
-}
-export interface JsEllipsisProps extends BaseProps {
-    ref: Ref<HTMLDivElement | null>;
-    /**
-     * className 前缀
-     * @en Prefix classname
-     */
-    prefixCls: string;
-    /**
-     * 最大显示高度，单位 px，优先级高于 maxLine
-     * @en Maximum display height, unit px, priority higher than maxLine
-     */
-    maxHeight?: number;
     /**
      * 自定义缩略符节点，文本缩略时插入文本尾部
-     * @en Customize the ellipsis node, insert the end of the text when the text is omitted
+     * @en Customize the ellipsis node, insert at the end of the text when the text is omitted
      * @default "..."
      */
     ellipsisNode?: ReactNode;
     /**
      * 自定义收起符节点，不为空且文本展开时插入文本尾部
-     * @en Customize the collapse node, if the value is not empty, it will be inserted in the end of the text when the text is expanded
+     * @en Customize the collapse node, when the value is not empty and the text is expanded, the node is  inserted at the end of the text
      */
     collapseNode?: ReactNode;
-    /**
-     * 文本结尾处（缩略符之前）需要过滤掉的字符
-     * @en Characters that need to be filtered out at the end of the text (before abbreviations)
-     * @default []
-     */
-    endExcludes?: string[];
-    /**
-     * 容器大小变化时是否自适应，使用原生缩略时默认为 true
-     * @en Whether to adapt when the container size changes, the default is true when using native ellipsis
-     * @default false
-     */
-    reflowOnResize?: boolean;
-    /**
-     * 文本缩略处理的完成回调
-     * @en Callback when text omission processing is complete
-     */
-    onReflow?: (ellipsis: boolean, text: string) => void;
     /**
      * 缩略节点点击事件
      * @en Ellipsis node click event
@@ -108,7 +57,7 @@ export interface EllipsisRef {
      */
     reflow: (() => void) | undefined;
 }
-export interface EllipsisProps extends BaseProps {
+export interface EllipsisProps extends EllipsisBaseProps {
     /**
      * 自定义类名
      * @en Custom classname
@@ -119,17 +68,6 @@ export interface EllipsisProps extends BaseProps {
      * @en Maximum display height(unit: px), priority higher than maxLine
      */
     maxHeight?: number;
-    /**
-     * 自定义缩略符节点，文本缩略时插入文本尾部
-     * @en Customize the ellipsis node, insert at the end of the text when the text is omitted
-     * @default "..."
-     */
-    ellipsisNode?: ReactNode;
-    /**
-     * 自定义收起符节点，不为空且文本展开时插入文本尾部
-     * @en Customize the collapse node, when the value is not empty and the text is expanded, the node is  inserted at the end of the text
-     */
-    collapseNode?: ReactNode;
     /**
      * 文本结尾处（缩略符之前）需要过滤掉的字符
      * @en Characters to filter out at the end of the text (before the ellipsis)
@@ -142,20 +80,28 @@ export interface EllipsisProps extends BaseProps {
      * @default false
      */
     reflowOnResize?: boolean;
+    /**
+     * 文本缩略时，缩略符节点是否浮在文本右下角（默认加渐变色背景）
+     * @en Whether the abbreviation node is floating in the lower right corner of the text (with a gradient background by default)
+     * @default false
+     */
+    floatEllipsisNode?: boolean;
     /**
      * 文本缩略处理的完成回调
      * @en Callback when text omission processing is complete
      */
     onReflow?: (ellipsis: boolean, text: string) => void;
+}
+export declare type EllipsisCommonProps = EllipsisBaseProps & {
     /**
-     * 缩略节点点击事件
-     * @en Ellipsis node click event
-     */
-    onEllipsisNodeClick?: () => void;
-    /**
-     * 收起节点点击事件
-     * @en Collapse node click event
+     * className 前缀
+     * @en Prefix classname
      */
-    onCollapseNodeClick?: () => void;
+    prefixCls: string;
+};
+export declare type NativeEllipsisProps = EllipsisCommonProps;
+export interface JsEllipsisRef {
+    dom: HTMLDivElement | null;
+    reflow: () => void;
 }
-export {};
+export declare type JsEllipsisProps = EllipsisCommonProps & Pick<EllipsisProps, 'maxHeight' | 'endExcludes' | 'reflowOnResize' | 'onReflow'>;

package/esm/masking/index.d.ts

@@ -205,11 +205,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
      * @param {MaskingProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: MaskingProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "ref" | "children" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<MaskingProps & React.RefAttributes<MaskingRef>>, "children" | "ref" | "key" | "context" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
             key?: string | undefined;
         }) => void;
     };

package/esm/popup/index.d.ts

@@ -66,11 +66,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupProps & React.RefAt
      * @param {PopupProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: PopupProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "ref" | "children" | "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" | "needBottomOffset" | "translateZ"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "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" | "needBottomOffset" | "translateZ"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "ref" | "children" | "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" | "needBottomOffset" | "translateZ"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupProps & React.RefAttributes<PopupRef>>, "direction" | "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" | "needBottomOffset" | "translateZ"> & {
             key?: string | undefined;
         }) => void;
     };

package/esm/popup-swiper/index.d.ts

@@ -76,11 +76,11 @@ declare const _default: React.ForwardRefExoticComponent<PopupSwiperProps & React
      * @param {string | PopupSwiperProps} config Configuration
      * @returns {{ close: () => void; update: (newConfig: PopupSwiperProps) => void; }}
      */
-    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "ref" | "children" | "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" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+    open: (config: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "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" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
         key?: string | undefined;
     }, context?: import("../context-provider").GlobalContextParams | undefined) => {
         close: () => void;
-        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "ref" | "children" | "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" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<PopupSwiperProps & React.RefAttributes<PopupSwiperRef>>, "direction" | "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" | "needBottomOffset" | "translateZ" | "onTouchEnd" | "onTouchStart" | "percentToClose" | "distanceToClose" | "speedToClose" | "allowSwipeDirections" | "exitDirection"> & {
             key?: string | undefined;
         }) => void; /**
          * 内容面板 touchstart 事件，返回true时表示阻止本组件内部处理事件

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.24.0",
+    "version": "2.24.1",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "^2.12.9",
+        "@arco-design/mobile-utils": "^2.12.10",
         "@arco-design/transformable": "^1.0.0",
         "es6-promise": "^4.2.8",
         "lodash.throttle": "^4.1.1",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "bff7e1c275188fab8d98166eba999d7aebdc5672"
+    "gitHead": "c9f2506a5518bc6ccf6aa2f85c3077e02ab22fac"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -194,6 +194,8 @@
     --button-mini-height: ~`pxtorem(24)`;
     --button-mini-text-size: ~`pxtorem(12)`;
     --ellipsis-default-text-size: ~`pxtorem(16)`;
+    --ellipsis-float-ellipsis-node-background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff);
+    --ellipsis-float-ellipsis-node-padding-left: 20PX;
     --checkbox-icon-color: #c2c6cc;
     --checkbox-icon-font-size: 20PX;
     --checkbox-icon-margin-right: ~`pxtorem(8)`;

package/tokens/app/arcodesign/default/index.d.ts

@@ -193,6 +193,8 @@ export interface ArcodesignToken extends Record<string, string> {
     'button-mini-height': string;
     'button-mini-text-size': string;
     'ellipsis-default-text-size': string;
+    'ellipsis-float-ellipsis-node-background': string;
+    'ellipsis-float-ellipsis-node-padding-left': string;
     'checkbox-icon-color': string;
     'checkbox-icon-font-size': string;
     'checkbox-icon-margin-right': string;