@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/checkbox/style/index.less

@@ -0,0 +1,119 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-checkbox {
+    display: inline-flex;
+    align-items: center;
+
+    .checkbox-icon {
+        display: inline-flex;
+        align-items: center;
+        .use-var(font-size, checkbox-icon-font-size);
+        .use-var(color, checkbox-icon-color);
+
+        &.checked {
+            .use-var(color, checkbox-icon-checked-color);
+        }
+
+        &.disabled {
+            .use-var(color, checkbox-icon-disabled-color);
+        }
+
+        &.checked.disabled {
+            .use-var(color, checkbox-icon-checked-disabled-color);
+        }
+
+        .@{prefix}-icon-circle-disabled path {
+            .use-var(stroke, line-color);
+        }
+    }
+
+    .checkbox-text {
+        .use-var(font-size, checkbox-text-font-size);
+        .use-var(color, font-color);
+    }
+
+    .checkbox-icon + .checkbox-text {
+        .use-var-with-rtl(margin-left, checkbox-icon-margin-right);
+    }
+
+    &.disabled .checkbox-text {
+        .use-var(opacity, checkbox-text-disabled-opacity);
+    }
+
+    &.block {
+        width: 100%;
+    }
+
+    &.justify {
+        width: 100%;
+        justify-content: space-between;
+    }
+}
+
+.@{prefix}-checkbox-group {
+    .@{prefix}-checkbox:not(:last-child) {
+        .use-var-with-rtl(margin-right, checkbox-group-gutter);
+
+        &.block,
+        &.justify {
+            .set-prop-with-rtl(margin-right, 0);
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+& when (@use-dark-mode = 1) {
+    
+  .process-bg-color-with-config,
+  .process-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+      .use-var(color, dark-steps-process-with-config-item-icon-color);
+    }
+  }
+  .wait-custom-icon-bg-color-with-config {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+      .use-var(background, dark-steps-wait-icon-num-background);
+      .use-var(color, dark-sub-info-font-color);
+    }
+  }
+  .@{prefix}-checkbox {
+    .checkbox-icon {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-checkbox-icon-color);
+      }
+      &.checked {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-checkbox-icon-checked-color);
+        }
+      }
+      &.disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-checkbox-icon-disabled-color);
+        }
+      }
+      &.checked.disabled {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-checkbox-icon-checked-disabled-color);
+        }
+      }
+      .@{prefix}-icon-circle-disabled path {
+        @{arco-dark-mode-selector} & {
+          .use-var(stroke, dark-line-color);
+        }
+      }
+    }
+    .checkbox-text {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-font-color);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/checkbox/type.d.ts

@@ -0,0 +1,162 @@
+import React from 'react';
+import { BaseRef, BaseProps } from '../_helpers/type';
+export declare type ValueType = string | number;
+/**
+ * 图标状态枚举
+ * @en Icon status enum
+ *  */
+export declare enum IconStatus {
+    /**
+     * 未选中
+     * @en unselected
+     */
+    NORMAL = "normal",
+    /**
+     * 禁用态
+     * @en disabled
+     */
+    DISABLED = "disabled",
+    /**
+     * 选中态
+     * @en active
+     */
+    ACTIVE = "active",
+    /**
+     * 禁用选中态
+     * @en active but disabled
+     */
+    ACTIVE_DISABLED = "activeDisabled"
+}
+export interface IconType {
+    /**
+     * 未选中
+     * @en unselected
+     */
+    normal?: React.ReactNode;
+    /**
+     * 选中态
+     * @en selected
+     */
+    active?: React.ReactNode;
+    /**
+     * 禁用态
+     * @en disabled
+     */
+    disabled?: React.ReactNode;
+    /**
+     * 禁用选中态
+     * @en active but disabled
+     */
+    activeDisabled?: React.ReactNode;
+}
+export interface CheckboxCommonProps extends BaseProps {
+    /**
+     * 图标的形状
+     * @en Icon shape
+     * @default 'circle'
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * 排版样式(内联|块级|图标靠右两端对齐)
+     * @en Typography style (inline | block level | justified with right icon)
+     * @default 'inline'
+     */
+    layout?: 'inline' | 'block' | 'justify';
+    /**
+     * 是否禁用
+     * @en Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 自定义图标合集，传 null 表示无图标
+     * @en Custom icon collection, input null to indicate no icon
+     * @default Default icon
+     */
+    icons?: IconType | null;
+    /**
+     * 是否为Radio组件，不推荐使用，仅用于支持Radio组件
+     * @en Whether it is a Radio component. It is deprecated, only used to support Radio component
+     * @default false
+     */
+    isRadio?: boolean;
+}
+export interface CheckboxProps<T extends ValueType = ValueType> extends CheckboxCommonProps {
+    /**
+     * 选项的文字说明，传入children时此属性无效
+     * @en The text description of the option, invalid when the component has children
+     * @default ""
+     */
+    label?: string;
+    /**
+     * Checkbox的值
+     * @en Checkbox value
+     */
+    value: T;
+    /**
+     * 默认选中状态
+     * @en Default selected status
+     * @default false
+     */
+    defaultCheck?: boolean;
+    /**
+     * 是否选中，传值即为受控模式
+     * @en Whether it is selected or not, the component is in the controlled mode when the property is set
+     */
+    checked?: boolean;
+    /**
+     * 复选框选中状态回调函数
+     * @en Callback when the checkbox status changes
+     * @default () => {}
+     */
+    onChange?: (checked: boolean, value: T, e: React.MouseEvent) => void;
+}
+export interface CheckboxRef extends BaseRef {
+}
+export interface CheckboxGroupProps<T extends ValueType = ValueType, P extends CheckboxProps<T> = CheckboxProps<T>> extends CheckboxCommonProps {
+    /**
+     * 复选框组可选项, 传入children后此值无效
+     * @en Checkbox group options, invalid after inputing children
+     */
+    options?: P[];
+    /**
+     * 受控模式，复选框选中的选项值
+     * @en Checkbox value in controlled mode
+     */
+    value?: T[];
+    /**
+     * 默认选中项
+     * @en Default selected option
+     * @default []
+     */
+    defaultValue?: T[];
+    /**
+     * 最小可选值数量
+     * @en Minimum number of options
+     * @default 0
+     */
+    min?: number;
+    /**
+     * 最大可选值数量，0表示没有限制
+     * @en Maximum number of options, 0 means no limit
+     * @default 0
+     */
+    max?: number;
+    /**
+     * 点击复选框值变化回调
+     * @en  Callback when the checkbox value changes
+     * @default () => {}
+     */
+    onChange?: (value: T[]) => void;
+}
+export interface CheckboxGroupRef extends BaseRef {
+}
+export interface GroupContextParams<T extends ValueType> {
+    isGroup: boolean;
+    shape: 'circle' | 'square';
+    layout: 'inline' | 'block' | 'justify';
+    disabled: boolean;
+    icons?: IconType | null;
+    value: T[];
+    onChange: (checked: boolean, value: T, e: React.MouseEvent) => void;
+}

package/esnext/checkbox/type.js

@@ -0,0 +1,27 @@
+/**
+ * 图标状态枚举
+ * @en Icon status enum
+ *  */
+export var IconStatus;
+(function (IconStatus) {
+    /**
+     * 未选中
+     * @en unselected
+     */
+    IconStatus["NORMAL"] = "normal";
+    /**
+     * 禁用态
+     * @en disabled
+     */
+    IconStatus["DISABLED"] = "disabled";
+    /**
+     * 选中态
+     * @en active
+     */
+    IconStatus["ACTIVE"] = "active";
+    /**
+     * 禁用选中态
+     * @en active but disabled
+     */
+    IconStatus["ACTIVE_DISABLED"] = "activeDisabled";
+})(IconStatus || (IconStatus = {}));

package/esnext/circle-progress/index.d.ts

@@ -0,0 +1,141 @@
+import React from 'react';
+export interface CircleProgressProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /** 文字显示位置
+     * @en Text display position
+     * @default "center"
+     */
+    percentPosition?: 'center' | 'bottom';
+    /**
+     * 是否显示圆环内部文字
+     * @en Whether to display the text inside the ring
+     * @default true
+     */
+    showPercent?: boolean;
+    /**
+     * 进度环百分比
+     * @en Progress ring Percentage
+     */
+    percentage: number;
+    /**
+     * 圆环内部文字显示（一个函数，返回ReactNode类型，回调参数为当前进度百分比）
+     * @en The text inside the ring (a function that returns the ReactNode type, and the callback parameter is the current progress percentage)
+     */
+    renderPercent?: (percentage: number) => React.ReactNode;
+    /**
+     * 轨道颜色
+     * @en Track color
+     */
+    trackColor?: string;
+    /**
+     * 进度环颜色
+     * @en progress ring color
+     */
+    progressColor?: string;
+    /**
+     * 是否置灰
+     * @en Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 轨道宽度
+     * @en Track width
+     * @default 10
+     */
+    trackStroke?: number;
+    /**
+     * 进度环宽度
+     * @en Progress ring width
+     * @default 12
+     */
+    progressStroke?: number;
+    /**
+     * 进度环渐变开始的颜色(当设置progressColorStart和progressColorEnd其中一个时，颜色会覆盖掉progressColor的颜色)
+     * @en The start gradient color of the progress ring (when one of progressColorStart and progressColorEnd is set, the color will override the color of progressColor)
+     */
+    progressColorStart?: string;
+    /**
+     * 进度环渐变结束的颜色
+     * @en The end gradient color of the progress ring
+     */
+    progressColorEnd?: string;
+    /**
+     * 每增加step步长所需的毫秒数
+     * @en The number of milliseconds required to increase the step size
+     * @default 30
+     */
+    duration?: number;
+    /**
+     * 步长（增加步长，以step增长）
+     * @en Step size (increase the step size, grow by step)
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 是否逆时针增加
+     * @en Whether to increase counterclockwise
+     * @default false
+     */
+    clockwise?: boolean;
+    /**
+     * 圆环半径
+     * @en Ring radius
+     */
+    radius?: number;
+    /**
+     * 进度条两端是否圆角
+     * @en Whether the ends of the progress bar are rounded
+     * @default true
+     */
+    filleted?: boolean;
+    /**
+     * 初始化percentage时是否以动画形式过渡到目的值
+     * @en Whether to animate the transition to the destination value when initializing percentage
+     * @default true
+     */
+    mountedTransition?: boolean;
+    /**
+     * 进度环尺寸
+     * @en Progress ring size
+     * @default "default"
+     */
+    size?: 'mini' | 'default';
+    /**
+     * 初始化时动画的贝塞尔曲线
+     * @en Bezier curve of animation at initialization
+     * @default [0.34, 0.69, 0.1, 1]
+     */
+    mountedBezier?: [number, number, number, number];
+    /**
+     * 区分不同svg的`<def>`内容
+     * @en Distinguish `<def>` content of different svg
+     */
+    svgKey?: string;
+}
+export interface CircleProgressRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 环形进度条组件，以圆环形式表示百分比进度
+ * @en Annular progress bar component, representing percentage progress in the form of a circle
+ * @type 反馈
+ * @type_en Feedback
+ * @name 环形进度条
+ * @name_en CircleProgress
+ */
+declare const CircleProgress: React.ForwardRefExoticComponent<CircleProgressProps & React.RefAttributes<CircleProgressRef>>;
+export default CircleProgress;

package/esnext/circle-progress/index.js

@@ -0,0 +1,75 @@
+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
+ * @type 反馈
+ * @type_en Feedback
+ * @name 环形进度条
+ * @name_en CircleProgress
+ */
+const CircleProgress = forwardRef((props, ref) => {
+    const { size = 'default' } = props;
+    const { className = '', style, percentPosition = 'center', showPercent = size !== 'mini', renderPercent, trackColor, progressColor, disabled = false, trackStroke = size === 'mini' ? 4 : 2, progressStroke = 4, progressColorStart, progressColorEnd, duration = 300, step = 1, clockwise = false, radius = size === 'mini' ? 9 : 30, filleted = size !== 'mini', mountedTransition = true, mountedBezier = [0.34, 0.69, 0.1, 1], svgKey: userSetSvgKey = '', } = props;
+    const domRef = useRef(null);
+    const maxStroke = Math.max(progressStroke, trackStroke);
+    const circlePos = maxStroke + radius;
+    const circleSize = (radius + maxStroke) * 2;
+    const circleLen = 2 * Math.PI * radius;
+    const percentage = Math.min(100, Math.max(props.percentage, 0));
+    const { svgKey } = useGenSvgKey(userSetSvgKey);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    const isRenderNormal = !(Boolean(progressColorStart) && Boolean(progressColorEnd));
+    const [currentPercentage, transitionControl] = useProgress(mountedTransition, percentage, duration, mountedBezier, step);
+    const color = useMemo(() => {
+        if (isRenderNormal) {
+            if (progressColorStart) {
+                return progressColorStart;
+            }
+            if (progressColorEnd) {
+                return progressColorEnd;
+            }
+            return progressColor;
+        }
+    }, [progressColorStart, progressColorEnd, progressColor]);
+    function renderNormalProgress() {
+        return (React.createElement("circle", { cx: circlePos, cy: circlePos, r: radius, strokeWidth: progressStroke, className: cls('color', { disabled }), strokeDashoffset: circleLen - (currentPercentage / 100) * circleLen || 0, strokeDasharray: circleLen, strokeLinecap: filleted ? 'round' : 'square', style: getStyleWithVendor({
+                transition: transitionControl
+                    ? `stroke-dashoffset ${duration / 1000}s linear`
+                    : '',
+                stroke: color,
+            }), fill: "none" }));
+    }
+    function renderLinearGradient() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("defs", null,
+                React.createElement("linearGradient", { id: `${svgKey}-grad-circle-progress`, x1: "0%", y1: "0%", x2: "0%", y2: "100%" },
+                    React.createElement("stop", { offset: "0%", style: { stopColor: progressColorEnd }, className: "linear-gradient-end" }),
+                    React.createElement("stop", { offset: "100%", style: { stopColor: progressColorStart }, className: "linear-gradient-start" }))),
+            React.createElement("circle", { cx: circlePos, cy: circlePos, r: radius, strokeDashoffset: circleLen - (currentPercentage / 100) * circleLen || 0, strokeDasharray: circleLen, strokeWidth: progressStroke, strokeLinecap: filleted ? 'round' : 'square', style: getStyleWithVendor({
+                    transition: transitionControl
+                        ? `stroke-dashoffset ${duration / 1000}s linear`
+                        : '',
+                }), className: cls({ disabled }), stroke: `url(#${svgKey}-grad-circle-progress)`, fill: "none" })));
+    }
+    function renderProgress() {
+        return isRenderNormal ? renderNormalProgress() : renderLinearGradient();
+    }
+    function renderCircleProgress({ prefixCls }) {
+        return (React.createElement("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percentage, className: cls(`${prefixCls}-circle-progress`, disabled ? `${prefixCls}-circle-progress-disabled` : '', `${className}`), style: { width: circleSize, height: circleSize, ...style }, ref: domRef },
+            React.createElement("svg", { style: getStyleWithVendor({
+                    transform: `rotateY(${clockwise ? 180 : 0}deg) rotateZ(-90deg)`,
+                }), viewBox: `0 0 ${circleSize} ${circleSize}` },
+                React.createElement("circle", { cx: circlePos, cy: circlePos, r: radius, style: { stroke: trackColor }, className: `${size === 'mini' ? 'mini' : 'track-color'}`, strokeWidth: trackStroke, fill: "none" }),
+                renderProgress()),
+            showPercent ? (React.createElement("div", { className: cls(`${prefixCls}-circle-progress-text`, `${isRenderNormal ? 'color' : 'linear-gradient-text'}`, `${prefixCls}-circle-progress-text-${percentPosition}`, { disabled }), style: { color } }, renderPercent !== void 0
+                ? renderPercent(currentPercentage)
+                : `${currentPercentage}%`)) : null));
+    }
+    return React.createElement(ContextLayout, null, renderCircleProgress);
+});
+export default CircleProgress;