@arco-design/mobile-react 2.20.0 → 2.21.0

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';

package/umd/swipe-action/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/swipe-action/style/index.d.ts

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

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

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("./index.less"));
+  } 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/swipe-action/style/index.less

@@ -0,0 +1,89 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-swipe-action {
+    position: relative;
+    transition: transform 0s;
+    .use-var(font-size,swipe-action-text-font-size);
+
+    &, &-menu {
+        &.action-open {
+            .use-var(transition-timing-function, swipe-action-open-transition);
+        }
+        &.action-close {
+            .use-var(transition-timing-function, swipe-action-close-transition);
+        }
+    }
+
+    &-content {
+        width: 100%;
+    }
+
+    &-menu {
+        display: flex;
+        position: absolute;
+        height: 100%;
+        overflow: visible;
+        flex-wrap: nowrap;
+        top: 0;
+        transition: width 0s;
+
+        &-left {
+            right: 100%;
+        }
+
+        &-right {
+            left: 100%;
+        }
+        &-action {
+            &-left {
+                &::after {
+                    right: 100%;
+                    margin-right: -1PX;
+                }
+            }
+            &-right {
+                &::after {
+                    left: 100%;
+                    margin-left: -1PX;
+                }
+            }
+            &-info {
+                height: 100%;
+                .use-var(padding, swipe-action-info-padding);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                &-container {
+                    position: relative;
+                    &.open-style-layer {
+                        position: absolute;
+                        height: 100%;
+                    }
+                    &::after {
+                        content: " ";
+                        position: absolute;
+                        top: 0;
+                        height: 100%;
+                        .use-var(width, swipe-action-info-bounce-buffer);
+                        background: inherit;
+                    }
+                }
+
+                &-text {
+                    white-space: nowrap;
+                    .use-var(font-size,swipe-action-text-font-size);
+                    .use-var(line-height,swipe-action-text-line-height);
+                    .use-var(color, swipe-action-text-color);
+                }
+
+                &-icon {
+                    .use-var(margin-right,swipe-action-icon-margin-right);
+                    .use-var(height, swipe-action-icon-height);
+                    .use-var(width, swipe-action-icon-width);
+                    .use-var(color, swipe-action-text-color);
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,123 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface SwipeActionProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: React.CSSProperties;
+    /**
+     * 子元素
+     * @en Inner Content
+     */
+    children: ReactNode;
+    /**
+     * 右侧菜单
+     * @en right Menu
+     */
+    rightActions?: Action[];
+    /**
+     * 左侧菜单
+     * @en left Menu
+     */
+    leftActions?: Action[];
+    /**
+     * 点击外部是否自动归位
+     * @en Click outside for auto return
+     * @default false
+     */
+    closeOnTouchOutside?: boolean;
+    /**
+     * 菜单滑出多少距离后自动滑出/关闭的系数 范围 0-1
+     * @en How far the menu slides off/off automatically ranges from 0 to 1
+     * @default 0.15
+     */
+    threshold?: number;
+    /**
+     * 是否禁用
+     * @en Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 动画的执行时间 (单位ms)
+     * @en Animation execution time in ms
+     * @default 300
+     */
+    transitionDuration?: number;
+    /**
+     * 阻尼系数
+     * @en Damping coefficient
+     * @default 15
+     */
+    dampRate?: number;
+    /**
+     * 菜单滑入时的样式类型，layer - 分层堆叠进入，push - 直接依次推入
+     * @en The style type when the menu slides in. layer - the menu is stacked in layers; push - the menu is pushed directly in sequence
+     * @default "layer"
+     */
+    openStyleType?: 'layer' | 'push';
+    /**
+     * 滑出动画结束后触发
+     * @en Triggered when the slide out animation ends
+     */
+    onOpen?: (direction: 'left' | 'right') => void;
+    /**
+     * 滑入动画结束后触发
+     * @en Triggered when the slide in animation ends
+     */
+    onClose?: (direction: 'left' | 'right') => void;
+}
+export interface SwipeActionRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 使滑动条归位
+     * @en Bring the slider back into position
+     */
+    close: () => void;
+    /**
+     * 打开滑动条，默认打开右边
+     * @en Open the slider, the right by default
+     */
+    open: (direction: 'left' | 'right') => void;
+}
+export interface Action {
+    /**
+     * 自定义内容
+     * @en Custom Content
+     */
+    text?: ReactNode;
+    /**
+     * 自定义图标
+     * @en Custom Icon
+     */
+    icon?: ReactNode;
+    /**
+     * 自定义样式
+     * @en Custom Style
+     */
+    style?: CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom Style
+     */
+    className?: string;
+    /**
+     * 点击事件 返回true可以阻止菜单的关闭
+     * @en Clicking the event to return true prevents the menu from closing
+     */
+    onClick?: () => (void | boolean) | Promise<void | boolean>;
+    /**
+     * 子元素没有text或者icon的传递children
+     * @en Child elements do not pass children with text or icon
+     */
+    children?: ReactNode;
+}

package/umd/swipe-action/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/switch/index.d.ts

@@ -93,7 +93,7 @@ export interface SwitchRef {
 /**
  * 开关组件，支持点击和滑动触发开关动作。
  * @en A switch component that supports click and slide trigger switch actions.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 开关
  * @name_en Switch

package/umd/switch/index.js

@@ -24,7 +24,7 @@
   /**
    * 开关组件，支持点击和滑动触发开关动作。
    * @en A switch component that supports click and slide trigger switch actions.
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    * @name 开关
    * @name_en Switch

package/umd/tabs/tab-pane.js

@@ -182,10 +182,14 @@
       var topDis = curPaneTop - containerTop - scrollOffset;
       var scrollAttr = scrollVertical ? 'scrollTop' : 'scrollLeft';
       var scrollTop = isGlobal ? Math.max(document.documentElement[scrollAttr], document.body[scrollAttr]) : scrollEle[scrollAttr];
+      var scrollSizeAttr = scrollVertical ? 'scrollHeight' : 'scrollWidth';
+      var sizeAttr = scrollVertical ? 'offsetHeight' : 'offsetWidth';
+      var maxTopDis = isGlobal ? Math.max(document.documentElement[scrollSizeAttr], document.body[scrollSizeAttr]) - scrollTop - (scrollVertical ? window.innerHeight : window.innerWidth) : scrollEle[scrollSizeAttr] - scrollTop - scrollEle[sizeAttr];
+      var normalizedTopDis = Math.min(maxTopDis, topDis);
       clearTimeout(timerRef.current);
       autoScrollingRef.current = true;
       var duration = rightNow ? 0 : transitionDuration || 0;
-      (0, _mobileUtils.scrollWithAnimation)(scrollTop, scrollTop + topDis, function (top) {
+      (0, _mobileUtils.scrollWithAnimation)(scrollTop, scrollTop + normalizedTopDis, function (top) {
         if (isGlobal) {
           document.documentElement[scrollAttr] = top;
           document.body[scrollAttr] = top;

package/umd/tag/index.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
 /**
  * 标签组件，支持标签和标签组。
  * @en Tag component, supports tags and tag groups.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 标签
  * @name_en Tag

package/umd/tag/index.js

@@ -31,7 +31,7 @@
   /**
    * 标签组件，支持标签和标签组。
    * @en Tag component, supports tags and tag groups.
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 标签
    * @name_en Tag

package/umd/textarea/index.d.ts

@@ -84,7 +84,7 @@ export interface TextareaRef {
 /**
  * 多行文本输入框组件，支持自适应内容高度。
  * @en A multi-line textarea, supports adaptive content height.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 多行文本框
  * @name_en Textarea

package/umd/textarea/index.js

@@ -27,7 +27,7 @@
   /**
    * 多行文本输入框组件，支持自适应内容高度。
    * @en A multi-line textarea, supports adaptive content height.
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    * @name 多行文本框
    * @name_en Textarea