@arco-design/mobile-react 2.31.6 → 2.32.0

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

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

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

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

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

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

package/esnext/dialog/style/index.js

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

package/esnext/dialog/style/index.less

@@ -0,0 +1,376 @@
+@import "../../../style/mixin.less";
+
+@keyframes fade-scale-on {
+
+    0% {
+        opacity: 0; transform: scale(.5); }
+
+    100% {
+        opacity: 1; transform: scale(1); }
+}
+
+@keyframes fade-scale-off {
+
+    0% {
+        opacity: 1; transform: scale(1); }
+
+    100% {
+        opacity: 0; transform: scale(.5); }
+}
+
+.@{prefix}-fade-scale-enter-active {
+    animation: fade-scale-on .45s cubic-bezier(.2, 1.23, .25, 1) forwards;
+}
+
+.@{prefix}-fade-scale-exit-active {
+    animation: fade-scale-off .15s cubic-bezier(.48, .04, .52, .96) forwards;
+}
+
+.@{prefix}-dialog {
+
+    &-mask,
+    &-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    &-mask {
+        z-index: @full-screen-z-index;
+        .use-var(background, dialog-mask-background);
+    }
+
+    &-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: @full-screen-z-index + 1;
+        pointer-events: none;
+    }
+
+    &-content {
+        position: relative;
+        .use-var(width, dialog-content-width);
+        pointer-events: visible;
+
+        &.android {
+            .use-var(width, dialog-content-android-width);
+        }
+    }
+
+    &-container.pre-mount &-content,
+    &-container[class*="-exit-done"] &-content {
+        pointer-events: none;
+    }
+
+    &-part {
+        .use-var(background, dialog-content-background);
+
+        &.android {
+
+            &:first-of-type {
+                .use-var(border-top-left-radius, dialog-content-android-border-radius);
+                .use-var(border-top-right-radius, dialog-content-android-border-radius);
+            }
+
+            &:last-of-type {
+                .use-var(border-bottom-left-radius, dialog-content-android-border-radius);
+                .use-var(border-bottom-right-radius, dialog-content-android-border-radius);
+            }
+        }
+
+        &.ios {
+
+            &:first-of-type {
+                .use-var(border-top-left-radius, dialog-content-border-radius);
+                .use-var(border-top-right-radius, dialog-content-border-radius);
+            }
+
+            &:last-of-type {
+                .use-var(border-bottom-left-radius, dialog-content-border-radius);
+                .use-var(border-bottom-right-radius, dialog-content-border-radius);
+            }
+        }
+    }
+
+    &-header {
+        position: relative;
+
+        &.ios {
+            text-align: center;
+            .use-var(padding-top, dialog-ios-vertical-padding);
+            .use-var(padding-left, dialog-ios-horizontal-padding);
+            .use-var(padding-right, dialog-ios-horizontal-padding);
+            .use-var(font-size, dialog-header-ios-font-size);
+            .use-var(line-height, dialog-header-ios-line-height);
+            .text-medium();
+
+            &.only-title {
+                .use-var(padding-bottom, dialog-ios-vertical-padding);
+            }
+        }
+
+        &.android {
+            .use-var(color, dialog-header-android-color);
+        }
+    }
+
+    &-body {
+
+        &.ios {
+            .use-var(padding-top, dialog-ios-header-body-gutter);
+            .use-var(padding-left, dialog-ios-horizontal-padding);
+            .use-var(padding-right, dialog-ios-horizontal-padding);
+            .use-var(padding-bottom, dialog-ios-vertical-padding);
+            .use-var(color, dialog-body-ios-color);
+            .use-var(font-size, dialog-body-ios-font-size);
+            .use-var(line-height, dialog-body-ios-line-height);
+
+            &.sub-title {
+                .use-var(padding-top, dialog-ios-vertical-padding);
+            }
+        }
+
+        &.android {
+            .use-var(padding-top, dialog-android-header-body-gutter);
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(color, dialog-body-android-color);
+            .use-var(font-size, dialog-body-android-font-size);
+            .use-var(line-height, dialog-body-android-line-height);
+        }
+    }
+
+    &-header,
+    &-body {
+
+        &.left {
+            .set-value-with-rtl(text-align, left);
+        }
+
+        &.center {
+            text-align: center;
+        }
+
+        &.right {
+            .set-value-with-rtl(text-align, right);
+        }
+    }
+
+    &-header,
+    &-body.sub-title {
+
+        &.android {
+            .use-var(padding-top, dialog-android-vertical-padding);
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(font-size, dialog-header-android-font-size);
+            .use-var(line-height, dialog-header-android-line-height);
+        }
+
+        &.ios {
+            .use-var(color, dialog-header-ios-color);
+        }
+    }
+
+    &-footer {
+        display: flex;
+        align-items: center;
+
+        &.android {
+            .use-var(padding-left, dialog-android-horizontal-padding);
+            .use-var(padding-right, dialog-android-horizontal-padding);
+            .use-var(padding-top, dialog-android-body-footer-gutter);
+            .use-var(padding-bottom, dialog-android-vertical-padding);
+            justify-content: flex-end;
+            .set-value-with-rtl(text-align, right);
+
+            .dialog-footer-button {
+                .use-var(color, dialog-footer-android-color);
+                .use-var(font-size, dialog-footer-android-font-size);
+                .use-var(line-height, dialog-footer-android-line-height);
+
+                &:not(:last-child) {
+                    .use-var-with-rtl(margin-right, dialog-footer-android-button-gutter);
+                }
+            }
+        }
+
+        &.ios {
+            overflow: hidden;
+
+            .dialog-footer-button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .use-var(height, dialog-footer-ios-height);
+                .use-var(font-size, dialog-footer-ios-font-size);
+                .use-var(color, dialog-footer-ios-color);
+            }
+
+            &:not(.collapsed):not(.type-button) {
+                .onepx-border-var(top, line-color);
+
+                .dialog-footer-button {
+                    flex: 1;
+
+                    &:not(:last-child) {
+                        .onepx-border-var(right, line-color);
+
+                        [dir='rtl'] & {
+                            .onepx-border-var(left, line-color);
+                            &::after {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &.collapsed {
+                flex-direction: column;
+
+                .dialog-footer-button {
+                    width: 100%;
+                    .onepx-border-var(top, line-color);
+                }
+            }
+
+            &.type-button {
+                flex-direction: column;
+                .use-var(padding-left, dialog-ios-horizontal-padding);
+                .use-var(padding-right, dialog-ios-horizontal-padding);
+                .use-var(padding-bottom, dialog-ios-vertical-padding);
+
+                .dialog-footer-button {
+                    width: 100%;
+                    .use-var(border-radius, dialog-button-footer-border-radius);
+                    .use-var(height, dialog-button-footer-height);
+
+                    &:first-child {
+                        .use-var(color, dialog-button-footer-primary-color);
+                        .use-var(background, dialog-button-footer-primary-background);
+                    }
+
+                    &:not(:first-child) {
+                        .use-var(color, dialog-button-footer-color);
+                        .use-var(margin-top, dialog-button-footer-gutter);
+                    }
+
+                    &:last-child {
+                        .rem(margin-bottom, -7);
+                    }
+                }
+            }
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-dialog {
+    &-part {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-dialog-content-background);
+      }
+    }
+    &-header {
+      &.android {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-dialog-header-android-color);
+        }
+      }
+    }
+    &-body {
+      &.ios {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-dialog-body-ios-color);
+        }
+      }
+      &.android {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-dialog-body-android-color);
+        }
+      }
+    }
+    &-header,
+    &-body.sub-title {
+      &.ios {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-dialog-header-ios-color);
+        }
+      }
+    }
+    &-footer {
+      &.ios {
+        .dialog-footer-button {
+          @{arco-dark-mode-selector} & {
+            .use-var(color, dark-dialog-footer-ios-color);
+          }
+        }
+        &:not(.collapsed):not(.type-button) {
+          @{arco-dark-mode-selector} & {
+            .onepx-border-var(top, dark-line-color);
+          }
+          .dialog-footer-button {
+            &:not(:last-child) {
+              @{arco-dark-mode-selector} & {
+                .onepx-border-var(right, dark-line-color);
+              }
+              [dir='rtl'] & {
+                @{arco-dark-mode-selector} & {
+                  .onepx-border-var(left, dark-line-color);
+                }
+              }
+            }
+          }
+        }
+        &.collapsed {
+          .dialog-footer-button {
+            @{arco-dark-mode-selector} & {
+              .onepx-border-var(top, dark-line-color);
+            }
+          }
+        }
+        &.type-button {
+          .dialog-footer-button {
+            &:first-child {
+              @{arco-dark-mode-selector} & {
+                .use-var(color, dark-dialog-button-footer-primary-color);
+                .use-var(background, dark-dialog-button-footer-primary-background);
+              }
+            }
+            &:not(:first-child) {
+              @{arco-dark-mode-selector} & {
+                .use-var(color, dark-dialog-button-footer-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/divider/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { BaseProps } from '../_helpers';
+export interface DividerProps extends BaseProps {
+    /**
+     * 是否使用 0.5px 线
+     * @en Whether to use hairline
+     * @default true
+     */
+    hairline?: boolean;
+    /**
+     * 文字
+     * @en Divider text
+     */
+    content?: React.ReactNode;
+    /**
+     * 文字位置
+     * @en The position of text inside divider
+     * @default 'center'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * 分割线宽度（单边），仅在`align`为`center`时生效
+     * @en The width of divider, only take effect when `align` is `center`.
+     */
+    width?: string | number;
+    /**
+     * 子元素，同 content，优先级低于 content
+     * @en Children element, same as `content`, with the priority lower than `content`
+     * @default null
+     */
+    children?: React.ReactNode;
+}
+export interface DividerRef {
+    /**
+     * 最外层 DOM 元素
+     * @en The outer DOM element of the component
+     */
+    dom: HTMLDivElement | null;
+}
+/**
+ * 划分内容的装饰线
+ * @en A partitioning line element
+ * @type 布局
+ * @type_en Layout
+ * @name 分割线
+ * @name_en Divider
+ */
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<DividerRef>>;
+export default Divider;

package/esnext/divider/index.js

@@ -0,0 +1,32 @@
+import React, { useRef, forwardRef, useImperativeHandle, useContext } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import { getStyleWithVendor } from '../_helpers';
+/**
+ * 划分内容的装饰线
+ * @en A partitioning line element
+ * @type 布局
+ * @type_en Layout
+ * @name 分割线
+ * @name_en Divider
+ */
+const Divider = forwardRef((props, ref) => {
+    const { className = '', style, hairline = true, align = 'center', width } = props;
+    const domRef = useRef(null);
+    const { prefixCls } = useContext(GlobalContext);
+    const prefix = `${prefixCls}-divider`;
+    const children = props.content || props.children;
+    const hasCustomWidth = children && width !== undefined && align === 'center';
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    return (React.createElement(ContextLayout, null, () => (React.createElement("div", { className: cls(prefix, className, {
+            [`${prefix}--hairline`]: hairline,
+            [`${prefix}--with-text ${prefix}--text-${align}`]: children,
+            [`${prefix}--with-width`]: hasCustomWidth,
+        }), style: {
+            ...style,
+            ...(hasCustomWidth ? getStyleWithVendor({ flexBasis: width }) : {}),
+        }, ref: domRef }, children))));
+});
+export default Divider;