@fjyueke/arco-mcp 1.0.0

package/metaData/components/stepper/doc.md

@@ -0,0 +1,46 @@
+### 数据录入
+
+# 步进器 Stepper
+
+步进器组件，支持受控模式
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|inputStyle|input样式|CSSProperties|-|
+|inputClass|input类名|string|-|
+|value|绑定值，传入即受控|number|-|
+|defaultValue|默认值|number|1|
+|allowEmpty|是否允许内容为空|boolean|false|
+|digits|格式化到小数点后固定位数，设置为 0 表示格式化到整数|number|0|
+|disabled|是否禁用步进器|boolean|false|
+|inputReadonly|输入框只读状态|boolean|false|
+|max|最大值|number|Infinity|
+|min|最小值|number|1|
+|equalLimitDisabled|是否允许操作大于/小于极限值时，操作结果等于极限值|boolean|-|
+|step|递增/减值|number|1|
+|theme|边框风格|"square" \| "round" \| "default"|"default"|
+|formatter|格式化内部值（优先级最高）|(innerValue: number) =\> number \| Promise\<number\>|-|
+|addButton|增加按钮|ReactNode|-|
+|minusButton|删除按钮|ReactNode|-|
+|renderContent|自定义输入框函数|(innerValue: number) =\> ReactNode|-|
+|onBlur|输入框失去焦点时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onChange|数据变化时的触发|(value: number) =\> void|-|
+|onFocus|输入框获得焦点时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onAddButtonClick|点击增加按钮时触发|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onMinusButtonClick|点击减少按钮时触发|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onClick|点击最外侧dom时触发|(e: MouseEvent\<Element, MouseEvent\>) =\> void|-|
+|onInput|输入框输入时触发|(e: ChangeEvent\<Element\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|input|输入框 DOM|HTMLInputElement|
+|changeValue|改变内部值的方法|(newValue: number) =\> void|

package/metaData/components/stepper/example/index.tsx

@@ -0,0 +1,166 @@
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, Ref, useImperativeHandle } from 'react';
+import { ContextLayout } from '../context-provider';
+import useButtonClick from './hooks/useButtonClick';
+import useInputEvent from './hooks/useInputEvent';
+import { IconAdd, IconMinus } from '../icon';
+import useValue from './hooks/useValue';
+import { StepperProps, StepperRef } from './type';
+
+export * from './type';
+
+const Stepper = forwardRef((props: StepperProps, ref: Ref<StepperRef>) => {
+    const {
+        className = '',
+        style,
+        inputStyle,
+        inputClass = '',
+        value,
+        defaultValue = 1,
+        allowEmpty = false,
+        digits = 0,
+        disabled = false,
+        inputReadonly = false,
+        max = Infinity,
+        min = 1,
+        equalLimitDisabled = false,
+        step = 1,
+        theme = 'default',
+        formatter,
+        addButton,
+        minusButton,
+        renderContent,
+        onBlur,
+        onChange,
+        onFocus,
+        onAddButtonClick,
+        onMinusButtonClick,
+        onClick,
+        onInput,
+    } = props;
+
+    // 值的相关逻辑
+    // @en The logic is that handle value
+    const { updateValue, actualInputValue, showValue, innerValue } = useValue({
+        defaultValue,
+        formatter,
+        min,
+        max,
+        value,
+        digits,
+    });
+
+    // 按钮点击的相关逻辑
+    // @en The logic is that handle button click
+    const { minusButtonDisable, addButtonDisable, handleAddButtonClick, handleMinusButtonClick } =
+        useButtonClick({
+            actualInputValue,
+            min,
+            max,
+            step,
+            disabled,
+            digits,
+            equalLimitDisabled,
+            updateValue,
+            onAddButtonClick,
+            onMinusButtonClick,
+        });
+
+    // 输入框操作的相关逻辑
+    // @en The logic is that handle input operation
+    const { handleInput, handleBlur } = useInputEvent({
+        defaultValue,
+        min,
+        max,
+        digits,
+        actualInputValue,
+        allowEmpty,
+        innerValue,
+        updateValue,
+        onBlur,
+        onChange,
+        onInput,
+    });
+
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        input: inputRef.current,
+        changeValue: (newValue: number | null) => {
+            let tempValue = newValue != null ? newValue : defaultValue;
+            tempValue = Math.min(max, Math.max(tempValue, min));
+            updateValue(tempValue);
+        },
+    }));
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <div
+                    className={cls(`${prefixCls}-stepper`, `${prefixCls}-${theme}`, className)}
+                    style={style}
+                    ref={domRef}
+                    onClick={onClick}
+                >
+                    <div aria-label="decrease" onClick={handleMinusButtonClick}>
+                        {minusButton || (
+                            <div className={cls(`${prefixCls}-stepper-minus-button`)}>
+                                <IconMinus
+                                    className={cls(`${prefixCls}-stepper-minus-button-icon`, {
+                                        disabled: minusButtonDisable,
+                                    })}
+                                />
+                            </div>
+                        )}
+                    </div>
+
+                    {renderContent ? (
+                        renderContent(actualInputValue)
+                    ) : (
+                        <input
+                            style={inputStyle}
+                            className={cls(`${prefixCls}-stepper-input`, inputClass)}
+                            onFocus={onFocus}
+                            onInput={handleInput}
+                            onBlur={handleBlur}
+                            disabled={disabled}
+                            value={showValue}
+                            readOnly={inputReadonly}
+                            ref={inputRef}
+                            type="number"
+                            role="spinbutton"
+                            aria-valuenow={Number(showValue)}
+                            aria-valuemax={max}
+                            aria-valuemin={min}
+                        />
+                    )}
+
+                    <div aria-label="increase" onClick={handleAddButtonClick}>
+                        {addButton || (
+                            <div className={cls(`${prefixCls}-stepper-add-button`)}>
+                                <IconAdd
+                                    className={cls(`${prefixCls}-stepper-add-button-icon`, {
+                                        disabled: addButtonDisable,
+                                    })}
+                                />
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+/**
+ * 步进器组件，支持受控模式
+ * @en Stepper component, provide controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 步进器
+ * @name_en Stepper
+ * @displayName Stepper
+ */
+export default componentWrapper(Stepper, 'Stepper');

package/metaData/components/stepper/example/useButtonClick.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import { StepperProps } from '../type';
+
+function correctCalculation(leftNumber: number, rightNumber: number, operator: '-' | '+') {
+    const magnification = 1e17;
+    const left = leftNumber * magnification;
+    const right = rightNumber * magnification;
+    return operator === '-' ? (left - right) / magnification : (left + right) / magnification;
+}
+
+export default function useButtonClick(
+    params: Required<
+        Pick<
+            StepperProps,
+            'min' | 'max' | 'step' | 'disabled' | 'digits' | 'digits' | 'equalLimitDisabled'
+        >
+    > &
+        Pick<StepperProps, 'onAddButtonClick' | 'onMinusButtonClick'> & {
+            actualInputValue: number;
+            updateValue: (updater: number | ((oldValue: number) => number)) => void;
+        },
+) {
+    const {
+        actualInputValue,
+        min,
+        max,
+        step,
+        disabled,
+        equalLimitDisabled,
+        updateValue,
+        onAddButtonClick,
+        onMinusButtonClick,
+    } = params;
+    const minusDisable = actualInputValue <= min || disabled;
+    const [minusButtonDisable, setMinusButtonDisable] = useState(minusDisable);
+    const addDisable = actualInputValue >= max || disabled;
+    const [addButtonDisable, setAddButtonDisable] = useState(addDisable);
+
+    const handleMinusButtonClick = (e: React.MouseEvent) => {
+        if (minusButtonDisable) {
+            return;
+        }
+        updateValue(oldValue => {
+            const result = correctCalculation(oldValue, step, '-');
+            return result < min ? (equalLimitDisabled ? oldValue : min) : result;
+        });
+        onMinusButtonClick && onMinusButtonClick(e);
+    };
+
+    const handleAddButtonClick = (e: React.MouseEvent) => {
+        if (addButtonDisable) {
+            return;
+        }
+        updateValue(oldValue => {
+            const result = correctCalculation(Number(oldValue), step, '+');
+            return result > max ? (equalLimitDisabled ? oldValue : max) : result;
+        });
+        onAddButtonClick && onAddButtonClick(e);
+    };
+
+    // 当前值改变时，更新按钮状态
+    // Changes button status when value changed
+    useEffect(() => {
+        setMinusButtonDisable(minusDisable);
+        setAddButtonDisable(addDisable);
+    }, [minusDisable, addDisable]);
+
+    return {
+        minusButtonDisable,
+        addButtonDisable,
+        handleMinusButtonClick,
+        handleAddButtonClick,
+    };
+}

package/metaData/components/stepper/example/useInputEvent.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { StepperProps } from '../type';
+import { useUpdateEffect } from '../../_helpers';
+
+export default function useInputEvent(
+    params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits' | 'allowEmpty'>> &
+        Pick<StepperProps, 'onBlur' | 'onChange' | 'onInput'> & {
+            actualInputValue: number;
+            innerValue: number;
+            updateValue: (updater: number | ((oldValue: number) => number)) => void;
+        },
+) {
+    const {
+        defaultValue,
+        min,
+        max,
+        digits,
+        actualInputValue,
+        innerValue,
+        allowEmpty,
+        updateValue,
+        onBlur,
+        onChange,
+        onInput,
+    } = params;
+
+    const handleInput = (e: React.FocusEvent<HTMLInputElement>) => {
+        const targetValue = e.target.value;
+        const numberValue = Number(targetValue);
+        const pointIndex = targetValue.indexOf('.');
+
+        if (digits > 0 && pointIndex !== -1) {
+            const decimalLength = targetValue.slice(pointIndex + 1).length;
+            updateValue(decimalLength > digits ? actualInputValue : numberValue);
+        } else if (allowEmpty && targetValue === '') {
+            updateValue(Number.MIN_VALUE);
+        } else {
+            updateValue(numberValue);
+        }
+        onInput && onInput(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+        const targetValue = e.target.value;
+        const numberValue = Number(targetValue);
+
+        if (allowEmpty && targetValue === '') {
+            updateValue(Number.MIN_VALUE);
+        } else if (!allowEmpty && targetValue === '') {
+            updateValue(defaultValue);
+        } else {
+            updateValue(Math.max(min, Math.min(max, numberValue)));
+        }
+        onBlur && onBlur(e);
+    };
+
+    useUpdateEffect(() => {
+        onChange && onChange(innerValue);
+    }, [innerValue]);
+
+    return {
+        handleInput,
+        handleBlur,
+    };
+}

package/metaData/components/stepper/example/useValue.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { Promise } from 'es6-promise';
+import { StepperProps } from '..';
+
+export default function useValue(
+    params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits'>> &
+        Pick<StepperProps, 'formatter' | 'value'>,
+) {
+    const { defaultValue, formatter, max, min, value, digits } = params;
+    const [innerValue, setInnerValue] = useState<number>(defaultValue);
+
+    const updateValue = (updater: number | ((oldValue: number) => number)) => {
+        const tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
+        if (formatter) {
+            new Promise(resolve => {
+                resolve(formatter(Number(tempValue)));
+            }).then((result: number) => {
+                const res = Math.max(min, Math.min(max, result));
+                setInnerValue(res);
+            });
+        } else {
+            setInnerValue(tempValue);
+        }
+    };
+
+    const actualInputValue = value !== undefined ? value : innerValue;
+
+    // 将actualInputValue等于Number.MIN_VALUE的情况视为空值
+    // @en If actualInputValue equal Number.MIN_VALUE, actualInputValue equal ''
+    const showValue =
+        actualInputValue === Number.MIN_VALUE
+            ? ''
+            : digits > 0
+            ? parseFloat(String(actualInputValue)).toFixed(digits)
+            : actualInputValue;
+
+    return {
+        updateValue,
+        actualInputValue,
+        showValue,
+        innerValue,
+    };
+}

package/metaData/components/steps/doc.md

@@ -0,0 +1,57 @@
+### 信息展示
+
+# 步骤条 Steps
+
+显示一个任务的进度; 或者引导用户完成某个复杂任务。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|reverseOrder|顺序反转，设置为true后，顺序将从右到左，从下到上|boolean|-|
+|style|自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '\.set\-steps\-color(@color)'|CSSProperties|-|
+|direction|步骤条方向|"vertical" \| "horizontal"|horizontal|
+|align|步骤条对齐方式|"center" \| "start"|direction="horizontal" 时默认为 "center"，direction="vertical" 时默认为 "start"|
+|current|指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态，传入则受控|number|-|
+|iconType|步骤图标类型。在子 Step 元素中，可以通过 icon 属性覆盖图标|"number" \| "dot"|number|
+|status|当前步骤的节点状态|"finish" \| "error" \| "wait" \| "process"|process|
+|defaultIndex|初始 step index|number|0|
+|items|步骤条自定义数据，优先级高于 Children Step 子元素|StepProps\[\]|-|
+|onClick|点击步骤触事件|(current: number) =\> void|-|
+|onChange|step 变化回调|(index: number) =\> void|-|
+|children|子元素，优先级低于 items|ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> Steps.Step
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|title|步骤标题|ReactNode|-|
+|description|步骤说明文字|ReactNode|-|
+|icon|自定义步骤图标|ReactNode|-|
+|status|指定步骤状态，不配置该项时，会根据 Steps 的 current 属性自动指定状态|"finish" \| "error" \| "wait" \| "process"|-|
+|align|指定对齐方式，不配置该项时，会跟随 Steps 的 align 属性值|"center" \| "start"|-|
+
+> StepProps
+
+|参数|描述|类型|
+|----------|-------------|------|
+|title|步骤标题|ReactNode|
+|description|步骤说明文字|ReactNode|
+|icon|自定义步骤图标|ReactNode|
+|status|指定步骤状态，不配置该项时，会根据 Steps 的 current 属性自动指定状态|"finish" \| "error" \| "wait" \| "process"|
+|align|指定对齐方式，不配置该项时，会跟随 Steps 的 align 属性值|"center" \| "start"|
+
+> StepRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|Step 最外层元素 DOM|HTMLDivElement|

package/metaData/components/steps/example/index.tsx

@@ -0,0 +1,123 @@
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    Children,
+    createContext,
+    useCallback,
+    useState,
+    useEffect,
+} from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Step from './step';
+import { useSystem, useRefState } from '../_helpers';
+import { StepsProps, StepsRef } from './type';
+
+export * from './type';
+
+export const StepsContext = createContext<
+    Pick<StepsProps, 'iconType' | 'current' | 'direction' | 'status' | 'align' | 'reverseOrder'> & {
+        index?: number;
+        changeIndex: (newIndex: number) => void;
+    }
+>({ changeIndex: () => {} });
+
+const Steps = forwardRef((props: StepsProps, ref: Ref<StepsRef>) => {
+    const {
+        className = '',
+        style,
+        children,
+        direction = 'horizontal',
+        align: userSetAlign,
+        iconType = 'number',
+        current,
+        defaultIndex = 0,
+        status = 'process',
+        items,
+        reverseOrder = false,
+        onClick,
+        onChange,
+    } = props;
+    const defaultAlign = direction === 'vertical' ? 'start' : 'center';
+    const align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
+    const [innerIndex, setInnerIndex] = useState(Number(defaultIndex));
+    const [activeIndex, activeRefIndex, setActiveIndex] = useRefState(
+        current === void 0 ? innerIndex : current,
+    );
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const system = useSystem();
+
+    function changeIndex(newIndex: number) {
+        onClick?.(newIndex);
+        setInnerIndex(newIndex);
+        newIndex !== activeRefIndex.current && onChange?.(newIndex);
+    }
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    useEffect(() => {
+        setActiveIndex(current === void 0 ? innerIndex : current);
+    }, [current, innerIndex]);
+
+    const renderStep = useCallback(
+        (child: React.ReactNode, index: number) => (
+            <StepsContext.Provider
+                value={{
+                    iconType,
+                    current: activeIndex,
+                    direction,
+                    index,
+                    status: activeIndex === index ? status : void 0,
+                    align,
+                    reverseOrder,
+                    changeIndex,
+                }}
+                key={index}
+            >
+                {child}
+            </StepsContext.Provider>
+        ),
+        [iconType, activeIndex, direction, align],
+    );
+
+    return (
+        <ContextLayout>
+            {({ prefixCls }) => (
+                <div
+                    className={cls(
+                        `${prefixCls}-steps all-border-box ${className} ${direction} ${system}`,
+                        {
+                            'reverse-order': reverseOrder,
+                        },
+                    )}
+                    style={style}
+                    ref={domRef}
+                >
+                    {items
+                        ? items.map((item, index) =>
+                              renderStep(<Step {...item} key={index} />, index),
+                          )
+                        : Children.toArray(children).map((child, index) =>
+                              renderStep(child, index),
+                          )}
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+/**
+ * 显示一个任务的进度; 或者引导用户完成某个复杂任务。
+ * @en Display the progress of a task, or guide users to complete a complex task.
+ * @name 步骤条
+ * @name_en Steps
+ * @type 信息展示
+ * @type_en Data Display
+ */
+export default componentWrapper(Steps, {
+    Step,
+});