@arco-design/mobile-react 2.19.0

package/esm/_helpers/hooks.js

@@ -0,0 +1,511 @@
+/**
+ * @type hooks
+ * @name 公共hooks
+ * @name_en General Hooks
+ */
+import { useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { getSystem, scrollWithAnimation } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+export function useListenResize(resizeHandler, deps, needListen) {
+  if (deps === void 0) {
+    deps = [];
+  }
+
+  if (needListen === void 0) {
+    needListen = true;
+  }
+
+  useEffect(function () {
+    if (!needListen) {
+      return function () {};
+    }
+
+    window.addEventListener('resize', resizeHandler);
+    window.addEventListener('orientationchange', resizeHandler);
+    return function () {
+      window.removeEventListener('resize', resizeHandler);
+      window.removeEventListener('orientationchange', resizeHandler);
+    };
+  }, [].concat(deps, [needListen]));
+}
+/**
+ * useState自定义封装，统一处理在组件卸载后还使用setState的行为
+ * tips：在unmount后有异步处理未完成的场景使用，不推荐无脑替换useState
+ * @desc {en} Custom encapsulation of useState, uniformly handle the behavior of using setState after the component is unloaded
+ * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
+ * @param initialState 初始状态
+ * @param initialState {en} Initial State
+ */
+
+export function useMountedState(initialState) {
+  var _useState = useState(initialState),
+      state = _useState[0],
+      setState = _useState[1];
+
+  var leavingRef = useRef(false);
+  var setValidState = useCallback(function (value) {
+    if (leavingRef.current) {
+      return;
+    }
+
+    setState(value);
+  }, []);
+  useEffect(function () {
+    return function () {
+      leavingRef.current = true;
+    };
+  }, []);
+  var result = [state, setValidState];
+  return result;
+}
+export function useRefState(initialValue) {
+  var _useState2 = useState(initialValue),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var stateRef = useRef(state);
+  useEffect(function () {
+    stateRef.current = state;
+  }, [state]);
+  return [state, stateRef, setState];
+}
+export function useRefMountedState(initialValue) {
+  var _useMountedState = useMountedState(initialValue),
+      state = _useMountedState[0],
+      setState = _useMountedState[1];
+
+  var stateRef = useRef(state);
+  useEffect(function () {
+    stateRef.current = state;
+  }, [state]);
+  return [state, stateRef, setState];
+}
+export function useUpdateEffect(effect, dependencies) {
+  if (dependencies === void 0) {
+    dependencies = [];
+  }
+
+  var isInitialMount = useRef(true);
+  useEffect(function () {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      return effect();
+    }
+  }, dependencies);
+}
+export function useForceUpdate() {
+  var _useState3 = useState(0),
+      setTick = _useState3[1];
+
+  var update = useCallback(function () {
+    setTick(function (tick) {
+      return tick + 1;
+    });
+  }, []);
+  return update;
+}
+export function useLatestRef(variable) {
+  var variableRef = useRef(variable);
+  useEffect(function () {
+    variableRef.current = variable;
+  }, [variable]);
+  return variableRef;
+}
+export function useSystem() {
+  var _useContext = useContext(GlobalContext),
+      currentSystem = _useContext.system;
+
+  var _useState4 = useState(function () {
+    return currentSystem || getSystem();
+  }),
+      system = _useState4[0],
+      setSystem = _useState4[1];
+
+  useEffect(function () {
+    setSystem(currentSystem || getSystem());
+  }, [currentSystem]);
+  return system;
+}
+export function useWindowSize(listenResize) {
+  var _useState5 = useState(0),
+      windowWidth = _useState5[0],
+      setWindowWidth = _useState5[1];
+
+  var _useState6 = useState(0),
+      windowHeight = _useState6[0],
+      setWindowHeight = _useState6[1];
+
+  function setSize() {
+    setWindowWidth(window.innerWidth);
+    setWindowHeight(window.innerHeight);
+  }
+
+  useListenResize(setSize, [], listenResize);
+  useEffect(function () {
+    setSize();
+  }, []);
+  return {
+    windowWidth: windowWidth,
+    windowHeight: windowHeight
+  };
+}
+
+/* eslint-disable max-lines-per-function */
+export function usePopupScroll(visible, popupDom, getScrollContainer, orientationDirection, preventCallback, onTouchMove, gestureOutOfControl) {
+  if (orientationDirection === void 0) {
+    orientationDirection = 'top';
+  }
+
+  var scrollRef = useRef([]);
+  var touchingRef = useRef({
+    dom: null,
+    inScrollIndexes: []
+  });
+  var touchStartYRef = useRef(0);
+  var touchStartXRef = useRef(0);
+  var preventCallbackRef = useLatestRef(preventCallback);
+  var onTouchMoveRef = useLatestRef(onTouchMove);
+  var handleTouchStart = useCallback(function (e) {
+    if (gestureOutOfControl) {
+      return;
+    }
+
+    touchStartXRef.current = e.touches && e.touches[0] ? e.touches[0].clientX : 0;
+    touchStartYRef.current = e.touches && e.touches[0] ? e.touches[0].clientY : 0;
+    var ele = getScrollContainer ? getScrollContainer() : null;
+
+    if (ele) {
+      var actualEle = Array.isArray(ele) ? ele : [ele];
+      scrollRef.current = actualEle.reduce(function (acc, nowEle) {
+        return [].concat(acc, nowEle && window.getComputedStyle(nowEle).overflow !== 'hidden' ? [{
+          ele: nowEle,
+          maxScrollX: orientationDirection === 'left' || orientationDirection === 'right' ? nowEle.scrollHeight - nowEle.clientHeight : nowEle.scrollWidth - nowEle.clientWidth,
+          maxScrollY: orientationDirection === 'left' || orientationDirection === 'right' ? nowEle.scrollWidth - nowEle.clientWidth : nowEle.scrollHeight - nowEle.clientHeight
+        }] : []);
+      }, []);
+    } else {
+      scrollRef.current = [];
+    }
+
+    touchingRef.current = {
+      dom: null,
+      inScrollIndexes: []
+    };
+  }, [getScrollContainer, gestureOutOfControl, orientationDirection]);
+
+  function judgeInScroll(originNode, scroll) {
+    var inScrollIndexes = [];
+
+    for (var i = 0; i < scroll.length; i += 1) {
+      var node = originNode;
+
+      while (node && scroll[i]) {
+        if (node === scroll[i].ele) {
+          inScrollIndexes.push(i);
+          break;
+        } else {
+          node = node.parentElement;
+        }
+      }
+    }
+
+    touchingRef.current = {
+      dom: originNode,
+      inScrollIndexes: inScrollIndexes
+    };
+    return inScrollIndexes;
+  }
+
+  var handleTouchMove = useCallback(function (e) {
+    function getScrollTop(scroll) {
+      var ele = scroll.ele,
+          maxScrollX = scroll.maxScrollX,
+          maxScrollY = scroll.maxScrollY;
+
+      switch (orientationDirection) {
+        case 'left':
+          return maxScrollY - ele.scrollLeft;
+
+        case 'right':
+          return ele.scrollLeft;
+
+        case 'bottom':
+          return maxScrollX - ele.scrollTop;
+
+        case 'top':
+        default:
+          return ele.scrollTop;
+      }
+    }
+
+    function getScrollLeft(scroll) {
+      var ele = scroll.ele,
+          maxScrollX = scroll.maxScrollX,
+          maxScrollY = scroll.maxScrollY;
+
+      switch (orientationDirection) {
+        case 'left':
+          return ele.scrollTop;
+
+        case 'right':
+          return maxScrollX - ele.scrollTop;
+
+        case 'bottom':
+          return maxScrollY - ele.scrollLeft;
+
+        case 'top':
+        default:
+          return ele.scrollLeft;
+      }
+    }
+
+    var touchMoveX = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : 0;
+    var touchMoveY = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientY : 0;
+    var scroll = scrollRef.current;
+    var node = e.target;
+    var _touchingRef$current = touchingRef.current,
+        touchingDom = _touchingRef$current.dom,
+        touchingIndexes = _touchingRef$current.inScrollIndexes; // target一样就取缓存结果，不取dom判断了
+    // @en If the target is the same, the cached result is taken, and the dom judgment is not taken.
+
+    var inScrollIndexes = touchingDom === node ? touchingIndexes : judgeInScroll(node, scroll);
+    var distanceX = touchMoveX - touchStartXRef.current;
+    var distanceY = touchMoveY - touchStartYRef.current;
+    var absX = Math.abs(distanceX);
+    var absY = Math.abs(distanceY);
+    var direc = absY > absX ? 'y' : 'x';
+    var prevented = false;
+
+    if (gestureOutOfControl) {
+      onTouchMoveRef.current == null ? void 0 : onTouchMoveRef.current(e, prevented, direc);
+      return;
+    }
+
+    if (scroll.length && inScrollIndexes.length) {
+      var needPrevents = [];
+
+      for (var i = 0; i < inScrollIndexes.length; i += 1) {
+        var touchingScroll = scroll[inScrollIndexes[i]];
+        var scrollTop = getScrollTop(touchingScroll);
+        var scrollLeft = getScrollLeft(touchingScroll);
+
+        if (distanceY > 0 && absY > absX && scrollTop === 0 || distanceX > 0 && absX > absY && scrollLeft === 0) {
+          needPrevents.push(true);
+          continue;
+        }
+
+        if (distanceY < 0 && absY > absX && scrollTop + 1 >= touchingScroll.maxScrollY || distanceX < 0 && absX > absY && scrollLeft + 1 >= touchingScroll.maxScrollX) {
+          needPrevents.push(true);
+          continue;
+        }
+
+        needPrevents.push(false);
+      } // 满足一个不prevent的条件就停止prevent，否则prevent
+      // @en Stop prevent if a non-prevent condition is met, otherwise prevent.
+
+
+      if (needPrevents.indexOf(false) < 0) {
+        preventCallbackRef.current == null ? void 0 : preventCallbackRef.current(e, direc);
+        e.cancelable && e.preventDefault();
+        prevented = true;
+      }
+    } else {
+      preventCallbackRef.current == null ? void 0 : preventCallbackRef.current(e, direc);
+      e.cancelable && e.preventDefault();
+      prevented = true;
+    }
+
+    onTouchMoveRef.current == null ? void 0 : onTouchMoveRef.current(e, prevented, direc);
+  }, [orientationDirection, gestureOutOfControl]);
+  useEffect(function () {
+    if (!visible || !popupDom) {
+      return function () {};
+    }
+
+    popupDom.addEventListener('touchstart', handleTouchStart);
+    popupDom.addEventListener('touchmove', handleTouchMove, {
+      passive: false
+    });
+    return function () {
+      popupDom.removeEventListener('touchstart', handleTouchStart);
+      popupDom.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [visible, popupDom, handleTouchStart, handleTouchMove]);
+}
+export function useSwiperInnerScroll(getInnerScrollContainer) {
+  var stopFunc = useCallback(function (e) {
+    return e.stopPropagation();
+  }, []);
+  useEffect(function () {
+    if (!getInnerScrollContainer) {
+      return;
+    }
+
+    var containers = getInnerScrollContainer();
+    var validContainers = Array.isArray(containers) ? containers : [containers];
+    validContainers.forEach(function (container) {
+      if (container) {
+        container.addEventListener('touchstart', stopFunc);
+        container.addEventListener('touchmove', stopFunc);
+      }
+    });
+    return function () {
+      validContainers.forEach(function (container) {
+        if (container) {
+          container.removeEventListener('touchstart', stopFunc);
+          container.removeEventListener('touchmove', stopFunc);
+        }
+      });
+    };
+  }, [getInnerScrollContainer]);
+}
+export function useAddListener(dom, event, handler, options) {
+  if (options === void 0) {
+    options = {
+      capture: true
+    };
+  }
+
+  useEffect(function () {
+    if (!dom) return;
+
+    if (handler) {
+      dom.addEventListener(event, handler, options);
+    }
+
+    return function () {
+      if (handler) {
+        dom.removeEventListener(event, handler, options);
+      }
+    };
+  }, [handler]);
+}
+/**
+ * 统计同时出现的全屏组件
+ * @en Count simultaneous full-screen components
+ */
+
+var arcoFullScreenCount = 0;
+var arcoFullScreenOriginOverflow = '';
+export function usePreventBodyScroll(visible, preventBodyScroll, initialBodyOverflow) {
+  // 新出现一个全屏组件则计数+1，并设置body hidden样式
+  // @en When a new full-screen component appears, count + 1 and set the body hidden style
+  var addFullScreen = useCallback(function () {
+    var count = arcoFullScreenCount; // 在当前没有全屏组件出现时，记下body overflow的初始值
+    // @en Note the initial value of body overflow when no full-screen components are currently present
+
+    if (!count) {
+      arcoFullScreenOriginOverflow = initialBodyOverflow !== void 0 ? initialBodyOverflow : document.body.style.overflow;
+    }
+
+    arcoFullScreenCount += 1;
+    document.body.style.overflow = 'hidden';
+  }, []);
+  /**
+   * 移除一个全屏组件时，根据剩余是否还有全屏组件判断是否需要还原overflow样式
+   * @en When removing a full-screen component, determine whether the overflow style needs to be restored according to whether there are any remaining full-screen components.
+   */
+
+  var removeFullScreen = useCallback(function () {
+    var newCount = arcoFullScreenCount - 1;
+    arcoFullScreenCount = newCount;
+
+    if (!newCount) {
+      document.body.style.overflow = arcoFullScreenOriginOverflow;
+    }
+  }, []);
+  useEffect(function () {
+    if (!preventBodyScroll) {
+      return function () {};
+    } // 如果一开始就是visible=true则加上样式
+    // @en If it is visible=true at the beginning, add the style.
+
+
+    if (visible) {
+      addFullScreen();
+    }
+
+    return function () {
+      // 如果这里visible为true，则说明即将隐藏组件或在展示时卸载组件
+      // @en If visible here is true, it means that the component is about to be hidden or unloaded when displayed.
+      if (visible) {
+        removeFullScreen();
+      }
+    };
+  }, [visible]);
+}
+export var useProgress = function useProgress(mountedTransition, percentage, duration, mountedBezier, step) {
+  var _useState7 = useState(0),
+      currentPercentage = _useState7[0],
+      setCurrentPercentage = _useState7[1];
+
+  var _useState8 = useState(false),
+      transitionControl = _useState8[0],
+      setTransitionControl = _useState8[1];
+
+  var _useState9 = useState(0),
+      count = _useState9[0],
+      setCount = _useState9[1];
+
+  useEffect(function () {
+    mountedTransition ? scrollWithAnimation(0, percentage, function (progress) {
+      setCurrentPercentage(Math.floor(progress));
+    }, duration, mountedBezier) : setCurrentPercentage(percentage);
+    var id = setTimeout(function () {
+      setTransitionControl(true);
+    }, 30);
+    return function () {
+      return clearTimeout(id);
+    };
+  }, []);
+  useEffect(function () {
+    setCount(Math.floor(percentage / step));
+  }, [percentage, step]);
+  useEffect(function () {
+    percentage === 100 ? setCurrentPercentage(100) : setCurrentPercentage(count * step);
+  }, [count, percentage, step]);
+  return [currentPercentage, transitionControl];
+};
+export function useSingleAndDoubleClick(onClick, onDoubleClick, delay) {
+  if (delay === void 0) {
+    delay = 200;
+  }
+
+  var _useState10 = useState(0),
+      clickTimes = _useState10[0],
+      setClickTimes = _useState10[1];
+
+  var eventRef = useRef();
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      if (clickTimes === 1) onClick(eventRef.current);
+      setClickTimes(0);
+    }, delay);
+    if (clickTimes === 2) onDoubleClick(eventRef.current);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [clickTimes]);
+  return function (e) {
+    eventRef.current = e;
+    setClickTimes(function (prev) {
+      return prev + 1;
+    });
+  };
+}
+var arcoSvgKeyCount = 0;
+export function useGenSvgKey(userSetSvgKey) {
+  var _useState11 = useState(''),
+      innerSvgKey = _useState11[0],
+      setInnerSvgKey = _useState11[1];
+
+  var svgKey = userSetSvgKey || innerSvgKey;
+  useEffect(function () {
+    setInnerSvgKey("inner-" + arcoSvgKeyCount);
+    arcoSvgKeyCount += 1;
+  }, []);
+  return {
+    svgKey: svgKey
+  };
+}

package/esm/_helpers/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @type utils
+ * @name componentUtils
+ */
+import { CSSProperties } from 'react';
+export * from './hooks';
+export * from './type';
+export declare function getStyleWithVendor(style: CSSProperties): CSSProperties;
+/**
+ * 计算默认值，仅未定义时使用默认值
+ * @desc {en} Calculate the default value, use default value only if undefined
+ */
+export declare const getDefaultValue: <T>(value: T | undefined, defaultValue: T) => T;

package/esm/_helpers/index.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/**
+ * @type utils
+ * @name componentUtils
+ */
+export * from './hooks';
+export * from './type';
+export function getStyleWithVendor(style) {
+  var allowReg = /(transform|transition|animation)/i;
+  var newStyle = Object.keys(style).reduce(function (acc, key) {
+    var _ref, _extends2;
+
+    var webkitStyle = allowReg.test(key) ? (_ref = {}, _ref["Webkit" + key.replace(/^(.)/, function (_, p1) {
+      return p1.toUpperCase();
+    })] = style[key], _ref) : {};
+    return _extends({}, acc, (_extends2 = {}, _extends2[key] = style[key], _extends2), webkitStyle);
+  }, {});
+  return newStyle;
+}
+/**
+ * 计算默认值，仅未定义时使用默认值
+ * @desc {en} Calculate the default value, use default value only if undefined
+ */
+
+export var getDefaultValue = function getDefaultValue(value, defaultValue) {
+  return value === void 0 ? defaultValue : value;
+};

package/esm/_helpers/type.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface SimpleBaseProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     * @default ""
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     * @default {}
+     */
+    style?: React.CSSProperties;
+}
+export interface BaseProps extends SimpleBaseProps {
+    /**
+     * 自定义组件内容
+     * @en Custom component content
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+export interface BaseRef {
+    /**
+     * 组件外层dom元素
+     * @en The outer DOM element of the component
+     * */
+    dom: HTMLDivElement | null;
+}

package/esm/_helpers/type.js

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

package/esm/action-sheet/demo/style/css/mobile.css

@@ -0,0 +1,10 @@
+#demo-action-sheet .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  margin: 0 0.24rem;
+  border-radius: 0.16rem;
+  overflow: hidden;
+}
+.demo-action-sheet .primary-item {
+  color:  #165dff ;
+}

package/esm/action-sheet/demo/style/mobile.less

@@ -0,0 +1,20 @@
+@import "../../../../style/mixin.less";
+
+#demo-action-sheet {
+
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        .rem(margin, 0, 12);
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+
+}
+
+.demo-action-sheet {
+
+    .primary-item {
+        .use-var(color, primary-color);
+    }
+}