@arco-design/mobile-react 2.25.4 → 2.27.0

package/esm/avatar/group.js

@@ -7,25 +7,27 @@ export var AvatarGroupContext = /*#__PURE__*/React.createContext({
   shape: 'circle',
   size: 'small'
 });
-
 /**
  * 头像叠层
  * @en Avatar group
  */
+
 export var Group = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$shape = props.shape,
-    shape = _props$shape === void 0 ? 'circle' : _props$shape,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'medium' : _props$size,
-    _props$zIndexOrder = props.zIndexOrder,
-    zIndexOrder = _props$zIndexOrder === void 0 ? 'desc' : _props$zIndexOrder,
-    children = props.children;
+      style = _props$style === void 0 ? {} : _props$style,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'circle' : _props$shape,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'medium' : _props$size,
+      _props$zIndexOrder = props.zIndexOrder,
+      zIndexOrder = _props$zIndexOrder === void 0 ? 'desc' : _props$zIndexOrder,
+      children = props.children;
+
   var _useContext = useContext(GlobalContext),
-    prefixCls = _useContext.prefixCls;
+      prefixCls = _useContext.prefixCls;
+
   var childrenArr = React.Children.toArray(children);
   var length = childrenArr.length;
   var domRef = useRef(null);
@@ -46,9 +48,11 @@ export var Group = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, childrenArr.map(function (child, i) {
     var childProps = (child || {}).props;
+
     var avatarStyle = _extends({
       zIndex: zIndexOrder === 'asc' ? i + 1 : length - i
     }, childProps.style);
+
     return /*#__PURE__*/React.cloneElement(child, _extends({}, childProps, {
       style: avatarStyle
     }));

package/esm/avatar/index.js

@@ -9,90 +9,101 @@ export * from './type';
 export function componentGenerator(Comp) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var _cls, _cls2;
+
     var _useContext = useContext(GlobalContext),
-      prefixCls = _useContext.prefixCls;
+        prefixCls = _useContext.prefixCls;
+
     var _useContext2 = useContext(AvatarGroupContext),
-      groupShape = _useContext2.shape,
-      groupSize = _useContext2.size,
-      isGroup = _useContext2.isGroup;
+        groupShape = _useContext2.shape,
+        groupSize = _useContext2.size,
+        isGroup = _useContext2.isGroup;
+
     var _props$shape = props.shape,
-      shape = _props$shape === void 0 ? props.shape || (isGroup ? groupShape : 'circle') : _props$shape,
-      _props$size = props.size,
-      size = _props$size === void 0 ? props.size || (isGroup ? groupSize : 'small') : _props$size,
-      src = props.src,
-      _props$decoration = props.decoration,
-      decoration = _props$decoration === void 0 ? null : _props$decoration,
-      _props$textAvatar = props.textAvatar,
-      textAvatar = _props$textAvatar === void 0 ? '' : _props$textAvatar,
-      _props$avatarStyle = props.avatarStyle,
-      avatarStyle = _props$avatarStyle === void 0 ? {} : _props$avatarStyle,
-      _props$autoFixFontSiz = props.autoFixFontSize,
-      autoFixFontSize = _props$autoFixFontSiz === void 0 ? true : _props$autoFixFontSiz,
-      _props$autoFixFontOff = props.autoFixFontOffset,
-      autoFixFontOffset = _props$autoFixFontOff === void 0 ? 2 : _props$autoFixFontOff,
-      _props$avatarName = props.avatarName,
-      avatarName = _props$avatarName === void 0 ? '' : _props$avatarName,
-      _props$avatarDesc = props.avatarDesc,
-      avatarDesc = _props$avatarDesc === void 0 ? '' : _props$avatarDesc,
-      _props$children = props.children,
-      children = _props$children === void 0 ? null : _props$children,
-      _props$renderInfo = props.renderInfo,
-      renderInfo = _props$renderInfo === void 0 ? null : _props$renderInfo,
-      _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      _props$style = props.style,
-      style = _props$style === void 0 ? {} : _props$style,
-      _props$imageProps = props.imageProps,
-      imageProps = _props$imageProps === void 0 ? {} : _props$imageProps,
-      defaultOverLap = props.defaultOverLap,
-      onClickDecoration = props.onClickDecoration,
-      onClick = props.onClick;
+        shape = _props$shape === void 0 ? props.shape || (isGroup ? groupShape : 'circle') : _props$shape,
+        _props$size = props.size,
+        size = _props$size === void 0 ? props.size || (isGroup ? groupSize : 'small') : _props$size,
+        src = props.src,
+        _props$decoration = props.decoration,
+        decoration = _props$decoration === void 0 ? null : _props$decoration,
+        _props$textAvatar = props.textAvatar,
+        textAvatar = _props$textAvatar === void 0 ? '' : _props$textAvatar,
+        _props$avatarStyle = props.avatarStyle,
+        avatarStyle = _props$avatarStyle === void 0 ? {} : _props$avatarStyle,
+        _props$autoFixFontSiz = props.autoFixFontSize,
+        autoFixFontSize = _props$autoFixFontSiz === void 0 ? true : _props$autoFixFontSiz,
+        _props$autoFixFontOff = props.autoFixFontOffset,
+        autoFixFontOffset = _props$autoFixFontOff === void 0 ? 2 : _props$autoFixFontOff,
+        _props$avatarName = props.avatarName,
+        avatarName = _props$avatarName === void 0 ? '' : _props$avatarName,
+        _props$avatarDesc = props.avatarDesc,
+        avatarDesc = _props$avatarDesc === void 0 ? '' : _props$avatarDesc,
+        _props$children = props.children,
+        children = _props$children === void 0 ? null : _props$children,
+        _props$renderInfo = props.renderInfo,
+        renderInfo = _props$renderInfo === void 0 ? null : _props$renderInfo,
+        _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        _props$style = props.style,
+        style = _props$style === void 0 ? {} : _props$style,
+        _props$imageProps = props.imageProps,
+        imageProps = _props$imageProps === void 0 ? {} : _props$imageProps,
+        defaultOverLap = props.defaultOverLap,
+        onClickDecoration = props.onClickDecoration,
+        onClick = props.onClick;
     var domRef = useRef(null);
     var avatarRef = useRef(null);
     var avatarTextRef = useRef(null);
+
     var _useState = useState(1),
-      textScale = _useState[0],
-      setTextScale = _useState[1];
+        textScale = _useState[0],
+        setTextScale = _useState[1];
+
     useImperativeHandle(ref, function () {
       return {
         dom: domRef.current
       };
-    });
-    // 图片头像
+    }); // 图片头像
     // @en Picture avatar
-    var isImageAvatar = !children && src !== void 0;
-    // 文字头像
+
+    var isImageAvatar = !children && src !== void 0; // 文字头像
     // @en Text avatar
-    var isTextAvatar = !children && !isImageAvatar && textAvatar;
-    // 使用默认头像
+
+    var isTextAvatar = !children && !isImageAvatar && textAvatar; // 使用默认头像
     // @en Whether to use default avatar
+
     var useDefaultAvatar = !children && !isImageAvatar && !isTextAvatar;
     useEffect(function () {
       getComputedTextScale();
     }, [textAvatar]);
-
     /**
      * 根据字体元素宽度和头像大小动态调整缩放比例
      * @en Dynamically adjust scaling based on font element width and avatar size
      */
+
     function getComputedTextScale() {
       var _avatarRef$current, _avatarTextRef$curren;
+
       if (!isTextAvatar || !autoFixFontSize || !avatarRef || !avatarTextRef) return;
+
       var _ref = ((_avatarRef$current = avatarRef.current) == null ? void 0 : _avatarRef$current.getBoundingClientRect()) || {},
-        _ref$width = _ref.width,
-        avatarWidth = _ref$width === void 0 ? 0 : _ref$width;
+          _ref$width = _ref.width,
+          avatarWidth = _ref$width === void 0 ? 0 : _ref$width;
+
       var _ref2 = ((_avatarTextRef$curren = avatarTextRef.current) == null ? void 0 : _avatarTextRef$curren.getBoundingClientRect()) || {},
-        _ref2$width = _ref2.width,
-        textWidth = _ref2$width === void 0 ? 0 : _ref2$width;
-      if (avatarWidth === 0 || textWidth === 0) return;
-      // 文本节点宽度大于头像元素时进行动态缩放
+          _ref2$width = _ref2.width,
+          textWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+
+      if (avatarWidth === 0 || textWidth === 0) return; // 文本节点宽度大于头像元素时进行动态缩放
       // @en Dynamic scaling when the width of the text node is larger than the avatar element
+
       var maxWidth = avatarWidth - 2 * autoFixFontOffset;
+
       if (textWidth > maxWidth) {
         var scale = maxWidth / textWidth;
         setTextScale(textScale * scale);
       }
     }
+
     return /*#__PURE__*/React.createElement("div", {
       ref: domRef,
       style: style,
@@ -126,7 +137,6 @@ export function componentGenerator(Comp) {
   });
 }
 var Avatar = componentGenerator(BaseImage);
-
 /**
  * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
  * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
@@ -135,6 +145,7 @@ var Avatar = componentGenerator(BaseImage);
  * @name 头像
  * @name_en Avatar
  */
+
 export default componentWrapper(Avatar, {
   Group: Group
 });

package/esm/badge/index.js

@@ -2,6 +2,7 @@ import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { cls } from '@arco-design/mobile-utils';
 import Transition from '../transition';
 import { ContextLayout } from '../context-provider';
+
 /**
  * 在右上角展示徽标数字或小红点
  * @en Display the badge number or small red dot in the upper right corner
@@ -12,37 +13,40 @@ import { ContextLayout } from '../context-provider';
  */
 var Badge = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    _props$visible = props.visible,
-    visible = _props$visible === void 0 ? true : _props$visible,
-    text = props.text,
-    _props$dot = props.dot,
-    dot = _props$dot === void 0 ? false : _props$dot,
-    _props$maxCount = props.maxCount,
-    maxCount = _props$maxCount === void 0 ? 99 : _props$maxCount,
-    _props$children = props.children,
-    children = _props$children === void 0 ? null : _props$children,
-    _props$absolute = props.absolute,
-    absolute = _props$absolute === void 0 ? false : _props$absolute,
-    _props$bordered = props.bordered,
-    bordered = _props$bordered === void 0 ? false : _props$bordered,
-    _props$timeout = props.timeout,
-    timeout = _props$timeout === void 0 ? 300 : _props$timeout;
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      _props$visible = props.visible,
+      visible = _props$visible === void 0 ? true : _props$visible,
+      text = props.text,
+      _props$dot = props.dot,
+      dot = _props$dot === void 0 ? false : _props$dot,
+      _props$maxCount = props.maxCount,
+      maxCount = _props$maxCount === void 0 ? 99 : _props$maxCount,
+      _props$children = props.children,
+      children = _props$children === void 0 ? null : _props$children,
+      _props$absolute = props.absolute,
+      absolute = _props$absolute === void 0 ? false : _props$absolute,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? false : _props$bordered,
+      _props$timeout = props.timeout,
+      timeout = _props$timeout === void 0 ? 300 : _props$timeout;
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
     };
   });
+
   function renderInnerBadge(prefix) {
     return dot ? null : /*#__PURE__*/React.createElement("span", {
       className: prefix + "-text badge-text"
     }, Number(text) && Number(text) > maxCount ? maxCount + "+" : text);
   }
+
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var _cls;
+
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement(Transition, {
       in: visible,

package/esm/button/hooks.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+
 var formatColorStatus = function formatColorStatus(color) {
   if (!color) return null;
   return typeof color === 'string' ? {
@@ -6,23 +7,23 @@ var formatColorStatus = function formatColorStatus(color) {
     active: color,
     disabled: color
   } : color;
-};
-
-// 主要是用来 diff 颜色是否变化，将对象或者字符串的 diff 转换成字符串的 diff
+}; // 主要是用来 diff 颜色是否变化，将对象或者字符串的 diff 转换成字符串的 diff
 // @en It is mainly used to judge whether the color has changed, and convert the diff of the object or string into the diff of the string
+
+
 var diffColor = function diffColor(color) {
   return color && (typeof color === 'string' ? color : Object.values(color).join('-'));
-};
-
-// 允许传入定制所有颜色，忽略的值会继续走原生的颜色
+}; // 允许传入定制所有颜色，忽略的值会继续走原生的颜色
 // @en Allows to pass in all custom colors, ignored values will continue to use native colors
+
+
 export var useCustomColor = function useCustomColor(_ref) {
   var color = _ref.color,
-    bgColor = _ref.bgColor,
-    borderColor = _ref.borderColor,
-    active = _ref.isActive,
-    disabled = _ref.disabled,
-    halfBorder = _ref.halfBorder;
+      bgColor = _ref.bgColor,
+      borderColor = _ref.borderColor,
+      active = _ref.isActive,
+      disabled = _ref.disabled,
+      halfBorder = _ref.halfBorder;
   var state = {
     active: active,
     disabled: disabled
@@ -30,9 +31,10 @@ export var useCustomColor = function useCustomColor(_ref) {
   var priority = ['active', 'disabled'];
   var styleConfig = useMemo(function () {
     var _map = [color, bgColor, borderColor].map(formatColorStatus),
-      fmtColor = _map[0],
-      fmtBgColor = _map[1],
-      fmtBorderColor = _map[2];
+        fmtColor = _map[0],
+        fmtBgColor = _map[1],
+        fmtBorderColor = _map[2];
+
     return {
       color: fmtColor,
       borderColor: fmtBorderColor,
@@ -43,7 +45,8 @@ export var useCustomColor = function useCustomColor(_ref) {
     var res = {};
     Object.entries(styleConfig).forEach(function (_ref2) {
       var styleName = _ref2[0],
-        fmtColorConfig = _ref2[1];
+          fmtColorConfig = _ref2[1];
+
       if (fmtColorConfig) {
         var styleColor = fmtColorConfig.normal;
         priority.forEach(function (key) {

package/esm/button/index.js

@@ -5,6 +5,7 @@ import { GlobalContext } from '../context-provider';
 import Loading from '../loading';
 import { useSystem } from '../_helpers';
 import { useCustomColor } from './hooks';
+
 /**
  * 按钮用于开始一个即时操作。
  * @en Using for starting an immediate action
@@ -15,78 +16,88 @@ import { useCustomColor } from './hooks';
  */
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var _ref, _cls;
+
   var _useState = useState(false),
-    isActive = _useState[0],
-    setActive = _useState[1];
+      isActive = _useState[0],
+      setActive = _useState[1];
+
   var system = useSystem();
   var _props$type = props.type,
-    type = _props$type === void 0 ? 'primary' : _props$type,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'large' : _props$size,
-    _props$inline = props.inline,
-    inline = _props$inline === void 0 ? false : _props$inline,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$disableWhenLoa = props.disableWhenLoading,
-    disableWhenLoading = _props$disableWhenLoa === void 0 ? true : _props$disableWhenLoa,
-    _props$shape = props.shape,
-    shape = _props$shape === void 0 ? 'semi' : _props$shape,
-    _props$halfBorder = props.halfBorder,
-    halfBorder = _props$halfBorder === void 0 ? false : _props$halfBorder,
-    icon = props.icon,
-    _props$showTextWhenLo = props.showTextWhenLoading,
-    showTextWhenLoading = _props$showTextWhenLo === void 0 ? true : _props$showTextWhenLo,
-    _props$needActive = props.needActive,
-    needActive = _props$needActive === void 0 ? true : _props$needActive,
-    _props$style = props.style,
-    style = _props$style === void 0 ? {} : _props$style,
-    color = props.color,
-    bgColor = props.bgColor,
-    borderColor = props.borderColor,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    _props$children = props.children,
-    children = _props$children === void 0 ? null : _props$children,
-    loadingIcon = props.loadingIcon,
-    onClick = props.onClick,
-    onClickDisabled = props.onClickDisabled,
-    _props$coverIconWhenL = props.coverIconWhenLoading,
-    coverIconWhenLoading = _props$coverIconWhenL === void 0 ? true : _props$coverIconWhenL;
+      type = _props$type === void 0 ? 'primary' : _props$type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'large' : _props$size,
+      _props$inline = props.inline,
+      inline = _props$inline === void 0 ? false : _props$inline,
+      _props$loading = props.loading,
+      loading = _props$loading === void 0 ? false : _props$loading,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$disableWhenLoa = props.disableWhenLoading,
+      disableWhenLoading = _props$disableWhenLoa === void 0 ? true : _props$disableWhenLoa,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'semi' : _props$shape,
+      _props$halfBorder = props.halfBorder,
+      halfBorder = _props$halfBorder === void 0 ? false : _props$halfBorder,
+      icon = props.icon,
+      _props$showTextWhenLo = props.showTextWhenLoading,
+      showTextWhenLoading = _props$showTextWhenLo === void 0 ? true : _props$showTextWhenLo,
+      _props$needActive = props.needActive,
+      needActive = _props$needActive === void 0 ? true : _props$needActive,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {} : _props$style,
+      color = props.color,
+      bgColor = props.bgColor,
+      borderColor = props.borderColor,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$children = props.children,
+      children = _props$children === void 0 ? null : _props$children,
+      loadingIcon = props.loadingIcon,
+      onClick = props.onClick,
+      onClickDisabled = props.onClickDisabled,
+      _props$coverIconWhenL = props.coverIconWhenLoading,
+      coverIconWhenLoading = _props$coverIconWhenL === void 0 ? true : _props$coverIconWhenL;
   var domRef = useRef(null);
+
   var _useContext = useContext(GlobalContext),
-    prefixCls = _useContext.prefixCls;
+      prefixCls = _useContext.prefixCls;
+
   var prefix = prefixCls + "-button";
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
     };
   });
+
   var _useCustomColor = useCustomColor({
-      color: color,
-      bgColor: bgColor,
-      borderColor: borderColor,
-      isActive: isActive,
-      disabled: disabled,
-      halfBorder: halfBorder
-    }),
-    customColorClass = _useCustomColor.customColorClass,
-    customColorStyle = _useCustomColor.customColorStyle;
+    color: color,
+    bgColor: bgColor,
+    borderColor: borderColor,
+    isActive: isActive,
+    disabled: disabled,
+    halfBorder: halfBorder
+  }),
+      customColorClass = _useCustomColor.customColorClass,
+      customColorStyle = _useCustomColor.customColorStyle;
+
   var handleTouchStart = function handleTouchStart() {
     if (needActive && !disabled && !loading) {
       setActive(true);
     }
   };
+
   var handleTouchEnd = function handleTouchEnd() {
     setActive(false);
   };
+
   var renderIcon = function renderIcon() {
     if (coverIconWhenLoading) {
       return loading ? null : icon;
     }
+
     return icon;
   };
+
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
     ref: domRef,

package/esm/carousel/index.d.ts

@@ -266,6 +266,12 @@ export interface CarouselProps {
      * @default false
      */
     allowEndBlank?: boolean;
+    /**
+     * 在iOS下是否需要在切屏时做DOM强刷优化，用于修复iOS息屏时自动播放的蜜汁渲染问题
+     * @en Whether to do DOM forced refresh optimization when the screen is off under iOS, to fix the rendering problem of automatic playback when the iOS screen is off
+     * @default true
+     */
+    iOSVisibleOptimize?: boolean;
     /**
      * 自定义手指滑动跟手的距离计算方式，posDis表示touchmove的距离，wrapSize表示容器在滑动方向的尺寸，childSize表示滑块在滑动方向的尺寸
      * @en Customize the calculation method of the finger swipe distance. posDis - touchmove distance, wrapSize - container size in the sliding direction, childSize - slider size in the sliding direction