zent/es/select/Search.js

一套前端设计语言和基于React的实现

import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
import cx from 'classnames';
import { createUseIMEComposition } from '../ime-composition';
import { useIsomorphicLayoutEffect } from '../utils/hooks/useIsomorphicLayoutEffect';
var useIMEComposition = createUseIMEComposition();
function SelectSearch(_a, cmdRef) {
    var placeholder = _a.placeholder, onChangeProp = _a.onChange, onIndexChange = _a.onIndexChange, onEnter = _a.onEnter, autoWidth = _a.autoWidth, valueProp = _a.value;
    var ref = useRef(null);
    var focusSearchInput = useCallback(function () {
        ref.current.focus({
            preventScroll: true,
        });
    }, [ref]);
    var handleKeyboardNav = useCallback(function (e) {
        switch (e.key) {
            case 'ArrowUp':
                onIndexChange(-1);
                break;
            case 'ArrowDown':
                onIndexChange(1);
                break;
            case 'Enter':
                onEnter();
                break;
            default:
                break;
        }
    }, [onIndexChange, onEnter]);
    useImperativeHandle(cmdRef, function () { return ({
        focus: function () {
            focusSearchInput();
        },
    }); });
    var _b = useIMEComposition(valueProp, onChangeProp), onChange = _b.onChange, onCompositionEnd = _b.onCompositionEnd, onCompositionStart = _b.onCompositionStart, value = _b.value;
    useIsomorphicLayoutEffect(function () {
        focusSearchInput();
    }, [focusSearchInput]);
    var mirrorValue = value || placeholder;
    var searchClass = cx('zent-select-v2-search-wrap', {
        'zent-select-v2-search-wrap-auto-width': autoWidth,
    });
    return (_jsxs("span", __assign({ className: searchClass, "data-zv": '10.0.17' }, { children: [_jsx("input", { ref: ref, placeholder: placeholder, className: "zent-select-v2-search", value: value, onChange: onChange, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: handleKeyboardNav, "data-zv": '10.0.17' }, void 0), autoWidth && (_jsx("p", __assign({ className: "zent-select-v2-search-mirror", "aria-hidden": true, "data-zv": '10.0.17' }, { children: mirrorValue }), void 0))] }), void 0));
}
export default forwardRef(SelectSearch);