@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/toast/style/index.less

@@ -0,0 +1,130 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-toast {
+
+    &-wrapper {
+        .full-screen();
+        z-index: @full-screen-z-index + 1;
+        display: flex;
+        justify-content: center;
+        .use-var(padding, toast-safe-padding);
+
+        &.no-event {
+            pointer-events: none;
+        }
+
+        &.from-center {
+            align-items: center;
+        }
+
+        &.from-top {
+            align-items: flex-start;
+            .use-var(padding-top, toast-from-top-position);
+        }
+
+        &.from-bottom {
+            align-items: flex-end;
+            .use-var(padding-bottom, toast-from-bottom-position);
+        }
+    }
+
+    &-inner {
+        .use-var(background, toast-background);
+        .use-var(color, toast-text-color);
+        .use-var(font-size, toast-font-size);
+        .use-var(line-height, toast-line-height);
+        .use-var(border-radius, toast-border-radius);
+        flex-direction: column;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: initial;
+
+        &.horizontal {
+            flex-direction: row;
+            .use-var(padding, toast-horizontal-padding);
+            .@{prefix}-icon {
+                flex: 0 0 auto;
+                .use-var(font-size, toast-horizontal-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-left, toast-horizontal-icon-content-gutter);
+            }
+        }
+
+        &.vertical {
+            .use-var(padding, toast-vertical-padding);
+            .@{prefix}-icon {
+                .use-var(font-size, toast-vertical-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-top, toast-vertical-icon-content-gutter);
+            }
+        }
+        .@{prefix}-loading {
+            .set-loading-color-var(mask-content-color);
+
+            &.arc .arc-bg {
+                .use-var(stroke, toast-loading-arc-background-color);
+            }
+        }
+    }
+
+    &-loading-wrapper {
+        display: flex;
+        position: relative;
+    }
+
+    &-loading-inner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        .use-var(font-size, toast-loading-inner-font-size);
+    }
+
+    &-content {
+        width: 100%;
+        text-align: center;
+        white-space: pre-line;
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-toast {
+    &-inner {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-toast-text-color);
+      }
+      .@{prefix}-loading {
+        @{arco-dark-mode-selector} & {
+          .set-loading-color-var(dark-mask-content-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/transition/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+export declare type TransitionProps = Omit<CSSTransitionProps, 'timeout'> & {
+    /**
+     * 待执行动画内容
+     * @en Animation content to be executed
+     */
+    children?: React.ReactNode;
+    /**
+     * 待执行动画css类名
+     * @en Css classname of the animation to be executed
+     */
+    type: string;
+    /**
+     * 内容是否可见
+     * @en Whether the content is visible
+     */
+    in: boolean;
+    /**
+     * 执行动画时间
+     * @en Execute animation time
+     */
+    timeout: number | {
+        appear?: number;
+        enter?: number;
+        exit?: number;
+    };
+    /**
+     * 是否在打开时再加载内容
+     * @en Whether to reload content when it is opened
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 是否在退出时卸载内容
+     * @en Whether to unmount content on exit
+     * @default true
+     */
+    unmountOnExit?: boolean;
+};
+/**
+ * react-transition-group/CSSTransition 的简单封装。
+ * @en Simple wrapper for react-transition-group/CSSTransition.
+ * @type 其他
+ * @type_en Others
+ * @name 动画过渡
+ * @name_en Transition
+ */
+export default function Transition(props: TransitionProps): JSX.Element;

package/esnext/transition/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { ContextLayout } from '../context-provider';
+/**
+ * react-transition-group/CSSTransition 的简单封装。
+ * @en Simple wrapper for react-transition-group/CSSTransition.
+ * @type 其他
+ * @type_en Others
+ * @name 动画过渡
+ * @name_en Transition
+ */
+export default function Transition(props) {
+    const { children = React.createElement("div", null), type, in: transIn, timeout = 300, mountOnEnter = true, unmountOnExit = true, ...restProps } = props;
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(CSSTransition, Object.assign({ in: transIn, timeout: timeout, classNames: `${prefixCls}-${type}`, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit }, restProps), children))));
+}