@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/notice-bar/style/index.less

@@ -0,0 +1,160 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-notice-bar {
+    .use-var(background, notice-bar-background);
+    .use-var(color, notice-bar-color);
+    .use-var(padding, notice-bar-wrapper-padding);
+    display: flex;
+    align-items: flex-start;
+    font-size: 0;
+
+    &.no-wrap &-content-inner {
+        white-space: nowrap;
+    }
+
+    &.ellipsis &-content-inner {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &.wrapable &-content-inner {
+        .use-var(line-height, notice-bar-line-height);
+        .use-var(padding, notice-bar-vertical-padding, "", 0);
+    }
+
+    &-left-part,
+    &-right-part,
+    &-close {
+        .use-var(padding, notice-bar-vertical-padding, "", 0);
+        .use-var(font-size, notice-bar-text-font-size);
+        .@{prefix}-icon {
+            float: left;
+        }
+
+        &::after {
+            content: "";
+            display: block;
+            clear: both;
+        }
+    }
+
+    &-left-part {
+        .use-var-with-rtl(padding-right, notice-bar-horizontal-padding);
+    }
+
+    &-right-part,
+    &-close {
+        .use-var-with-rtl(padding-left, notice-bar-horizontal-padding);
+    }
+
+    &-content {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+
+        &-inner {
+            display: inline-block;
+            .use-var(font-size, notice-bar-text-font-size);
+            .use-var(line-height, notice-bar-single-line-height);
+
+            &.animate {
+                animation: marquee linear both;
+                .style-with-rtl({
+                    animation-name: marquee-reverse;
+                });
+            }
+        }
+        .@{prefix}-carousel {
+            .use-var(height, notice-bar-single-line-height);
+            white-space: normal;
+            .@{prefix}-carousel-item {
+                .use-var(font-size, notice-bar-text-font-size);
+                .use-var(line-height, notice-bar-single-line-height);
+            }
+        }
+        .@{prefix}-carousel-indicator {
+            display: none;
+        }
+    }
+    .@{prefix}-icon {
+        .use-var(font-size, notice-bar-icon-font-size);
+        .use-var(line-height, notice-bar-line-height);
+        .use-var(height, notice-bar-line-height); // for svg
+    }
+
+    &-gradient {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        z-index: 1;
+        .use-var(width, notice-bar-gradient-width);
+        .use-var(background, notice-bar-gradient-background);
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: -2PX;
+            transform: rotate(180deg);
+        }
+    }
+
+    @keyframes marquee {
+        0% {
+            transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(-100%, 0, 0);
+        }
+    }
+
+    @keyframes marquee-reverse {
+
+        0% {
+            transform: translate3d(0, 0, 0);
+        }
+
+        100% {
+            transform: translate3d(100%, 0, 0);
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-notice-bar {
+    @{arco-dark-mode-selector} & {
+      .use-var(background, dark-notice-bar-background);
+      .use-var(color, dark-notice-bar-color);
+    }
+    &-gradient {
+      @{arco-dark-mode-selector} & {
+        .use-var(background, dark-notice-bar-gradient-background);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/notify/index.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { NotifyProps, NotifyRef } from './type';
+import { NotifyBaseProps } from './methods';
+export * from './type';
+export declare function methodsGenerator<P extends NotifyBaseProps>(Comp: React.FC<P>): {
+    /**
+     * 展示常规通知
+     * @desc {en} Show regular notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    info: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+    };
+    /**
+     * 展示成功通知
+     * @desc {en} Show success notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    success: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+    };
+    /**
+     * 展示错误的通知
+     * @desc {en} Show error notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    error: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+    };
+    /**
+     * 展示警告的通知
+     * @desc {en} Show warning notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    warn: (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+        close: () => void;
+    };
+};
+declare const _default: React.ForwardRefExoticComponent<NotifyProps & React.RefAttributes<NotifyRef>> & {
+    /**
+     * 展示常规通知
+     * @desc {en} Show regular notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    info: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">) => void;
+        close: () => void;
+    };
+    /**
+     * 展示成功通知
+     * @desc {en} Show success notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    success: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">) => void;
+        close: () => void;
+    };
+    /**
+     * 展示错误的通知
+     * @desc {en} Show error notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    error: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">) => void;
+        close: () => void;
+    };
+    /**
+     * 展示警告的通知
+     * @desc {en} Show warning notification
+     * @param {string | NotifyProps} config
+     * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+     */
+    warn: (originConfig: string | Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">, context?: import("../context-provider").GlobalContextParams | undefined) => {
+        update: (newConfig: Pick<import("../context-provider").WithGlobalContext<NotifyProps & React.RefAttributes<NotifyRef>>, "style" | "content" | "transitionDuration" | "ref" | "key" | "type" | "context" | "duration" | "className" | "getContainer" | "onClose">) => void;
+        close: () => void;
+    };
+};
+/**
+ * 主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
+ * @en The feedback information bar displayed after active operation can be called by method or by component.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 消息通知
+ * @name_en Notify
+ */
+export default _default;

package/esnext/notify/index.js

@@ -0,0 +1,123 @@
+import React, { useRef, forwardRef, useImperativeHandle, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { componentWrapper, nextTick } from '@arco-design/mobile-utils';
+import { ContextLayout, CompWithGlobalContext } from '../context-provider';
+import { getStyleWithVendor, useUpdateEffect } from '../_helpers';
+import { notify } from './methods';
+export * from './type';
+const Notify = forwardRef((props, ref) => {
+    const { className = '', style, visible = false, transitionDuration = 300, content, duration = 3000, onClose, type = 'info', close, getContainer, } = props;
+    const domRef = useRef(null);
+    const innerRef = useRef(null);
+    const closeTimerRef = useRef();
+    const onCloseTimeRef = useRef();
+    const [hasTrans, setHasTrans] = useState(!visible);
+    const [innerHeight, setInnerHeight] = useState(0);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        updateLayout,
+    }));
+    function startCloseTimer() {
+        if (duration) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = window.setTimeout(() => {
+                close?.();
+            }, duration);
+        }
+    }
+    function updateLayout() {
+        if (innerRef.current) {
+            const { height } = innerRef.current.getBoundingClientRect();
+            setInnerHeight(height);
+        }
+    }
+    useEffect(() => {
+        visible && updateLayout();
+        visible && startCloseTimer();
+        return () => {
+            visible && clearTimeout(closeTimerRef.current);
+        };
+    }, [visible, duration]);
+    useUpdateEffect(() => {
+        if (!visible) {
+            onCloseTimeRef.current = window.setTimeout(() => {
+                onClose && onClose();
+            }, transitionDuration);
+        }
+    }, [visible]);
+    useEffect(() => {
+        nextTick(() => {
+            setHasTrans(true);
+        });
+        return () => {
+            clearTimeout(onCloseTimeRef.current);
+        };
+    }, []);
+    function renderComponent(prefixClass) {
+        return content ? (React.createElement("div", { className: `${prefixClass}-content ${visible
+                ? `${prefixClass}-content-transition-Y0`
+                : `${prefixClass}-content-transition-Y100`}`, ref: innerRef, style: {
+                ...(hasTrans
+                    ? getStyleWithVendor({
+                        transitionDuration: `${transitionDuration}ms`,
+                    })
+                    : {}),
+            } }, content)) : null;
+    }
+    const render = prefixCls => {
+        return (React.createElement("div", { className: `${prefixCls}-notify ${prefixCls}-notify-${type} ${className}`, style: {
+                ...style,
+                ...(hasTrans
+                    ? getStyleWithVendor({
+                        transitionDuration: `${transitionDuration}ms`,
+                    })
+                    : {}),
+                height: visible ? innerHeight : 0,
+            }, ref: domRef }, renderComponent(`${prefixCls}-notify`)));
+    };
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => getContainer
+        ? ReactDOM.createPortal(render(prefixCls), getContainer())
+        : render(prefixCls)));
+});
+export function methodsGenerator(Comp) {
+    return {
+        /**
+         * 展示常规通知
+         * @desc {en} Show regular notification
+         * @param {string | NotifyProps} config
+         * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+         */
+        info: notify(Comp),
+        /**
+         * 展示成功通知
+         * @desc {en} Show success notification
+         * @param {string | NotifyProps} config
+         * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+         */
+        success: notify(Comp, 'success'),
+        /**
+         * 展示错误的通知
+         * @desc {en} Show error notification
+         * @param {string | NotifyProps} config
+         * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+         */
+        error: notify(Comp, 'error'),
+        /**
+         * 展示警告的通知
+         * @desc {en} Show warning notification
+         * @param {string | NotifyProps} config
+         * @returns {{ update: (config: NotifyProps) => void; close: () => void }}
+         */
+        warn: notify(Comp, 'warn'),
+    };
+}
+const NotifyWithGlobalContext = CompWithGlobalContext(Notify);
+/**
+ * 主动操作后显示的反馈信息横条，可采用方法调用或者组件调用的方式
+ * @en The feedback information bar displayed after active operation can be called by method or by component.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 消息通知
+ * @name_en Notify
+ */
+export default componentWrapper(Notify, methodsGenerator(NotifyWithGlobalContext));

package/esnext/notify/methods.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { GlobalContextParams } from '../context-provider';
+export interface NotifyBaseProps {
+    getContainer?: () => HTMLElement;
+    onClose?: (scene?: string) => void;
+    content?: React.ReactNode;
+    visible?: boolean;
+    close?: (e: any) => void;
+    type?: string;
+}
+export declare function notify<P extends NotifyBaseProps>(Component: React.FC<P>, type?: string): (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>, context?: GlobalContextParams | undefined) => {
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+    close: () => void;
+};

package/esnext/notify/methods.js

@@ -0,0 +1,63 @@
+import { nextTick } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
+export function notify(Component, type) {
+    return (originConfig, context) => {
+        const config = typeof originConfig === 'string'
+            ? {
+                content: originConfig,
+                type: 'info',
+            }
+            : originConfig;
+        if (type !== void 0) {
+            config.type = type;
+        }
+        const div = document.createElement('div');
+        const { getContainer } = config;
+        if (getContainer) {
+            getContainer().appendChild(div);
+        }
+        else {
+            document.body.appendChild(div);
+        }
+        const { render, unmount } = new ReactDOMRender(Component, div, context);
+        function destroy() {
+            const { onClose } = config;
+            onClose && onClose();
+            unmount();
+            if (div.parentNode) {
+                div.parentNode.removeChild(div);
+            }
+        }
+        let dynamicProps = {
+            ...config,
+            close,
+            onClose: destroy,
+            getContainer: () => div,
+            visible: false,
+        };
+        let leaving = false;
+        function update(newConfig) {
+            dynamicProps = {
+                ...dynamicProps,
+                ...newConfig,
+            };
+            render(dynamicProps);
+        }
+        function close() {
+            leaving = true;
+            dynamicProps.visible = false;
+            render(dynamicProps);
+        }
+        render(dynamicProps);
+        nextTick(() => {
+            if (leaving)
+                return;
+            dynamicProps.visible = true;
+            render(dynamicProps);
+        });
+        return {
+            update,
+            close,
+        };
+    };
+}