@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/badge/style/index.less

@@ -0,0 +1,109 @@
+@import "../../../style/mixin.less";
+
+@keyframes scale-on {
+
+    0% {
+        transform: scale(0);opacity: 0; }
+
+    100% {
+        transform: scale(1); opacity: 1; }
+}
+
+@keyframes scale-off {
+
+    0% {
+        transform: scale(1); opacity: 1; }
+
+    100% {
+        transform: scale(0); opacity: 0; }
+}
+
+.@{prefix}-scale-enter-active {
+    animation: scale-on .4s cubic-bezier(.3, 1.3, .3, 1) forwards;
+}
+
+.@{prefix}-scale-exit-active {
+    animation: scale-off .4s cubic-bezier(.3, 1.3, .3, 1) forwards;
+}
+
+.@{prefix}-badge {
+    cursor: pointer;
+    box-sizing: content-box;
+    display: inline-block;
+    z-index: 2;
+    .use-var(color, badge-text-color);
+    .use-var(background-color, badge-background-color);
+    white-space: nowrap;
+    .use-var(border-radius, badge-border-radius);
+    .use-var(height, badge-text-width);
+    .use-var(line-height, badge-text-width);
+    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding, badge-text-padding);
+    .use-var(padding, badge-text-padding, 0);
+
+    &-text {
+        display: block;
+        font-weight: 500;
+        .set-font-size-var(badge-font-size);
+    }
+
+    &-dot {
+        .use-var(width, badge-dot-width);
+        .use-var(height, badge-dot-width);
+        padding: 0;
+        min-width: auto;
+    }
+
+    &-bordered {
+        .use-var(border, badge-border-color, 1PX solid);
+    }
+
+    &-absolute {
+        position: absolute;
+        top: 0;
+        .set-prop-with-rtl(left, 100%);
+        .use-var-with-rtl(margin-left, badge-text-deviation);
+        .use-var(margin-top, badge-text-deviation);
+    }
+
+    &-absolute&-dot {
+        .use-var-with-rtl(margin-left, badge-dot-deviation);
+        .use-var(margin-top, badge-dot-deviation);
+    }
+}
+
+
+/***************************************************
+ *                                                 *
+ *               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}-badge {
+    @{arco-dark-mode-selector} & {
+      .use-var(color, dark-badge-text-color);
+      .use-var(background-color, dark-badge-background-color);
+    }
+    &-bordered {
+      @{arco-dark-mode-selector} & {
+        .use-var(border, dark-badge-border-color, 1PX solid);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/button/hooks.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+import { ButtonProps } from '.';
+export declare const useCustomColor: ({ color, bgColor, borderColor, isActive: active, disabled, halfBorder, }: Pick<ButtonProps, 'color' | 'bgColor' | 'borderColor' | 'type' | 'disabled' | 'halfBorder'> & {
+    isActive: boolean;
+}) => {
+    customColorStyle: CSSProperties;
+    customColorClass: string[];
+};

package/esnext/button/hooks.js

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+const formatColorStatus = (color) => {
+    if (!color)
+        return null;
+    return typeof color === 'string'
+        ? {
+            normal: color,
+            active: color,
+            disabled: color,
+        }
+        : color;
+};
+// 主要是用来 diff 颜色是否变化，将对象或者字符串的 diff 转换成字符串的 diff
+// @en It is mainly used to judge whether the color has changed, and convert the diff of the object or string into the diff of the string
+const diffColor = (color) => color && (typeof color === 'string' ? color : Object.values(color).join('-'));
+// 允许传入定制所有颜色，忽略的值会继续走原生的颜色
+// @en Allows to pass in all custom colors, ignored values will continue to use native colors
+export const useCustomColor = ({ color, bgColor, borderColor, isActive: active, disabled, halfBorder, }) => {
+    const state = { active, disabled };
+    const priority = ['active', 'disabled'];
+    const styleConfig = useMemo(() => {
+        const [fmtColor, fmtBgColor, fmtBorderColor] = [color, bgColor, borderColor].map(formatColorStatus);
+        return { color: fmtColor, borderColor: fmtBorderColor, background: fmtBgColor };
+    }, [color, bgColor, borderColor].map(diffColor));
+    const customColorStyle = useMemo(() => {
+        const res = {};
+        Object.entries(styleConfig).forEach(([styleName, fmtColorConfig]) => {
+            if (fmtColorConfig) {
+                let styleColor = fmtColorConfig.normal;
+                priority.forEach(key => {
+                    if (state[key] && fmtColorConfig[key]) {
+                        styleColor = fmtColorConfig[key];
+                    }
+                });
+                res[styleName] = styleColor;
+            }
+        });
+        return res;
+    }, [styleConfig, active, disabled]);
+    const customColorClass = useMemo(() => {
+        const borderCls = halfBorder ? 'half-border' : '';
+        return styleConfig.borderColor ? ['has-custom-border'] : [borderCls];
+    }, [styleConfig.borderColor, halfBorder]);
+    return { customColorStyle, customColorClass };
+};

package/esnext/button/index.d.ts

@@ -0,0 +1,141 @@
+import React from 'react';
+export declare type ButtonColorStatus = string | {
+    normal: string;
+    active: string;
+    disabled: string;
+};
+export interface ButtonProps {
+    /**
+     * 样式类型
+     * @en Style type
+     * @default "primary"
+     */
+    type?: 'primary' | 'ghost' | 'default';
+    /**
+     * 尺寸
+     * @en Size
+     * @default "large"
+     */
+    size?: 'mini' | 'small' | 'medium' | 'large' | 'huge';
+    /**
+     * 是否为内联样式
+     * @en Whether it's inline style
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * 是否处于加载中状态
+     * @en Whether it's in loading status
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 是否禁用
+     * @en Whether to disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * border是否为0.5px
+     * @en Whether the border is 0.5px
+     * @default false
+     */
+    halfBorder?: boolean;
+    /**
+     * 图标名，传入Icon组件
+     * @en icon, input icon component
+     */
+    icon?: React.ReactNode;
+    /**
+     * 加载中是否展示文字
+     * @en Whether to show text when loading
+     * @default true
+     */
+    showTextWhenLoading?: boolean;
+    /**
+     * 是否需要点击态
+     * @en Whether it needs active status
+     * @default true
+     */
+    needActive?: boolean;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 按钮形状
+     * @en Button shape
+     * @default "semi"
+     */
+    shape?: 'round' | 'semi' | 'square';
+    /**
+     * 自定义字体颜色
+     * @en Custom font color
+     */
+    color?: ButtonColorStatus;
+    /**
+     * 自定义背景颜色
+     * @en Custom background color
+     */
+    bgColor?: ButtonColorStatus;
+    /**
+     * 自定义边框颜色
+     * @en Custom border color
+     */
+    borderColor?: ButtonColorStatus;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 加载图标，传入Icon组件type属性或node
+     * @en Loading icon, input the icon component or its type
+     */
+    loadingIcon?: string | React.ReactNode;
+    /**
+     * 子元素
+     * @en Children element
+     */
+    children?: null | React.ReactNode;
+    /**
+     * 点击按钮的回调函数
+     * @en Callback function when clicking button
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * 禁用状态下点击按钮的回调函数
+     * @en Callback function when disabling button
+     */
+    onClickDisabled?: (e: React.MouseEvent) => void;
+    /**
+     * 加载中是否禁用按钮操作
+     * @en Disable button when loading
+     * @default true
+     */
+    disableWhenLoading?: boolean;
+    /**
+     * 加载中是否覆盖Icon
+     * @en Whether to override Icon during loading
+     * @default true
+     */
+    coverIconWhenLoading?: boolean;
+}
+export interface ButtonRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLButtonElement | null;
+}
+/**
+ * 按钮用于开始一个即时操作。
+ * @en Using for starting an immediate action
+ * @type 通用
+ * @type_en General
+ * @name 按钮
+ * @name_en Button
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<ButtonRef>>;
+export default Button;

package/esnext/button/index.js

@@ -0,0 +1,61 @@
+import React, { useState, forwardRef, useRef, useImperativeHandle, useContext } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { GlobalContext } from '../context-provider';
+import Loading from '../loading';
+import { useSystem } from '../_helpers';
+import { useCustomColor } from './hooks';
+/**
+ * 按钮用于开始一个即时操作。
+ * @en Using for starting an immediate action
+ * @type 通用
+ * @type_en General
+ * @name 按钮
+ * @name_en Button
+ */
+const Button = forwardRef((props, ref) => {
+    const [isActive, setActive] = useState(false);
+    const system = useSystem();
+    const { type = 'primary', size = 'large', inline = false, loading = false, disabled = false, disableWhenLoading = true, shape = 'semi', halfBorder = false, icon, showTextWhenLoading = true, needActive = true, style = {}, color, bgColor, borderColor, className = '', children = null, loadingIcon, onClick, onClickDisabled, coverIconWhenLoading = true, } = props;
+    const domRef = useRef(null);
+    const { prefixCls } = useContext(GlobalContext);
+    const prefix = `${prefixCls}-button`;
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    const { customColorClass, customColorStyle } = useCustomColor({
+        color,
+        bgColor,
+        borderColor,
+        isActive,
+        disabled,
+        halfBorder,
+    });
+    const handleTouchStart = () => {
+        if (needActive && !disabled && !loading) {
+            setActive(true);
+        }
+    };
+    const handleTouchEnd = () => {
+        setActive(false);
+    };
+    const renderIcon = () => {
+        if (coverIconWhenLoading) {
+            return loading ? null : icon;
+        }
+        return icon;
+    };
+    return (React.createElement("button", { type: "button", ref: domRef, style: { ...customColorStyle, ...style }, className: cls(prefix, `${prefix}-type-${type} type-${type}`, `${prefix}-size-${size} ${prefix}-size-${size}-is-${shape} size-${size}`, className, `is-${shape}`, system, {
+            [`${prefix}-inline inline`]: inline,
+            [`${prefix}-type-${type}-disabled disabled`]: disabled,
+            loading,
+            [`${prefix}-type-${type}-active active`]: isActive,
+        }, ...customColorClass), onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, onClick: disabled || (loading && disableWhenLoading) ? onClickDisabled : onClick },
+        icon || loading ? (React.createElement("div", { className: `${prefix}-icon btn-icon` },
+            renderIcon(),
+            loading &&
+                (loadingIcon === void 0 ? (React.createElement(Loading, { className: `${prefix}-loading-icon loading-icon`, radius: 6, type: "circle" })) : (loadingIcon)))) : null,
+        (!loading || (loading && showTextWhenLoading)) && children ? (React.createElement("div", { className: cls(`${prefix}-text`, `${prefix}-text-${system}`, 'btn-text', {
+                [`${prefix}-text-has-icon has-icon`]: loading || icon,
+            }) }, children)) : null));
+});
+export default Button;