@fjyueke/arco-mcp 1.0.0

package/metaData/components/input/example/hooks.tsx

@@ -0,0 +1,259 @@
+import React, { useState, ReactNode, useEffect, useRef } from 'react';
+import { cls, nextTick } from '@arco-design/mobile-utils';
+import { BasicInputProps } from './props';
+import IconClear from '../icon/IconClear';
+import { useSystem } from '../_helpers';
+
+export type InputEleType = HTMLInputElement | HTMLTextAreaElement;
+
+export function useInputLogic(
+    props: BasicInputProps<InputEleType>,
+    inputRef: React.MutableRefObject<InputEleType | null>,
+) {
+    const {
+        value,
+        defaultValue,
+        validator,
+        onChange,
+        onInput,
+        className,
+        style,
+        label,
+        required,
+        prepend,
+        append,
+        blurBeforeFocus,
+        onKeyDown,
+        onPressEnter,
+        onFocus,
+        onBlur,
+        onClick,
+        disabled,
+        border = 'half',
+        prefix,
+        suffix,
+        clearable,
+        clearShowType = 'focus',
+        clearIcon = <IconClear />,
+        preventEventWhenClearing = true,
+        onClear,
+        autoFocus,
+        blockChangeWhenCompositing,
+    } = props;
+    const [inputValue, setInputValue] = useState(value || defaultValue || '');
+    const [showClear, toggleClear] = useState(
+        () =>
+            clearShowType === 'always' ||
+            (clearShowType === 'value' && Boolean(value || defaultValue)),
+    );
+    const compositingRef = useRef(false);
+    const [isFocusing, setIsFocusing] = useState(false);
+    const shouldPreventEvent = useRef(false);
+    const actualInputValue = value !== void 0 ? value : inputValue;
+    const system = useSystem();
+    const wrapRef = useRef<HTMLDivElement | null>(null);
+    const needComposition = system === 'ios' && blockChangeWhenCompositing;
+    useEffect(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                inputRef.current && inputRef.current.click();
+            }, 100);
+        }
+    }, []);
+
+    useEffect(() => {
+        const handleCompositionStart = () => {
+            compositingRef.current = true;
+        };
+        const handleCompositionEnd = e => {
+            compositingRef.current = false;
+            handleChange(e);
+        };
+        if (inputRef.current && needComposition) {
+            inputRef.current.addEventListener('compositionstart', handleCompositionStart);
+            inputRef.current.addEventListener('compositionend', handleCompositionEnd);
+        }
+        return () => {
+            if (inputRef.current && needComposition) {
+                inputRef.current.removeEventListener('compositionstart', handleCompositionStart);
+                inputRef.current.removeEventListener('compositionend', handleCompositionEnd);
+            }
+        };
+    }, [needComposition]);
+
+    useEffect(() => {
+        // 处理受控模式下的showClear
+        // @en Handling showClear in controlled mode
+        if (clearShowType === 'value' && value !== void 0) {
+            toggleClear(Boolean(value));
+        }
+    }, [value]);
+
+    function changeValue(nowValue: string, callback = () => {}) {
+        if (nowValue && validator) {
+            if (typeof validator === 'function') {
+                if (!validator(nowValue)) {
+                    return;
+                }
+            } else if (!validator.test(nowValue)) {
+                return;
+            }
+        }
+        // 处理非受控模式下的showClear
+        // @en Handling showClear in uncontrolled mode
+        if (clearShowType === 'value' && value === void 0) {
+            toggleClear(Boolean(nowValue));
+        }
+        setInputValue(nowValue);
+        callback();
+    }
+
+    function handleChange(e: React.ChangeEvent<InputEleType>) {
+        if (needComposition && compositingRef.current) {
+            return;
+        }
+        const newValue = e.target.value;
+        changeValue(newValue, () => {
+            onChange && onChange(e, newValue);
+        });
+    }
+
+    function handleInput(e: any) {
+        const newValue = e.target.value;
+        changeValue(newValue, () => {
+            onInput && onInput(e, newValue);
+        });
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<InputEleType>) {
+        if (e.keyCode === 13) {
+            onPressEnter && onPressEnter(e);
+        }
+        onKeyDown && onKeyDown(e);
+    }
+
+    function handleFocus(e: React.FocusEvent<InputEleType>) {
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+            shouldPreventEvent.current = false;
+            return;
+        }
+        setIsFocusing(true);
+        clearShowType === 'focus' && toggleClear(true);
+        onFocus && onFocus(e);
+    }
+
+    function handleBlur(e: React.FocusEvent<InputEleType>) {
+        if (preventEventWhenClearing && shouldPreventEvent.current) {
+            return;
+        }
+        setIsFocusing(false);
+        clearShowType === 'focus' && toggleClear(false);
+        onBlur && onBlur(e);
+    }
+
+    function handleClick(e: React.MouseEvent<InputEleType>) {
+        // 安卓才会有键盘切换不过来的问题，ios不开启此项，因为blur之后不能再自动focus
+        // @en Android will have the problem that the keyboard cannot be switched. iOS does not enable this, because it can no longer automatically focus after blur.
+        if (blurBeforeFocus && system === 'android' && !isFocusing) {
+            inputRef.current && inputRef.current.blur();
+            nextTick(() => {
+                inputRef.current && inputRef.current.focus();
+            });
+        } else {
+            inputRef.current && inputRef.current.focus();
+        }
+        onClick && onClick(e);
+    }
+
+    function handleClear(e: React.TouchEvent<HTMLElement>) {
+        // 不展示清除按钮时不触发事件
+        // @en No event fired when clear button is not displayed
+        if (!clearable || !showClear) {
+            return;
+        }
+        changeValue('', () => {
+            onClear && onClear(e);
+            // 当点击clear前是focus时强制执行focus
+            // @en Enforce focus when focus is before clicking clear
+            if (isFocusing) {
+                if (preventEventWhenClearing) {
+                    shouldPreventEvent.current = true;
+                    // 一段时间未执行blur或focus则重置，避免对下次事件循环造成影响
+                    // @en If blur or focus is not executed for a period of time, it will be reset to avoid affecting the next event loop
+                    setTimeout(() => {
+                        shouldPreventEvent.current = false;
+                    }, 200);
+                }
+                nextTick(() => {
+                    inputRef.current && inputRef.current.focus();
+                });
+            }
+        });
+    }
+
+    function renderPendNode(
+        pend?: ReactNode | ((focusing: boolean, keyword: string) => ReactNode),
+    ) {
+        return typeof pend === 'function' ? pend(isFocusing, actualInputValue) : pend;
+    }
+
+    function renderWrapper(prefixCls: string, type: string, children: ReactNode) {
+        // handleClear必须早于handleBlur执行，pc端仅mousedown事件触发早于blur，移动端touch相关事件均早于blur
+        // @en handleClear must be executed earlier than handleBlur
+        // @en only the mousedown event on the PC side is triggered earlier than blur, and the touch-related events on the mobile side are all earlier than blur
+        const clearEvent = { [system === 'pc' ? 'onMouseDown' : 'onTouchEnd']: handleClear };
+        return (
+            <div
+                role="search"
+                className={`${prefixCls}-container all-border-box ${className || ''}`}
+                style={style}
+                ref={wrapRef}
+            >
+                {renderPendNode(prepend)}
+                <div
+                    className={cls(
+                        `${prefixCls}-wrap`,
+                        type,
+                        `border-${border}`,
+                        system,
+                        { disabled },
+                        { prefix },
+                        { suffix },
+                    )}
+                >
+                    {label || prefix ? (
+                        <div className={`${prefixCls}-prefix`}>
+                            {label ? (
+                                <div className={cls(`${prefixCls}-label`, { required })}>
+                                    {label}
+                                </div>
+                            ) : (
+                                prefix
+                            )}
+                        </div>
+                    ) : null}
+                    {children}
+                    {clearable && showClear ? (
+                        <div className={`${prefixCls}-clear`} {...clearEvent}>
+                            {clearIcon}
+                        </div>
+                    ) : null}
+                    {suffix ? <div className={`${prefixCls}-suffix`}>{suffix}</div> : null}
+                </div>
+                {renderPendNode(append)}
+            </div>
+        );
+    }
+
+    return {
+        inputValue: actualInputValue,
+        handleChange,
+        handleInput,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+        handleClick,
+        renderWrapper,
+        wrapRef,
+    };
+}

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

@@ -0,0 +1,134 @@
+import React, { forwardRef, Ref, useImperativeHandle, useRef } from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { BasicInputProps } from './props';
+import { useInputLogic } from './hooks';
+
+export interface InputProps extends BasicInputProps {
+    /**
+     * 输入框类型
+     * @en Input box type
+     * @default "text"
+     */
+    type?: string;
+    /**
+     * 检查控件值的正则表达式
+     * @en Regular expression to check the value of input box
+     */
+    pattern?: string;
+    /**
+     * 输入框dom自定义类名
+     * @en Custom classname for input DOM
+     */
+    inputClass?: string;
+    /**
+     * 输入框dom自定义样式
+     * @en Custom style for input DOM
+     */
+    inputStyle?: React.CSSProperties;
+    /**
+     * 其他未列出的原生属性，优先级低于已列出的组件属性
+     *  @en Other unlisted native properties have lower priority than listed component properties
+     */
+    nativeProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * 无障碍label
+     * @en accessible label
+     */
+    ariaLabel?: string;
+}
+
+export interface InputRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+    /**
+     * 原生输入框 DOM
+     * @en Native input DOM
+     */
+    input: HTMLInputElement | null;
+}
+
+const Input = forwardRef((props: InputProps, ref: Ref<InputRef>) => {
+    const {
+        id,
+        name,
+        maxLength,
+        placeholder,
+        readOnly,
+        onKeyUp,
+        onKeyPress,
+        type = 'text',
+        disabled,
+        pattern,
+        inputClass,
+        inputStyle,
+        nativeProps = {},
+        ariaLabel = '',
+    } = props;
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const {
+        inputValue,
+        handleChange,
+        handleInput,
+        handleKeyDown,
+        handleFocus,
+        handleBlur,
+        handleClick,
+        renderWrapper,
+        wrapRef,
+    } = useInputLogic(props, inputRef);
+
+    useImperativeHandle(ref, () => ({
+        dom: wrapRef.current,
+        input: inputRef.current,
+    }));
+
+    function renderInput({ prefixCls }) {
+        const prefix = `${prefixCls}-input`;
+        return renderWrapper(
+            prefix,
+            `${type} single-line`,
+            <input
+                {...nativeProps}
+                id={id}
+                name={name}
+                maxLength={maxLength}
+                placeholder={placeholder}
+                readOnly={readOnly}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onKeyUp={onKeyUp}
+                onKeyPress={onKeyPress}
+                ref={inputRef}
+                className={cls(prefix, inputClass)}
+                style={inputStyle}
+                value={inputValue}
+                type={type}
+                disabled={disabled}
+                pattern={pattern}
+                onChange={handleChange}
+                onInput={handleInput}
+                onKeyDown={handleKeyDown}
+                onClick={handleClick}
+                aria-disabled={disabled}
+                aria-label={ariaLabel}
+            />,
+        );
+    }
+
+    return <ContextLayout>{renderInput}</ContextLayout>;
+});
+
+/**
+ * 输入框组件，支持添加前后缀。
+ * @en The input box, supports adding prefixes and suffixes.
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 输入框
+ * @name_en Input
+ * @displayName Input
+ */
+export default componentWrapper(Input, 'Input');

package/metaData/components/input/example/props.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+
+export interface BasicInputProps<T = HTMLInputElement> {
+    /**
+     * 输入框的id
+     * @en Input id
+     */
+    id?: string;
+    /**
+     * 输入框的name
+     * @en Input name
+     */
+    name?: string;
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 绑定值，传入即受控
+     * @en Binding value, if input, the component is controlled
+     */
+    value?: string;
+    /**
+     * 默认值
+     * @en Default value
+     */
+    defaultValue?: string;
+    /**
+     * 最大输入长度
+     * @en Maximum input length
+     */
+    maxLength?: number;
+    /**
+     * 边框展示类型
+     * @en Border display type
+     * @default "half"
+     */
+    border?: 'all' | 'half' | 'bottom' | 'none';
+    /**
+     * 占位文本
+     * @en Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * 输入框是否禁用
+     * @en Whether the input box is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 是否只读
+     * @en Read-only
+     */
+    readOnly?: boolean;
+    /**
+     * 是否自动获取焦点，开启后会触发一次onClick事件
+     * @en Whether to automatically get the focus, it will trigger an onClick event once after being enabled
+     */
+    autoFocus?: boolean;
+    /**
+     * 当 ios 输入中文时，输拼音的过程不触发onChange，仅确认选择后触发
+     * @en When inputting Chinese on ios, onChange is not triggered during pinyin input, but only after confirming the selection
+     * @default false
+     */
+    blockChangeWhenCompositing?: boolean;
+    /**
+     * 输入框左侧文本
+     * @en text to the left of the input box
+     */
+    label?: string | React.ReactNode;
+    /**
+     * 是否必填项
+     * @en Whether it is required
+     */
+    required?: boolean;
+    /**
+     * 正则验证，不符合验证的不允许输入
+     * @en Regular validation, input is not allowed if it does not meet the validation
+     */
+    validator?: RegExp | ((value: string) => boolean);
+    /**
+     * 输入框头部内容，在输入框外部
+     * @en The content of the header of the input box, outside the input box
+     */
+    prepend?: React.ReactNode | ((focusing: boolean, inputValue: string) => React.ReactNode);
+    /**
+     * 输入框尾部内容，在输入框外部
+     * @en The content at the end of the input box, outside the input box
+     */
+    append?: React.ReactNode | ((focusing: boolean, inputValue: string) => React.ReactNode);
+    /**
+     * 在聚焦之前blur掉，即切换不同input时会重新弹起键盘，常用于input type切换时重新加载键盘，安卓上有效
+     * @en Blur before focusing, that is, the keyboard will be re-bounced when switching between different inputs. It is often used to reload the keyboard when the input type is switched. It is valid on Android.
+     */
+    blurBeforeFocus?: boolean;
+    /**
+     * 是否有清除按钮
+     * @en whether there is a clear button
+     */
+    clearable?: boolean;
+    /**
+     * 清除按钮展示时机：focus - 聚焦时展示 value - 有值则展示 always - 始终展示
+     * @en Clear button display timing: focus - display when focused, value - display when there is value, always - always display
+     * @default "focus"
+     */
+    clearShowType?: 'focus' | 'value' | 'always';
+    /**
+     * 在聚焦模式下点击清除按钮时，是否要屏蔽对应产生的onBlur和onFocus事件
+     * @en Whether to block the onBlur and onFocus events generated when the clear button is clicked in focus mode
+     * @default true
+     */
+    preventEventWhenClearing?: boolean;
+    /**
+     * 清除按钮类型，也可自定义
+     * @en Clear button type, also customizable
+     * @default \<IconClear className="clear-icon" /\>
+     */
+    clearIcon?: React.ReactNode;
+    /**
+     * 按下清除按钮回调
+     * @en Callback when clear button is pressed
+     */
+    onClear?: (e: React.TouchEvent<HTMLElement>) => void;
+    /**
+     * 输入框前置内容，在输入框内部，也可自定义
+     * @en The prefix of the input box, inside the input box, can also be customized
+     */
+    prefix?: React.ReactNode;
+    /**
+     * 输入框后置内容，在输入框内部，也可自定义
+     * @en The suffix content of the input box, inside the input box, can also be customized
+     */
+    suffix?: React.ReactNode;
+    /**
+     * 数据改变时触发（失去焦点时）
+     * @en Fired when the data changes (when bluring the focus)
+     */
+    onChange?: (e: React.ChangeEvent<T>, value: string) => void;
+    /**
+     * 数据改变时触发
+     * @en Callback when data changes
+     */
+    onInput?: (e: React.ChangeEvent<T>, value: string) => void;
+    /**
+     * 输入框聚焦时触发
+     * @en Callback when the input box is focused
+     */
+    onFocus?: (e: React.FocusEvent<T>) => void;
+    /**
+     * 输入框失去焦点时触发
+     * @en Callback when the input box is blured
+     */
+    onBlur?: (e: React.FocusEvent<T>) => void;
+    /**
+     * 点击输入框事件
+     * @en Callback when clicking the input box
+     */
+    onClick?: (e: React.MouseEvent<T>) => void;
+    /**
+     * 原生的keyup事件
+     * @en Native keyup event
+     */
+    onKeyUp?: (e: React.KeyboardEvent<T>) => void;
+    /** 原生的keydown事件
+     * @en Native keydown event
+     */
+    onKeyDown?: (e: React.KeyboardEvent<T>) => void;
+    /**
+     * 原生的keypress事件
+     * @en Native keypress event
+     */
+    onKeyPress?: (e: React.KeyboardEvent<T>) => void;
+    /**
+     * 按下回车键时触发
+     * @en Callback when the enter key is pressed
+     */
+    onPressEnter?: (e: React.KeyboardEvent<T>) => void;
+}

package/metaData/components/keyboard/doc.md

@@ -0,0 +1,73 @@
+### 数据录入
+
+# 数字键盘 Keyboard
+
+数字键盘组件
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|normalKeyClass|常规键位自定义类名|string|-|
+|normalKeyStyle|常规键位自定义样式|CSSProperties|-|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|type|键盘展示类型，不同类型有不同布局。number \- 纯数字常规键盘，confirm \- 带确认按钮的键盘，tool \- 带运算符的键盘|"number" \| "confirm" \| "tool"|"number"|
+|randomOrder|是否打乱键盘中的数字展示位置|boolean|必填|
+|title|键盘顶部展示标题内容，样式纯自定义|ReactNode|-|
+|rightColumns|自定义渲染数字右侧（第四列）的内容|ReactNode|-|
+|confirmClosable|点击确认后是否自动关闭键盘|boolean|false|
+|confirmButton|自定义渲染确认按钮内部内容|ReactNode|-|
+|deleteButton|自定义渲染删除按钮内部内容|ReactNode|-|
+|keyboardButton|自定义渲染收起键盘按钮内部内容|ReactNode|-|
+|close|收起键盘回调|(e?: MouseEvent\<HTMLElement, MouseEvent\>) =\> \{\}|必填|
+|onConfirm|点击确认按钮回调|() =\> \{\}|-|
+|onDelete|点击删除按钮回调|() =\> \{\}|-|
+|onChange|点击常规按钮回调|(data: ReactText) =\> \{\}|-|
+|direction|菜单滑出方向|"left" \| "right" \| "top" \| "bottom"|"bottom"|
+|needBottomOffset|从底部滑出的菜单内容是否适配ipx底部|boolean|false|
+|translateZ|\[即将废弃\] 开启translateZ强制提升|boolean|false|
+|maskTransitionTimeout|菜单蒙层动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionTimeout|菜单内容动画时长|number \| \{ appear?: number; enter?: number; exit?: number; \}|{ enter: 450, exit: 240 }|
+|contentTransitionType|内容过渡动画类名|string|\`slide-from-${props.direction}\`|
+|maskClass|自定义蒙层类名|string|-|
+|maskStyle|自定义蒙层样式|CSSProperties|-|
+|contentClass|自定义内容类名|string|-|
+|contentStyle|自定义内容样式|CSSProperties|-|
+|visible|是否展示菜单（受控）|boolean|必填|
+|maskTransitionType|蒙层过渡动画类名|string|"fade"|
+|contentTransitionVarType|内容过渡动画类名变量标识|string|-|
+|children|菜单内部内容|ReactNode|-|
+|maskClosable|点击蒙层是否关闭菜单|boolean|true|
+|animatingClosable|执行进场动画时点击蒙层是否可关闭菜单|boolean|false|
+|mountOnEnter|是否在打开菜单时再加载内容|boolean|true|
+|unmountOnExit|是否在退出时卸载内容|boolean|true|
+|orientationDirection|transform方向，用于通过transform模拟横屏的情况|"left" \| "right" \| "top" \| "bottom"|"top"|
+|preventBodyScroll|弹窗打开时是否禁止body的滚动|boolean|true|
+|initialBodyOverflow|页面初始 overflow 状态，即关闭弹窗时 overflow 应该还原的状态|string|第一个全屏组件（弹窗、toast等）打开时页面overflow值|
+|gestureOutOfControl|是否禁用滚动容器手势判断，禁用后交给业务方自己判断|boolean|false|
+|onClose|关闭后回调（动画执行完毕）|(scene?: string) =\> void|-|
+|onOpen|打开后回调（动画执行完毕）|() =\> void|-|
+|onMaskClick|点击蒙层回调，maskClosable=false时也会触发|() =\> void|-|
+|onTouchMove|弹窗的touchmove回调|(e: TouchEvent, prevented: boolean, direction: "x" \| "y") =\> void|-|
+|onPreventTouchMove|非滚动区域或滚动到顶部及底部时的触摸事件回调|(e: TouchEvent, direction: "x" \| "y") =\> void|-|
+|getContainer|获取挂载容器|() =\> HTMLElement|-|
+|getScrollContainer|内容内部滚动区域容器，在该容器中未滚动到顶部或底部时会释放滚动|() =\> HTMLElement \| HTMLElement\[\]|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|keyboard|最外层 DOM 元素|HTMLDivElement|
+|dom|最外层元素 DOM|HTMLDivElement|
+|mask|蒙层 DOM|HTMLDivElement|
+|content|内容 DOM|HTMLDivElement|
+|setCloseScene|在关闭弹窗前修改 onClose 的 scene 参数值|(scene: string) =\> void|
+
+> DirectionType
+
+```
+"left" | "right" | "top" | "bottom"
+```