@arco-design/mobile-react 2.31.6 → 2.32.0

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

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

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

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

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

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

package/esnext/tag/style/index.js

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

package/esnext/tag/style/index.less

@@ -0,0 +1,188 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-tag {
+    display: inline-flex;
+    justify-items: center;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    box-sizing: border-box;
+    border: none;
+    .use-var(border-radius, tag-border-radius);
+    .use-var(font-size, tag-font-size);
+    border-width: 1PX;
+    border-style: solid;
+
+    &.size-small {
+        .use-var(height, tag-small-size-height);
+        .use-var(padding, tag-small-size-padding, 0);
+
+        .tag-text {
+            transform: scale(.8333);
+            .rem(margin-left, -2);
+            .rem(margin-right, -2);
+        }
+    }
+
+    &.size-medium {
+        .use-var(height, tag-medium-size-height);
+        .use-var(padding, tag-medium-size-padding, 0);
+    }
+
+    &.size-large {
+        .use-var(height, tag-large-size-height);
+        .use-var(padding, tag-large-size-padding, 0);
+    }
+
+    &.filleted {
+        .use-var(padding, tag-filleted-padding, 0);
+        border-radius: 100px;
+    }
+
+    &.half-border:not(&-solid) {
+
+        &:not(.filleted) {
+            .onepx-border(all, inherit, @tag-border-radius, 1PX, inherit);
+            // bugfix: 一些情况border-style会和border-width合并为border属性
+            // border-style: inherit时合并后为 border: 1PX inherit 语法有问题 这里复写一下
+
+            &::after {
+                border: inherit;
+                border-width: 1PX;
+            }
+        }
+
+        &.filleted {
+            .onepx-border(all, inherit, 100px, 1PX, inherit);
+
+            &::after {
+                border: inherit;
+                border-width: 1PX;
+            }
+        }
+    }
+
+    .tag-text {
+        vertical-align: middle;
+        font-size: inherit;
+    }
+    .@{prefix}-icon:not(.tag-close-icon) {
+        vertical-align: middle;
+        .use-var-with-rtl(margin-right, tag-icon-margin-right);
+        .use-var(font-size, tag-icon-font-size);
+    }
+
+    .tag-close-wrap {
+        font-size: 0;
+    }
+
+    .tag-close-icon {
+        vertical-align: middle;
+        .use-var-with-rtl(margin-left, tag-icon-close-margin-left);
+        .use-var(font-size, tag-icon-font-size);
+    }
+
+    &.android {
+
+        .tag-text {
+            .rem(padding-top, 1);
+        }
+    }
+
+    &&-primary {
+        .use-var(color, tag-primary-color);
+        .use-var(background, tag-primary-background-color);
+        .use-var(border-color, tag-primary-border-color);
+    }
+
+    &&-hollow {
+        .use-var(color, tag-hollow-color);
+        background: transparent;
+        .use-var(border-color, tag-hollow-border-color);
+    }
+
+    &&-solid {
+        .use-var(color, tag-solid-color);
+        .use-var(background, tag-solid-background-color);
+        border-width: 0;
+    }
+}
+
+.@{prefix}-tag-list {
+    margin-bottom: -1 * @tag-list-vertical-gutter;
+    .@{prefix}-tag {
+        vertical-align: top;
+
+        &:not(:last-child) {
+            .use-var-with-rtl(margin-right, tag-list-horizontal-gutter);
+        }
+        .use-var(margin-bottom, tag-list-vertical-gutter);
+    }
+
+    .tag-list-add-wrap {
+        font-size: 0;
+        display: inline-block;
+    }
+
+    .tag-list-add {
+        .use-var(margin-bottom, tag-list-vertical-gutter);
+        .use-var(border-color, tag-list-add-border-color);
+        .use-var(background, tag-list-add-background);
+        .use-var(color, tag-list-add-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}-tag {
+    &&-primary {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-tag-primary-color);
+        .use-var(background, dark-tag-primary-background-color);
+        .use-var(border-color, dark-tag-primary-border-color);
+      }
+    }
+    &&-hollow {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-tag-hollow-color);
+        .use-var(border-color, dark-tag-hollow-border-color);
+      }
+    }
+    &&-solid {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-tag-solid-color);
+        .use-var(background, dark-tag-solid-background-color);
+      }
+    }
+  }
+  .@{prefix}-tag-list {
+    .tag-list-add {
+      @{arco-dark-mode-selector} & {
+        .use-var(border-color, dark-tag-list-add-border-color);
+        .use-var(background, dark-tag-list-add-background);
+        .use-var(color, dark-tag-list-add-color);
+      }
+    }
+  }
+}
+/********************* End *************************/

package/esnext/tag/tag.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TagProps, TagRef } from './type';
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<TagRef>>;

package/esnext/tag/tag.js

@@ -0,0 +1,32 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { useSystem } from '../_helpers';
+import IconClose from '../icon/IconClose';
+export const Tag = forwardRef((props, ref) => {
+    const { className, style, type = 'primary', icon, children, size = 'medium', color, bgColor, borderColor, borderStyle = 'solid', halfBorder = true, closeable, closeIcon, closeColor, filleted, onClose, onClick, } = props;
+    const domRef = useRef(null);
+    const system = useSystem();
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    function getTagStyle() {
+        return {
+            color,
+            background: bgColor,
+            borderColor,
+            borderStyle,
+            ...(style || {}),
+        };
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => {
+        const prefix = `${prefixCls}-tag`;
+        return (React.createElement("div", { className: cls(prefix, 'all-border-box', className, `${prefix}-${type}`, { 'half-border': halfBorder }, system, `size-${size}`, { filleted }), style: getTagStyle(), ref: domRef, onClick: onClick },
+            icon,
+            React.createElement("span", { className: "tag-text" }, children),
+            closeable ? (React.createElement("div", { onClick: e => {
+                    e.stopPropagation();
+                    onClose && onClose(e);
+                }, className: "tag-close-wrap" }, closeIcon || (React.createElement(IconClose, { className: "tag-close-icon", color: closeColor })))) : null));
+    }));
+});

package/esnext/tag/type.d.ts

@@ -0,0 +1,159 @@
+import React, { CSSProperties, ReactNode } from 'react';
+export interface TagProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 样式类型。primary表示基本类型，hollow表示空心类型，solid表示实心类型
+     * @en Style type. primary represents the basic type, hollow represents the hollow type, and solid represents the solid type
+     * @default "primary"
+     */
+    type?: 'primary' | 'hollow' | 'solid';
+    /**
+     * 图标内容
+     * @en Icon
+     */
+    icon?: ReactNode;
+    /**
+     * 标签内部内容
+     * @en Children element of tag
+     */
+    children?: ReactNode;
+    /**
+     * 标签尺寸
+     * @en Tag size
+     * @default "medium"
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * 文字颜色
+     * @en Text color
+     */
+    color?: string;
+    /**
+     * 背景颜色
+     * @en Background color
+     */
+    bgColor?: string;
+    /**
+     * 边框颜色
+     * @en Border color
+     */
+    borderColor?: string;
+    /**
+     * 边框样式
+     * @en Border style
+     * @default "solid"
+     */
+    borderStyle?: 'none' | 'dotted' | 'solid' | 'dashed';
+    /**
+     * 是否是0.5px边框
+     * @en Whether it is a 0.5px border
+     * @default true
+     */
+    halfBorder?: boolean;
+    /**
+     * 是否有关闭按钮
+     * @en whether there is a close button
+     */
+    closeable?: boolean;
+    /**
+     * 关闭按钮内容
+     * @en Close button content
+     */
+    closeIcon?: ReactNode;
+    /**
+     * 关闭按钮颜色
+     * @en Close button color
+     */
+    closeColor?: string;
+    /**
+     * 是否圆角
+     * @en Whether it has rounded corners
+     */
+    filleted?: boolean;
+    /**
+     * 点击关闭按钮回调
+     * @en Callback when clicking the close button
+     */
+    onClose?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * 点击标签回调
+     * @en Callback when clicking the tag
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface TagRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+export interface TagListProps<T extends TagProps = TagProps> {
+    /**
+     * 标签列表
+     * @en Tag List
+     */
+    list: T[];
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: CSSProperties;
+    /**
+     * 样式类型。primary表示基本类型，hollow表示空心类型，solid表示实心类型
+     * @en Style type, primary represents the basic type, hollow represents the hollow type, and solid represents the solid type
+     */
+    type?: 'primary' | 'hollow' | 'solid';
+    /**
+     * 是否展示添加标签按钮
+     * @en Whether to display the add tag button
+     * @default true
+     */
+    showAddButton?: boolean;
+    /**
+     * 自定义添加标签按钮
+     * @en Customize the add tag button
+     */
+    addArea?: ReactNode;
+    /**
+     * 标签横向间距
+     * @en Horizontal spacing of tags
+     */
+    horizontalPadding?: string | number;
+    /**
+     * 标签纵向间距
+     * @en Vertical spacing of tags
+     */
+    verticalPadding?: string | number;
+    /**
+     * 点击添加标签按钮回调
+     * @en Callback when clicking the add tag button
+     */
+    onAdd?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * 点击标签关闭按钮回调
+     * @en Callback when clicking the close tag button
+     */
+    onClose?: (index: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export interface TagListRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}

package/esnext/tag/type.js

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

package/esnext/textarea/index.d.ts

@@ -0,0 +1,96 @@
+import React, { ReactNode } from 'react';
+import { BasicInputProps } from '../input/props';
+export interface TextareaProps extends BasicInputProps<HTMLTextAreaElement> {
+    /**
+     * 文本域默认行数
+     * @en Default number of lines in the text field
+     */
+    rows?: number;
+    /**
+     * 自适应内容高度
+     * @en Adaptive content height
+     */
+    autosize?: boolean;
+    /**
+     * 文本域dom自定义类名
+     * @en Custom classname of text field dom
+     */
+    textareaClass?: string;
+    /**
+     * 文本域dom自定义样式
+     * @en Custom stylesheet of text field dom
+     */
+    textareaStyle?: React.CSSProperties;
+    /**
+     * autosize=true 时，是否通过 cloneNode 计算新高度
+     * @en When autosize=true, whether to calculate the new height through cloneNode
+     * @default false
+     */
+    cloneNodeWhenAutosize?: boolean;
+    /**
+     * 是否展示字数统计
+     * @en Whether to display word count
+     * @default true
+     */
+    showStatistics?: boolean;
+    /**
+     * 字数统计时的最大输入长度
+     * @en Maximum input length for word count
+     */
+    statisticsMaxlength?: number;
+    /**
+     * 自定义统计字数方法
+     * @en Customize word count method
+     */
+    statisticsLengthCaculator?: (value: string) => number;
+    /**
+     * 字数统计错误状态切换回调，仅当状态发生改变时触发
+     * @en Callback when the error state of word count switches, triggered only when the state changes
+     */
+    onErrStatusChange?: (hasError: boolean) => void;
+    /**
+     * 字数统计错误状态回调，当值有改变时就会触发
+     * @en Callback when word count is in error status, triggered when the value changes
+     */
+    onErrValueChange?: (hasError: boolean, currentLength: number, maxLength?: number) => void;
+    /**
+     * 自定义字数统计内容
+     * @en Custom word count content
+     */
+    renderStatistics?: (currentLength: number, maxLength: number) => ReactNode;
+    /**
+     * 其他未列出的原生属性，优先级低于已列出的组件属性
+     * @en Other unlisted native properties, lower priority than listed component properties
+     */
+    nativeProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+}
+export interface TextareaRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 原生文本框 DOM
+     * @en Native textarea DOM
+     */
+    textarea: HTMLTextAreaElement | null;
+    /**
+     * 手动 resize 输入框，autosize=true 时生效
+     * @en Manually resize the input box, it takes effect when autosize=true
+     */
+    resize: () => void;
+}
+declare const _default: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<TextareaRef>> & {
+    displayName?: string | undefined;
+};
+/**
+ * 多行文本输入框组件，支持自适应内容高度。
+ * @en A multi-line textarea, supports adaptive content height.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 多行文本框
+ * @name_en Textarea
+ * @displayName Textarea
+ */
+export default _default;

package/esnext/textarea/index.js

@@ -0,0 +1,88 @@
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useMemo, } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { useInputLogic } from '../input/hooks';
+const Textarea = forwardRef((props, ref) => {
+    const { id, name, rows, placeholder, readOnly, onKeyUp, onKeyPress, disabled, autosize, cloneNodeWhenAutosize, showStatistics = true, statisticsMaxlength, statisticsLengthCaculator, onErrStatusChange, onErrValueChange, renderStatistics, maxLength, textareaClass, textareaStyle, nativeProps = {}, } = props;
+    const textareaRef = useRef(null);
+    const cloneNodeRef = useRef(null);
+    const { inputValue, handleClick, handleChange, handleInput, handleKeyDown, handleFocus, handleBlur, renderWrapper, wrapRef, } = useInputLogic(props, textareaRef);
+    const maxValueLength = statisticsMaxlength || maxLength;
+    const currentValueLength = useMemo(() => {
+        if (statisticsLengthCaculator) {
+            return statisticsLengthCaculator(inputValue);
+        }
+        // 默认为过滤换行后的字符长度
+        // @en The default is the character length after filtering newlines
+        const validValue = (inputValue || '').replace(/\n/g, '');
+        return validValue ? String(validValue).length : 0;
+    }, [inputValue, statisticsLengthCaculator]);
+    const exceed = maxValueLength ? currentValueLength > maxValueLength : false;
+    useImperativeHandle(ref, () => ({
+        dom: wrapRef.current,
+        textarea: textareaRef.current,
+        resize: resizeTextarea,
+    }), [resizeTextarea]);
+    useEffect(() => {
+        return () => {
+            cloneNodeRef.current && document.body.removeChild(cloneNodeRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        resizeTextarea();
+    }, [inputValue, placeholder]);
+    useEffect(() => {
+        onErrStatusChange && onErrStatusChange(exceed);
+    }, [exceed]);
+    useEffect(() => {
+        onErrValueChange && onErrValueChange(exceed, currentValueLength, maxValueLength);
+    }, [maxValueLength, currentValueLength]);
+    function resizeTextarea() {
+        if (!autosize || !textareaRef.current) {
+            return;
+        }
+        let currentRef = textareaRef.current;
+        if (cloneNodeWhenAutosize) {
+            const cloneNode = textareaRef.current.cloneNode(true);
+            if (cloneNodeRef.current) {
+                document.body.replaceChild(cloneNode, cloneNodeRef.current);
+            }
+            else {
+                document.body.appendChild(cloneNode);
+            }
+            const computedStyle = window.getComputedStyle(textareaRef.current);
+            // 影响布局的css属性复制
+            // @en Copy css properties which affect layout
+            ['width', 'fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing'].forEach(styleKey => {
+                cloneNode.style[styleKey] = computedStyle[styleKey];
+            });
+            cloneNode.classList.add('fake-textarea');
+            cloneNodeRef.current = cloneNode;
+            currentRef = cloneNode;
+        }
+        currentRef.style.height = 'auto';
+        const maxHeight = Math.max(currentRef.clientHeight, currentRef.scrollHeight);
+        textareaRef.current.style.height = `${maxHeight}px`;
+    }
+    function renderTextarea({ prefixCls }) {
+        const prefix = `${prefixCls}-input`;
+        return renderWrapper(prefix, `textarea ${showStatistics ? 'has-stat' : ''}`, React.createElement(React.Fragment, null,
+            React.createElement("textarea", Object.assign({}, nativeProps, { id: id, name: name, rows: rows, placeholder: placeholder, readOnly: readOnly, onFocus: handleFocus, onBlur: handleBlur, onKeyUp: onKeyUp, onKeyPress: onKeyPress, ref: textareaRef, className: cls(`${prefixCls}-textarea`, textareaClass), style: textareaStyle, value: inputValue, maxLength: maxLength, disabled: disabled, onChange: handleChange, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick })),
+            showStatistics && maxValueLength ? (React.createElement("span", { className: cls('statistic-text', {
+                    exceed,
+                }) }, renderStatistics
+                ? renderStatistics(currentValueLength, maxValueLength)
+                : `${currentValueLength}/${maxValueLength}`)) : null));
+    }
+    return React.createElement(ContextLayout, null, renderTextarea);
+});
+/**
+ * 多行文本输入框组件，支持自适应内容高度。
+ * @en A multi-line textarea, supports adaptive content height.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 多行文本框
+ * @name_en Textarea
+ * @displayName Textarea
+ */
+export default componentWrapper(Textarea, 'Textarea');