@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/search-bar/association.js

@@ -0,0 +1,51 @@
+import { cls } from '@arco-design/mobile-utils';
+import React from 'react';
+import { highlightWithContainMode, highlightWithPrefixMode } from './highlight';
+export function SearchBarAssociation(props) {
+    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) => {
+        if (!content || !keyword || highlightMode === 'none') {
+            return content;
+        }
+        const config = {
+            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, index) => {
+        const itemContent = item.content;
+        let node = 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 (React.createElement("div", { key: index, className: `${searchBarAssociationPrefixCls}-item`, onClick: () => onAssociationItemClick?.(item, index) }, node));
+    };
+    const renderContent = () => {
+        const associationContent = associationItems.map(renderItem);
+        if (renderAssociation) {
+            return renderAssociation(associationContent);
+        }
+        return associationContent;
+    };
+    return (React.createElement("div", { className: cls(searchBarAssociationPrefixCls, {
+            [`${searchBarAssociationPrefixCls}-visible`]: visible,
+        }), onClick: onAssociationClick }, renderContent()));
+}

package/esnext/search-bar/cancel-button.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface CancelButtonProps {
+    className: string;
+    onCancel?: () => void;
+    focusing: boolean;
+    currentInputValue: string;
+    text?: string;
+}
+export declare function CancelButton(props: CancelButtonProps): JSX.Element | null;
+export {};

package/esnext/search-bar/cancel-button.js

@@ -0,0 +1,18 @@
+import { nextTick } from '@arco-design/mobile-utils';
+import React, { useEffect, useState } from 'react';
+export function CancelButton(props) {
+    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 ? (React.createElement("span", { className: className, onClick: handleClick }, text)) : null;
+}

package/esnext/search-bar/highlight.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SearchBarAssociationHighlightConfig } from './type';
+/**
+ * 高亮搜索候选项中，包含的关键字
+ *
+ */
+export declare function highlightWithContainMode(config: SearchBarAssociationHighlightConfig): React.ReactNode[];
+/**
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
+ *
+ */
+export declare function highlightWithPrefixMode(config: SearchBarAssociationHighlightConfig): string | (string | JSX.Element)[];

package/esnext/search-bar/highlight.js

@@ -0,0 +1,46 @@
+import React from 'react';
+function createHighlightNode(config, index) {
+    const { keyword, highlightClassName, highlightStyle } = config;
+    return (React.createElement("span", { className: highlightClassName, style: highlightStyle, key: index }, keyword));
+}
+/**
+ * 高亮搜索候选项中，包含的关键字
+ *
+ */
+export function highlightWithContainMode(config) {
+    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;
+    }, []);
+    return highlightResult;
+}
+/**
+ * 高亮搜索候选项和关键字的最长前缀公共字符串
+ *
+ */
+export function highlightWithPrefixMode(config) {
+    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;
+}

package/esnext/search-bar/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SearchAssociationBaseItem, SearchBarProps, SearchBarRef } from './type';
+export type { SearchBarProps, SearchBarRef, SearchAssociationHighlightMode, SearchAssociationItem, SearchAssociationShowType, SearchBarShape, } from './type';
+/**
+ * 搜索栏组件
+ * @en SearchBar component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 搜索栏
+ * @name_en SearchBar
+ */
+declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps<SearchAssociationBaseItem> & React.RefAttributes<SearchBarRef>>;
+export default SearchBar;

package/esnext/search-bar/index.js

@@ -0,0 +1,109 @@
+import { cls } from '@arco-design/mobile-utils';
+import React, { useRef, forwardRef, useImperativeHandle, useContext, useState, } from 'react';
+import { ContextLayout, GlobalContext } from '../context-provider';
+import { IconSearch } from '../icon';
+import { useInputLogic } from '../input/hooks';
+import { SearchBarAssociation } from './association';
+import { CancelButton } from './cancel-button';
+/**
+ * 搜索栏组件
+ * @en SearchBar component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 搜索栏
+ * @name_en SearchBar
+ */
+const SearchBar = forwardRef((props, ref) => {
+    const { prefixCls, locale } = useContext(GlobalContext);
+    const searchBarPrefixCls = `${prefixCls}-search-bar`;
+    const { inputClass, inputStyle, type = 'search', nativeProps, id, name, maxLength, placeholder = locale?.SearchBar.placeholder, readOnly, onKeyUp, onKeyPress, disabled, pattern, prefix = React.createElement(IconSearch, { className: `${searchBarPrefixCls}-search-icon` }), append, textAlign = 'left', actionButton, clearable = true, clearShowType = 'value', shape = 'square', className, enableAssociation = false, associationVisible, associationShowType = 'default', associationItems, highlightClassName, highlightMode, highlightStyle, onCancel, onAssociationClick, onAssociationItemClick, renderAssociation, renderAssociationItem, ...inputProps } = props;
+    const inputRef = useRef(null);
+    /**
+     * 格式化搜索输入框尾部要插入的内容
+     * @en Format the content to be inserted at the end of the search input box
+     */
+    const formatAppendProp = (focusing, currentInputValue) => {
+        let appendNode = null;
+        if (typeof append === 'function') {
+            appendNode = append(focusing, currentInputValue);
+        }
+        else {
+            appendNode = append;
+        }
+        // 默认情况下，在激活时或有内容时插入一个cancelBtn
+        // @en By default inserts a cancelBtn on activation or when there is content
+        const formatActionButton = typeof actionButton === 'undefined' ? (React.createElement(CancelButton, { focusing: focusing, currentInputValue: currentInputValue, className: `${searchBarPrefixCls}-cancel-btn`, onCancel: onCancel, text: locale?.SearchBar.cancelBtn })) : (actionButton);
+        return (React.createElement(React.Fragment, null,
+            appendNode,
+            formatActionButton,
+            enableAssociation ? (React.createElement(SearchBarAssociation, { prefixCls: searchBarPrefixCls, keyword: currentInputValue, 
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                visible: actualVisible, associationItems: associationItems, highlightClassName: highlightClassName, highlightMode: highlightMode, highlightStyle: highlightStyle, onAssociationClick: onAssociationClick, onAssociationItemClick: onAssociationItemClick, renderAssociation: renderAssociation, renderAssociationItem: renderAssociationItem })) : null));
+    };
+    const { inputValue, handleChange, handleInput, handleKeyDown, handleFocus, handleBlur, handleClick, renderWrapper, wrapRef, } = useInputLogic({
+        className: cls(className, `${searchBarPrefixCls}-${shape}`),
+        prefix,
+        clearable,
+        append: formatAppendProp,
+        clearShowType,
+        ...inputProps,
+    }, inputRef);
+    const [visible, setVisible] = useState(associationShowType === 'always' ||
+        ((associationShowType === 'value' || associationShowType === 'default') &&
+            Boolean(inputValue)));
+    // 真实的控制搜索联想框显隐，受控模式优先生效
+    // @en Control the display and hide of the search association box, and the controlled mode takes effect first
+    const actualVisible = associationVisible ?? visible;
+    useImperativeHandle(ref, () => ({
+        dom: wrapRef.current,
+        input: inputRef.current,
+        toggleAssociation(newVisible) {
+            setVisible(newVisible ?? !visible);
+        },
+    }));
+    /**
+     * 处理非受控逻辑下，搜索联想框的显隐状态
+     * @en Handle the display state of the search association box under uncontrolled logic
+     *
+     * @param {boolean} newVisible 新的visible
+     * @param {string} newValue 新的输入框值
+     */
+    const formatSetAssociationVisible = (newVisible, newValue) => {
+        if (associationShowType === 'always') {
+            setVisible(true);
+            // 聚焦模式下，直接把visible和newVisible对齐即可
+            // @en In focus mode, just align visible and newVisible directly
+        }
+        else if (associationShowType === 'focus') {
+            setVisible(newVisible);
+            // 聚焦 + 有值模式下，需要newVisible为true和newValue.length > 0同时满足
+            // @en In focus + valued mode, newVisible is required to be true and newValue.length > 0 to be satisfied at the same time
+        }
+        else if (associationShowType === 'default') {
+            setVisible(newVisible && Boolean(newValue));
+            // 仅有值模式下，visible需要newValue.length > 0
+            // @en In value-only mode, visible requires newValue.length > 0
+        }
+        else if (associationShowType === 'value') {
+            setVisible(Boolean(newValue));
+        }
+    };
+    const handleInputFocus = (e) => {
+        formatSetAssociationVisible(true, e.target.value);
+        handleFocus(e);
+    };
+    const handleInputBlur = (e) => {
+        formatSetAssociationVisible(false, e.target.value);
+        handleBlur(e);
+    };
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        formatSetAssociationVisible(Boolean(newValue), newValue);
+        handleChange(e);
+    };
+    const renderSearchBar = () => {
+        return renderWrapper(searchBarPrefixCls, type, React.createElement("input", Object.assign({}, nativeProps, { id: id, name: name, maxLength: maxLength, placeholder: placeholder, readOnly: readOnly, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: onKeyUp, onKeyPress: onKeyPress, ref: inputRef, className: cls(`${searchBarPrefixCls}-input`, inputClass, `${searchBarPrefixCls}-input-${textAlign}`), style: inputStyle, value: inputValue, type: type, disabled: disabled, pattern: pattern, onChange: handleInputChange, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick })));
+    };
+    return React.createElement(ContextLayout, null, renderSearchBar);
+});
+export default SearchBar;