@arco-design/mobile-react 2.31.6 → 2.33.0

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

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

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

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

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

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

package/esnext/cell/style/index.js

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

package/esnext/cell/style/index.less

@@ -0,0 +1,214 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-cell {
+    .use-var(color, cell-text-color);
+    .use-var(font-size, cell-font-size);
+    .use-var(margin-left, cell-horizontal-padding);
+    .use-var(padding-right, cell-horizontal-padding);
+
+    &:not(:first-of-type).bordered {
+        .onepx-border-var(top, line-color);
+    }
+
+    &.without-group {
+        .use-var(background-color, cell-background-color);
+        .use-var(padding-left, cell-horizontal-padding);
+        margin-left: 0;
+
+        &.bordered {
+            .onepx-border-var(top, line-color);
+            .onepx-border-var(bottom, line-color);
+        }
+    }
+
+    &-inner {
+        display: flex;
+        align-items: center;
+        .use-var(height, cell-item-height);
+
+        &.has-desc {
+            .use-var(height, cell-item-has-desc-height);
+        }
+    }
+
+    .cell-label {
+        .use-var(color, cell-label-color);
+        .use-var-with-rtl(margin-right, cell-label-gutter);
+    }
+
+    .cell-desc {
+        .use-var(color, cell-desc-color);
+        .use-var(font-size, cell-desc-font-size);
+        .use-var(margin-top, cell-desc-margin-top);
+    }
+
+    .cell-content {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        &.has-label {
+            justify-content: flex-end;
+        }
+
+        .cell-text {
+            width: 100%;
+            .set-value-with-rtl(text-align, right);
+            .use-var(font-size, cell-content-font-size);
+            .text-overflow(2);
+        }
+    }
+
+    .cell-label-icon {
+        .use-var-with-rtl(margin-right, cell-label-icon-gutter);
+        font-size: 0;
+        .@{prefix}-icon {
+            line-height: initial;
+            .use-var(font-size, cell-label-icon-font-size);
+            .use-var(color, cell-label-icon-color);
+        }
+    }
+
+    .cell-arrow-icon {
+        .style-with-rtl({
+            transform: scale(-1);
+        });
+        .use-var-with-rtl(margin-left, cell-arrow-gutter);
+        font-size: 0;
+        .@{prefix}-icon {
+            .use-var(font-size, cell-arrow-font-size);
+            .use-var(color, cell-arrow-color);
+        }
+
+        .arrow-icon-svg {
+            .rem(width, 8);
+
+            path {
+                .use-var(fill, cell-arrow-color);
+            }
+        }
+    }
+
+    .@{prefix}-input-wrap {
+        .set-prop-with-rtl(padding-left, 0, {
+            .use-var(padding-left, input-horizontal-padding);
+        });
+    }
+}
+
+.@{prefix}-cell-group {
+
+    .cell-group-header,
+    .cell-group-footer {
+        .use-var(color, cell-text-color);
+        .use-var(font-size, cell-extra-font-size);
+        .use-var(line-height, cell-extra-line-height);
+        .use-var(padding, cell-extra-padding);
+    }
+
+    .cell-group-body {
+        .use-var(background-color, cell-background-color);
+
+        &.bordered {
+            .onepx-border-var(top, line-color);
+            .onepx-border-var(bottom, line-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}-cell {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-cell-text-color);
+    }
+    &:not(:first-of-type).bordered {
+      @{arco-dark-mode-selector} & {
+        .onepx-border-var(top, dark-line-color);
+      }
+    }
+    &.without-group {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-cell-background-color);
+      }
+      &.bordered {
+        @{arco-dark-mode-selector} & {
+          .onepx-border-var(top, dark-line-color);
+          .onepx-border-var(bottom, dark-line-color);
+        }
+      }
+    }
+    .cell-label {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-cell-label-color);
+      }
+    }
+    .cell-desc {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-cell-desc-color);
+      }
+    }
+    .cell-label-icon {
+      .@{prefix}-icon {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-cell-label-icon-color);
+        }
+      }
+    }
+    .cell-arrow-icon {
+      .@{prefix}-icon {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-cell-arrow-color);
+        }
+      }
+      .arrow-icon-svg {
+        path {
+          @{arco-dark-mode-selector} & {
+            .use-var(fill, dark-cell-arrow-color);
+          }
+        }
+      }
+    }
+  }
+  .@{prefix}-cell-group {
+    .cell-group-header,
+    .cell-group-footer {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-cell-text-color);
+      }
+    }
+    .cell-group-body {
+      @{arco-dark-mode-selector} & {
+        .use-var(background-color, dark-cell-background-color);
+      }
+      &.bordered {
+        @{arco-dark-mode-selector} & {
+          .onepx-border-var(top, dark-line-color);
+          .onepx-border-var(bottom, dark-line-color);
+        }
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/cell/type.d.ts

@@ -0,0 +1,125 @@
+import React, { ReactNode } from 'react';
+export interface CellProps {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 单元格左侧图标
+     * @en Cell left icon
+     * */
+    icon?: ReactNode;
+    /**
+     * 标签名
+     * @en Label name
+     *  */
+    label?: ReactNode;
+    /**
+     * 描述
+     * @en Description
+     * */
+    desc?: ReactNode;
+    /**
+     * 主体文字，如果有标签名则靠右，否则靠左
+     * @en The primary text, if there is a label name, it is to the right, otherwise it is to the left
+     *  */
+    text?: string;
+    /**
+     * 主体内容，如果有标签名则靠右，否则靠左
+     * @en The primary content, if there is a label name, it is to the right, otherwise it is to the left
+     *  */
+    children?: ReactNode;
+    /**
+     * 是否展示右侧箭头
+     * @en Whether to show the right arrow
+     *  */
+    showArrow?: boolean;
+    /**
+     * 右侧箭头内容
+     * @en Right arrow content
+     * */
+    arrow?: ReactNode;
+    /**
+     * 单元格前缀内容，在单元格上方
+     * @en Cell prefix content, above the cell
+     * */
+    prepend?: ReactNode;
+    /** 单元格后缀内容，在单元格下方
+     * @en Cell suffix content, below the cell
+     */
+    append?: ReactNode;
+    /**
+     * 是否有外边框
+     * @en Whether there is a border
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * 点击单元格事件回调
+     * @en Callback for cell click event
+     * */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface CellRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export interface CellGroupProps<T extends CellProps = CellProps> {
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义头部内容
+     * @en custom header content
+     * */
+    header?: ReactNode;
+    /**
+     * 自定义尾部内容
+     * @en custom footer content
+     *  */
+    footer?: ReactNode;
+    /**
+     * 是否有外边框
+     * @en Whether there is a border
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * 单元格配置，优先级高于children
+     * @en Cell setting
+     *  */
+    options?: T[];
+    /**
+     * 内部单元格
+     * @en inner cell
+     *  */
+    children?: ReactNode;
+    /**
+     * 点击单元格组回调
+     * @en Callback of clicking the cell group
+     *  */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface CellGroupRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/esnext/cell/type.js

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

package/esnext/checkbox/checkbox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxProps, CheckboxRef } from './type';
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps<string | number> & React.RefAttributes<CheckboxRef>>;

package/esnext/checkbox/checkbox.js

@@ -0,0 +1,106 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import IconCircleUnchecked from '../icon/IconCircleUnchecked';
+import IconCircleChecked from '../icon/IconCircleChecked';
+import IconCircleDisabled from '../icon/IconCircleDisabled';
+import IconSquareChecked from '../icon/IconSquareChecked';
+import IconSquareUnchecked from '../icon/IconSquareUnchecked';
+import IconSquareDisabled from '../icon/IconSquareDisabled';
+import { CheckboxGroupContext } from './group';
+import { IconStatus } from './type';
+import { useMergeProps } from './hooks';
+const getDefaultIcon = (shape, status) => {
+    const defaultIcons = {
+        circle: {
+            normal: React.createElement(IconCircleUnchecked, null),
+            active: React.createElement(IconCircleChecked, null),
+            disabled: React.createElement(IconCircleDisabled, null),
+            activeDisabled: React.createElement(IconCircleChecked, null),
+        },
+        square: {
+            normal: React.createElement(IconSquareUnchecked, null),
+            active: React.createElement(IconSquareChecked, null),
+            disabled: React.createElement(IconSquareDisabled, null),
+            activeDisabled: React.createElement(IconSquareChecked, null),
+        },
+        justify: {
+            normal: React.createElement(IconCircleUnchecked, null),
+            active: React.createElement(IconCircleChecked, null),
+            disabled: React.createElement(IconCircleDisabled, null),
+            activeDisabled: React.createElement(IconCircleChecked, null),
+        },
+    };
+    return defaultIcons[shape][status];
+};
+export const Checkbox = forwardRef((props, ref) => {
+    const { style = {}, className = '', children = null, label = '', layout = 'inline', value, defaultCheck = false, disabled = false, shape = 'circle', icons, isRadio = false, checked: propsChecked, onChange, } = useMergeProps(props, CheckboxGroupContext);
+    const [checked, setChecked] = useState(propsChecked === void 0 ? defaultCheck : propsChecked);
+    const [componentName] = useState(isRadio ? 'radio' : 'checkbox');
+    const domRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    useEffect(() => {
+        if (propsChecked !== void 0)
+            setChecked(Boolean(propsChecked));
+    }, [propsChecked]);
+    /**
+     * 获得图标样式
+     * @en Get icon style
+     */
+    const getStatus = () => {
+        if (checked) {
+            if (disabled)
+                return IconStatus.ACTIVE_DISABLED;
+            return IconStatus.ACTIVE;
+        }
+        if (disabled)
+            return IconStatus.DISABLED;
+        return IconStatus.NORMAL;
+    };
+    /**
+     * 计算展示的icon
+     * @en Calculate the displayed icon
+     */
+    const renderIcon = () => {
+        let Icon;
+        const iconKey = getStatus();
+        if (icons && icons[iconKey] !== void 0) {
+            Icon = icons[iconKey];
+        }
+        else if (icons === null) {
+            Icon = null;
+        }
+        else {
+            Icon =
+                layout === 'justify'
+                    ? getDefaultIcon('justify', iconKey)
+                    : getDefaultIcon(shape, iconKey);
+        }
+        return Icon ? (React.createElement("div", { className: cls(`${componentName}-icon`, {
+                disabled,
+                checked,
+            }) }, Icon)) : null;
+    };
+    /**
+     * 处理点击事件
+     * @en Handling click events
+     */
+    const onClick = (e) => {
+        if (disabled)
+            return;
+        // Radio组件不支持点击取消选中
+        // @en Radio component does not support click to uncheck
+        if (isRadio && checked)
+            return;
+        onChange && onChange(!checked, value, e);
+        if (propsChecked === void 0) {
+            setChecked(!checked);
+        }
+    };
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { role: "checkbox", "aria-checked": checked, "aria-disabled": disabled, tabIndex: 0, ref: domRef, style: style, className: cls(className, `${prefixCls}-${componentName}`, `shape-${shape}`, { disabled }, layout), onClick: onClick },
+        layout !== 'justify' && renderIcon(),
+        React.createElement("div", { className: `${componentName}-text` }, children || label || value),
+        layout === 'justify' && renderIcon()))));
+});

package/esnext/checkbox/group.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GroupContextParams, CheckboxGroupProps, CheckboxGroupRef, ValueType, CheckboxProps, CheckboxRef } from './type';
+export declare const CheckboxGroupContext: React.Context<GroupContextParams<string | number>>;
+export declare function componentGenerator<T extends ValueType = ValueType, P extends CheckboxProps<T> = CheckboxProps<T>, R extends CheckboxRef = CheckboxRef>(Comp: React.ForwardRefExoticComponent<P & React.RefAttributes<R>>): React.ForwardRefExoticComponent<CheckboxGroupProps<T, P> & React.RefAttributes<CheckboxGroupRef>>;

package/esnext/checkbox/group.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+export const CheckboxGroupContext = React.createContext({
+    isGroup: false,
+    shape: 'circle',
+    layout: 'inline',
+    disabled: false,
+    value: [],
+    onChange: () => { },
+});
+export function componentGenerator(Comp) {
+    return forwardRef((props, ref) => {
+        const { style = {}, className = '', defaultValue = [], disabled = false, shape = 'circle', options, icons, onChange, value, children = null, layout = 'inline', min = 0, max = 0, } = props;
+        const [groupValue, setGroupValue] = useState(value || defaultValue);
+        const domRef = useRef(null);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+        useEffect(() => {
+            value !== void 0 && setGroupValue(value);
+        }, [value]);
+        /**
+         * 切换checkbox状态回调
+         * @en callback when toggling checkbox state
+         */
+        const handleChange = (checked, val) => {
+            if ((!checked && groupValue.length <= min) ||
+                (max && checked && groupValue.length >= max))
+                return;
+            const newGroupValue = checked
+                ? [...groupValue, val]
+                : groupValue.filter(item => item !== val);
+            onChange && onChange(newGroupValue);
+            if (value === void 0) {
+                setGroupValue(newGroupValue);
+            }
+        };
+        return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { ref: domRef, style: style, className: cls(className, `${prefixCls}-checkbox-group`) },
+            React.createElement(CheckboxGroupContext.Provider, { value: {
+                    isGroup: true,
+                    shape,
+                    layout,
+                    disabled,
+                    icons,
+                    value: groupValue,
+                    onChange: handleChange,
+                } },
+                children,
+                !children &&
+                    options &&
+                    options.map(option => React.createElement(Comp, Object.assign({ key: option.value }, option))))))));
+    });
+}

package/esnext/checkbox/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useMergeProps';

package/esnext/checkbox/hooks/index.js

@@ -0,0 +1 @@
+export * from './useMergeProps';

package/esnext/checkbox/hooks/useMergeProps.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxProps, GroupContextParams, ValueType } from '../type';
+export declare const useMergeProps: <T extends string | number = string | number, P extends CheckboxProps<T> = CheckboxProps<T>>(props: P, groupContext: React.Context<GroupContextParams<ValueType>>) => P;

package/esnext/checkbox/hooks/useMergeProps.js

@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+export const useMergeProps = (props, groupContext) => {
+    const { disabled, shape, layout, icons, value, onChange, isGroup } = useContext(groupContext);
+    if (!isGroup)
+        return props;
+    return {
+        disabled,
+        shape,
+        layout,
+        icons,
+        ...props,
+        // 在Group内checkbox的选中状态由GroupValue决定
+        // The checked state of the checkbox in the Group is determined by the GroupValue
+        checked: value.indexOf(props.value) > -1,
+        onChange: (checked, val, e) => {
+            onChange(checked, val, e);
+            props.onChange && props.onChange(checked, val, e);
+        },
+    };
+};

package/esnext/checkbox/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export * from './type';
+declare const _default: import("react").ForwardRefExoticComponent<import("./type").CheckboxProps<string | number> & import("react").RefAttributes<import("./type").CheckboxRef>> & {
+    Group: import("react").ForwardRefExoticComponent<import("./type").CheckboxGroupProps<string | number, import("./type").CheckboxProps<string | number> & import("react").RefAttributes<import("./type").CheckboxRef>> & import("react").RefAttributes<import("./type").CheckboxGroupRef>> & {
+        displayName?: string | undefined;
+    };
+} & {
+    displayName?: string | undefined;
+};
+/**
+ * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
+ * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
+ * @name 复选框
+ * @name_en Checkbox
+ * @type 数据录入
+ * @type_en Data Entry
+ * @displayName Checkbox
+ */
+export default _default;

package/esnext/checkbox/index.js

@@ -0,0 +1,22 @@
+import { componentWrapper } from '@arco-design/mobile-utils';
+import { componentGenerator } from './group';
+import { Checkbox } from './checkbox';
+export * from './type';
+/**
+ * 复选项组
+ * @en Checkbox group
+ * @displayName CheckboxGroup
+ */
+const Group = componentWrapper(componentGenerator(Checkbox), 'CheckboxGroup');
+/**
+ * 复选框，可用状态下点击切换选择，支持禁用，支持复选项组。
+ * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
+ * @name 复选框
+ * @name_en Checkbox
+ * @type 数据录入
+ * @type_en Data Entry
+ * @displayName Checkbox
+ */
+export default componentWrapper(Checkbox, 'Checkbox', {
+    Group,
+});