@arco-design/mobile-react 2.19.0

package/esm/swipe-load/index.js

@@ -0,0 +1,259 @@
+import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState, useContext } from 'react';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import { cls, fingerDisToLabelDis, defaultLocale } from '@arco-design/mobile-utils';
+import { useAddListener } from '../_helpers/hooks';
+export * from './type';
+/**
+ * 向左滑动到达屏幕边缘后，超过一定距离时触发加载，常用于横划展示少量的元素，滑动到底后跳转至另外界面的场景
+ * @en After swiping to the left to reach the edge of the screen, the loading is triggered when the distance exceeds a certain distance. It is often used to display a small number of elements horizontally, and then jump to another interface after swiping to the end.
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 左滑加载
+ * @name_en SwipeLoad
+ */
+
+var SwipeLoad = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$maxElementOffs = props.maxElementOffset,
+      maxElementOffset = _props$maxElementOffs === void 0 ? 56 : _props$maxElementOffs,
+      _props$maxLabelOffset = props.maxLabelOffset,
+      maxLabelOffset = _props$maxLabelOffset === void 0 ? 40 : _props$maxLabelOffset,
+      onConfirm = props.onConfirm,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$circleSize = props.circleSize,
+      circleSize = _props$circleSize === void 0 ? 80 : _props$circleSize,
+      _props$minConfirmOffs = props.minConfirmOffset,
+      minConfirmOffset = _props$minConfirmOffs === void 0 ? 30 : _props$minConfirmOffs,
+      _props$labelAnimation = props.labelAnimationFunction,
+      labelAnimationFunction = _props$labelAnimation === void 0 ? 'cubic-bezier(0.14, 1, 0.34, 1)' : _props$labelAnimation,
+      _props$labelAnimation2 = props.labelAnimationDuration,
+      labelAnimationDuration = _props$labelAnimation2 === void 0 ? 250 : _props$labelAnimation2,
+      children = props.children,
+      _props$normalText = props.normalText,
+      normalText = _props$normalText === void 0 ? '' : _props$normalText,
+      _props$activeText = props.activeText,
+      activeText = _props$activeText === void 0 ? '' : _props$activeText,
+      _props$initPos = props.initPos,
+      initPos = _props$initPos === void 0 ? 0 : _props$initPos;
+
+  var _useContext = useContext(GlobalContext),
+      _useContext$locale = _useContext.locale,
+      locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale;
+
+  var _useState = useState(disabled),
+      disableState = _useState[0],
+      setDisableState = _useState[1];
+
+  var _useState2 = useState(0),
+      labelOffsetState = _useState2[0],
+      setLabelOffsetState = _useState2[1];
+
+  var containerRef = useRef(null);
+  var loadingRef = useRef(null);
+  var loadingLabelRef = useRef(null);
+  var showLoadMoreRef = useRef(false);
+  var ifToRightRef = useRef(false);
+  var offsetRef = useRef(0);
+  var domRef = useRef(null);
+  var wrapperEl = domRef.current;
+  useAddListener(wrapperEl, 'touchstart', props.onTouchStart);
+  useAddListener(wrapperEl, 'touchend', props.onTouchEnd);
+  useAddListener(wrapperEl, 'touchcancel', props.onTouchCancel);
+  useAddListener(wrapperEl, 'touchmove', props.onTouchMove);
+  useEffect(function () {
+    if (disabled || !containerRef.current || disableState) {
+      return;
+    }
+
+    var scrollContainer; // 对children类型进行判断
+    // @en Judging the type of children
+
+    if (containerRef.current.childNodes.length === 0) {
+      // 未传入子元素 不启用组件
+      // @en If no child element is passed in,  component will be disabled
+      setDisableState(true);
+    } else if (containerRef.current.childNodes.length === 1) {
+      // 传入一个子元素 滑动单个元素
+      // @en Pass in a child element swipe the single element
+      if (props.getScrollContainer) {
+        scrollContainer = props.getScrollContainer();
+      } else {
+        scrollContainer = containerRef.current.firstChild;
+      }
+    } else {
+      // 传入多个子元素(列表元素为例) 组件控制自行滑动 不推荐
+      // @en Pass in multiple sub-elements (list elements as an example) Component control slides by itself which is not recommended
+      scrollContainer = containerRef.current;
+      scrollContainer.style.width = '100%';
+      scrollContainer.style.overflowX = 'scroll';
+      scrollContainer.style.display = 'inline-flex';
+      scrollContainer.style.webkitOverflowScrolling = 'touch';
+    }
+
+    if (!scrollContainer) {
+      return;
+    }
+
+    var loadingCurrent = loadingRef.current;
+    var loadingLabelCurrent = loadingLabelRef.current;
+
+    if (!loadingCurrent) {
+      return;
+    } // 初始不显示标签
+    // @en Initially no labels are displayed
+
+
+    loadingCurrent.style.display = 'none';
+    var startX = 0;
+    var endX = 0; // 触摸页面确定X起始坐标
+    // @en Determine the X starting coordinate on touchstart
+
+    var touchstart = function touchstart(e) {
+      startX = e.touches[0].pageX;
+    }; // 页面滑动确定X终止坐标，更新手指的X坐标，改变loading中的文字和大小
+    // @en Determine the X end coordinate, update the X coordinate of the finger, change the text and size in the loading on touchmove
+
+
+    var touchmove = function touchmove(e) {
+      // 判断元素是否属于滚动元素 先置为1 之后变成0表示非滚动容器
+      // @en Determine whether the element belongs to a scrolling element. Set it to 1 and then change to 0 to indicate a non-scrolling container
+      if (!scrollContainer.scrollLeft) {
+        scrollContainer.scrollLeft = 1;
+      }
+
+      endX = e.touches[0].pageX;
+      var diff = endX - startX;
+      offsetRef.current = diff;
+      var labelDiff = fingerDisToLabelDis(Math.abs(diff), props.damping); // 向左滑动到尽头 '更多'标签加载 根据scrollLeft判断 滚动容器到达边缘触发 非滚动容器不判断
+      // @en Swipe left to the end and the 'more' label is loaded. Judging by scrollLeft, the scroll container reaches the edge and the non-scroll container does not judge
+
+      if (diff < 0 && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && !ifToRightRef.current) {
+        showLoadMoreRef.current = true;
+        loadingCurrent.style.display = 'flex';
+      } // 继续滑动露出标签
+      // @en Continue swiping to reveal labels
+
+
+      if (showLoadMoreRef.current && diff < 0) {
+        // 此时禁止list原生滚动
+        // @en Disable list native scrolling at this time
+        e.stopPropagation();
+        e.cancelable && e.preventDefault(); // list元素平移最大 maxElementOffset
+        // @en Maximum list element translation, maxElementOffset
+
+        var listRightMargin = labelDiff > maxElementOffset ? maxElementOffset : labelDiff; // 标签的平移最大为40px(半圆)
+        // @en The translation of the label is up to 40px (semi-circle)
+
+        var labelRightMargin = labelDiff > maxLabelOffset ? maxLabelOffset : labelDiff;
+        setLabelOffsetState(labelRightMargin); // 标签全部展示 字样改变
+        // @en All labels are displayed and the text style is changed
+
+        if (loadingLabelCurrent) {
+          loadingLabelCurrent.innerHTML = labelDiff >= minConfirmOffset ? activeText || locale.SwipeLoad.activeText : normalText || locale.SwipeLoad.normalText;
+        }
+
+        loadingCurrent.style.transition = 'all 0.02s';
+        loadingCurrent.style.webkitTransform = "translateX(-" + labelRightMargin + "px)";
+        loadingCurrent.style.transform = "translateX(-" + labelRightMargin + "px)";
+        scrollContainer.style.transition = 'all 0.03s';
+        scrollContainer.style.webkitTransform = "translateX(-" + listRightMargin + "px)";
+        scrollContainer.style.transform = "translateX(-" + listRightMargin + "px)";
+      }
+
+      if (diff > 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
+        showLoadMoreRef.current = false;
+        loadingCurrent.style.display = 'none';
+      } // 针对ios惯性滚动处理
+      // @en Handling inertial scrolling for ios
+
+
+      if (diff < 0 && scrollContainer.scrollLeft + scrollContainer.clientWidth <= scrollContainer.scrollWidth - 1) {
+        ifToRightRef.current = false;
+      } else {
+        ifToRightRef.current = true;
+      }
+    }; // 露出标签 反方向滑动隐藏'更多'标签
+    // @en Reveal the label,  swipe in opposite direction to hide 'more' tab
+
+
+    var touchend = function touchend() {
+      var diff = endX - startX;
+      offsetRef.current = diff;
+      var labelDiff = fingerDisToLabelDis(Math.abs(diff));
+
+      var resumeAnimation = function resumeAnimation() {
+        scrollContainer.style.transition = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
+        scrollContainer.style.webkitTransform = 'translateX(0px)';
+        scrollContainer.style.transform = 'translateX(0px)';
+        loadingCurrent.style.transition = "all " + labelAnimationDuration + "ms " + labelAnimationFunction;
+        loadingCurrent.style.webkitTransform = 'translateX(0px)';
+        loadingCurrent.style.transform = 'translateX(0px)';
+        showLoadMoreRef.current = false;
+        ifToRightRef.current = false;
+        setTimeout(function () {
+          loadingCurrent.style.display = 'none';
+        }, labelAnimationDuration);
+      }; // 向左滑动 标签已经全部展示
+      // @em Swipe left,  labels are all displayed
+
+
+      if (labelDiff >= minConfirmOffset && (scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 1 || !scrollContainer.scrollLeft) && showLoadMoreRef.current) {
+        onConfirm(); // 安卓机型返回动画优化
+        // @en Return animation optimization on Android
+
+        setTimeout(function () {
+          resumeAnimation();
+        }, 250);
+        return;
+      }
+
+      resumeAnimation();
+    };
+
+    scrollContainer.addEventListener('touchstart', touchstart);
+    scrollContainer.addEventListener('touchmove', touchmove);
+    scrollContainer.addEventListener('touchend', touchend);
+    return function () {
+      scrollContainer.removeEventListener('touchstart', touchstart);
+      scrollContainer.removeEventListener('touchmove', touchmove);
+      scrollContainer.removeEventListener('touchend', touchend);
+    };
+  }, [disabled]);
+  useImperativeHandle(ref, function () {
+    return {
+      dom: domRef.current
+    };
+  });
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-swipe-load " + className,
+      ref: domRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-list-area"),
+      ref: containerRef
+    }, children), props.renderLabel ? /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-custom-loading-area"),
+      ref: loadingRef,
+      style: {
+        position: 'absolute',
+        right: initPos + "px"
+      }
+    }, props.renderLabel.length ? props.renderLabel(labelOffsetState) : props.renderLabel()) : /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-loading-area"),
+      ref: loadingRef,
+      style: {
+        width: circleSize + "px",
+        height: circleSize + "px",
+        position: 'absolute',
+        right: "-" + circleSize + "px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-loading-label"),
+      ref: loadingLabelRef
+    })));
+  });
+});
+export default SwipeLoad;

package/esm/swipe-load/style/css/index.css

@@ -0,0 +1,22 @@
+.arco-swipe-load {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  width: 100%;
+}
+.arco-swipe-load .arco-list-area {
+  position: relative;
+  width: 100%;
+}
+.arco-swipe-load .arco-loading-area {
+  background-color:  #f8f8f8 ;
+  margin-top: 0;
+  border-radius:  50% ;
+}
+.arco-swipe-load .arco-loading-area .arco-loading-label {
+  margin-left:  0.4rem ;
+  width:  0.4rem ;
+  color:  #1d2129 ;
+  font-size:  0.24rem ;
+}

package/esm/swipe-load/style/css/index.d.ts

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

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

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

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

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

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

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

package/esm/swipe-load/style/index.less

@@ -0,0 +1,22 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-swipe-load {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    .@{prefix}-list-area {
+        position: relative;
+        width: 100%;
+    }
+    .@{prefix}-loading-area {
+        .use-var(background-color, swipe-load-label-background);
+        margin-top: 0;
+        .use-var(border-radius, swipe-load-label-border-radius);
+        .@{prefix}-loading-label {
+            .use-var(margin-left, swipe-load-label-text-margin-left);
+            .use-var(width, swipe-load-label-text-width);
+            .use-var(color, swipe-load-label-text-color);
+            .use-var(font-size, swipe-load-label-text-font-size);
+        }
+    }
+}

package/esm/swipe-load/type.d.ts

@@ -0,0 +1,123 @@
+import { ReactNode } from 'react';
+export interface SwipeLoadProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 是否禁用组件
+     * @en whether to be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 页面元素允许划动的最大距离
+     * @en The maximum distance the page element is allowed to swipe
+     * @default 56
+     */
+    maxElementOffset?: number;
+    /**
+     * label移动的最大距离
+     * @en The maximum distance the label moves
+     * @default 40
+     */
+    maxLabelOffset?: number;
+    /**
+     * 页面允许触发的临界值(通常小于maxLabelOffset)
+     * @en The threshold value at which the page is allowed to trigger (usually less than maxLabelOffset)
+     * @default 30
+     */
+    minConfirmOffset?: number;
+    /**
+     * 释放触发的函数(跳转，加载等)
+     * @en Callback when releasing(jump, load, etc.)
+     */
+    onConfirm: () => void;
+    /**
+     * 圆形的直径
+     * @en Diameter of circle
+     * @default 80
+     */
+    circleSize?: number;
+    /**
+     * 恢复动效时长(ms)
+     * @en Resume animation duration (ms)
+     * @default 250
+     */
+    labelAnimationDuration?: number;
+    /**
+     * 恢复动效函数
+     * @en Resume animation function (ms)
+     * @default "cubic-bezier(0.14, 1, 0.34, 1)"
+     */
+    labelAnimationFunction?: string;
+    /**
+     * 阻尼动效参数，使用函数x = X/(aX+b)，其中X代表当前滑动距离，传入的值代表[a, b]
+     * @en Damping animation parameter, use the function x = X/(aX+b), where X represents the current sliding distance, and the incoming value represents [a, b]
+     * @default [0.013312, 1.636345]
+     */
+    damping?: [number, number];
+    /**
+     * 得到滚动容器
+     * @en Scroll container
+     */
+    getScrollContainer?: () => HTMLElement | null;
+    /**
+     * 标签初始文案
+     * @en Label initial text
+     * @default "更多"
+     * @default_en "More"
+     */
+    normalText?: string;
+    /**
+     * 触发跳转文案
+     * @en Text when triggering jump
+     * @default "释放查看"
+     * @default_en "Release to view"
+     */
+    activeText?: string;
+    /**
+     * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
+     * @en Throw the outer touchstart event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.
+     */
+    onTouchStart?: (e?: TouchEvent) => void;
+    /**
+     * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
+     * @en Throws the outer touchmove event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.
+     */
+    onTouchMove?: (e?: TouchEvent) => void;
+    /**
+     * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
+     * @en Throws the outer touchend event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.
+     */
+    onTouchEnd?: (e?: TouchEvent) => void;
+    /**
+     * 抛出外层touch事件，便于自定义，常用于阻止划动退出，切换tab等手势冲突
+     * @en Throws the outer touchcancel event, which is easy to customize. It is often used to prevent gesture conflicts such as swiping to exit, switching tabs, etc.
+     */
+    onTouchCancel?: (e?: TouchEvent) => void;
+    /**
+     * 用户自定义标签样式
+     * @en User-defined label style
+     */
+    renderLabel?: (offset?: number) => ReactNode;
+    /**
+     * 标签的初始位置 自定义必传
+     * @en The initial position of the label, required when customized
+     * @default 0
+     */
+    initPos?: number;
+    /**
+     * 子元素
+     * @en Children elements
+     */
+    children: ReactNode;
+}
+export interface SwipeLoadRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/esm/swipe-load/type.js

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

package/esm/switch/demo/style/css/mobile.css

@@ -0,0 +1,10 @@
+#demo-switch {
+  padding-bottom: 0.72rem;
+}
+#demo-switch .arcodesign-mobile-demo-content {
+  padding: 0;
+}
+#demo-switch .demo-3.checked,
+#demo-switch .demo-4.checked {
+  background:  #165dff ;
+}

package/esm/switch/demo/style/mobile.less

@@ -0,0 +1,14 @@
+@import '../../../../style/mixin.less';
+
+#demo-switch {
+    .rem(padding-bottom, 36);
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+    }
+    .demo-3,
+    .demo-4 {
+        &.checked {
+            .use-var(background, primary-color);
+        }
+    }
+}

package/esm/switch/index.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+interface SwitchText {
+    /**
+     * 打开时的展示文案
+     * @en Text when opened
+     */
+    on: string;
+    /**
+     * 关闭时的展示文案
+     * @en Text when closed
+     */
+    off: string;
+}
+export interface SwitchProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 组件的平台特有样式, 可选值为 android, ios
+     * @en The platform-specific style of the component, the optional values are android, ios
+     * @default 跟随当前所在系统
+     * @default_en Follow the current system
+     */
+    platform?: string;
+    /**
+     * 是否设置为打开状态 有checked时defaultChecked不会使用
+     * @en Whether it is set to open, defaultChecked will not be used when there is checked
+     */
+    checked?: boolean;
+    /**
+     * 默认的初始状态
+     * @en Default initial state
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * 开关文案
+     * @en Switch text
+     */
+    text?: SwitchText;
+    /**
+     * 圆角样式， fully - 全圆角，semi - 直角
+     * @en Rounded style, fully - full rounded, semi - right angle
+     * @default "fully"
+     */
+    shape?: 'fully' | 'semi';
+    /**
+     * 内部区域元素
+     * @en Inner area element
+     */
+    innerArea?: React.ReactNode;
+    /**
+     * 是否设置为禁用状态
+     * @en Whether it is set to disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 状态改变时触发的回调函数
+     * @en Callback when the status changes
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * touchStart事件回调
+     * @en TouchStart event
+     */
+    onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;
+    /**
+     * touchEnd事件回调
+     * @en TouchEnd event
+     */
+    onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;
+    /**
+     * click事件回调
+     * @en Click event
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface SwitchRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 开关组件，支持点击和滑动触发开关动作。
+ * @en A switch component that supports click and slide trigger switch actions.
+ * @type 数据输入
+ * @type_en Data Entry
+ * @name 开关
+ * @name_en Switch
+ */
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<SwitchRef>>;
+export default Switch;