@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/stepper/style/index.less

@@ -0,0 +1,161 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-stepper {
+    display: inline-flex;
+    .use-var(font-size, stepper-font-size);
+
+    &.@{prefix}-square {
+        border-width: 1PX;
+        border-style: solid;
+        .use-var(border-color, stepper-square-border-color);
+        .use-var(border-radius, stepper-square-border-radius);
+
+        .@{prefix}-stepper {
+            &-add-button,
+            &-minus-button,
+            &-input {
+                .use-var(background, stepper-square-background-color);
+            }
+            &-input {
+                border-left-width: 1PX;
+                border-right-width: 1PX;
+                border-style: solid;
+                .use-var(border-left-color, stepper-square-border-color);
+                .use-var(border-right-color, stepper-square-border-color);
+            }
+        }
+    }
+
+    &.@{prefix}-round {
+        .@{prefix}-stepper {
+            &-minus-button,
+            &-add-button {
+                .use-var(border-radius, stepper-round-button-border-radius);
+            }
+            &-input {
+                .use-var(background, stepper-round-input-background-color);
+            }
+        }
+    }
+
+    &-minus-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(font-size, stepper-button-icon-size);
+        .use-var(width, stepper-button-size);
+        .use-var(height, stepper-button-size);
+        .use-var(background, stepper-default-background-color);
+
+        &-icon {
+            .use-var(color, stepper-content-color);
+
+            &.disabled {
+                .use-var(color, stepper-disable-color);
+            }
+        }
+    }
+
+    &-input {
+        text-align: center;
+        .use-var(width, stepper-input-width);
+        .use-var(height, stepper-input-height);
+        .use-var(background, stepper-default-background-color);
+        .use-var(color, stepper-content-color);
+        .use-var(margin, stepper-input-margin);
+    }
+
+    &-add-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(font-size, stepper-button-icon-size);
+        .use-var(width, stepper-button-size);
+        .use-var(height, stepper-button-size);
+        .use-var(background, stepper-default-background-color);
+
+        &-icon {
+            .use-var(color, stepper-content-color);
+
+            &.disabled {
+                .use-var(color, stepper-disable-color);
+            }
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-stepper {
+    &.@{prefix}-square {
+      @{arco-dark-mode-selector} & {
+        .use-var(border-color, dark-stepper-square-border-color);
+      }
+      .@{prefix}-stepper {
+        &-input {
+          @{arco-dark-mode-selector} & {
+            .use-var(border-left-color, dark-stepper-square-border-color);
+            .use-var(border-right-color, dark-stepper-square-border-color);
+          }
+        }
+      }
+    }
+    &-minus-button {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-stepper-default-background-color);
+      }
+      &-icon {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-stepper-content-color);
+        }
+        &.disabled {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-stepper-disable-color);
+          }
+        }
+      }
+    }
+    &-input {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-stepper-default-background-color);
+        .use-var(color, dark-stepper-content-color);
+      }
+    }
+    &-add-button {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-stepper-default-background-color);
+      }
+      &-icon {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-stepper-content-color);
+        }
+        &.disabled {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-stepper-disable-color);
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/stepper/type.d.ts

@@ -0,0 +1,159 @@
+import { ReactNode } from 'react';
+export interface StepperProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     * */
+    style?: React.CSSProperties;
+    /**
+     * input样式
+     * @en Input stylesheet
+     */
+    inputStyle?: React.CSSProperties;
+    /**
+     * input类名
+     * @en Input class
+     */
+    inputClass?: string;
+    /**
+     * 绑定值，传入即受控
+     * @en Bundled value (Controlled)
+     */
+    value?: number;
+    /**
+     * 默认值
+     * @en Default value
+     * @default 1
+     */
+    defaultValue?: number;
+    /**
+     * 是否允许内容为空
+     * @en Whether the content is allowed to be empty
+     * @default false
+     */
+    allowEmpty?: boolean;
+    /**
+     * 格式化到小数点后固定位数，设置为 0 表示格式化到整数
+     * @en Formatted to a decimal point after a fixed number of digits, set to 0 indicates formatting to an integer
+     * @default 0
+     */
+    digits?: number;
+    /**
+     * 是否禁用步进器
+     * @en Whether to disable the stepper
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 输入框只读状态
+     * @en Input read only status
+     * @default false
+     */
+    inputReadonly?: boolean;
+    /**
+     * 最大值
+     * @en Max value
+     * @default Infinity
+     */
+    max?: number;
+    /**
+     * 最小值
+     * @en Min value
+     * @default 1
+     */
+    min?: number;
+    /**
+     * 是否允许操作大于/小于极限值时，操作结果等于极限值
+     * @en If an operation is allowed to be greater more/less than the limit value, the result of the operation is equal to the limit value
+     */
+    equalLimitDisabled?: boolean;
+    /**
+     * 递增/减值
+     * @en Incremental/Impairment value
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 边框风格
+     * @en Border style
+     * @default "default"
+     */
+    theme?: 'square' | 'round' | 'default';
+    /**
+     * 格式化内部值（优先级最高）
+     * @en Format the inner value
+     */
+    formatter?: (innerValue: number) => number | Promise<number>;
+    /**
+     * 增加按钮
+     * @en Add button
+     */
+    addButton?: ReactNode;
+    /**
+     * 删除按钮
+     * @en Delete button
+     */
+    minusButton?: ReactNode;
+    /**
+     * 自定义输入框函数
+     * @en The function of customizing the input
+     */
+    renderContent?: (innerValue: number) => ReactNode;
+    /**
+     * 输入框失去焦点时触发
+     * @en Triggers when the input loses focus
+     */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * 数据变化时的触发
+     * @en Triggers when the data change
+     */
+    onChange?: (value: number | null) => void;
+    /**
+     * 输入框获得焦点时触发
+     * @en Triggers when the input gets focus
+     */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * 点击增加按钮时触发
+     * @en Triggers when the add button is clicked
+     */
+    onAddButtonClick?: (e: React.MouseEvent) => void;
+    /**
+     * 点击减少按钮时触发
+     * @en Triggers when the minus button is clicked
+     */
+    onMinusButtonClick?: (e: React.MouseEvent) => void;
+    /**
+     * 点击最外侧dom时触发
+     * @en Triggers when the most out dom is clicked
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * 输入框输入时触发
+     * @en Triggers when the input is inputting
+     */
+    onInput?: (e: React.ChangeEvent) => void;
+}
+export interface StepperRef {
+    /**
+     * 最外层元素 DOM
+     * @en The most out element dom
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 输入框 DOM
+     * @en Input dom
+     */
+    input: HTMLInputElement | null;
+    /**
+     * 改变内部值的方法
+     * @en The function of changing inner value
+     */
+    changeValue: (newValue: number | null) => void;
+}

package/esnext/stepper/type.js

@@ -0,0 +1 @@
+export {};

package/esnext/steps/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StepsProps, StepsRef } from './type';
+export * from './type';
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "align" | "iconType" | "current"> & {
+    index?: number | undefined;
+    changeIndex: (newIndex: number) => void;
+}>;
+declare const _default: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<StepsRef>> & {
+    Step: React.ForwardRefExoticComponent<import("./type").StepProps & React.RefAttributes<import("./type").StepRef>>;
+};
+/**
+ * 显示一个任务的进度; 或者引导用户完成某个复杂任务。
+ * @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 _default;

package/esnext/steps/index.js

@@ -0,0 +1,50 @@
+import React, { useRef, forwardRef, useImperativeHandle, Children, createContext, useCallback, useState, useEffect, } from 'react';
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Step from './step';
+import { useSystem, useRefState } from '../_helpers';
+export * from './type';
+export const StepsContext = createContext({ changeIndex: () => { } });
+const Steps = forwardRef((props, ref) => {
+    const { className = '', style, children, direction = 'horizontal', align: userSetAlign, iconType = 'number', current, defaultIndex = 0, status = 'process', items, 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(null);
+    const system = useSystem();
+    function changeIndex(newIndex) {
+        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, index) => (React.createElement(StepsContext.Provider, { value: {
+            iconType,
+            current: activeIndex,
+            direction,
+            index,
+            status: activeIndex === index ? status : void 0,
+            align,
+            changeIndex,
+        }, key: index }, child)), [iconType, activeIndex, direction, align]);
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: `${prefixCls}-steps all-border-box ${className} ${direction} ${system}`, style: style, ref: domRef }, items
+        ? items.map((item, index) => renderStep(React.createElement(Step, Object.assign({}, item, { key: index })), index))
+        : Children.toArray(children).map((child, index) => renderStep(child, index))))));
+});
+/**
+ * 显示一个任务的进度; 或者引导用户完成某个复杂任务。
+ * @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,
+});

package/esnext/steps/step.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StepProps, StepRef } from './type';
+declare const Step: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<StepRef>>;
+export default Step;

package/esnext/steps/step.js

@@ -0,0 +1,43 @@
+import React, { forwardRef, useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { IconCheckBold, IconCloseBold } from '../icon';
+import { ContextLayout } from '../context-provider';
+import { StepsContext } from './index';
+const Step = forwardRef((props, ref) => {
+    const { title, description, icon } = props;
+    const { iconType, current, direction, index = 0, status: contextStatus, align: contextAlign, changeIndex, } = useContext(StepsContext);
+    const status = props.status || contextStatus;
+    const align = props.align || contextAlign;
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    const currentStatus = useMemo(() => {
+        if (status)
+            return status;
+        if (current < index) {
+            return 'wait';
+        }
+        if (current === index) {
+            return 'process';
+        }
+        return 'finish';
+    }, [status, index, current]);
+    function renderNumIcon(prefixCls) {
+        let content;
+        if (currentStatus === 'finish') {
+            content = React.createElement(IconCheckBold, null);
+        }
+        else if (currentStatus === 'error') {
+            content = React.createElement(IconCloseBold, null);
+        }
+        return (content || React.createElement("span", { className: cls(`${prefixCls}-steps-item-icon-num`) }, index + 1));
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { ref: domRef, className: cls(`${prefixCls}-steps-item`, `${prefixCls}-steps-item-align-${align}`, currentStatus, direction, iconType), onClick: () => changeIndex(index) },
+        React.createElement("div", { className: cls(`${prefixCls}-steps-item-tail`, `${prefixCls}-steps-item-tail-status-${currentStatus}`, `${prefixCls}-steps-item-tail-align-${align}`, `${currentStatus}-tail-color-with-config`) }),
+        icon ? (React.createElement("div", { className: cls(`${prefixCls}-steps-item-custom-icon`, `${currentStatus}-custom-icon-bg-color-with-config`) }, icon)) : (React.createElement("div", { className: cls(`${prefixCls}-steps-item-icon`, `${currentStatus}-bg-color-with-config`) }, iconType === 'number' ? (renderNumIcon(prefixCls)) : (React.createElement("span", { className: cls(`${prefixCls}-steps-item-icon-dot`) })))),
+        title || description ? (React.createElement("div", { className: cls(`${prefixCls}-steps-item-content`, `${prefixCls}-steps-item-content-align-${align}`) },
+            title ? (React.createElement("div", { className: cls(`${prefixCls}-steps-item-title`, `${currentStatus}-title-color-with-config`) }, title)) : null,
+            description ? (React.createElement("div", { className: cls(`${prefixCls}-steps-item-description`) }, description)) : null)) : null))));
+});
+export default Step;