@fjyueke/arco-mcp 1.0.0

package/metaData/components/image-preview/example/methods.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { appendElementById, removeElement } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
+import { GlobalContextParams } from '../context-provider';
+
+export interface OpenBaseProps {
+    onClose?: () => void;
+    close: (e) => void;
+    openIndex: number;
+    images: any[];
+    getContainer?: () => HTMLElement;
+}
+
+export function open<P extends OpenBaseProps>(Component: React.FunctionComponent<P>) {
+    type Config = Omit<P, 'close'>;
+    return (config: Config, context?: GlobalContextParams) => {
+        const baseProps: Config & {
+            // 从config继承的属性
+            // @en Properties inherited from config
+            getContainer?: () => HTMLElement;
+            key?: string;
+            openIndex: P['openIndex'];
+            // 强制定义的属性
+            // @en Mandatory properties
+            onClose?: P['onClose'];
+            close: P['close'];
+        } = {
+            ...(config || {}),
+            close: () => {},
+        };
+
+        // 不同的key用不同的容器挂载
+        // @en Different keys are mounted in different containers
+        const id = `_ARCO_IMAGE_PREVIEW_DIV_${baseProps.key || ''}_`;
+        const { child: div } = appendElementById(id, baseProps.getContainer);
+        let leaving = false;
+        const { render } = new ReactDOMRender(Component, div, context);
+        let dynamicProps = { ...baseProps, getContainer: () => div } as P;
+
+        function update(newConfig: Config) {
+            dynamicProps = {
+                ...dynamicProps,
+                ...(newConfig || {}),
+            };
+            render(dynamicProps);
+        }
+
+        function close() {
+            leaving = true;
+            dynamicProps.openIndex = -1;
+            render(dynamicProps);
+        }
+
+        dynamicProps.close = close;
+        dynamicProps.onClose = () => {
+            baseProps.onClose && baseProps.onClose();
+            removeElement(div);
+        };
+        dynamicProps.openIndex = -1;
+        render(dynamicProps);
+        setTimeout(() => {
+            if (leaving) return;
+            dynamicProps.openIndex = baseProps.openIndex;
+            render(dynamicProps);
+        }, 20);
+
+        return {
+            close,
+            update,
+        };
+    };
+}

package/metaData/components/index-bar/doc.md

@@ -0,0 +1,83 @@
+### 导航
+
+# 索引栏 IndexBar
+
+索引栏组件
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|defaultIndex|默认要激活的索引|ReactText|-|
+|disableSidebar|是否开启侧边栏功能|boolean|false|
+|sticky|是否开启索引的自动吸顶效果|boolean|true|
+|groups|索引栏内容|IndexBarGroupItem\<IndexBarBaseData\>\[\]|-|
+|children|自定义内容的渲染，内容必须是IndexBar\.Group组件|ReactNode|-|
+|tipType|侧边栏索引提示的样式类型 \- sweat 水滴形 \- toast 轻提示 \- none 关闭提示|"none" \| "sweat" \| "toast"|"toast"|
+|scrollDuration|手动调用scrollToIndex时，滚动动画的执行时间|number|0|
+|scrollBezier|手动调用scrollToIndex时，滚动的动画曲线|\[number, number, number, number\]|-|
+|onChange|激活的索引改变时的回调，第一个参数是新的索引，第二个参数是改变方式：\- swipe 手动滑动页面触发变化 \- sidebar 侧边栏点击触发变化 \- manual 手动调用scrollToIndex触发|(index: ReactText, trigger: IndexBarChangeTrigger) =\> void|-|
+|onGroupItemClick|IndexBar\.Group中某个子项被点击时的回调，使用JSX的写法时该回调不会生效，请在IndexBar\.Group上绑定对应属性|(index: ReactText, itemData: IndexBarBaseData, itemIndex: number) =\> void|-|
+|renderSideBarItem|自定义侧边栏每个子项的内容渲染|(index: ReactText) =\> ReactNode|-|
+|renderSideBar|自定义侧边栏渲染|(Content: ReactNode) =\> ReactElement\<any, string \| ((props: any) =\> ReactElement\<any, any\>) \| (new (props: any) =\> Component\<any, any, any\>)\>|-|
+|renderTip|自定义使用侧边栏改变索引时，渲染提示的内容|(index: ReactText) =\> ReactNode|-|
+|renderStickyItem|自定义IndexBar\.Group的索引标题内容渲染，使用JSX的写法时该回调不会生效，请在IndexBar\.Group上绑定对应属性|(index: ReactText) =\> ReactNode|-|
+|renderGroupItem|自定义IndexBar\.Group的子项内容渲染，使用JSX的写法时该回调不会生效，请在IndexBar\.Group上绑定对应属性|(index: ReactText, itemData: IndexBarBaseData, itemIndex: number) =\> ReactNode|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层 DOM 元素|HTMLDivElement|
+|scrollToIndex|手动滚动到指定的索引位置|(index?: ReactText, rightNow?: boolean) =\> void|
+|recalculatePosition|局部滚动模式下，如果容器外部还有嵌套滚动，可主动调用此方法，让 sticky 的元素主动更新 fixed 位置|(index?: ReactText) =\> void|
+
+> IndexBar.Group
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|children|自定义内容的渲染，有自定义内容优先渲染自定义内容，否则渲染list传递的数据|ReactNode|-|
+|listKey|自定义提取List的key作为列表渲染的key，默认选取listItem的所在数组位置|(data: IndexBarBaseData, listItemIndex: number) =\> ReactText|-|
+|onGroupItemClick|IndexBar\.Group中某个子项被点击时的回调|(index: ReactText, itemData: IndexBarBaseData, itemIndex: number) =\> void|-|
+|renderStickyItem|自定义IndexBar\.Group的索引标题内容渲染|(index: ReactText) =\> ReactNode|-|
+|renderGroupItem|自定义IndexBar\.Group的子项内容渲染|(index: ReactText, itemData: IndexBarBaseData, itemIndex: number) =\> ReactNode|-|
+|index|IndexBarGroup对应的索引|ReactText|必填|
+|list|IndexBarGroup中要渲染的列表数据，如果已经传递了children这个属性，则list这个属性不会生效|IndexBarBaseData\[\]|-|
+
+> IndexBarGroupItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|Data|-|any|
+|index|IndexBarGroup对应的索引|ReactText|
+|list|IndexBarGroup中要渲染的列表数据，如果已经传递了children这个属性，则list这个属性不会生效|IndexBarBaseData\[\]|
+
+> IndexBarBaseData
+
+|参数|描述|类型|
+|----------|-------------|------|
+|content|内容|ReactNode|
+
+> IndexBarTipType
+
+```
+"none" | "sweat" | "toast"
+```
+
+> IndexBarChangeTrigger
+
+```
+"swipe" | "manual" | "sidebar"
+```
+
+> IndexBarGroupRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|组件外层dom元素|HTMLDivElement|

package/metaData/components/index-bar/example/group.tsx

@@ -0,0 +1,93 @@
+import { cls } from '@arco-design/mobile-utils';
+import React, { forwardRef, Ref, useContext, useImperativeHandle, useRef } from 'react';
+import { GlobalContext } from '../context-provider';
+import Sticky from '../sticky';
+import { IndexBarContext } from './context';
+import { IndexBarBaseData, IndexBarGroupProps, IndexBarGroupRef } from './type';
+
+export const IndexBarGroup = forwardRef(
+    <Data extends IndexBarBaseData = IndexBarBaseData>(
+        props: IndexBarGroupProps<Data>,
+        ref: Ref<IndexBarGroupRef>,
+    ) => {
+        const {
+            index: groupIndex,
+            list,
+            className,
+            style,
+            children,
+            listKey,
+            onGroupItemClick,
+            renderGroupItem,
+            renderStickyItem,
+        } = props;
+        const { prefixCls } = useContext(GlobalContext);
+        // 有可能是IndexBar.Group的写法，因此sticky从context中获得
+        const { sticky, getScrollContainer, activeIndex, updateRef } = useContext(IndexBarContext);
+        const domRef = useRef<HTMLDivElement | null>(null);
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+
+        // 用户自定义列表元素vnode的key
+        const formatGetListKey = (data: Data, index: number) => listKey?.(data, index) ?? index;
+
+        const renderChildren = () =>
+            children ??
+            list?.map((data, index) => (
+                <div
+                    className={`${prefixCls}-index-bar-group-item`}
+                    key={formatGetListKey(data, index)}
+                    onClick={() => onGroupItemClick?.(groupIndex, data, index)}
+                >
+                    {renderGroupItem ? renderGroupItem(groupIndex, data, index) : data.content}
+                </div>
+            )) ??
+            null;
+
+        const renderIndexTitle = () => {
+            if (renderStickyItem) {
+                return renderStickyItem(groupIndex);
+            }
+            const titleDom = (
+                <div
+                    className={cls(`${prefixCls}-index-bar-group-title`, {
+                        [`${prefixCls}-index-bar-group-active`]: activeIndex === groupIndex,
+                    })}
+                >
+                    {groupIndex}
+                </div>
+            );
+            const groupDom = domRef.current;
+            return sticky ? (
+                <Sticky
+                    getContainer={() => groupDom as HTMLDivElement}
+                    stickyStyle="absolute"
+                    getScrollContainer={getScrollContainer as () => HTMLDivElement}
+                    ref={stickyRef => {
+                        if (stickyRef) {
+                            updateRef(groupIndex, stickyRef);
+                        }
+                    }}
+                >
+                    {titleDom}
+                </Sticky>
+            ) : (
+                titleDom
+            );
+        };
+
+        return (
+            <div
+                className={cls(`${prefixCls}-index-bar-group`, className)}
+                style={style}
+                data-index={groupIndex}
+                ref={domRef}
+            >
+                {renderIndexTitle()}
+                {renderChildren()}
+            </div>
+        );
+    },
+);

package/metaData/components/index-bar/example/index.tsx

@@ -0,0 +1,271 @@
+import { cls, componentWrapper, scrollWithAnimation } from '@arco-design/mobile-utils';
+import lodashThrottle from 'lodash.throttle';
+import React, {
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useMemo,
+    useState,
+    useEffect,
+} from 'react';
+import { ContextLayout } from '../context-provider';
+import { IndexBarContext } from './context';
+import { IndexBarGroup as Group } from './group';
+import { IndexBarSideBar } from './side-bar';
+import type {
+    IndexBarBaseData,
+    IndexBarChangeTrigger,
+    IndexBarIndexType,
+    IndexBarProps,
+    IndexBarRef,
+    IndexBarContext as IndexBarContentType,
+    IndexBarScrollParams,
+    IndexBarGroupProps,
+} from './type';
+import {
+    filterValidIndexBarChild,
+    getGroupDomFromIndex,
+    getFormatIndex,
+    isValidIndex,
+} from './utils';
+import { StickyRef } from '../sticky';
+
+export type {
+    IndexBarProps,
+    IndexBarRef,
+    IndexBarGroupProps,
+    IndexBarGroupRef,
+    IndexBarChangeTrigger,
+    IndexBarIndexType,
+    IndexBarTipType,
+} from './type';
+
+const IndexBar = forwardRef(
+    <Data extends IndexBarBaseData = IndexBarBaseData>(
+        props: IndexBarProps<Data>,
+        ref: Ref<IndexBarRef>,
+    ) => {
+        const {
+            className = '',
+            style,
+            children,
+            sticky = true,
+            groups = [],
+            tipType = 'toast',
+            defaultIndex,
+            scrollBezier,
+            scrollDuration = 0,
+            disableSidebar = false,
+            onChange,
+            onGroupItemClick,
+            renderSideBar,
+            renderSideBarItem,
+            renderTip,
+            renderStickyItem,
+            renderGroupItem,
+        } = props;
+        // 最外层dom元素的ref
+        const domRef = useRef<HTMLDivElement | null>(null);
+        // 所有group的容器dom，domRef的内容就是contanerRef和sidebar的内容
+        const containerRef = useRef<HTMLDivElement | null>(null);
+        // 过滤掉jsx写法中，奇怪的child
+        const formatChildren = filterValidIndexBarChild(children);
+        // 所有的索引内容，优先从props.groups中获取，再从formatChildren中获取
+        const indexes = useMemo(() => {
+            if (groups.length) {
+                return groups.map(group => group.index);
+            }
+            return formatChildren.map(child => (child.props as IndexBarGroupProps).index);
+        }, [children, groups]);
+        const groupRefs = useRef<Record<IndexBarIndexType, StickyRef>>({});
+        // 当前激活的Index
+        const [activeIndex, setActiveIndex] = useState<IndexBarIndexType | undefined>(
+            () => defaultIndex ?? indexes?.[0],
+        );
+        // 给IndexBarGroup用的上下文，主要是为了兼容jsx的写法
+        const contextValue = useMemo<IndexBarContentType>(
+            () => ({
+                sticky,
+                getScrollContainer: () => containerRef.current as HTMLDivElement,
+                activeIndex,
+                updateRef: (groupIndex, stickyRef) => {
+                    groupRefs.current[groupIndex] = stickyRef;
+                },
+            }),
+            [sticky, activeIndex],
+        );
+        // 用户是否正在触碰sidebar, 如果为true的话，禁用handleScroll的处理
+        const isScrollHandlerDisabledRef = useRef(false);
+
+        const handleChangeActiveIndex = (
+            index: IndexBarIndexType,
+            type: IndexBarChangeTrigger,
+        ): void => {
+            setActiveIndex(oldActiveIndex => {
+                const newActiveIndex = getFormatIndex(index, oldActiveIndex);
+                // 和上一次激活的acitveIndex不同，再触发onChange事件
+                if (newActiveIndex !== oldActiveIndex) {
+                    onChange?.(newActiveIndex, type);
+                }
+                return newActiveIndex;
+            });
+        };
+
+        // 要滚动到哪个指定的index
+        const handleScrollIntoIndex = (params: IndexBarScrollParams) => {
+            const { index, type, rightNow = false } = params;
+            // 不传index默认走第一个index
+            const formatIndex = index ?? indexes?.[0];
+            const containerDom = containerRef.current;
+            if (!isValidIndex(index) || !containerDom) {
+                return;
+            }
+            // 寻找Index对应的groupDom
+            const groupDom = getGroupDomFromIndex(containerDom, formatIndex);
+            if (groupDom) {
+                handleChangeActiveIndex(formatIndex, type);
+                const duration = rightNow ? 0 : scrollDuration;
+                const targetScrollTop = groupDom.offsetTop;
+                // 将屏幕滚动到groupDom
+                // 手动触发需要禁用handleScroll事件
+                if (type === 'manual') {
+                    isScrollHandlerDisabledRef.current = true;
+                    setTimeout(() => {
+                        isScrollHandlerDisabledRef.current = false;
+                    }, duration);
+                }
+                if (duration > 0) {
+                    scrollWithAnimation(
+                        containerDom.scrollTop,
+                        targetScrollTop,
+                        top => (containerDom.scrollTop = top),
+                        duration,
+                        scrollBezier,
+                    );
+                } else {
+                    containerDom.scrollTop = targetScrollTop;
+                }
+            }
+        };
+
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+            scrollToIndex(index, rightNow) {
+                if (isValidIndex(index)) {
+                    handleScrollIntoIndex({
+                        index,
+                        rightNow,
+                        type: 'manual',
+                    });
+                }
+            },
+            recalculatePosition(targetIndex) {
+                const formatIndex = targetIndex ?? activeIndex;
+                if (formatIndex) {
+                    const targetStickyRef = groupRefs.current[formatIndex];
+                    if (targetStickyRef && targetStickyRef.recalculatePosition) {
+                        targetStickyRef.recalculatePosition();
+                    }
+                }
+            },
+        }));
+
+        const renderChildren = () => {
+            if (formatChildren.length) {
+                return formatChildren;
+            }
+            return groups?.map(group => (
+                <Group
+                    index={group.index}
+                    key={group.index}
+                    list={group.list}
+                    onGroupItemClick={onGroupItemClick}
+                    renderGroupItem={renderGroupItem}
+                    renderStickyItem={renderStickyItem}
+                />
+            ));
+        };
+
+        useEffect(() => {
+            const handleScroll = lodashThrottle(() => {
+                // 用户正在触碰sidebar和手动触发scroll时禁用滚动事件的处理
+                if (!containerRef.current || isScrollHandlerDisabledRef.current) {
+                    return;
+                }
+
+                // 根据滚动的距离，获取处于屏幕最顶部的group是哪个
+                const scrollTop = containerRef.current.scrollTop;
+                for (let i = 0; i < containerRef.current.children.length; i++) {
+                    const child = containerRef.current.children[i] as HTMLDivElement;
+                    if (!child || !child.dataset || typeof child.dataset.index === 'undefined') {
+                        continue;
+                    }
+                    if (child.offsetTop + child.clientHeight >= scrollTop) {
+                        handleChangeActiveIndex(child.dataset.index, 'swipe');
+                        break;
+                    }
+                }
+            }, 100);
+
+            // 页面挂载时，如果是传入了defaultIndex，则滚动到对应位置
+            if (activeIndex) {
+                handleScrollIntoIndex({
+                    index: activeIndex,
+                    rightNow: true,
+                    type: 'manual',
+                });
+            }
+            containerRef.current?.addEventListener('scroll', handleScroll);
+
+            return () => {
+                containerRef.current?.removeEventListener('scroll', handleScroll);
+            };
+        }, []);
+
+        return (
+            <ContextLayout>
+                {({ prefixCls }) => (
+                    <IndexBarContext.Provider value={contextValue}>
+                        <div
+                            className={cls(`${prefixCls}-index-bar`, className)}
+                            style={style}
+                            ref={domRef}
+                        >
+                            <div className={`${prefixCls}-index-bar-container`} ref={containerRef}>
+                                {renderChildren()}
+                            </div>
+                            {!disableSidebar && (
+                                <IndexBarSideBar
+                                    tipType={tipType}
+                                    activeIndex={activeIndex}
+                                    prefixCls={prefixCls}
+                                    indexes={indexes}
+                                    onTouching={isTouching =>
+                                        (isScrollHandlerDisabledRef.current = isTouching)
+                                    }
+                                    onClick={newIndex =>
+                                        handleScrollIntoIndex({ index: newIndex, type: 'sidebar' })
+                                    }
+                                    renderSideBar={renderSideBar}
+                                    renderSideBarItem={renderSideBarItem}
+                                    renderTip={renderTip}
+                                />
+                            )}
+                        </div>
+                    </IndexBarContext.Provider>
+                )}
+            </ContextLayout>
+        );
+    },
+);
+
+/**
+ * 索引栏组件
+ * @en IndexBar component
+ * @type 导航
+ * @type_en Navigation
+ * @name 索引栏
+ * @name_en SearchBar
+ */
+export default componentWrapper(IndexBar, { Group });

package/metaData/components/index-bar/example/side-bar.tsx

@@ -0,0 +1,82 @@
+import React, { ReactNode, useState } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { IndexBarIndexType, IndexBarSideBarProps, IndexBarTipType } from './type';
+
+export function IndexBarSideBar(props: IndexBarSideBarProps) {
+    const {
+        indexes,
+        prefixCls,
+        onTouching,
+        onClick,
+        activeIndex,
+        tipType,
+        renderSideBar,
+        renderSideBarItem = index => index,
+        renderTip: propsRenderTip,
+    } = props;
+    const [isTouching, originSetIsTouching] = useState(false);
+
+    const setIsTouching = (touching: boolean) => {
+        originSetIsTouching(touching);
+        onTouching(touching);
+    };
+
+    const handleTouchingStart = () => setIsTouching(true);
+
+    const handleTouchingStop = () => setIsTouching(false);
+
+    const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+        if (!isTouching || !e.touches?.length) {
+            return;
+        }
+        const { clientX, clientY } = e.touches[0];
+        const target = document.elementFromPoint(clientX, clientY) as HTMLElement;
+        if (target && target.dataset?.index) {
+            onClick(target.dataset.index);
+        }
+    };
+
+    const renderSideBarTip = (index: IndexBarIndexType, type: IndexBarTipType): ReactNode => {
+        if (propsRenderTip) {
+            return propsRenderTip(index);
+        }
+        return <div className={`${prefixCls}-index-bar-sidebar-${type}`}>{index}</div>;
+    };
+
+    const node = (
+        <div
+            className={cls(`${prefixCls}-index-bar-sidebar`, {
+                [`${prefixCls}-index-bar-sidebar-touching`]: isTouching,
+            })}
+            onTouchStart={() => handleTouchingStart()}
+            onTouchEnd={() => handleTouchingStop()}
+            onTouchCancel={() => handleTouchingStop()}
+            onTouchMove={handleTouchMove}
+        >
+            {tipType === 'toast' &&
+                isTouching &&
+                activeIndex &&
+                renderSideBarTip(activeIndex, 'toast')}
+            {indexes.map(index => (
+                <div
+                    className={cls(`${prefixCls}-index-bar-sidebar-item`, {
+                        [`${prefixCls}-index-bar-sidebar-active`]: activeIndex === index,
+                    })}
+                    key={index}
+                    onTouchStart={() => onClick(index)}
+                    data-index={index}
+                >
+                    {tipType === 'sweat' &&
+                        isTouching &&
+                        activeIndex === index &&
+                        renderSideBarTip(index, 'sweat')}
+                    <div className={`${prefixCls}-index-bar-sidebar-item-wrapper`}>
+                        {renderSideBarItem(index)}
+                    </div>
+                </div>
+            ))}
+        </div>
+    );
+
+    return renderSideBar ? renderSideBar(node) : node;
+}

package/metaData/components/input/doc.md

@@ -0,0 +1,60 @@
+### 数据录入
+
+# 输入框 Input
+
+输入框组件，支持添加前后缀。
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|type|输入框类型|string|"text"|
+|pattern|检查控件值的正则表达式|string|-|
+|inputClass|输入框dom自定义类名|string|-|
+|inputStyle|输入框dom自定义样式|CSSProperties|-|
+|nativeProps|其他未列出的原生属性，优先级低于已列出的组件属性|InputHTMLAttributes\<HTMLInputElement\>|-|
+|ariaLabel|无障碍label|string|-|
+|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\<HTMLInputElement\>, value: string) =\> void|-|
+|onInput|数据改变时触发|(e: ChangeEvent\<HTMLInputElement\>, value: string) =\> void|-|
+|onFocus|输入框聚焦时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onBlur|输入框失去焦点时触发|(e: FocusEvent\<HTMLInputElement, Element\>) =\> void|-|
+|onClick|点击输入框事件|(e: MouseEvent\<HTMLInputElement, MouseEvent\>) =\> void|-|
+|onKeyUp|原生的keyup事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onKeyDown|原生的keydown事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onKeyPress|原生的keypress事件|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+|onPressEnter|按下回车键时触发|(e: KeyboardEvent\<HTMLInputElement\>) =\> void|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|
+|input|原生输入框 DOM|HTMLInputElement|