@fjyueke/arco-mcp 1.0.0

package/metaData/components/textarea/doc.md

@@ -0,0 +1,67 @@
+### 数据录入
+
+# 多行文本框 Textarea
+
+多行文本输入框组件，支持自适应内容高度。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|rows|文本域默认行数|number|-|
+|autosize|自适应内容高度|boolean|-|
+|textareaClass|文本域dom自定义类名|string|-|
+|textareaStyle|文本域dom自定义样式|CSSProperties|-|
+|cloneNodeWhenAutosize|autosize=true 时，是否通过 cloneNode 计算新高度|boolean|false|
+|showStatistics|是否展示字数统计|boolean|true|
+|statisticsMaxlength|字数统计时的最大输入长度|number|-|
+|statisticsLengthCaculator|自定义统计字数方法|(value: string) =\> number|-|
+|onErrStatusChange|字数统计错误状态切换回调，仅当状态发生改变时触发|(hasError: boolean) =\> void|-|
+|onErrValueChange|字数统计错误状态回调，当值有改变时就会触发|(hasError: boolean, currentLength: number, maxLength?: number) =\> void|-|
+|renderStatistics|自定义字数统计内容|(currentLength: number, maxLength: number) =\> ReactNode|-|
+|nativeProps|其他未列出的原生属性，优先级低于已列出的组件属性|TextareaHTMLAttributes\<HTMLTextAreaElement\>|-|
+|id|输入框的id|string|-|
+|name|输入框的name|string|-|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|value|绑定值，传入即受控|string|-|
+|defaultValue|默认值|string|-|
+|maxLength|最大输入长度|number|-|
+|border|边框展示类型|"all" \| "half" \| "bottom" \| "none"|"half"|
+|placeholder|占位文本|string|-|
+|disabled|输入框是否禁用|boolean|-|
+|readOnly|是否只读|boolean|-|
+|autoFocus|是否自动获取焦点，开启后会触发一次onClick事件|boolean|-|
+|blockChangeWhenCompositing|当 ios 输入中文时，输拼音的过程不触发onChange，仅确认选择后触发|boolean|false|
+|label|输入框左侧文本|ReactNode|-|
+|required|是否必填项|boolean|-|
+|validator|正则验证，不符合验证的不允许输入|RegExp \| ((value: string) =\> boolean)|-|
+|prepend|输入框头部内容，在输入框外部|ReactNode \| ((focusing: boolean, inputValue: string) =\> ReactNode)|-|
+|append|输入框尾部内容，在输入框外部|ReactNode \| ((focusing: boolean, inputValue: string) =\> ReactNode)|-|
+|blurBeforeFocus|在聚焦之前blur掉，即切换不同input时会重新弹起键盘，常用于input type切换时重新加载键盘，安卓上有效|boolean|-|
+|clearable|是否有清除按钮|boolean|-|
+|clearShowType|清除按钮展示时机：focus \- 聚焦时展示 value \- 有值则展示 always \- 始终展示|"focus" \| "value" \| "always"|"focus"|
+|preventEventWhenClearing|在聚焦模式下点击清除按钮时，是否要屏蔽对应产生的onBlur和onFocus事件|boolean|true|
+|clearIcon|清除按钮类型，也可自定义|ReactNode|\<IconClear className="clear-icon" /\>|
+|onClear|按下清除按钮回调|(e: TouchEvent\<HTMLElement\>) =\> void|-|
+|prefix|输入框前置内容，在输入框内部，也可自定义|ReactNode|-|
+|suffix|输入框后置内容，在输入框内部，也可自定义|ReactNode|-|
+|onChange|数据改变时触发（失去焦点时）|(e: ChangeEvent\<HTMLTextAreaElement\>, value: string) =\> void|-|
+|onInput|数据改变时触发|(e: ChangeEvent\<HTMLTextAreaElement\>, value: string) =\> void|-|
+|onFocus|输入框聚焦时触发|(e: FocusEvent\<HTMLTextAreaElement, Element\>) =\> void|-|
+|onBlur|输入框失去焦点时触发|(e: FocusEvent\<HTMLTextAreaElement, Element\>) =\> void|-|
+|onClick|点击输入框事件|(e: MouseEvent\<HTMLTextAreaElement, MouseEvent\>) =\> void|-|
+|onKeyUp|原生的keyup事件|(e: KeyboardEvent\<HTMLTextAreaElement\>) =\> void|-|
+|onKeyDown|原生的keydown事件|(e: KeyboardEvent\<HTMLTextAreaElement\>) =\> void|-|
+|onKeyPress|原生的keypress事件|(e: KeyboardEvent\<HTMLTextAreaElement\>) =\> void|-|
+|onPressEnter|按下回车键时触发|(e: KeyboardEvent\<HTMLTextAreaElement\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|textarea|原生文本框 DOM|HTMLTextAreaElement|
+|resize|手动 resize 输入框，autosize=true 时生效|() =\> void|

package/metaData/components/textarea/example/index.tsx

@@ -0,0 +1,258 @@
+import React, {
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useRef,
+    useEffect,
+    useMemo,
+    ReactNode,
+} from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { BasicInputProps } from '../input/props';
+import { useInputLogic } from '../input/hooks';
+
+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;
+}
+
+const Textarea = forwardRef((props: TextareaProps, ref: Ref<TextareaRef>) => {
+    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<HTMLTextAreaElement>(null);
+    const cloneNodeRef = useRef<HTMLTextAreaElement | null>(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) as HTMLTextAreaElement;
+            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' : ''}`,
+            <>
+                <textarea
+                    {...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 ? (
+                    <span
+                        className={cls('statistic-text', {
+                            exceed,
+                        })}
+                    >
+                        {renderStatistics
+                            ? renderStatistics(currentValueLength, maxValueLength)
+                            : `${currentValueLength}/${maxValueLength}`}
+                    </span>
+                ) : null}
+            </>,
+        );
+    }
+
+    return <ContextLayout>{renderTextarea}</ContextLayout>;
+});
+
+/**
+ * 多行文本输入框组件，支持自适应内容高度。
+ * @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');

package/metaData/components/toast/doc.md

@@ -0,0 +1,90 @@
+### 反馈
+
+# 轻提示 Toast
+
+轻提示组件，支持各个场景下调用方法。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|content|提示内容|ReactNode|-|
+|duration|自动关闭的延时（单位: ms），设置为0则不会自动关闭|number|3000|
+|icon|自定义图标|ReactNode|-|
+|layout|内容排列布局|"vertical" \| "horizontal"|"vertical"|
+|transitionDuration|打开关闭动画执行时长（单位: ms）|number|300|
+|close|关闭函数|() =\> void|-|
+|onClose|关闭后的回调函数|() =\> void|-|
+|loading|是否为加载态|boolean|-|
+|loadingIcon|加载图标，传入Icon组件type属性或node|ReactNode|-|
+|loadingInner|加载图标内部元素，仅在 loading 为 true 时生效|string|-|
+|disableBodyTouch|是否禁止toast以外区域的交互|boolean|false|
+|visible|是否显示toast|boolean|false|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|type|toast展示信息类型，不同类型对应不同图标，info表示纯文字信息无图标|"info" \| "success" \| "error" \| "warn"|"info"|
+|direction|toast出现位置|"center" \| "top" \| "bottom"|"center"|
+|typeIconMap|自定义不同类型对应的不同图标|Partial\<Record\<ToastType, ReactNode\>\>|-|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭toast时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+
+> 方法/Methods
+
+|方法名|描述|类型|
+|----------|-------------|------|
+|toast|展示常规提示框|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|info|展示常规提示框，同 Toast\.toast|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|success|展示成功提示框(含成功icon)|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|error|展示错误提示框(含错误icon)|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|loading|展示加载中提示框(含加载中icon)|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+|warn|展示警告提示框(含警告icon)|(config: string \| ToastProps) =\> \{ update: (config: ToastProps) =\> void; close: () =\> void \}|
+
+> ToastType
+
+```
+"success" | "error" | "warn"
+```
+
+> GlobalContextParams
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|prefixCls|组件类名前缀|string|"arco"|
+|system|手动控制当前所在系统，传入后将直接使用传入的值，ssr场景需指定系统初始值时适用|"" \| "pc" \| "android" \| "ios"|""|
+|useDarkMode|是否监听系统原生的暗黑模式变化(prefers\-color\-scheme: dark)以判断是否切为暗黑模式|boolean|false|
+|isDarkMode|是否处于暗黑模式，指定后以指定的值为准|boolean|false|
+|darkModeSelector|当处于暗黑模式时，body上挂载的类名，为空值时不挂载类名|string|"arco-theme-dark"|
+|theme|主题变量，传入后将在线替换css变量，需设置less变量 @use\-css\-vars: 1|Record\<string, string\>|-|
+|locale|国际化语言包配置|ILocale|-|
+|useRtl|是否使用Rtl模式|boolean|false|
+|onDarkModeChange|当系统原生暗黑模式发生变化时触发，useDarkMode=true 时有效|(isDark: boolean) =\> void|-|
+|createRoot|React19 修改了 createRoot 的引入路径，导致组件内部无法直接引入（低react版本会找不到模块）。因此使用 react 19 的用户需从外部传入 createRoot 方法|CreateRootFnType|-|
+
+> ILocale
+
+|参数|描述|类型|
+|----------|-------------|------|
+|locale|语言类型|string|
+|LoadMore|-|\{ loadMoreText: string; loadingText: string; noDataText: string; failLoadText: string; prepareScrollText: string; prepareClickText: string; \}|
+|Picker|-|\{ okText: string; cancelText: string; \}|
+|Tag|-|\{ addTag: string; \}|
+|Dialog|-|\{ okText: string; cancelText: string; \}|
+|SwipeLoad|-|\{ normalText: string; activeText: string; \}|
+|PullRefresh|-|\{ loadingText: string; pullingText: string; finishText: string; loosingText: string; \}|
+|DropdownMenu|-|\{ select: string; \}|
+|Pagination|-|\{ previousPage: string; nextPage: string; \}|
+|Image|-|\{ loadError: string; \}|
+|ImagePicker|-|\{ loadError: string; \}|
+|SearchBar|-|\{ placeholder: string; cancelBtn: string; \}|
+|Stepper|-|\{ minusButtonName: string; addButtonName: string; \}|
+|Keyboard|-|\{ confirm: string; \}|
+|Form|-|\{ required: string; type: \{ email: string; url: string; string: string; number: string; array: string; object: string; boolean: string; \}; number: \{ min: string; max: string; equal: string; range: string; positive: string; negative: string; \}; \.\.\. 4 more \.\.\.; pickerDefaultHint: string; \}|
+|NavBar|-|\{ backBtnAriaLabel: string; \}|
+|Uploader|-|\{ uploadBtn: string; retryUpload: string; \}|