@arco-design/mobile-react 2.20.0 → 2.21.2

package/umd/search-bar/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/slider/index.d.ts

@@ -143,7 +143,7 @@ export interface SliderRef {
  * @en Slide input component, displays the current value and optional range.
  * @name 滑动输入条
  * @name_en Slider
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 declare const SliderWrapper: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>;

package/umd/slider/index.js

@@ -176,7 +176,7 @@
    * @en Slide input component, displays the current value and optional range.
    * @name 滑动输入条
    * @name_en Slider
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    */
 

package/umd/steps/index.d.ts

@@ -13,7 +13,7 @@ declare const _default: React.ForwardRefExoticComponent<StepsProps & React.RefAt
  * @en Display the progress of a task, or guide users to complete a complex task.
  * @name 步骤条
  * @name_en Steps
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 export default _default;

package/umd/steps/index.js

@@ -115,7 +115,7 @@
    * @en Display the progress of a task, or guide users to complete a complex task.
    * @name 步骤条
    * @name_en Steps
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    */
 

package/umd/sticky/index.d.ts

@@ -118,7 +118,7 @@ export interface StickyProps {
      */
     getContainer?: () => HTMLElement | string;
     /**
-     * 指定滚动容器，如果指定该值则relative属性始终认定为false；如果返回string则使用querySelector选取容器
+     * 指定滚动容器；如果返回string则使用querySelector选取容器
      * @en Specifies the scrolling container. If this value is specified, the relative property is always regarded as false; if a string is input, use querySelector to select the container
      * @default () => window
      */

package/umd/style.d.ts

@@ -42,8 +42,10 @@ import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './slider/style';
+import './search-bar/style';
 import './steps/style';
 import './sticky/style';
+import './swipe-action/style';
 import './swipe-load/style';
 import './tab-bar/style';
 import './tag/style';

package/umd/style.js

@@ -1,15 +1,15 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["../style/public.less", "./action-sheet/style", "./cell/style", "./loading/style", "./badge/style", "./avatar/style", "./button/style", "./carousel/style", "./toast/style", "./switch/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./tabs/style", "./context-provider/style", "./dialog/style", "./count-down/style", "./date-picker/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./grid/style", "./image/style", "./show-monitor/style", "./image-picker/style", "./image-preview/style", "./input/style", "./load-more/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./slider/style", "./steps/style", "./sticky/style", "./swipe-load/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./transition/style"], factory);
+    define(["../style/public.less", "./action-sheet/style", "./cell/style", "./loading/style", "./badge/style", "./avatar/style", "./button/style", "./carousel/style", "./toast/style", "./switch/style", "./checkbox/style", "./circle-progress/style", "./collapse/style", "./tabs/style", "./context-provider/style", "./dialog/style", "./count-down/style", "./date-picker/style", "./dropdown/style", "./dropdown-menu/style", "./ellipsis/style", "./grid/style", "./image/style", "./show-monitor/style", "./image-picker/style", "./image-preview/style", "./input/style", "./load-more/style", "./masking/style", "./nav-bar/style", "./notice-bar/style", "./notify/style", "./pagination/style", "./picker/style", "./picker-view/style", "./popover/style", "./popup/style", "./popup-swiper/style", "./portal/style", "./progress/style", "./pull-refresh/style", "./radio/style", "./rate/style", "./slider/style", "./search-bar/style", "./steps/style", "./sticky/style", "./swipe-action/style", "./swipe-load/style", "./tab-bar/style", "./tag/style", "./textarea/style", "./transition/style"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("../style/public.less"), require("./action-sheet/style"), require("./cell/style"), require("./loading/style"), require("./badge/style"), require("./avatar/style"), require("./button/style"), require("./carousel/style"), require("./toast/style"), require("./switch/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./tabs/style"), require("./context-provider/style"), require("./dialog/style"), require("./count-down/style"), require("./date-picker/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./grid/style"), require("./image/style"), require("./show-monitor/style"), require("./image-picker/style"), require("./image-preview/style"), require("./input/style"), require("./load-more/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./slider/style"), require("./steps/style"), require("./sticky/style"), require("./swipe-load/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./transition/style"));
+    factory(require("../style/public.less"), require("./action-sheet/style"), require("./cell/style"), require("./loading/style"), require("./badge/style"), require("./avatar/style"), require("./button/style"), require("./carousel/style"), require("./toast/style"), require("./switch/style"), require("./checkbox/style"), require("./circle-progress/style"), require("./collapse/style"), require("./tabs/style"), require("./context-provider/style"), require("./dialog/style"), require("./count-down/style"), require("./date-picker/style"), require("./dropdown/style"), require("./dropdown-menu/style"), require("./ellipsis/style"), require("./grid/style"), require("./image/style"), require("./show-monitor/style"), require("./image-picker/style"), require("./image-preview/style"), require("./input/style"), require("./load-more/style"), require("./masking/style"), require("./nav-bar/style"), require("./notice-bar/style"), require("./notify/style"), require("./pagination/style"), require("./picker/style"), require("./picker-view/style"), require("./popover/style"), require("./popup/style"), require("./popup-swiper/style"), require("./portal/style"), require("./progress/style"), require("./pull-refresh/style"), require("./radio/style"), require("./rate/style"), require("./slider/style"), require("./search-bar/style"), require("./steps/style"), require("./sticky/style"), require("./swipe-action/style"), require("./swipe-load/style"), require("./tab-bar/style"), require("./tag/style"), require("./textarea/style"), require("./transition/style"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
+    factory(global._public, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style, global.style);
     global.style = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49, _style50) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _style3, _style4, _style5, _style6, _style7, _style8, _style9, _style10, _style11, _style12, _style13, _style14, _style15, _style16, _style17, _style18, _style19, _style20, _style21, _style22, _style23, _style24, _style25, _style26, _style27, _style28, _style29, _style30, _style31, _style32, _style33, _style34, _style35, _style36, _style37, _style38, _style39, _style40, _style41, _style42, _style43, _style44, _style45, _style46, _style47, _style48, _style49, _style50, _style51, _style52) {
   "use strict";
 });

package/umd/swipe-action/demo/style/css/mobile.css

@@ -0,0 +1,5 @@
+#demo-swipe-action .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  overflow: hidden;
+}

package/umd/swipe-action/demo/style/mobile.less

@@ -0,0 +1,9 @@
+@import '../../../../style/mixin.less';
+
+#demo-swipe-action {
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        overflow: hidden;
+    }
+}

package/umd/swipe-action/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SwipeActionProps, SwipeActionRef } from './type';
+/**
+ * 滑动操作组件，左右滑动拉出菜单栏
+ * @en SwipeAction component, slide left and right to pull out the menu bar
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 滑动操作
+ * @name_en SwipeAction
+ */
+declare const SwipeAction: React.ForwardRefExoticComponent<SwipeActionProps & React.RefAttributes<SwipeActionRef>>;
+export default SwipeAction;

package/umd/swipe-action/index.js

@@ -0,0 +1,342 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "./item", "../_helpers"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("./item"), require("../_helpers"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.item, global._helpers);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _item, _helpers) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireWildcard(_react);
+  _item = _interopRequireDefault(_item);
+
+  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 SwipeAction component, slide left and right to pull out the menu bar
+   * @type 反馈
+   * @type_en FeedBack
+   * @name 滑动操作
+   * @name_en SwipeAction
+   */
+  var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        style = props.style,
+        children = props.children,
+        leftActions = props.leftActions,
+        rightActions = props.rightActions,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$threshold = props.threshold,
+        threshold = _props$threshold === void 0 ? 0.15 : _props$threshold,
+        closeOnTouchOutside = props.closeOnTouchOutside,
+        _props$transitionDura = props.transitionDuration,
+        transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+        _props$dampRate = props.dampRate,
+        dampRate = _props$dampRate === void 0 ? 15 : _props$dampRate,
+        _props$openStyleType = props.openStyleType,
+        openStyleType = _props$openStyleType === void 0 ? 'layer' : _props$openStyleType,
+        onClose = props.onClose,
+        onOpen = props.onOpen;
+    var domRef = (0, _react.useRef)(null);
+    var leftRef = (0, _react.useRef)(null);
+    var rightRef = (0, _react.useRef)(null);
+    var isOpen = (0, _react.useRef)(false);
+    var leftMenuWidthRef = (0, _react.useRef)(0);
+
+    var _useState = (0, _react.useState)([]),
+        leftMenuWidthArr = _useState[0],
+        setLeftMenuWidthArr = _useState[1];
+
+    var rightMenuWidthRef = (0, _react.useRef)(0);
+
+    var _useState2 = (0, _react.useState)([]),
+        rightMenuWidthArr = _useState2[0],
+        setRightMenuWidthArr = _useState2[1];
+
+    var dampRateRef = (0, _helpers.useLatestRef)(dampRate);
+    var forbidClick = (0, _react.useRef)(false);
+
+    var _useRefState = (0, _helpers.useRefState)(false),
+        moving = _useRefState[0],
+        movingRef = _useRefState[1],
+        setMoving = _useRefState[2];
+
+    var _useRefState2 = (0, _helpers.useRefState)(0),
+        offset = _useRefState2[0],
+        offsetRef = _useRefState2[1],
+        setOffset = _useRefState2[2];
+
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        prefixCls = _useContext.prefixCls;
+
+    var startRef = (0, _react.useRef)(0);
+    var startX = (0, _react.useRef)(0);
+    var slideX = (0, _react.useRef)(0);
+    var isLayer = openStyleType === 'layer';
+    var transitionStyle = (0, _react.useMemo)(function () {
+      return (0, _helpers.getStyleWithVendor)({
+        transitionDuration: moving ? '0ms' : transitionDuration + "ms"
+      });
+    }, [moving, transitionDuration]);
+
+    function resetMoveData() {
+      startX.current = 0;
+      slideX.current = 0;
+    }
+
+    function getMenuCurrentWidth(a, min, max) {
+      var buffer = Math.abs(a) / dampRateRef.current;
+      return Math.min(Math.max(a, min - buffer), max + buffer);
+    }
+
+    function touchstart(e) {
+      startRef.current = offsetRef.current;
+      resetMoveData();
+      startX.current = e.touches[0].pageX;
+    }
+
+    function touchmove(e) {
+      e.preventDefault();
+      slideX.current = e.touches[0].pageX - startX.current;
+      forbidClick.current = true;
+      setMoving(true);
+      setOffset(getMenuCurrentWidth(slideX.current + startRef.current, -rightMenuWidthRef.current, leftMenuWidthRef.current));
+    }
+
+    function touchend() {
+      if (movingRef.current) {
+        var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
+        changeMenu(currentMenu);
+        setMoving(false);
+        (0, _mobileUtils.nextTick)(function () {
+          forbidClick.current = false;
+        });
+      }
+    }
+
+    function changeMenu(dir) {
+      var cookedThreshold = isOpen.current ? 1 - threshold : threshold;
+      var width = dir === 'left' ? leftMenuWidthRef.current : rightMenuWidthRef.current;
+
+      if (width && Math.abs(offsetRef.current) > width * cookedThreshold) {
+        open(dir);
+      } else {
+        close(dir);
+      }
+    }
+
+    function getWidthByRef(widthRef) {
+      if (!widthRef.current) {
+        return {
+          totalWidth: 0,
+          widthArr: []
+        };
+      }
+
+      var totalWidth = 0;
+      var widthArr = [];
+      var allEle = widthRef.current.getElementsByClassName(prefixCls + "-swipe-action-menu-action-info-container");
+      Array.prototype.forEach.call(allEle, function (ele) {
+        var _ele$getBoundingClien;
+
+        var w = (_ele$getBoundingClien = ele.getBoundingClientRect().width) != null ? _ele$getBoundingClien : 0;
+        totalWidth += w;
+        widthArr.push(w);
+      });
+      return {
+        totalWidth: totalWidth,
+        widthArr: widthArr
+      };
+    }
+
+    (0, _react.useEffect)(function () {
+      var container = domRef.current;
+
+      if (!disabled && container) {
+        container.addEventListener('touchstart', touchstart);
+        container.addEventListener('touchmove', touchmove);
+        container.addEventListener('touchend', touchend);
+      }
+
+      return function () {
+        if (!disabled && container) {
+          container.removeEventListener('touchstart', touchstart);
+          container.removeEventListener('touchmove', touchmove);
+          container.removeEventListener('touchend', touchend);
+        }
+      };
+    }, [disabled]); // 获取左右菜单的宽度
+    // @en Get the width of the left and right menu
+
+    (0, _react.useEffect)(function () {
+      var _getWidthByRef = getWidthByRef(leftRef),
+          leftTotalWidth = _getWidthByRef.totalWidth,
+          leftWidthArr = _getWidthByRef.widthArr;
+
+      leftMenuWidthRef.current = leftTotalWidth;
+      setLeftMenuWidthArr(leftWidthArr);
+
+      var _getWidthByRef2 = getWidthByRef(rightRef),
+          rightTotalWidth = _getWidthByRef2.totalWidth,
+          rightWidthArr = _getWidthByRef2.widthArr;
+
+      rightMenuWidthRef.current = rightTotalWidth;
+      setRightMenuWidthArr(rightWidthArr);
+    }, [leftActions, rightActions]); // 点击外部区域事件
+    // @en Event when clicking outside of the element
+
+    (0, _react.useEffect)(function () {
+      var handle = function handle(e) {
+        var _domRef$current;
+
+        if (!((_domRef$current = domRef.current) != null && _domRef$current.contains(e.target)) && isOpen.current) {
+          close();
+        }
+      };
+
+      closeOnTouchOutside && document.addEventListener('touchstart', handle);
+      return function () {
+        closeOnTouchOutside && document.removeEventListener('touchstart', handle);
+      };
+    }, [closeOnTouchOutside]);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current,
+        close: close,
+        open: open
+      };
+    });
+
+    function close(dir) {
+      setOffset(0);
+
+      if (isOpen.current) {
+        isOpen.current = false;
+
+        if (!dir && offsetRef.current !== 0) {
+          var noDir = offsetRef.current > 0 ? 'left' : 'right';
+          handleClose(noDir);
+          return;
+        }
+
+        handleClose(dir);
+      }
+    }
+
+    function open(dir) {
+      if (dir === void 0) {
+        dir = 'right';
+      }
+
+      if (!isOpen.current) {
+        isOpen.current = true;
+        handleOpen(dir);
+      }
+
+      setOffset(dir === 'left' ? leftMenuWidthRef.current : -rightMenuWidthRef.current);
+    }
+
+    function handleOpen(dir) {
+      setTimeout(function () {
+        onOpen == null ? void 0 : onOpen(dir);
+      }, transitionDuration);
+    }
+
+    function handleClose(dir) {
+      setTimeout(function () {
+        onClose == null ? void 0 : onClose(dir);
+      }, transitionDuration);
+    }
+
+    function actionClick(e) {
+      var _leftRef$current, _rightRef$current;
+
+      if (isOpen.current && !forbidClick.current && !((_leftRef$current = leftRef.current) != null && _leftRef$current.contains(e.target)) && !((_rightRef$current = rightRef.current) != null && _rightRef$current.contains(e.target))) {
+        close();
+      }
+    }
+
+    function getActionRightByIndex(index) {
+      var preWidth = leftMenuWidthArr.slice(index + 1).reduce(function (acc, cur) {
+        return acc + cur;
+      }, 0);
+      return (preWidth / leftMenuWidthRef.current || 0) * 100 + "%";
+    }
+
+    function getActionLeftByIndex(index) {
+      var preWidth = rightMenuWidthArr.slice(0, index).reduce(function (acc, cur) {
+        return acc + cur;
+      }, 0);
+      return (preWidth / rightMenuWidthRef.current || 0) * 100 + "%";
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action", className, offset === 0 ? 'action-close' : 'action-open'),
+      style: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, style || {}, transitionStyle, {
+        transform: "translateX(" + offset + "px)"
+      })),
+      ref: domRef,
+      onClick: actionClick
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action-menu-left", prefixCls + "-swipe-action-menu", offset > 0 ? 'action-open' : 'action-close'),
+      ref: leftRef,
+      style: isLayer && offset >= 0 ? (0, _extends2.default)({
+        width: offset
+      }, transitionStyle) : {}
+    }, leftActions == null ? void 0 : leftActions.map(function (action, index) {
+      return /*#__PURE__*/_react.default.createElement(_item.default, {
+        action: (0, _extends2.default)({}, action || {}, {
+          style: (0, _extends2.default)({}, isLayer ? {
+            right: getActionRightByIndex(index)
+          } : {}, action.style || {}),
+          className: (0, _mobileUtils.cls)(action.className, "open-style-" + openStyleType)
+        }),
+        prefixCls: prefixCls + "-swipe-action-menu-action",
+        index: leftActions.length - index,
+        type: "left",
+        close: close,
+        key: index
+      });
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-swipe-action-content"
+    }, children), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action-menu-right", prefixCls + "-swipe-action-menu", offset < 0 ? 'action-open' : 'action-close'),
+      ref: rightRef,
+      style: isLayer && offset <= 0 ? (0, _extends2.default)({
+        width: -1 * offset
+      }, transitionStyle) : {}
+    }, rightActions == null ? void 0 : rightActions.map(function (action, index) {
+      return /*#__PURE__*/_react.default.createElement(_item.default, {
+        action: (0, _extends2.default)({}, action || {}, {
+          style: (0, _extends2.default)({}, isLayer ? {
+            left: getActionLeftByIndex(index)
+          } : {}, action.style || {}),
+          className: (0, _mobileUtils.cls)(action.className, "open-style-" + openStyleType)
+        }),
+        prefixCls: prefixCls + "-swipe-action-menu-action",
+        index: index + 1,
+        type: "right",
+        close: close,
+        key: index
+      });
+    })));
+  });
+  var _default = SwipeAction;
+  _exports.default = _default;
+});

package/umd/swipe-action/item.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Action } from './type';
+interface IProps {
+    action: Action;
+    prefixCls: string;
+    index: number;
+    type: 'left' | 'right';
+    close: () => void;
+}
+export default function renderAction({ action, prefixCls, index, type, close }: IProps): JSX.Element;
+export {};

package/umd/swipe-action/item.js

@@ -0,0 +1,62 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.mobileUtils);
+    global.item = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = renderAction;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireDefault(_react);
+
+  function renderAction(_ref) {
+    var action = _ref.action,
+        prefixCls = _ref.prefixCls,
+        index = _ref.index,
+        type = _ref.type,
+        close = _ref.close;
+    var text = action.text,
+        actionStyle = action.style,
+        className = action.className,
+        onClick = action.onClick,
+        icon = action.icon,
+        children = action.children;
+
+    function click() {
+      var result = (onClick == null ? void 0 : onClick()) || null;
+
+      if (!result || typeof result === 'boolean') {
+        !result && close();
+      } else if (result && result.then) {
+        result.then(function (res) {
+          return !res && close();
+        });
+      }
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _mobileUtils.cls)(prefixCls + "-" + type + " " + prefixCls + "-info-container", className),
+      style: (0, _extends2.default)({
+        zIndex: index
+      }, actionStyle),
+      onClick: click
+    }, children || /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-info"
+    }, icon ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-info-icon"
+    }, icon) : null, text ? /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixCls + "-info-text"
+    }, text) : null));
+  }
+});

package/umd/swipe-action/style/css/index.css

@@ -0,0 +1,88 @@
+.arco-swipe-action {
+  position: relative;
+  -webkit-transition: -webkit-transform 0s;
+  transition: -webkit-transform 0s;
+  transition: transform 0s;
+  transition: transform 0s, -webkit-transform 0s;
+  font-size:  0.32rem ;
+}
+.arco-swipe-action.action-open,
+.arco-swipe-action-menu.action-open {
+  -webkit-transition-timing-function:  cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
+          transition-timing-function:  cubic-bezier(0.2, 0.8, 0.32, 1.28) ;
+}
+.arco-swipe-action.action-close,
+.arco-swipe-action-menu.action-close {
+  -webkit-transition-timing-function:  cubic-bezier(0.34, 0.69, 0.1, 1) ;
+          transition-timing-function:  cubic-bezier(0.34, 0.69, 0.1, 1) ;
+}
+.arco-swipe-action-content {
+  width: 100%;
+}
+.arco-swipe-action-menu {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  position: absolute;
+  height: 100%;
+  overflow: visible;
+  -webkit-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+  top: 0;
+  -webkit-transition: width 0s;
+  transition: width 0s;
+}
+.arco-swipe-action-menu-left {
+  right: 100%;
+}
+.arco-swipe-action-menu-right {
+  left: 100%;
+}
+.arco-swipe-action-menu-action-left::after {
+  right: 100%;
+  margin-right: -1PX;
+}
+.arco-swipe-action-menu-action-right::after {
+  left: 100%;
+  margin-left: -1PX;
+}
+.arco-swipe-action-menu-action-info {
+  height: 100%;
+  padding:  0.32rem ;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-swipe-action-menu-action-info-container {
+  position: relative;
+}
+.arco-swipe-action-menu-action-info-container.open-style-layer {
+  position: absolute;
+  height: 100%;
+}
+.arco-swipe-action-menu-action-info-container::after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width:  0.6rem ;
+  background: inherit;
+}
+.arco-swipe-action-menu-action-info-text {
+  white-space: nowrap;
+  font-size:  0.32rem ;
+  line-height:  0.44rem ;
+  color:  #ffffff ;
+}
+.arco-swipe-action-menu-action-info-icon {
+  margin-right:  0.08rem ;
+  height:  0.4rem ;
+  width:  0.4rem ;
+  color:  #ffffff ;
+}

package/umd/swipe-action/style/css/index.d.ts

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