@arco-design/mobile-react 2.24.1 → 2.25.0

package/esm/cell/cell.js

@@ -5,20 +5,20 @@ import Arrow from './arrow';
 import { GroupContext } from './group';
 export var Cell = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? '' : _props$className,
-      style = props.style,
-      icon = props.icon,
-      label = props.label,
-      desc = props.desc,
-      text = props.text,
-      children = props.children,
-      showArrow = props.showArrow,
-      arrow = props.arrow,
-      prepend = props.prepend,
-      append = props.append,
-      _props$bordered = props.bordered,
-      bordered = _props$bordered === void 0 ? true : _props$bordered,
-      _onClick = props.onClick;
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    icon = props.icon,
+    label = props.label,
+    desc = props.desc,
+    text = props.text,
+    children = props.children,
+    showArrow = props.showArrow,
+    arrow = props.arrow,
+    prepend = props.prepend,
+    append = props.append,
+    _props$bordered = props.bordered,
+    bordered = _props$bordered === void 0 ? true : _props$bordered,
+    _onClick = props.onClick;
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {

package/esm/cell/group.js

@@ -8,26 +8,24 @@ export var GroupContext = /*#__PURE__*/React.createContext({
 export function componentGenerator(Comp) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var _props$className = props.className,
-        className = _props$className === void 0 ? '' : _props$className,
-        style = props.style,
-        header = props.header,
-        footer = props.footer,
-        _props$bordered = props.bordered,
-        bordered = _props$bordered === void 0 ? true : _props$bordered,
-        options = props.options,
-        children = props.children,
-        onClick = props.onClick;
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      header = props.header,
+      footer = props.footer,
+      _props$bordered = props.bordered,
+      bordered = _props$bordered === void 0 ? true : _props$bordered,
+      options = props.options,
+      children = props.children,
+      onClick = props.onClick;
     var domRef = useRef(null);
     useImperativeHandle(ref, function () {
       return {
         dom: domRef.current
       };
     });
-
     function handleClick(e) {
       onClick && onClick(e);
     }
-
     return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/React.createElement("div", {

package/esm/cell/index.js

@@ -3,6 +3,7 @@ import { componentGenerator } from './group';
 import { Cell } from './cell';
 export * from './type';
 var Group = componentGenerator(Cell);
+
 /**
  * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
  * @en Cell, including cells and cell group, are often used to set items, forms, etc.
@@ -11,7 +12,6 @@ var Group = componentGenerator(Cell);
  * @name 单元格
  * @name_en Cell
  */
-
 export default componentWrapper(Cell, {
   Group: Group
 });

package/esm/checkbox/checkbox.js

@@ -10,7 +10,6 @@ import IconSquareDisabled from '../icon/IconSquareDisabled';
 import { CheckboxGroupContext } from './group';
 import { IconStatus } from './type';
 import { useMergeProps } from './hooks';
-
 var getDefaultIcon = function getDefaultIcon(shape, status) {
   var defaultIcons = {
     circle: {
@@ -34,39 +33,35 @@ var getDefaultIcon = function getDefaultIcon(shape, status) {
   };
   return defaultIcons[shape][status];
 };
-
 export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useMergeProps = useMergeProps(props, CheckboxGroupContext),
-      _useMergeProps$style = _useMergeProps.style,
-      style = _useMergeProps$style === void 0 ? {} : _useMergeProps$style,
-      _useMergeProps$classN = _useMergeProps.className,
-      className = _useMergeProps$classN === void 0 ? '' : _useMergeProps$classN,
-      _useMergeProps$childr = _useMergeProps.children,
-      children = _useMergeProps$childr === void 0 ? null : _useMergeProps$childr,
-      _useMergeProps$label = _useMergeProps.label,
-      label = _useMergeProps$label === void 0 ? '' : _useMergeProps$label,
-      _useMergeProps$layout = _useMergeProps.layout,
-      layout = _useMergeProps$layout === void 0 ? 'inline' : _useMergeProps$layout,
-      value = _useMergeProps.value,
-      _useMergeProps$defaul = _useMergeProps.defaultCheck,
-      defaultCheck = _useMergeProps$defaul === void 0 ? false : _useMergeProps$defaul,
-      _useMergeProps$disabl = _useMergeProps.disabled,
-      disabled = _useMergeProps$disabl === void 0 ? false : _useMergeProps$disabl,
-      _useMergeProps$shape = _useMergeProps.shape,
-      shape = _useMergeProps$shape === void 0 ? 'circle' : _useMergeProps$shape,
-      icons = _useMergeProps.icons,
-      _useMergeProps$isRadi = _useMergeProps.isRadio,
-      isRadio = _useMergeProps$isRadi === void 0 ? false : _useMergeProps$isRadi,
-      propsChecked = _useMergeProps.checked,
-      onChange = _useMergeProps.onChange;
-
+    _useMergeProps$style = _useMergeProps.style,
+    style = _useMergeProps$style === void 0 ? {} : _useMergeProps$style,
+    _useMergeProps$classN = _useMergeProps.className,
+    className = _useMergeProps$classN === void 0 ? '' : _useMergeProps$classN,
+    _useMergeProps$childr = _useMergeProps.children,
+    children = _useMergeProps$childr === void 0 ? null : _useMergeProps$childr,
+    _useMergeProps$label = _useMergeProps.label,
+    label = _useMergeProps$label === void 0 ? '' : _useMergeProps$label,
+    _useMergeProps$layout = _useMergeProps.layout,
+    layout = _useMergeProps$layout === void 0 ? 'inline' : _useMergeProps$layout,
+    value = _useMergeProps.value,
+    _useMergeProps$defaul = _useMergeProps.defaultCheck,
+    defaultCheck = _useMergeProps$defaul === void 0 ? false : _useMergeProps$defaul,
+    _useMergeProps$disabl = _useMergeProps.disabled,
+    disabled = _useMergeProps$disabl === void 0 ? false : _useMergeProps$disabl,
+    _useMergeProps$shape = _useMergeProps.shape,
+    shape = _useMergeProps$shape === void 0 ? 'circle' : _useMergeProps$shape,
+    icons = _useMergeProps.icons,
+    _useMergeProps$isRadi = _useMergeProps.isRadio,
+    isRadio = _useMergeProps$isRadi === void 0 ? false : _useMergeProps$isRadi,
+    propsChecked = _useMergeProps.checked,
+    onChange = _useMergeProps.onChange;
   var _useState = useState(propsChecked === void 0 ? defaultCheck : propsChecked),
-      checked = _useState[0],
-      setChecked = _useState[1];
-
+    checked = _useState[0],
+    setChecked = _useState[1];
   var _useState2 = useState(isRadio ? 'radio' : 'checkbox'),
-      componentName = _useState2[0];
-
+    componentName = _useState2[0];
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {
@@ -76,30 +71,27 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
   useEffect(function () {
     if (propsChecked !== void 0) setChecked(Boolean(propsChecked));
   }, [propsChecked]);
+
   /**
    * 获得图标样式
    * @en Get icon style
    */
-
   var getStatus = function getStatus() {
     if (checked) {
       if (disabled) return IconStatus.ACTIVE_DISABLED;
       return IconStatus.ACTIVE;
     }
-
     if (disabled) return IconStatus.DISABLED;
     return IconStatus.NORMAL;
   };
+
   /**
    * 计算展示的icon
    * @en Calculate the displayed icon
    */
-
-
   var renderIcon = function renderIcon() {
     var Icon;
     var iconKey = getStatus();
-
     if (icons && icons[iconKey] !== void 0) {
       Icon = icons[iconKey];
     } else if (icons === null) {
@@ -107,7 +99,6 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
     } else {
       Icon = layout === 'justify' ? getDefaultIcon('justify', iconKey) : getDefaultIcon(shape, iconKey);
     }
-
     return Icon ? /*#__PURE__*/React.createElement("div", {
       className: cls(componentName + "-icon", {
         disabled: disabled,
@@ -115,24 +106,22 @@ export var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
       })
     }, Icon) : null;
   };
+
   /**
    * 处理点击事件
    * @en Handling click events
    */
-
-
   var onClick = function onClick(e) {
-    if (disabled) return; // Radio组件不支持点击取消选中
-    // @en Radio component does not support click to uncheck
+    if (disabled) return;
 
+    // Radio组件不支持点击取消选中
+    // @en Radio component does not support click to uncheck
     if (isRadio && checked) return;
     onChange && onChange(!checked, value, e);
-
     if (propsChecked === void 0) {
       setChecked(!checked);
     }
   };
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {

package/esm/checkbox/group.js

@@ -13,32 +13,30 @@ export var CheckboxGroupContext = /*#__PURE__*/React.createContext({
 export function componentGenerator(Comp) {
   return /*#__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$defaultValue = props.defaultValue,
-        defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
-        _props$disabled = props.disabled,
-        disabled = _props$disabled === void 0 ? false : _props$disabled,
-        _props$shape = props.shape,
-        shape = _props$shape === void 0 ? 'circle' : _props$shape,
-        options = props.options,
-        icons = props.icons,
-        onChange = props.onChange,
-        value = props.value,
-        _props$children = props.children,
-        children = _props$children === void 0 ? null : _props$children,
-        _props$layout = props.layout,
-        layout = _props$layout === void 0 ? 'inline' : _props$layout,
-        _props$min = props.min,
-        min = _props$min === void 0 ? 0 : _props$min,
-        _props$max = props.max,
-        max = _props$max === void 0 ? 0 : _props$max;
-
+      style = _props$style === void 0 ? {} : _props$style,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$shape = props.shape,
+      shape = _props$shape === void 0 ? 'circle' : _props$shape,
+      options = props.options,
+      icons = props.icons,
+      onChange = props.onChange,
+      value = props.value,
+      _props$children = props.children,
+      children = _props$children === void 0 ? null : _props$children,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? 'inline' : _props$layout,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 0 : _props$max;
     var _useState = useState(value || defaultValue),
-        groupValue = _useState[0],
-        setGroupValue = _useState[1];
-
+      groupValue = _useState[0],
+      setGroupValue = _useState[1];
     var domRef = useRef(null);
     useImperativeHandle(ref, function () {
       return {
@@ -48,23 +46,21 @@ export function componentGenerator(Comp) {
     useEffect(function () {
       value !== void 0 && setGroupValue(value);
     }, [value]);
+
     /**
      * 切换checkbox状态回调
      * @en callback when toggling checkbox state
      */
-
     var handleChange = function handleChange(checked, val) {
       if (!checked && groupValue.length <= min || max && checked && groupValue.length >= max) return;
       var newGroupValue = checked ? [].concat(groupValue, [val]) : groupValue.filter(function (item) {
         return item !== val;
       });
       onChange && onChange(newGroupValue);
-
       if (value === void 0) {
         setGroupValue(newGroupValue);
       }
     };
-
     return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
       var prefixCls = _ref.prefixCls;
       return /*#__PURE__*/React.createElement("div", {

package/esm/checkbox/hooks/useMergeProps.js

@@ -2,14 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useContext } from 'react';
 export var useMergeProps = function useMergeProps(props, groupContext) {
   var _useContext = useContext(groupContext),
-      disabled = _useContext.disabled,
-      shape = _useContext.shape,
-      layout = _useContext.layout,
-      icons = _useContext.icons,
-      value = _useContext.value,
-      _onChange = _useContext.onChange,
-      isGroup = _useContext.isGroup;
-
+    disabled = _useContext.disabled,
+    shape = _useContext.shape,
+    layout = _useContext.layout,
+    icons = _useContext.icons,
+    value = _useContext.value,
+    _onChange = _useContext.onChange,
+    isGroup = _useContext.isGroup;
   if (!isGroup) return props;
   return _extends({
     disabled: disabled,
@@ -22,7 +21,6 @@ export var useMergeProps = function useMergeProps(props, groupContext) {
     checked: value.indexOf(props.value) > -1,
     onChange: function onChange(checked, val, e) {
       _onChange(checked, val, e);
-
       props.onChange && props.onChange(checked, val, e);
     }
   });

package/esm/checkbox/index.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 export * from './type';
 declare const _default: import("react").ForwardRefExoticComponent<import("./type").CheckboxProps<string | number> & import("react").RefAttributes<import("./type").CheckboxRef>> & {
-    Group: import("react").ForwardRefExoticComponent<import("./type").CheckboxGroupProps<string | number, import("./type").CheckboxProps<string | number> & import("react").RefAttributes<import("./type").CheckboxRef>> & import("react").RefAttributes<import("./type").CheckboxGroupRef>>;
+    Group: import("react").ForwardRefExoticComponent<import("./type").CheckboxGroupProps<string | number, import("./type").CheckboxProps<string | number> & import("react").RefAttributes<import("./type").CheckboxRef>> & import("react").RefAttributes<import("./type").CheckboxGroupRef>> & "CheckboxGroup";
+} & {
+    displayName: string;
 };
 /**
  * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
@@ -10,5 +12,6 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
  * @name_en Checkbox
  * @type 数据录入
  * @type_en Data Entry
+ * @displayName Checkbox
  */
 export default _default;

package/esm/checkbox/index.js

@@ -2,12 +2,14 @@ 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 = componentGenerator(Checkbox);
 /**
  * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
  * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
@@ -15,8 +17,8 @@ var Group = componentGenerator(Checkbox);
  * @name_en Checkbox
  * @type 数据录入
  * @type_en Data Entry
+ * @displayName Checkbox
  */
-
-export default componentWrapper(Checkbox, {
+export default componentWrapper(Checkbox, 'Checkbox', {
   Group: Group
 });

package/esm/checkbox/type.js

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

package/esm/circle-progress/index.js

@@ -3,7 +3,6 @@ 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
@@ -14,76 +13,69 @@ 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,
@@ -103,7 +95,6 @@ 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",
@@ -141,11 +132,9 @@ 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", {
@@ -183,7 +172,6 @@ var CircleProgress = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }, renderPercent !== void 0 ? renderPercent(currentPercentage) : currentPercentage + "%") : null);
   }
-
   return /*#__PURE__*/React.createElement(ContextLayout, null, renderCircleProgress);
 });
 export default CircleProgress;