@arco-design/mobile-react 2.31.5 → 2.32.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,407 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-steps {
+    display: flex;
+    .use-var(padding, steps-padding);
+
+    &-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;
+        }
+
+        &-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);
+            }
+        }
+
+        &-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 {
+        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);
+          }
+        }
+      }
+      &-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,110 @@
+/// <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;
+    /**
+     * 自定义样式，如果想用 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 {};

package/esnext/sticky/index.d.ts

@@ -0,0 +1,141 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export interface StickyRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 局部滚动模式下，如果容器外部还有嵌套滚动，可主动调用此方法，让 sticky 的元素主动更新 fixed 位置
+     * @en In the local scrolling mode, if there is nested scrolling outside the container, this method can be actively called to make the sticky element actively update the fixed position
+     */
+    recalculatePosition: () => void;
+    /**
+     * 手动更新占位模块的高度
+     * @en Manually update the height of the placeholder
+     */
+    updatePlaceholderLayout: () => void;
+}
+export interface StickyEventPayload {
+    /**
+     * 当前是否为吸顶/吸底状态
+     * @en Whether it is currently in the top/bottom suction state
+     */
+    isSticky: boolean;
+    /**
+     * 前一个状态是否为吸顶/吸底状态
+     * @en Whether the previous state is ceiling / bottom suction state
+     */
+    wasSticky: boolean;
+    /** 当前是否为吸顶状态 */
+    isTopSticky: boolean;
+    /** 当前是否为吸底状态 */
+    isBottomSticky: boolean;
+}
+export interface StickyProps {
+    /**
+     * 吸附位置，top 表示吸顶，bottom 表示吸底，both 表示既吸顶又吸底
+     * @en Adsorption position, top means fixed top, bottom means fixed bottom, both means both top and bottom
+     * @default "top"
+     */
+    position?: 'top' | 'bottom' | 'both';
+    /**
+     * 当距离容器顶部距离为该值时吸顶
+     * @en Fixed top when the distance from the top of the container is this value
+     * @default 0
+     */
+    topOffset?: number;
+    /**
+     * 当距离容器底部距离为该值时吸底
+     * @en Fixed bottom when the distance from the bottom of the container is this value
+     * @default 0
+     */
+    bottomOffset?: number;
+    /**
+     * 当sticky元素需要跟随依附容器离开视口时距离依附容器边缘的距离
+     * @en The distance from the edge of the attached container when the sticky element needs to follow the attached container to leave the viewport
+     * @default 0
+     */
+    followOffset?: number;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 组件内部内容
+     * @en Children elements of the component
+     */
+    children?: ReactNode;
+    /**
+     * 层级指数，z-index的值
+     * @en z-index
+     * @default 100
+     */
+    zIndex?: number;
+    /**
+     * 在处于sticky状态时是否portal
+     * @en Whether it is portal in sticky state
+     * @default false
+     */
+    portalWhenSticky?: boolean;
+    /**
+     * 处于sticky状态时，元素固定样式。推荐用fixed，如果为absolute则需自行为滚动容器的父容器设置 position: relative
+     * @en When in the sticky state, the fixed style of the element. Fixed is recommended. If absolute, need to set position: relative for the parent container of the scrolling container.
+     * @default "fixed"
+     */
+    stickyStyle?: 'fixed' | 'absolute';
+    /**
+     * 处于sticky状态时的自定义样式
+     * @en Custom style when in sticky state
+     */
+    stickyCssStyle?: CSSProperties;
+    /**
+     * 被portal时挂载的容器
+     * @en Container mounted when being portaled
+     * @default () => document.body
+     */
+    getPortalContainer?: () => HTMLElement;
+    /**
+     * 吸顶状态切换时触发
+     * payload.isSticky: 当前是否为吸顶/吸底状态
+     * payload.wasSticky: 前一个状态是否为吸顶/吸底状态
+     * @en Triggered when the sticky state is switched
+     * @en isSticky: Whether it is currently in the top/bottom state
+     * @en Whether the previous state is the top/bottom state
+     */
+    onStickyStateChange?: (payload: StickyEventPayload) => void;
+    /**
+     * 滚动时top变化回调，参数为元素距离容器顶部减去topOffset的距离
+     * @en The top change callback when scrolling, the parameter is the distance of the element from the top of the container minus topOffset
+     */
+    onTopChange?: (top: number) => void;
+    /**
+     * 指定sticky元素的依附容器，sticky元素不会超出容器，在容器离开视口时会跟随
+     * 如果返回string则使用querySelector选取容器
+     * @en Specifies the attachment container of the sticky element. The sticky element will not exceed the container and will follow when the container leaves the viewport
+     * @en If a string is returned, use querySelector to select the container
+     */
+    getContainer?: () => HTMLElement | string;
+    /**
+     * 指定滚动容器；如果返回string则使用querySelector选取容器
+     * @en Specifies the scrolling container. If this value is specified, the relative property is always regarded as false; if a string is input, use querySelector to select the container
+     * @default () => window
+     */
+    getScrollContainer?: () => HTMLElement | Window | string;
+}
+/**
+ * 粘性布局组件，元素相对于窗口或指定容器的吸顶效果。
+ * @en Sticky layout component, The sticky-to-top effect of the element relative to the window or specified container
+ * @type 布局
+ * @type_en Layout
+ * @name 粘性布局
+ * @name_en Sticky
+ */
+declare const Sticky: React.ForwardRefExoticComponent<StickyProps & React.RefAttributes<StickyRef>>;
+export default Sticky;