@arco-design/mobile-react 2.25.3 → 2.26.0

package/esm/checkbox/index.js

@@ -2,14 +2,13 @@ import { componentWrapper } from '@arco-design/mobile-utils';
 import { componentGenerator } from './group';
 import { Checkbox } from './checkbox';
 export * from './type';
-
 /**
  * 复选项组
  * @en Checkbox group
  * @displayName CheckboxGroup
  */
-var Group = componentWrapper(componentGenerator(Checkbox), 'CheckboxGroup');
 
+var Group = componentWrapper(componentGenerator(Checkbox), 'CheckboxGroup');
 /**
  * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
  * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
@@ -19,6 +18,7 @@ var Group = componentWrapper(componentGenerator(Checkbox), 'CheckboxGroup');
  * @type_en Data Entry
  * @displayName Checkbox
  */
+
 export default componentWrapper(Checkbox, 'Checkbox', {
   Group: Group
 });

package/esm/checkbox/type.js

@@ -3,6 +3,7 @@
  * @en Icon status enum
  *  */
 export var IconStatus;
+
 (function (IconStatus) {
   IconStatus["NORMAL"] = "normal";
   IconStatus["DISABLED"] = "disabled";

package/esm/circle-progress/index.js

@@ -3,6 +3,7 @@ import { cls } from '@arco-design/mobile-utils';
 import React, { useRef, forwardRef, useImperativeHandle, useMemo } from 'react';
 import { ContextLayout } from '../context-provider';
 import { getStyleWithVendor, useGenSvgKey, useProgress } from '../_helpers';
+
 /**
  * 环形进度条组件，以圆环形式表示百分比进度
  * @en Annular progress bar component, representing percentage progress in the form of a circle
@@ -13,69 +14,76 @@ import { getStyleWithVendor, useGenSvgKey, useProgress } from '../_helpers';
  */
 var CircleProgress = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$size = props.size,
-    size = _props$size === void 0 ? 'default' : _props$size;
+      size = _props$size === void 0 ? 'default' : _props$size;
   var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    style = props.style,
-    _props$percentPositio = props.percentPosition,
-    percentPosition = _props$percentPositio === void 0 ? 'center' : _props$percentPositio,
-    _props$showPercent = props.showPercent,
-    showPercent = _props$showPercent === void 0 ? size !== 'mini' : _props$showPercent,
-    renderPercent = props.renderPercent,
-    trackColor = props.trackColor,
-    progressColor = props.progressColor,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$trackStroke = props.trackStroke,
-    trackStroke = _props$trackStroke === void 0 ? size === 'mini' ? 4 : 2 : _props$trackStroke,
-    _props$progressStroke = props.progressStroke,
-    progressStroke = _props$progressStroke === void 0 ? 4 : _props$progressStroke,
-    progressColorStart = props.progressColorStart,
-    progressColorEnd = props.progressColorEnd,
-    _props$duration = props.duration,
-    duration = _props$duration === void 0 ? 300 : _props$duration,
-    _props$step = props.step,
-    step = _props$step === void 0 ? 1 : _props$step,
-    _props$clockwise = props.clockwise,
-    clockwise = _props$clockwise === void 0 ? false : _props$clockwise,
-    _props$radius = props.radius,
-    radius = _props$radius === void 0 ? size === 'mini' ? 9 : 30 : _props$radius,
-    _props$filleted = props.filleted,
-    filleted = _props$filleted === void 0 ? size !== 'mini' : _props$filleted,
-    _props$mountedTransit = props.mountedTransition,
-    mountedTransition = _props$mountedTransit === void 0 ? true : _props$mountedTransit,
-    _props$mountedBezier = props.mountedBezier,
-    mountedBezier = _props$mountedBezier === void 0 ? [0.34, 0.69, 0.1, 1] : _props$mountedBezier,
-    _props$svgKey = props.svgKey,
-    userSetSvgKey = _props$svgKey === void 0 ? '' : _props$svgKey;
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      _props$percentPositio = props.percentPosition,
+      percentPosition = _props$percentPositio === void 0 ? 'center' : _props$percentPositio,
+      _props$showPercent = props.showPercent,
+      showPercent = _props$showPercent === void 0 ? size !== 'mini' : _props$showPercent,
+      renderPercent = props.renderPercent,
+      trackColor = props.trackColor,
+      progressColor = props.progressColor,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$trackStroke = props.trackStroke,
+      trackStroke = _props$trackStroke === void 0 ? size === 'mini' ? 4 : 2 : _props$trackStroke,
+      _props$progressStroke = props.progressStroke,
+      progressStroke = _props$progressStroke === void 0 ? 4 : _props$progressStroke,
+      progressColorStart = props.progressColorStart,
+      progressColorEnd = props.progressColorEnd,
+      _props$duration = props.duration,
+      duration = _props$duration === void 0 ? 300 : _props$duration,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      _props$clockwise = props.clockwise,
+      clockwise = _props$clockwise === void 0 ? false : _props$clockwise,
+      _props$radius = props.radius,
+      radius = _props$radius === void 0 ? size === 'mini' ? 9 : 30 : _props$radius,
+      _props$filleted = props.filleted,
+      filleted = _props$filleted === void 0 ? size !== 'mini' : _props$filleted,
+      _props$mountedTransit = props.mountedTransition,
+      mountedTransition = _props$mountedTransit === void 0 ? true : _props$mountedTransit,
+      _props$mountedBezier = props.mountedBezier,
+      mountedBezier = _props$mountedBezier === void 0 ? [0.34, 0.69, 0.1, 1] : _props$mountedBezier,
+      _props$svgKey = props.svgKey,
+      userSetSvgKey = _props$svgKey === void 0 ? '' : _props$svgKey;
   var domRef = useRef(null);
   var maxStroke = Math.max(progressStroke, trackStroke);
   var circlePos = maxStroke + radius;
   var circleSize = (radius + maxStroke) * 2;
   var circleLen = 2 * Math.PI * radius;
   var percentage = Math.min(100, Math.max(props.percentage, 0));
+
   var _useGenSvgKey = useGenSvgKey(userSetSvgKey),
-    svgKey = _useGenSvgKey.svgKey;
+      svgKey = _useGenSvgKey.svgKey;
+
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
     };
   });
   var isRenderNormal = !(Boolean(progressColorStart) && Boolean(progressColorEnd));
+
   var _useProgress = useProgress(mountedTransition, percentage, duration, mountedBezier, step),
-    currentPercentage = _useProgress[0],
-    transitionControl = _useProgress[1];
+      currentPercentage = _useProgress[0],
+      transitionControl = _useProgress[1];
+
   var color = useMemo(function () {
     if (isRenderNormal) {
       if (progressColorStart) {
         return progressColorStart;
       }
+
       if (progressColorEnd) {
         return progressColorEnd;
       }
+
       return progressColor;
     }
   }, [progressColorStart, progressColorEnd, progressColor]);
+
   function renderNormalProgress() {
     return /*#__PURE__*/React.createElement("circle", {
       cx: circlePos,
@@ -95,6 +103,7 @@ var CircleProgress = /*#__PURE__*/forwardRef(function (props, ref) {
       fill: "none"
     });
   }
+
   function renderLinearGradient() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
       id: svgKey + "-grad-circle-progress",
@@ -132,9 +141,11 @@ var CircleProgress = /*#__PURE__*/forwardRef(function (props, ref) {
       fill: "none"
     }));
   }
+
   function renderProgress() {
     return isRenderNormal ? renderNormalProgress() : renderLinearGradient();
   }
+
   function renderCircleProgress(_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
@@ -172,6 +183,7 @@ var CircleProgress = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }, renderPercent !== void 0 ? renderPercent(currentPercentage) : currentPercentage + "%") : null);
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderCircleProgress);
 });
 export default CircleProgress;

package/esm/collapse/collapse.js

@@ -6,85 +6,101 @@ import IconArrowDown from '../icon/IconArrowDown';
 import { allContexts, CollapseKeyContext } from './utils';
 export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$header = props.header,
-    header = _props$header === void 0 ? '' : _props$header,
-    icon = props.icon,
-    _props$hideIcon = props.hideIcon,
-    hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$content = props.content,
-    content = _props$content === void 0 ? null : _props$content,
-    _props$defaultActive = props.defaultActive,
-    defaultActive = _props$defaultActive === void 0 ? false : _props$defaultActive,
-    _props$value = props.value,
-    value = _props$value === void 0 ? '' : _props$value,
-    active = props.active,
-    animationTimeout = props.animationTimeout,
-    animationFunction = props.animationFunction,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style;
+      header = _props$header === void 0 ? '' : _props$header,
+      icon = props.icon,
+      _props$hideIcon = props.hideIcon,
+      hideIcon = _props$hideIcon === void 0 ? false : _props$hideIcon,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$content = props.content,
+      content = _props$content === void 0 ? null : _props$content,
+      _props$defaultActive = props.defaultActive,
+      defaultActive = _props$defaultActive === void 0 ? false : _props$defaultActive,
+      _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value,
+      active = props.active,
+      animationTimeout = props.animationTimeout,
+      animationFunction = props.animationFunction,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style;
+
   var _useState = useState(defaultActive),
-    innerActive = _useState[0],
-    setInnerActive = _useState[1];
+      innerActive = _useState[0],
+      setInnerActive = _useState[1];
+
   var _useRefState = useRefState(active === void 0 ? innerActive : active),
-    itemActive = _useRefState[0],
-    itemActiveRef = _useRefState[1],
-    setItemActive = _useRefState[2];
+      itemActive = _useRefState[0],
+      itemActiveRef = _useRefState[1],
+      setItemActive = _useRefState[2];
+
   var contentHeightRef = useRef(0);
   var collapseHeaderRef = useRef(null);
   var domRef = useRef(null);
   var contentWrapRef = useRef(null);
   var contentRef = useRef(null);
+
   var _useContext = useContext(CollapseKeyContext),
-    groupKey = _useContext.key;
+      groupKey = _useContext.key;
+
   var CollapseContext = allContexts[groupKey] || {};
   var groupContext = useContext(CollapseContext) || {};
   var opened = useMemo(function () {
-    var show = false;
-    // 优先级： group > children
+    var show = false; // 优先级： group > children
     // @en Priority: group > children
+
     if (groupContext.isGroup) {
       if (active !== void 0) {
         show = active;
       }
+
       if (groupContext.value) show = groupContext.value.includes(value);
     } else {
       show = itemActive;
     }
+
     return show;
   }, [value, active, itemActive, groupContext.isGroup, groupContext.value]);
+
   var getContentHeight = function getContentHeight() {
     var _div$getBoundingClien, _div$getBoundingClien2;
+
     var div = contentRef.current;
     return (_div$getBoundingClien = div == null ? void 0 : (_div$getBoundingClien2 = div.getBoundingClientRect()) == null ? void 0 : _div$getBoundingClien2.height) != null ? _div$getBoundingClien : 0;
   };
+
   var resetHeight = function resetHeight(newHeight) {
     if (!contentWrapRef.current) {
       return;
     }
+
     contentWrapRef.current.style.height = newHeight;
     var transTimeout = convertCssDuration(contentWrapRef.current, 'transitionDuration');
     setTimeout(function () {
       return contentWrapRef.current && (contentWrapRef.current.style.height = opened ? 'auto' : '0px');
     }, opened ? transTimeout : 20);
   };
+
   var toggleOpened = function toggleOpened() {
     var height = getContentHeight();
     var isBeginning = contentHeightRef.current === 0;
     contentHeightRef.current = height;
+
     if (isBeginning) {
       var initHeight = opened ? 'auto' : '0px';
       contentWrapRef.current && (contentWrapRef.current.style.height = initHeight);
       return;
     }
+
     resetHeight(height + "px");
   };
+
   var updateLayout = function updateLayout() {
     if (!contentWrapRef.current) {
       return;
     }
+
     var height = getContentHeight();
     contentWrapRef.current.style.height = opened ? contentHeightRef.current + "px" : '0px';
     nextTick(function () {
@@ -92,15 +108,18 @@ export var Collapse = /*#__PURE__*/forwardRef(function (props, ref) {
       resetHeight(opened ? height + "px" : '0px');
     });
   };
+
   var onCollapse = function onCollapse(val) {
     if (disabled) return;
     props.onCollapse && props.onCollapse(val);
+
     if (!groupContext.isGroup) {
       setInnerActive(!itemActiveRef.current);
     } else {
       groupContext.onCollapse(value);
     }
   };
+
   useEffect(function () {
     setItemActive(active === void 0 ? innerActive : active);
   }, [active, innerActive]);

package/esm/collapse/group.js

@@ -7,50 +7,61 @@ import { GlobalContext } from '../context-provider';
 export function componentGenerator(Comp) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var _props$items = props.items,
-      items = _props$items === void 0 ? [] : _props$items,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$style = props.style,
-      style = _props$style === void 0 ? {} : _props$style,
-      _props$defaultActiveI = props.defaultActiveItems,
-      defaultActiveItems = _props$defaultActiveI === void 0 ? [] : _props$defaultActiveI,
-      _props$useAccordion = props.useAccordion,
-      useAccordion = _props$useAccordion === void 0 ? false : _props$useAccordion,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      children = props.children,
-      groupKey = props.groupKey;
+        items = _props$items === void 0 ? [] : _props$items,
+        _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$style = props.style,
+        style = _props$style === void 0 ? {} : _props$style,
+        _props$defaultActiveI = props.defaultActiveItems,
+        defaultActiveItems = _props$defaultActiveI === void 0 ? [] : _props$defaultActiveI,
+        _props$useAccordion = props.useAccordion,
+        useAccordion = _props$useAccordion === void 0 ? false : _props$useAccordion,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        children = props.children,
+        groupKey = props.groupKey;
+
     var _useState = useState([]),
-      innerActiveItems = _useState[0],
-      setInnerActiveItems = _useState[1];
+        innerActiveItems = _useState[0],
+        setInnerActiveItems = _useState[1];
+
     var _useState2 = useState([]),
-      activeItems = _useState2[0],
-      setActiveItems = _useState2[1];
+        activeItems = _useState2[0],
+        setActiveItems = _useState2[1];
     /** 用于children模式下的active管理 */
+
+
     var _useState3 = useState([]),
-      childActiveItems = _useState3[0],
-      setChildActiveItems = _useState3[1];
+        childActiveItems = _useState3[0],
+        setChildActiveItems = _useState3[1];
+
     var contextKey = groupKey || defaultContextKey;
     var CollapseContext = getCollapseContext(contextKey);
     var domRef = useRef(null);
+
     var _useContext = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls;
+        prefixCls = _useContext.prefixCls;
+
     var formatArray = function formatArray(input) {
       var arr = input;
       return items.map(function (item) {
         return arr.indexOf(item.value) > -1;
       });
     };
+
     var handleChange = function handleChange(value) {
       if (disabled) return;
+
       if (props.onCollapse) {
         props.onCollapse(value);
       }
+
       if (props.activeItems !== void 0) {
         setInnerActiveItems(formatArray(props.activeItems));
         setChildActiveItems(props.activeItems);
         return;
       }
+
       if (!children) {
         var temp = items.findIndex(function (item) {
           return item.value === value;
@@ -68,12 +79,14 @@ export function componentGenerator(Comp) {
         ? [value] : [].concat(childActiveItems, [value]));
       }
     };
+
     useEffect(function () {
       setInnerActiveItems(formatArray(defaultActiveItems));
       setChildActiveItems(defaultActiveItems);
     }, []);
     useEffect(function () {
       setActiveItems(props.activeItems === void 0 ? innerActiveItems : formatArray(props.activeItems));
+
       if (children && props.activeItems) {
         setChildActiveItems(props.activeItems);
       }
@@ -104,6 +117,7 @@ export function componentGenerator(Comp) {
         disabled: disabled || item.disabled,
         defaultActive: formatArray(defaultActiveItems)[index]
       }, item);
+
       return /*#__PURE__*/React.createElement(Comp, _extends({
         key: item.value
       }, compProps));

package/esm/collapse/index.js

@@ -3,7 +3,6 @@ import { Collapse } from './collapse';
 import Group from './group';
 export * from './collapse';
 export * from './type';
-
 /**
  * 折叠面板组件，支持手风琴模式。
  * @en Collapse supports accordion mode.
@@ -12,6 +11,7 @@ export * from './type';
  * @name 折叠面板
  * @name_en Collapse
  */
+
 export default componentWrapper(Collapse, {
   Group: Group
 });

package/esm/collapse/utils.js

@@ -9,6 +9,7 @@ export function getCollapseContext(key) {
       onCollapse: function onCollapse() {}
     });
   }
+
   return allContexts[key];
 }
 export var CollapseKeyContext = /*#__PURE__*/React.createContext({

package/esm/context-provider/index.d.ts

@@ -35,6 +35,12 @@ export interface GlobalContextParams {
      * @en Internationalized language configuration
      */
     locale?: ILocale;
+    /**
+     * 是否使用Rtl模式
+     * @en Whether to use rtl
+     * @default false
+     */
+    useRtl?: boolean;
 }
 export declare const defaultContext: GlobalContextParams;
 export declare const GlobalContext: React.Context<GlobalContextParams>;

package/esm/context-provider/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["children", "useDarkMode", "isDarkMode", "theme", "locale"],
-  _excluded2 = ["context"];
+    _excluded2 = ["context"];
 import React, { createContext, useState, useEffect, useCallback } from 'react';
 import { addCssRules, removeCssStyleDom, defaultLocale } from '@arco-design/mobile-utils';
 export var defaultContext = {
@@ -9,9 +9,11 @@ export var defaultContext = {
   system: '',
   useDarkMode: false,
   isDarkMode: false,
-  locale: defaultLocale
+  locale: defaultLocale,
+  useRtl: false
 };
 export var GlobalContext = /*#__PURE__*/createContext(defaultContext);
+
 /**
  * 全局数据控制组件，用于替换全局数据。
  * @en Global data control component, used to replace global data.
@@ -22,29 +24,34 @@ export var GlobalContext = /*#__PURE__*/createContext(defaultContext);
  */
 export default function ContextProvider(props) {
   var children = props.children,
-    useDarkMode = props.useDarkMode,
-    isDarkMode = props.isDarkMode,
-    theme = props.theme,
-    _props$locale = props.locale,
-    locale = _props$locale === void 0 ? defaultLocale : _props$locale,
-    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+      useDarkMode = props.useDarkMode,
+      isDarkMode = props.isDarkMode,
+      theme = props.theme,
+      _props$locale = props.locale,
+      locale = _props$locale === void 0 ? defaultLocale : _props$locale,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded);
+
   var _useState = useState(),
-    isDarkModeState = _useState[0],
-    setIsDarkModeState = _useState[1];
+      isDarkModeState = _useState[0],
+      setIsDarkModeState = _useState[1];
+
   var changeDarkMode = useCallback(function (res) {
     return setIsDarkModeState(res.matches);
   }, []);
   useEffect(function () {
     var matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+
     if (useDarkMode) {
       var dark = matchMedia.matches;
       setIsDarkModeState(dark);
+
       if (typeof matchMedia.addEventListener === 'function') {
         matchMedia.addEventListener('change', changeDarkMode);
       } else if (typeof matchMedia.addListener === 'function') {
         matchMedia.addListener(changeDarkMode);
       }
     }
+
     return function () {
       if (useDarkMode) {
         if (typeof matchMedia.removeEventListener === 'function') {
@@ -59,6 +66,7 @@ export default function ContextProvider(props) {
     if (!theme) {
       return;
     }
+
     addCssRules('arcoCustomTheme', theme);
     return function () {
       removeCssStyleDom('arcoCustomTheme');
@@ -76,7 +84,8 @@ export var ContextLayout = GlobalContext.Consumer;
 export function CompWithGlobalContext(Component) {
   return function (props) {
     var propsContext = props.context,
-      others = _objectWithoutPropertiesLoose(props, _excluded2);
+        others = _objectWithoutPropertiesLoose(props, _excluded2);
+
     return /*#__PURE__*/React.createElement(ContextLayout, null, function (context) {
       return /*#__PURE__*/React.createElement(ContextProvider, _extends({}, context, propsContext), /*#__PURE__*/React.createElement(Component, others));
     });