@arco-design/mobile-react 2.19.1 → 2.21.0

package/esm/swipe-action/index.js

@@ -0,0 +1,321 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle, useEffect, useMemo, useContext, useState } from 'react';
+import { nextTick } from '@arco-design/mobile-utils/utils';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import RenderAction from './item';
+import { getStyleWithVendor, useLatestRef, useRefState } from '../_helpers';
+/**
+ * 滑动操作组件，左右滑动拉出菜单栏
+ * @en SwipeAction component, slide left and right to pull out the menu bar
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 滑动操作
+ * @name_en SwipeAction
+ */
+
+var SwipeAction = /*#__PURE__*/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 = useRef(null);
+  var leftRef = useRef(null);
+  var rightRef = useRef(null);
+  var isOpen = useRef(false);
+  var leftMenuWidthRef = useRef(0);
+
+  var _useState = useState([]),
+      leftMenuWidthArr = _useState[0],
+      setLeftMenuWidthArr = _useState[1];
+
+  var rightMenuWidthRef = useRef(0);
+
+  var _useState2 = useState([]),
+      rightMenuWidthArr = _useState2[0],
+      setRightMenuWidthArr = _useState2[1];
+
+  var dampRateRef = useLatestRef(dampRate);
+  var forbidClick = useRef(false);
+
+  var _useRefState = useRefState(false),
+      moving = _useRefState[0],
+      movingRef = _useRefState[1],
+      setMoving = _useRefState[2];
+
+  var _useRefState2 = useRefState(0),
+      offset = _useRefState2[0],
+      offsetRef = _useRefState2[1],
+      setOffset = _useRefState2[2];
+
+  var _useContext = useContext(GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var startRef = useRef(0);
+  var startX = useRef(0);
+  var slideX = useRef(0);
+  var isLayer = openStyleType === 'layer';
+  var transitionStyle = useMemo(function () {
+    return 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);
+      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
+    };
+  }
+
+  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
+
+  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
+
+  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]);
+  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.createElement("div", {
+    className: cls(prefixCls + "-swipe-action", className, offset === 0 ? 'action-close' : 'action-open'),
+    style: getStyleWithVendor(_extends({}, style || {}, transitionStyle, {
+      transform: "translateX(" + offset + "px)"
+    })),
+    ref: domRef,
+    onClick: actionClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-swipe-action-menu-left", prefixCls + "-swipe-action-menu", offset > 0 ? 'action-open' : 'action-close'),
+    ref: leftRef,
+    style: isLayer && offset >= 0 ? _extends({
+      width: offset
+    }, transitionStyle) : {}
+  }, leftActions == null ? void 0 : leftActions.map(function (action, index) {
+    return /*#__PURE__*/React.createElement(RenderAction, {
+      action: _extends({}, action || {}, {
+        style: _extends({}, isLayer ? {
+          right: getActionRightByIndex(index)
+        } : {}, action.style || {}),
+        className: cls(action.className, "open-style-" + openStyleType)
+      }),
+      prefixCls: prefixCls + "-swipe-action-menu-action",
+      index: leftActions.length - index,
+      type: "left",
+      close: close,
+      key: index
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-swipe-action-content"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: cls(prefixCls + "-swipe-action-menu-right", prefixCls + "-swipe-action-menu", offset < 0 ? 'action-open' : 'action-close'),
+    ref: rightRef,
+    style: isLayer && offset <= 0 ? _extends({
+      width: -1 * offset
+    }, transitionStyle) : {}
+  }, rightActions == null ? void 0 : rightActions.map(function (action, index) {
+    return /*#__PURE__*/React.createElement(RenderAction, {
+      action: _extends({}, action || {}, {
+        style: _extends({}, isLayer ? {
+          left: getActionLeftByIndex(index)
+        } : {}, action.style || {}),
+        className: cls(action.className, "open-style-" + openStyleType)
+      }),
+      prefixCls: prefixCls + "-swipe-action-menu-action",
+      index: index + 1,
+      type: "right",
+      close: close,
+      key: index
+    });
+  })));
+});
+export default SwipeAction;

package/esm/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/esm/swipe-action/item.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { cls } from '@arco-design/mobile-utils';
+export default 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.createElement("div", {
+    className: cls(prefixCls + "-" + type + " " + prefixCls + "-info-container", className),
+    style: _extends({
+      zIndex: index
+    }, actionStyle),
+    onClick: click
+  }, children || /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-info"
+  }, icon ? /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-info-icon"
+  }, icon) : null, text ? /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-info-text"
+  }, text) : null));
+}

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

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

package/esm/swipe-action/style/css/index.js

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

package/esm/swipe-action/style/index.d.ts

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

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

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

package/esm/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/esm/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/esm/swipe-action/type.js

@@ -0,0 +1 @@
+export {};

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