@fjyueke/arco-mcp 1.0.0

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

@@ -0,0 +1,281 @@
+import React, {
+    useState,
+    useRef,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
+    useMemo,
+    ReactNode,
+} from 'react';
+import { cls, componentWrapper } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import IconStarFill from '../icon/IconStarFill';
+import IconStarHalf from '../icon/IconStarHalf';
+import { useUpdateEffect } from '../_helpers';
+
+export type RateIconType = ReactNode | ((index: number) => ReactNode);
+
+export interface RateProps {
+    /**
+     * 自定义类名
+     * @en Custom classname
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     * @en Custom stylesheet
+     */
+    style?: React.CSSProperties;
+    /**
+     * 默认评分
+     * @en Default value
+     * @default 0
+     */
+    defaultValue?: number;
+    /**
+     * 当前评分(受控)
+     * @en Current value (Controlled)
+     */
+    value?: number;
+    /**
+     * 图标数量
+     * @en Number of icons
+     * @default 5
+     */
+    count?: number;
+    /**
+     * 每个图标的分值
+     * @en Points for each icon
+     * @default 1
+     */
+    step?: number;
+    /**
+     * 选中时颜色
+     * @en Color when selected
+     */
+    color?: string;
+    /**
+     * 未选中时颜色
+     * @en Color when unselected
+     */
+    normalColor?: string;
+    /**
+     * 禁用时颜色
+     * @en Color when disabled
+     */
+    disabledColor?: string;
+    /**
+     * 是否允许半选
+     * @en Whether to allow semi-selection
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * 是否为禁用状态
+     * @en Whether to be disable
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 自定义图标大小
+     * @en Custom icon size
+     */
+    size?: number | string;
+    /**
+     * 自定义图标间距(点击热区包含间距)
+     * @en Custom icon spacing (click hotspot includes spacing)
+     */
+    offset?: number | string;
+    /**
+     * 自定义图标
+     * @en Custom icons
+     */
+    icons?: {
+        normal: RateIconType;
+        active: RateIconType;
+        halfActive?: RateIconType;
+    };
+    /**
+     * 当前分值变化触发的事件
+     * @en Callback when the current value changes
+     * @default (value) => void
+     */
+    onChange?: (value: number) => void;
+}
+
+export interface RateRef {
+    /**
+     * 最外层元素 DOM
+     * @en The outermost element DOM
+     */
+    dom: HTMLDivElement | null;
+}
+
+const Rate = forwardRef((props: RateProps, ref: Ref<RateRef>) => {
+    const {
+        className,
+        style,
+        defaultValue = 0,
+        value,
+        count = 5,
+        step = 1,
+        color,
+        normalColor,
+        disabledColor,
+        allowHalf = false,
+        disabled = false,
+        size,
+        offset,
+        icons,
+        onChange,
+    } = props;
+    const [innerValue, setInnerValue] = useState(defaultValue);
+    const starIndex = useMemo(() => {
+        const actualValue = value !== void 0 ? value : innerValue;
+        return actualValue / step || 0;
+    }, [value, innerValue, step]);
+    const domRef = useRef<HTMLDivElement | null>(null);
+    const helpArray = useMemo(() => Array(count).fill(''), [count]);
+
+    useUpdateEffect(() => {
+        handleStarIndexChange(starIndex);
+    }, [step]);
+
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+
+    function handleStarIndexChange(newIndex: number) {
+        if (disabled) {
+            return;
+        }
+        const newValue = newIndex * step;
+        setInnerValue(newValue);
+        onChange && onChange(newValue);
+    }
+
+    function renderIconByAttr(defaultNode: ReactNode, index: number, attr?: RateIconType) {
+        if (!attr) {
+            return defaultNode;
+        }
+        if (typeof attr === 'function') {
+            // 对外的index从0开始
+            // @en External index starts from 0
+            return attr(index - 1);
+        }
+        return attr;
+    }
+
+    function getIconStatus(index: number) {
+        if (starIndex >= index) {
+            return 'active';
+        }
+        if (starIndex >= index - 0.5 && allowHalf) {
+            return 'half-active';
+        }
+        return 'normal';
+    }
+
+    function renderRateIcon(
+        prefix: string,
+        status: 'active' | 'half-active' | 'normal',
+        index: number,
+    ) {
+        if (status === 'active') {
+            return renderIconByAttr(
+                <IconStarFill
+                    className={cls(`${prefix}-icon active`, { disabled })}
+                    style={{ fontSize: size, color: disabled ? disabledColor : color }}
+                />,
+                index,
+                icons?.active,
+            );
+        }
+        if (status === 'half-active') {
+            const { active, halfActive } = icons || {};
+            const customIcon = halfActive || active;
+            return renderIconByAttr(
+                <>
+                    <IconStarFill
+                        className={cls(`${prefix}-icon normal`, { disabled })}
+                        style={{ fontSize: size, color: normalColor }}
+                    />
+                    <IconStarHalf
+                        className={cls(`${prefix}-icon half-active`, { disabled })}
+                        style={{
+                            fontSize: size,
+                            color: disabled ? disabledColor : color,
+                        }}
+                    />
+                </>,
+                index,
+                customIcon,
+            );
+        }
+        return renderIconByAttr(
+            <IconStarFill
+                className={cls(`${prefix}-icon normal`, { disabled })}
+                style={{ fontSize: size, color: normalColor }}
+            />,
+            index,
+            icons?.normal,
+        );
+    }
+
+    return (
+        <ContextLayout>
+            {({ prefixCls, useRtl }) => (
+                <div
+                    role="slider"
+                    aria-valuemin={0}
+                    aria-valuemax={count}
+                    aria-valuenow={innerValue}
+                    aria-disabled={disabled}
+                    className={cls(`${prefixCls}-rate`, className, { disabled })}
+                    style={style}
+                    ref={domRef}
+                >
+                    {helpArray.map((_, i) => {
+                        // 对内的index从1开始，方便计算
+                        // @en The index of the pair starts from 1, which is convenient for calculation
+                        const index = i + 1;
+                        const halfIndex = allowHalf ? index - 0.5 : index;
+                        const status = getIconStatus(index);
+                        return (
+                            <div
+                                key={index}
+                                style={{ padding: offset }}
+                                className={`${prefixCls}-rate-icon-wrap ${status}`}
+                            >
+                                {renderRateIcon(`${prefixCls}-rate`, status, index)}
+                                <div
+                                    className={`${prefixCls}-rate-icon-click-half left`}
+                                    onClick={() =>
+                                        handleStarIndexChange(useRtl ? index : halfIndex)
+                                    }
+                                />
+                                <div
+                                    className={`${prefixCls}-rate-icon-click-half right`}
+                                    onClick={() =>
+                                        handleStarIndexChange(useRtl ? halfIndex : index)
+                                    }
+                                />
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </ContextLayout>
+    );
+});
+
+/**
+ * 评分组件，支持受控模式
+ * @en Rate component, supports controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 评分
+ * @name_en Rate
+ * @displayName Rate
+ */
+export default componentWrapper(Rate, 'Rate');

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

@@ -0,0 +1,97 @@
+### 数据录入
+
+# 搜索栏 SearchBar
+
+搜索栏组件
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|shape|输入框形状|"square" \| "round"|"square"|
+|textAlign|搜索栏内容位置|"left" \| "center" \| "right"|"left"|
+|prepend|搜索栏头部插入的内容|ReactNode \| ((focusing: boolean, value: string) =\> ReactNode)|-|
+|append|搜索栏尾部要插入的内容, 默认在搜索栏激活态时会插入一个按钮|ReactNode \| ((focusing: boolean, value: string) =\> ReactNode)|(focusing) => focusing ? (<span>取消</span>) : null|
+|actionButton|搜索栏最右侧要插入的按钮，默认情况下插入一个取消按钮|ReactNode|<CancelButton />|
+|enableAssociation|是否开启搜索联想框功能|boolean|false|
+|associationVisible|（受控模式）搜索联想框的可见态|boolean|-|
+|associationShowType|非受控模式下，搜索联想框的展示时机 \- focus 仅聚焦时 \- value 搜索词不为空 \- default 搜索栏被聚焦或者搜索词不为空 \- always 一直展示|"value" \| "focus" \| "default" \| "always"|"default"|
+|associationItems|每一项搜索内容|SearchAssociationBaseItem\[\]|-|
+|highlightMode|搜索结果高亮模式，可以是内置的两种模式，或者一个自定义的高亮函数(接受选项内容content、搜索关键字keyword、默认的高亮class，返回一个ReactNode) \- prefix 高亮最长前缀匹配字符串 \- contain 高亮所有搜索关键字 \- none 关闭高亮|SearchAssociationHighlightMode|"none"|
+|highlightStyle|要为高亮结果添加的样式，仅非自定高亮模式下生效|CSSProperties|-|
+|highlightClassName|要为高亮结果添加的class，仅非自定义高亮模式下生效|string|-|
+|onCancel|右侧取消按钮的点击回调|() =\> void|-|
+|onAssociationItemClick|每行搜索结果的点击回调|(item: SearchAssociationBaseItem, index: number, event: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|onAssociationClick|搜索联想框整体被点击的回调|(event: MouseEvent\<HTMLDivElement, MouseEvent\>) =\> void|-|
+|renderAssociationItem|自定义渲染每行搜索结果|(item: SearchAssociationBaseItem, index: number, node: ReactNode) =\> ReactNode|-|
+|renderAssociation|自定义渲染搜索联想框整体内容|(Content: ReactNode) =\> ReactNode|-|
+|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|-|
+|placeholder|占位文本|string|-|
+|disabled|输入框是否禁用|boolean|-|
+|readOnly|是否只读|boolean|-|
+|autoFocus|是否自动获取焦点，开启后会触发一次onClick事件|boolean|-|
+|blockChangeWhenCompositing|当 ios 输入中文时，输拼音的过程不触发onChange，仅确认选择后触发|boolean|false|
+|validator|正则验证，不符合验证的不允许输入|RegExp \| ((value: string) =\> boolean)|-|
+|blurBeforeFocus|在聚焦之前blur掉，即切换不同input时会重新弹起键盘，常用于input type切换时重新加载键盘，安卓上有效|boolean|-|
+|clearable|是否有清除按钮|boolean|-|
+|clearShowType|清除按钮展示时机：focus \- 聚焦时展示 value \- 有值则展示 always \- 始终展示|"value" \| "focus" \| "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|
+|toggleAssociation|仅非受控模式下生效，手动控制搜索联想框的显隐，如果没有传入值则默认将显隐状态反转|(newVisible?: boolean) =\> void|
+
+> SearchBarShape
+
+```
+"square" | "round"
+```
+
+> SearchAssociationShowType
+
+```
+"value" | "focus" | "default" | "always"
+```
+
+> SearchAssociationBaseItem
+
+|参数|描述|类型|
+|----------|-------------|------|
+|content|基础内容|string|
+
+> SearchAssociationHighlightMode
+
+```
+"prefix" | "contain" | "none" | (content: string, keyword: string, defaultHighlightClassName: string) => ReactNode
+```

package/metaData/components/search-bar/example/association.tsx

@@ -0,0 +1,89 @@
+import { cls } from '@arco-design/mobile-utils';
+import React, { ReactNode } from 'react';
+import {
+    SearchAssociationItem,
+    SearchBarAssociationHighlightConfig,
+    SearchBarAssociationProps,
+} from './type';
+import { highlightWithContainMode, highlightWithPrefixMode } from './highlight';
+
+export function SearchBarAssociation<Data>(props: SearchBarAssociationProps<Data>) {
+    const {
+        prefixCls,
+        associationItems = [],
+        highlightClassName,
+        highlightMode = 'none',
+        highlightStyle,
+        onAssociationClick,
+        onAssociationItemClick,
+        renderAssociation,
+        renderAssociationItem,
+        keyword,
+        visible,
+    } = props;
+    const searchBarAssociationPrefixCls = `${prefixCls}-association`;
+    const defaultHighlightClassName = `${searchBarAssociationPrefixCls}-item-highlight`;
+
+    const renderHighlightNode = (content: string) => {
+        if (!content || !keyword || highlightMode === 'none') {
+            return content;
+        }
+        const config: SearchBarAssociationHighlightConfig = {
+            keyword,
+            content,
+            highlightClassName: highlightClassName || defaultHighlightClassName,
+            highlightStyle,
+        };
+
+        if (highlightMode === 'contain') {
+            return highlightWithContainMode(config);
+        }
+        if (highlightMode === 'prefix') {
+            return highlightWithPrefixMode(config);
+        }
+        return typeof highlightMode === 'function'
+            ? highlightMode(content, keyword, defaultHighlightClassName)
+            : content;
+    };
+
+    const renderItem = (item: SearchAssociationItem<Data>, index: number) => {
+        const itemContent = item.content;
+        let node: ReactNode = itemContent;
+        // itemContent为string类型，并且开启高亮模式才去走渲染高亮内容的逻辑
+        // @en When `itemContent` is a string, and the highlight mode is turned on, the logic of rendering the highlighted content is performed
+        if (typeof itemContent === 'string' && highlightMode !== 'none') {
+            node = renderHighlightNode(itemContent);
+        }
+        if (renderAssociationItem) {
+            node = renderAssociationItem(item, index, node);
+        }
+        return (
+            <div
+                key={index}
+                className={`${searchBarAssociationPrefixCls}-item`}
+                onClick={e => onAssociationItemClick?.(item, index, e)}
+            >
+                {node}
+            </div>
+        );
+    };
+
+    const renderContent = () => {
+        const associationContent = associationItems.map(renderItem);
+        if (renderAssociation) {
+            return renderAssociation(associationContent);
+        }
+        return associationContent;
+    };
+
+    return (
+        <div
+            className={cls(searchBarAssociationPrefixCls, {
+                [`${searchBarAssociationPrefixCls}-visible`]: visible,
+            })}
+            onClick={onAssociationClick}
+        >
+            {renderContent()}
+        </div>
+    );
+}

package/metaData/components/search-bar/example/cancel-button.tsx

@@ -0,0 +1,34 @@
+import { nextTick } from '@arco-design/mobile-utils';
+import React, { useEffect, useState } from 'react';
+
+interface CancelButtonProps {
+    className: string;
+    onCancel?: () => void;
+    focusing: boolean;
+    currentInputValue: string;
+    text?: string;
+}
+
+export function CancelButton(props: CancelButtonProps) {
+    const { className, onCancel, focusing, currentInputValue, text } = props;
+    const [visible, setVisible] = useState(focusing || Boolean(currentInputValue));
+
+    const handleClick = () => {
+        onCancel?.();
+        // 如果不延迟，在聚焦切输入框有值的情况下，点击取消按钮会造成闪烁
+        // @en If there is no delay, when the focus cut input box has a value, clicking the cancel button will cause flickering
+        nextTick(() => {
+            setVisible(false);
+        });
+    };
+
+    useEffect(() => {
+        setVisible(focusing || Boolean(currentInputValue));
+    }, [focusing, currentInputValue]);
+
+    return visible ? (
+        <span className={className} onClick={handleClick}>
+            {text}
+        </span>
+    ) : null;
+}

package/metaData/components/search-bar/example/highlight.tsx

@@ -0,0 +1,66 @@
+import React, { ReactNode } from 'react';
+import { SearchBarAssociationHighlightConfig } from './type';
+
+function createHighlightNode(
+    config: Omit<SearchBarAssociationHighlightConfig, 'content'>,
+    index: number,
+) {
+    const { keyword, highlightClassName, highlightStyle } = config;
+    return (
+        <span className={highlightClassName} style={highlightStyle} key={index}>
+            {keyword}
+        </span>
+    );
+}
+
+/**
+ * 高亮搜索候选项中，包含的关键字
+ *
+ */
+export function highlightWithContainMode(config: SearchBarAssociationHighlightConfig) {
+    const { content = '', keyword = '' } = config;
+
+    // 具体实现思路就是将keyword作为split的分隔符，切割content得到数组
+    const splitContent = content.split(keyword);
+
+    // 再将高亮后的keyword节点，插空填入数组
+    const highlightResult = splitContent.reduce((prev, word, index) => {
+        prev.push(word);
+        if (index !== splitContent.length - 1) {
+            prev.push(createHighlightNode(config, index));
+        }
+        return prev;
+    }, [] as ReactNode[]);
+
+    return highlightResult;
+}
+
+/**
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
+ *
+ */
+export function highlightWithPrefixMode(config: SearchBarAssociationHighlightConfig) {
+    const { content = '', keyword = '', ...otherConfig } = config;
+
+    let splitIndex = -1;
+
+    for (let i = 0; i < keyword.length; i++) {
+        if (i >= content.length || content[i] !== keyword[i]) {
+            break;
+        }
+        splitIndex = i;
+    }
+
+    return splitIndex > -1
+        ? [
+              createHighlightNode(
+                  {
+                      ...otherConfig,
+                      keyword: content.substring(0, splitIndex + 1),
+                  },
+                  0,
+              ),
+              content.substring(splitIndex + 1),
+          ]
+        : content;
+}