@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/steps/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/steps/style/css/index.js

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/esnext/steps/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esnext/steps/style/index.js

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/esnext/steps/style/index.less

@@ -0,0 +1,459 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-steps {
+    display: flex;
+    .use-var(padding, steps-padding);
+
+    &.reverse-order {
+        flex-direction: row-reverse;
+    }
+
+    &-item {
+        position: relative;
+        display: flex;
+        flex: 1;
+
+        &.horizontal {
+            flex-direction: column;
+        }
+
+        &-align-center {
+            align-items: center;
+        }
+
+        &-align-start {
+            align-items: flex-start;
+        }
+
+        &-align-center.vertical {
+            .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            visibility: hidden;
+        }
+
+        &:first-child &-tail::after,
+        &:last-child &-tail::before {
+            .reverse-order & {
+                visibility: hidden;
+            }
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            .reverse-order & {
+                visibility: visible;
+            }
+        }
+
+        &-tail {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .horizontal & {
+                width: 100%;
+                .use-var(height, steps-icon-height);
+
+                &::before,
+                &::after {
+                    .use-var(height, steps-tail-standard-size);
+                }
+
+                &-align-start {
+                    .use-var-with-rtl(left, steps-tail-horizontal-left);
+                    .use-var(padding, steps-tail-horizontal-padding);
+
+                    &::after {
+                        content: '';
+                        width: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: '';
+                        width: 50%;
+                    }
+                    &::before {
+                        .use-var-with-rtl(margin-right, steps-tail-horizontal-gutter);
+                        .use-var-with-rtl(border-top-right-radius, steps-tail-border-radius);
+                        .use-var-with-rtl(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var-with-rtl(margin-left, steps-tail-horizontal-gutter);
+                        .use-var-with-rtl(border-top-left-radius, steps-tail-border-radius);
+                        .use-var-with-rtl(border-bottom-left-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            .vertical & {
+                height: 100%;
+                .use-var(width, steps-icon-width);
+                flex-direction: column;
+
+                &::before,
+                &::after {
+                    .use-var(width, steps-tail-standard-size);
+                }
+
+                &-align-start {
+                    .use-var(top, steps-tail-vertical-top);
+                    .use-var(padding, steps-tail-vertical-padding);
+
+                    &::after {
+                        content: '';
+                        height: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: '';
+                        height: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-bottom, steps-tail-vertical-gutter);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-top, steps-tail-vertical-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            &::after,
+            &::before {
+                display: inline-block;
+                .use-var(background, steps-tail-standard-background);
+            }
+
+            &-status-finish::before,
+            &-status-finish::after,
+            &-align-center&-status-process::before,
+            &-align-center&-status-error::before {
+                .use-var(background, steps-tail-finish-background);
+            }
+
+            &-status-finish::before,
+            &-status-process::after,
+            &-align-center&-status-error::after {
+                .reverse-order & {
+                    .use-var(background, steps-tail-finish-background);
+                }
+            }
+            &-status-process::before,
+            &-align-center&-status-error::before {
+                .reverse-order & {
+                    .use-var(background, steps-tail-standard-background);
+                }
+            }
+        }
+
+        &-custom-icon,
+        &-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            .use-var(width, steps-icon-width);
+            .use-var(height, steps-icon-height);
+        }
+
+        &-icon {
+            border-radius: 50%;
+
+            .number.finish & {
+                .use-var(background, steps-finish-icon-num-background);
+            }
+
+            .number.process & {
+                .use-var(background, steps-process-icon-num-background);
+            }
+
+            .number.wait & {
+                .use-var(background, steps-wait-icon-num-background);
+            }
+
+            .number.error & {
+                .use-var(background, steps-error-icon-num-background);
+            }
+
+            svg {
+                .use-var(font-size, steps-icon-svg-standard-font-size);
+
+                .finish & {
+                    .use-var(color, steps-finish-icon-svg-color);
+                }
+
+                .error & {
+                    .use-var(color, steps-error-icon-svg-color);
+                    .use-var(font-size, steps-error-icon-svg-font-size);
+                }
+            }
+
+            &-num {
+                .use-var(font-size, steps-icon-num-font-size);
+                .use-var(line-height, steps-icon-num-line-height);
+                .use-var(color, steps-icon-num-color);
+                .text-medium();
+
+                .process & {
+                    .use-var(color, steps-process-icon-num-color);
+                }
+            }
+
+            &-dot {
+                position: relative;
+                display: inline-block;
+                .use-var(width, steps-dot-width);
+                .use-var(height, steps-dot-height);
+                border-radius: 50%;
+                .use-var(border-width, steps-dot-border-width);
+                border-style: solid;
+
+                .finish & {
+                    .use-var(border-color, steps-finish-dot-border-color);
+                }
+
+                .wait & {
+                    .use-var(border-color, steps-wait-dot-border-color);
+                }
+
+                .process & {
+                    border: none;
+                    .use-var(background, steps-process-dot-background);
+                }
+            }
+        }
+
+        &-content {
+            .horizontal & {
+                .use-var(margin-top, steps-horizontal-content-margin-top);
+                &-align-center {
+                    text-align: center;
+                }
+            }
+
+            .vertical & {
+                .use-var-with-rtl(margin-left, steps-vertical-content-margin-left);
+                flex: 1;
+
+                &-align-start {
+                    .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+                }
+            }
+        }
+
+        &-title {
+            .use-var(font-size, steps-title-font-size);
+            .use-var(line-height, steps-title-line-height);
+
+            .finish & {
+                .use-var(color, steps-finish-title-color);
+            }
+
+            .error & {
+                .use-var(color, steps-error-title-color);
+            }
+
+            .process & {
+                .use-var(color, steps-process-title-color);
+                font-weight: 500;
+            }
+
+            .wait & {
+                .use-var(color, steps-wait-title-color);
+            }
+        }
+
+        &-description {
+            .use-var(font-size, steps-description-font-size);
+            .use-var(line-height, steps-description-line-height);
+            .use-var(color, steps-description-color);
+
+            .wait & {
+                .use-var(color, steps-wait-description-color);
+            }
+
+            .vertical & {
+                .use-var(margin-top, steps-description-margin-top);
+            }
+        }
+    }
+
+    &.vertical {
+        &.reverse-order {
+            flex-direction: column-reverse;
+        }
+
+        flex-direction: column;
+        .use-var(padding-bottom, steps-vertical-padding-bottom);
+        .use-var-with-rtl(padding-left, steps-vertical-padding-left);
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-steps {
+    &-item {
+      &-tail {
+        &::after,
+        &::before {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-steps-tail-standard-background);
+          }
+        }
+        &-status-finish::before,
+        &-status-finish::after,
+        &-align-center&-status-process::before,
+        &-align-center&-status-error::before {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-steps-tail-finish-background);
+          }
+        }
+        &-status-finish::before,
+        &-status-process::after,
+        &-align-center&-status-error::after {
+          .reverse-order & {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-steps-tail-finish-background);
+            }
+          }
+        }
+        &-status-process::before,
+        &-align-center&-status-error::before {
+          .reverse-order & {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-steps-tail-standard-background);
+            }
+          }
+        }
+      }
+      &-icon {
+        .number.finish & {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-steps-finish-icon-num-background);
+          }
+        }
+        .number.process & {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-steps-process-icon-num-background);
+          }
+        }
+        .number.wait & {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-steps-wait-icon-num-background);
+          }
+        }
+        .number.error & {
+          @{arco-dark-mode-selector} & {
+            .use-var(background, dark-steps-error-icon-num-background);
+          }
+        }
+        svg {
+          .finish & {
+            @{arco-dark-mode-selector} & {
+              .use-var(color, dark-steps-finish-icon-svg-color);
+            }
+          }
+          .error & {
+            @{arco-dark-mode-selector} & {
+              .use-var(color, dark-steps-error-icon-svg-color);
+            }
+          }
+        }
+        &-num {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-steps-icon-num-color);
+          }
+          .process & {
+            @{arco-dark-mode-selector} & {
+              .use-var(color, dark-steps-process-icon-num-color);
+            }
+          }
+        }
+        &-dot {
+          .finish & {
+            @{arco-dark-mode-selector} & {
+              .use-var(border-color, dark-steps-finish-dot-border-color);
+            }
+          }
+          .wait & {
+            @{arco-dark-mode-selector} & {
+              .use-var(border-color, dark-steps-wait-dot-border-color);
+            }
+          }
+          .process & {
+            @{arco-dark-mode-selector} & {
+              .use-var(background, dark-steps-process-dot-background);
+            }
+          }
+        }
+      }
+      &-title {
+        .finish & {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-steps-finish-title-color);
+          }
+        }
+        .error & {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-steps-error-title-color);
+          }
+        }
+        .process & {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-steps-process-title-color);
+          }
+        }
+        .wait & {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-steps-wait-title-color);
+          }
+        }
+      }
+      &-description {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-steps-description-color);
+        }
+        .wait & {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-steps-wait-description-color);
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/steps/type.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+export interface StepProps {
+    /**
+     * 步骤标题
+     * @en Step title
+     */
+    title?: React.ReactNode;
+    /**
+     * 步骤说明文字
+     * @en Step description
+     */
+    description?: React.ReactNode;
+    /**
+     * 自定义步骤图标
+     * @en Custom step Icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * 指定步骤状态，不配置该项时，会根据 Steps 的 current 属性自动指定状态
+     * @en Specify the step status. When this item is not input, the status will be automatically specified according to the current property of steps
+     */
+    status?: 'finish' | 'error' | 'wait' | 'process';
+    /**
+     * 指定对齐方式，不配置该项时，会跟随 Steps 的 align 属性值
+     * @en Specify the step alignment. When this item is not input, it will be automatically specified according to the align property of steps
+     */
+    align?: 'center' | 'start';
+}
+export interface StepsProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     *  顺序反转，设置为true后，顺序将从右到左，从下到上
+     * @en reverse the order from right to left and from bottom to top
+     */
+    reverseOrder?: boolean;
+    /**
+     * 自定义样式，如果想用 css 控制 icon 颜色，可使用公共 mixin '.set-steps-color(@color)'
+     * @en Custom stylesheet. If want to use CSS to control icon color, use public mixin '.set-steps-color(@color)'
+     */
+    style?: React.CSSProperties;
+    /**
+     * 步骤条方向
+     * @en Step bar direction
+     * @default horizontal
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * 步骤条对齐方式
+     * @en Step alignment
+     * @default direction="horizontal" 时默认为 "center"，direction="vertical" 时默认为 "start"
+     * @default_en "center" when direction="horizontal" and "start" when direction="vertical"
+     */
+    align?: 'center' | 'start';
+    /**
+     * 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态，传入则受控
+     * @en Specify the current step, counting from 0. In the step children elements, the status can be overwritten through the status, and it is controlled if it is input
+     */
+    current?: number;
+    /**
+     * 步骤图标类型。在子 Step 元素中，可以通过 icon 属性覆盖图标
+     * @en Steps icon type. In the children step elements , the icons can be overridden by the property icon
+     * @default number
+     */
+    iconType?: 'number' | 'dot';
+    /**
+     * 当前步骤的节点状态
+     * @en Status of the current step
+     * @default process
+     */
+    status?: 'finish' | 'error' | 'wait' | 'process';
+    /**
+     * 初始 step index
+     * @en Default step index
+     * @default 0
+     */
+    defaultIndex?: number;
+    /**
+     * 步骤条自定义数据，优先级高于 Children Step 子元素
+     * @en Custom data of step bar, which takes precedence over children elements of steps component
+     */
+    items?: StepProps[];
+    /**
+     * 点击步骤触事件
+     * @en Callback when clicking the step
+     */
+    onClick?: (current: number) => void;
+    /**
+     * step 变化回调
+     * @en Callback when step changes
+     */
+    onChange?: (index: number) => void;
+    /**
+     * 子元素，优先级低于 items
+     * @en Child element, with priority lower than items
+     */
+    children?: React.ReactNode;
+}
+export interface StepRef {
+    /**
+     * Step 最外层元素 DOM
+     * @en Outermost element DOM of the Step
+     */
+    dom: HTMLDivElement | null;
+}
+export interface StepsRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/esnext/steps/type.js

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