@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/collapse/style/index.less

@@ -0,0 +1,106 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-collapse-group {
+}
+
+.@{prefix}-collapse-item {
+    padding: 0;
+    margin: 0;
+    .@{prefix}-collapse {
+        &-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .use-var(background, collapse-header-background);
+            .use-var(height, collapse-header-height);
+            .use-var(margin-left, collapse-header-margin-left);
+            .use-var(padding, collapse-header-padding);
+            .use-var(color, collapse-header-color);
+            .use-var(line-height, collapse-header-line-height);
+            .use-var(font-size, collapse-header-font-size);
+            .onepx-border-var(bottom, line-color);
+        }
+        &-icon {
+            .use-var(color, collapse-header-icon-color);
+            display: inline-flex;
+            align-items: center;
+            svg,
+            i {
+                .use-var(font-size, collapse-header-font-size);
+                .use-var(width, collapse-header-font-size);
+            }
+            &-arrow {
+                transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+            }
+        }
+        &-content {
+            height: 0;
+            .use-var(line-height, collapse-content-line-height);
+            .use-var(font-size, collapse-content-font-size);
+            .use-var(color, collapse-content-color);
+            overflow: hidden;
+            transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+            &-container {
+                .use-var(padding, collapse-content-padding);
+            }
+        }
+    }
+    &.disabled {
+        .@{prefix}-collapse-header {
+            .use-var(color, collapse-disabled-header-color);
+        }
+    }
+}
+
+/***************************************************
+ *                                                 *
+ *               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}-collapse-item {
+    .@{prefix}-collapse {
+      &-header {
+        @{arco-dark-mode-selector} & {
+          .use-var(background, dark-collapse-header-background);
+          .use-var(color, dark-collapse-header-color);
+          .onepx-border-var(bottom, dark-line-color);
+        }
+      }
+      &-icon {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-collapse-header-icon-color);
+        }
+      }
+      &-content {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-collapse-content-color);
+        }
+      }
+    }
+    &.disabled {
+      .@{prefix}-collapse-header {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-collapse-disabled-header-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/collapse/type.d.ts

@@ -0,0 +1,139 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface CollapseCommonProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 可选受控，展开折叠面板时触发
+     * @en Optional controlled, triggered when the collapse panel is expanded
+     * */
+    onCollapse?: (value: string) => void;
+    /**
+     * 动画时间
+     * @en Animation duration
+     * */
+    animationTimeout?: number;
+    /**
+     * 动画函数
+     * @en Animation function
+     */
+    animationFunction?: string;
+}
+export interface CollapseProps extends CollapseCommonProps {
+    /**
+     * 标题
+     * @en Title
+     * */
+    header?: ReactNode;
+    /**
+     * 折叠面板的唯一标识
+     * @en Unique ID of the accordion panel
+     * */
+    value: string;
+    /**
+     * 折叠面板的展开图标
+     * @en Expand icon for collapse panels
+     * */
+    icon?: ReactNode;
+    /**
+     * 是否隐藏图标
+     * @en whether to hide the icon
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * 是否不可展开
+     * @en Whether it is not expandable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 面板内容
+     * @en Panel content
+     * */
+    content: ReactNode;
+    /**
+     * 是否展开
+     * @en whether to expand
+     * */
+    active?: boolean;
+    /**
+     * 默认展开情况
+     * @en Default expanded status
+     * @default false
+     */
+    defaultActive?: boolean;
+}
+export interface CollapseRef {
+    /**
+     * 组件外层dom元素
+     * @en The outer DOM of the component
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 折叠面板头部元素
+     * @en Collapse panel header DOM
+     */
+    head: HTMLDivElement | null;
+    /**
+     * 手动更新组件布局(高度计算)
+     * @en Manually update component layout (height calculation)
+     * */
+    updateLayout: () => void;
+}
+export interface GroupContextParams {
+    isGroup: boolean;
+    value?: string[];
+    disabled?: boolean;
+    onCollapse: (value: string) => void;
+}
+export declare type CollapseItemContent = Omit<CollapseProps, 'active' | 'defaultActive'>;
+export declare type CollapseGroupProps<P extends CollapseItemContent = CollapseItemContent> = CollapseCommonProps & {
+    /**
+     * 是否使用手风琴模式
+     * @en Whether to use accordion mode
+     * @default false
+     */
+    useAccordion?: boolean;
+    /**
+     * 可选受控，可传展开的item数组，或者每个item对应的状态
+     * @en Optional controlled, expandable item array, or the state corresponding to each item
+     * */
+    activeItems?: string[];
+    /**
+     * 默认状态
+     * @en Default state
+     * */
+    defaultActiveItems?: string[];
+    /**
+     * 一键禁用
+     * @en Disable all
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 折叠面板数组
+     * @en array of collapse panels
+     * */
+    items?: P[];
+    /**
+     * 子元素，优先级高于items
+     * @en Children elements, which have higher priority than items
+     * */
+    children?: ReactNode;
+    /**
+     * 区分不同 group，有group 嵌套时建议传入
+     * @en Distinguish different groups, it is recommended to pass in when groups are nested
+     * */
+    groupKey?: string;
+};
+export interface CollapseGroupRef {
+    dom: HTMLDivElement | null;
+}

package/esnext/collapse/type.js

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

package/esnext/collapse/utils.d.ts

@@ -0,0 +1,8 @@
+import React, { Context } from 'react';
+import { GroupContextParams } from './type';
+export declare const defaultContextKey = "__COLLAPSE_CONTEXT__";
+export declare const allContexts: Record<string, Context<GroupContextParams>>;
+export declare function getCollapseContext(key: string): React.Context<GroupContextParams>;
+export declare const CollapseKeyContext: React.Context<{
+    key: string;
+}>;

package/esnext/collapse/utils.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export const defaultContextKey = '__COLLAPSE_CONTEXT__';
+export const allContexts = {};
+export function getCollapseContext(key) {
+    if (!allContexts[key]) {
+        allContexts[key] = React.createContext({
+            isGroup: false,
+            value: [],
+            onCollapse: () => { },
+        });
+    }
+    return allContexts[key];
+}
+export const CollapseKeyContext = React.createContext({
+    key: defaultContextKey,
+});

package/esnext/context-provider/index.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ILocale } from '@arco-design/mobile-utils';
+export interface GlobalContextParams {
+    /**
+     * 组件类名前缀
+     * @en Component classname prefix
+     * @default "arco"
+     */
+    prefixCls?: string;
+    /**
+     * 手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用
+     * @en Manually control the current system, and the incoming value will be used directly after being passed in. It is applicable when the initial value of the system needs to be specified in the ssr scenario.
+     * @default ""
+     */
+    system?: 'pc' | 'android' | 'ios' | '';
+    /**
+     * 是否监听系统原生的暗黑模式变化(prefers-color-scheme: dark)以判断是否切为暗黑模式
+     * @en Whether to monitor the system's native dark mode changes (prefers-color-scheme: dark) to determine whether to switch to dark mode
+     * @default false
+     */
+    useDarkMode?: boolean;
+    /**
+     * 是否处于暗黑模式，指定后以指定的值为准
+     * @en Whether it is in dark mode, the value shall prevail after being specified
+     * @default false
+     */
+    isDarkMode?: boolean;
+    /**
+     * 当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名
+     * @en When in dark mode, the class name mounted on the body, if it is empty, the class name will not be mounted
+     * @default "arco-theme-dark"
+     */
+    darkModeSelector?: string;
+    /**
+     * 主题变量，传入后将在线替换css变量，需设置less变量 @use-css-vars: 1
+     * @en Theme variable. The css variable will be replaced online after input. The less variable needs to be set @use-css-vars: 1
+     */
+    theme?: Record<string, string>;
+    /**
+     * 国际化语言包配置
+     * @en Internationalized language configuration
+     */
+    locale?: ILocale;
+    /**
+     * 是否使用Rtl模式
+     * @en Whether to use rtl
+     * @default false
+     */
+    useRtl?: boolean;
+    /**
+     * 当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效
+     * @en Triggered when the system's native dark mode changes, valid when useDarkMode=true
+     */
+    onDarkModeChange?: (isDark: boolean) => void;
+}
+export declare const defaultContext: GlobalContextParams;
+export declare const GlobalContext: React.Context<GlobalContextParams>;
+export interface ContextProviderProps extends GlobalContextParams {
+    children: React.ReactNode;
+}
+export declare type WithGlobalContext<T> = T & {
+    context?: GlobalContextParams;
+};
+/**
+ * 全局数据控制组件，用于替换全局数据。
+ * @en Global data control component, used to replace global data.
+ * @type 其他
+ * @type_en Others
+ * @name 全局配置
+ * @name_en ContextProvider
+ */
+export default function ContextProvider(props: ContextProviderProps): JSX.Element;
+export declare const ContextLayout: React.Consumer<GlobalContextParams>;
+export declare function CompWithGlobalContext<P extends JSX.IntrinsicAttributes>(Component: React.FunctionComponent<P>): (props: WithGlobalContext<P>) => JSX.Element;

package/esnext/context-provider/index.js

@@ -0,0 +1,99 @@
+import React, { createContext, useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { addCssRules, removeCssStyleDom, defaultLocale } from '@arco-design/mobile-utils';
+const DEFAULT_DARK_MODE_SELECTOR = 'arco-theme-dark';
+export const defaultContext = {
+    prefixCls: 'arco',
+    system: '',
+    useDarkMode: false,
+    darkModeSelector: DEFAULT_DARK_MODE_SELECTOR,
+    locale: defaultLocale,
+    useRtl: false,
+};
+export const GlobalContext = createContext(defaultContext);
+/**
+ * 全局数据控制组件，用于替换全局数据。
+ * @en Global data control component, used to replace global data.
+ * @type 其他
+ * @type_en Others
+ * @name 全局配置
+ * @name_en ContextProvider
+ */
+export default function ContextProvider(props) {
+    const { children, useDarkMode, isDarkMode: userSetIsDarkMode, darkModeSelector = DEFAULT_DARK_MODE_SELECTOR, theme, locale = defaultLocale, onDarkModeChange, ...restProps } = props;
+    const [isDarkModeState, setIsDarkModeState] = useState(() => {
+        if (typeof window !== 'undefined' && useDarkMode) {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+        return false;
+    });
+    const mountedRef = useRef(false);
+    const setDarkModeState = (isDark, needChange = true) => {
+        setIsDarkModeState(isDark);
+        needChange && onDarkModeChange && onDarkModeChange(isDark);
+    };
+    const isDarkMode = useMemo(() => {
+        // 如果未开启暗黑模式则不对body做操作
+        // @en If dark mode is not turned on, no operation will be performed on the body
+        if (userSetIsDarkMode === void 0 && !useDarkMode) {
+            return false;
+        }
+        const value = Boolean(userSetIsDarkMode !== void 0 ? userSetIsDarkMode : isDarkModeState);
+        const needUpdateBody = darkModeSelector && typeof document !== 'undefined';
+        if (value) {
+            needUpdateBody && document.body.classList.add(darkModeSelector);
+        }
+        else {
+            needUpdateBody && document.body.classList.remove(darkModeSelector);
+        }
+        return value;
+    }, [userSetIsDarkMode, isDarkModeState, darkModeSelector, useDarkMode]);
+    const changeDarkMode = useCallback((res) => setDarkModeState(res.matches), []);
+    useEffect(() => {
+        const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+        if (useDarkMode) {
+            const dark = matchMedia.matches;
+            setDarkModeState(dark, mountedRef.current);
+            if (typeof matchMedia.addEventListener === 'function') {
+                matchMedia.addEventListener('change', changeDarkMode);
+            }
+            else if (typeof matchMedia.addListener === 'function') {
+                matchMedia.addListener(changeDarkMode);
+            }
+        }
+        mountedRef.current = true;
+        return () => {
+            if (useDarkMode) {
+                if (typeof matchMedia.removeEventListener === 'function') {
+                    matchMedia.removeEventListener('change', changeDarkMode);
+                }
+                else if (typeof matchMedia.removeListener === 'function') {
+                    matchMedia.removeListener(changeDarkMode);
+                }
+            }
+        };
+    }, [useDarkMode]);
+    useEffect(() => {
+        if (!theme) {
+            return;
+        }
+        addCssRules('arcoCustomTheme', theme);
+        return () => {
+            removeCssStyleDom('arcoCustomTheme');
+        };
+    }, [theme]);
+    return (React.createElement(GlobalContext.Provider, { value: {
+            ...defaultContext,
+            ...restProps,
+            isDarkMode,
+            useDarkMode,
+            locale: locale || defaultLocale,
+        } }, children));
+}
+export const ContextLayout = GlobalContext.Consumer;
+export function CompWithGlobalContext(Component) {
+    return function (props) {
+        const { context: propsContext, ...others } = props;
+        return (React.createElement(ContextLayout, null, context => (React.createElement(ContextProvider, Object.assign({}, { ...context, ...propsContext }),
+            React.createElement(Component, Object.assign({}, others))))));
+    };
+}

package/esnext/context-provider/style/css/index.d.ts

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

package/esnext/context-provider/style/css/index.js

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

package/esnext/context-provider/style/index.d.ts

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

package/esnext/context-provider/style/index.js

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

package/esnext/context-provider/style/index.less

@@ -0,0 +1 @@
+// 这里啥也没有，但是为了兼容 babel-plugin-import的统一引用，还是需要创建下文件

package/esnext/count-down/hooks.d.ts

@@ -0,0 +1,10 @@
+import { CountDownProps, TimeDataType } from './type';
+export declare type UseCountDownOptions = {
+    time: number;
+} & Pick<CountDownProps, 'millisecond' | 'autoStart' | 'onChange' | 'onFinish'>;
+export declare const useCountDown: (options: UseCountDownOptions) => {
+    start: (reStart?: boolean) => void;
+    pause: () => void;
+    reset: () => void;
+    current: TimeDataType;
+};

package/esnext/count-down/hooks.js

@@ -0,0 +1,107 @@
+import { useState, useEffect, useRef } from 'react';
+import { useRefState } from '../_helpers';
+import { startTask, stopTask } from './singleton';
+import { parseTime } from './util';
+export const useCountDown = (options) => {
+    const taskIdRef = useRef(0);
+    const endTimeRef = useRef();
+    const countingRef = useRef();
+    const [remain, remainRef, setRemain] = useRefState(options.time);
+    const [current, setCurrent] = useState(parseTime(options.time));
+    const taskType = options.millisecond ? 'micro' : 'macro';
+    // 暂停
+    // @en Pause
+    const pause = () => {
+        countingRef.current = false;
+        stopTask(taskType, taskIdRef.current);
+    };
+    // 计算当前剩余时间，以毫秒为单位
+    // @en Calculate the current remaining time in milliseconds
+    const getCurrentRemain = () => {
+        const leftTime = Math.max(endTimeRef.current - Date.now(), 0);
+        if (options.millisecond) {
+            return leftTime;
+        }
+        return Math.round(leftTime / 1000) * 1000;
+    };
+    const setRemainCallback = (value) => {
+        setRemain(value);
+        const time = parseTime(value);
+        if (options.onChange && value !== options.time) {
+            options.onChange(time, value);
+        }
+        if (value === 0) {
+            setCurrent(time);
+            pause();
+            options.onFinish?.();
+        }
+    };
+    // 开启任务
+    // @en start tasks
+    const tick = () => {
+        taskIdRef.current = startTask(taskType, () => {
+            if (countingRef.current) {
+                setRemainCallback(getCurrentRemain());
+                return remainRef.current > 0;
+            }
+            return false;
+        });
+    };
+    // 开始
+    // @en Start
+    const start = (reStart = false) => {
+        if (!countingRef.current) {
+            if (reStart) {
+                endTimeRef.current = Date.now() + options.time;
+            }
+            else {
+                endTimeRef.current = Date.now() + remainRef.current;
+            }
+            countingRef.current = true;
+            tick();
+        }
+    };
+    // 重置
+    // @en Reset
+    const reset = () => {
+        const totalTime = options.time;
+        endTimeRef.current = Date.now() + totalTime;
+        pause();
+        setRemainCallback(totalTime);
+        if (options.autoStart) {
+            start(true);
+        }
+    };
+    useEffect(() => {
+        // ummounted时如果正在运行倒计时则暂停
+        // @en Pause if the countdown is running when ummounted
+        return () => {
+            if (countingRef.current) {
+                pause();
+            }
+        };
+    }, []);
+    // 设置自动开始倒计时时自动启动
+    // @en Set to start automatically when the countdown starts automatically
+    useEffect(() => {
+        if (options.autoStart) {
+            start();
+        }
+    }, [options.autoStart]);
+    // 倒计时设置变化时重新计时
+    // @en Re-time when countdown settings change
+    useEffect(() => {
+        reset();
+    }, [options.time]);
+    // remain变化时同步current 即把毫秒转化为TimeDataType类型
+    // @en Synchronize current when remain changes, that is, convert milliseconds to TimeDataType
+    useEffect(() => {
+        setCurrent(parseTime(remain));
+    }, [remain]);
+    return {
+        start,
+        pause,
+        reset,
+        current,
+    };
+};

package/esnext/count-down/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CountDownProps, CountDownRef } from './type';
+export * from './type';
+/**
+ * 倒计时组件
+ * @en Countdown Component
+ * @name 倒计时
+ * @name_en CountDown
+ * @type 信息展示
+ * @type_en Data Display
+ */
+declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<CountDownRef>>;
+export default CountDown;

package/esnext/count-down/index.js

@@ -0,0 +1,37 @@
+import React, { useRef, forwardRef, useImperativeHandle, useMemo } from 'react';
+import { unParseTime, parseFormat } from './util';
+import { useCountDown } from './hooks';
+import { ContextLayout } from '../context-provider';
+export * from './type';
+/**
+ * 倒计时组件
+ * @en Countdown Component
+ * @name 倒计时
+ * @name_en CountDown
+ * @type 信息展示
+ * @type_en Data Display
+ */
+const CountDown = forwardRef((props, ref) => {
+    const { className = '', style = {}, time = 0, format = 'HH:mm:ss', autoStart = true, millisecond = false, onFinish, onChange, renderChild, } = props;
+    const domRef = useRef(null);
+    // 传入倒计时等变量得到开始暂停启动三个方法以及目前所剩时间current(TimeDataType格式)
+    // @en get start, pause, reset methods and the current remaining time —— current (TimeDataType format) by inputing variables such as countdown
+    const { start, pause, reset, current } = useCountDown({
+        time: typeof time === 'number' ? time : unParseTime(time),
+        millisecond,
+        onChange,
+        onFinish,
+        autoStart,
+    });
+    // 导出dom以及start,pause,reset三个方法
+    // @en Export dom and three methods of start, pause and reset
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+        start,
+        pause,
+        reset,
+    }));
+    const currentStr = useMemo(() => parseFormat(format, current), [format, current]);
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: `${prefixCls}-count-down ${className}`, style: style, ref: domRef }, renderChild ? renderChild(current) : currentStr))));
+});
+export default CountDown;

package/esnext/count-down/singleton.d.ts

@@ -0,0 +1,15 @@
+export interface TaskQueueItem {
+    id: number;
+    callback: () => boolean;
+}
+export declare type TaskQueueType = 'micro' | 'macro';
+export declare const taskCount: {
+    micro: number;
+    macro: number;
+};
+export declare const taskQueue: Record<TaskQueueType, TaskQueueItem[]>;
+export declare function startTask(type: TaskQueueType, callback: TaskQueueItem['callback']): number;
+export declare function execMicroTask(): void;
+export declare function execMacroTask(): void;
+export declare function execTask(type: TaskQueueType): void;
+export declare function stopTask(type: TaskQueueType, id: number): void;