@nutui/nutui-react/dist/es/packages/searchbar/searchbar.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
import { ArrowLeft, Close, MaskClose, Search } from "@nutui/icons-react";
import classNames from "classnames";
import { useConfig } from "../configprovider";
import { ComponentDefaults } from "../../utils/typings";
import { usePropsValue } from "../../hooks/use-props-value";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    placeholder: '',
    shape: 'square',
    disabled: false,
    maxLength: 9999,
    clearable: true,
    readOnly: false,
    autoFocus: false,
    backable: false,
    left: '',
    right: '',
    rightIn: '',
    leftIn: /*#__PURE__*/ React.createElement(Search, null),
    tag: false
});
export var SearchBar = function(props) {
    var classPrefix = 'nut-searchbar';
    var locale = useConfig().locale;
    var searchInputRef = useRef(null);
    var _$_object_spread = _object_spread({}, defaultProps, props), outerValue = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, style = _$_object_spread.style, placeholder = _$_object_spread.placeholder, shape = _$_object_spread.shape, className = _$_object_spread.className, disabled = _$_object_spread.disabled, maxLength = _$_object_spread.maxLength, clearable = _$_object_spread.clearable, readOnly = _$_object_spread.readOnly, autoFocus = _$_object_spread.autoFocus, backable = _$_object_spread.backable, right = _$_object_spread.right, left = _$_object_spread.left, leftIn = _$_object_spread.leftIn, rightIn = _$_object_spread.rightIn, tag = _$_object_spread.tag, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick, onItemClick = _$_object_spread.onItemClick;
    var _usePropsValue = _sliced_to_array(usePropsValue({
        value: outerValue,
        defaultValue: defaultValue,
        finalValue: ''
    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
    var _useState = _sliced_to_array(useState(tag), 2), innerTag = _useState[0], setInnerTag = _useState[1];
    var forceFocus = useCallback(function() {
        var _searchInputRef_current;
        (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.focus();
    }, []);
    var handleChange = useCallback(function(event) {
        var value = event.target.value;
        onChange && onChange(value, event);
        setValue(value);
    }, [
        onChange,
        setValue
    ]);
    var handleInputClick = useCallback(function(event) {
        onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(event);
    }, [
        onInputClick
    ]);
    var handleFocus = useCallback(function(event) {
        var _event_target;
        onFocus && onFocus((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value, event);
        if (tag) setInnerTag(false);
    }, [
        onFocus,
        tag
    ]);
    var _useState1 = _sliced_to_array(useState(null), 2), blurTimer = _useState1[0], setBlurTimer = _useState1[1];
    var handleBlur = useCallback(function(event) {
        var _searchInputRef_current, _event_target;
        (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.blur();
        onBlur && onBlur((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value, event);
        if (tag) {
            var timer = setTimeout(function() {
                var _event_target;
                setInnerTag(((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value) ? tag : false);
            }, 150);
            setBlurTimer(timer);
        }
    }, [
        onBlur,
        tag
    ]);
    useEffect(function() {
        return function() {
            if (blurTimer) clearTimeout(blurTimer);
        };
    }, [
        blurTimer
    ]);
    var clearaVal = useCallback(function(event) {
        if (disabled || readOnly) return;
        setValue('');
        forceFocus();
        onChange && onChange('');
        onClear && onClear(event);
    }, [
        disabled,
        readOnly,
        onChange,
        onClear,
        setValue,
        forceFocus
    ]);
    var onKeydown = useCallback(function(e) {
        if (e.key === 'Enter') {
            var event = e.nativeEvent;
            if (typeof event.cancelable !== 'boolean' || event.cancelable) {
                event.preventDefault();
            }
            onSearch && onSearch(value);
        }
    }, [
        onSearch,
        value
    ]);
    var cls = useMemo(function() {
        var _obj;
        return classNames(classPrefix, (_obj = {}, _define_property(_obj, "".concat(classPrefix, "-disabled"), disabled), _define_property(_obj, "".concat(classPrefix, "-focus"), left || backable), _obj), className);
    }, [
        disabled,
        backable,
        left,
        className
    ]);
    useEffect(function() {
        if (autoFocus) {
            forceFocus();
        }
    }, [
        autoFocus,
        forceFocus
    ]);
    var renderField = function() {
        var inputCls = classNames("".concat(classPrefix, "-input"));
        return /*#__PURE__*/ React.createElement("input", {
            className: inputCls,
            ref: searchInputRef,
            value: value || '',
            placeholder: placeholder || locale.placeholder,
            disabled: disabled,
            readOnly: readOnly,
            maxLength: maxLength,
            onKeyDown: onKeydown,
            onChange: handleChange,
            onFocus: handleFocus,
            onBlur: handleBlur,
            onClick: handleInputClick
        });
    };
    var renderValueByTags = useCallback(function() {
        if (!value) {
            setTimeout(function() {
                forceFocus();
            }, 0);
            return null;
        }
        var list = value.split(',');
        if (!list) return null;
        return /*#__PURE__*/ React.createElement("div", {
            className: "nut-searchbar-values"
        }, list.map(function(item, index) {
            return /*#__PURE__*/ React.createElement("div", {
                key: "def-".concat(index),
                className: "nut-searchbar-value",
                onClick: function(e) {
                    return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e);
                }
            }, item, /*#__PURE__*/ React.createElement(Close, null));
        }));
    }, [
        value,
        onItemClick
    ]);
    var renderLeftIn = useCallback(function() {
        if (!leftIn) return null;
        return /*#__PURE__*/ React.createElement("div", {
            className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
        }, leftIn);
    }, [
        leftIn
    ]);
    var renderLeft = useCallback(function() {
        if (!backable && !left) return null;
        return /*#__PURE__*/ React.createElement("div", {
            className: "".concat(classPrefix, "-left")
        }, backable ? /*#__PURE__*/ React.createElement(ArrowLeft, null) : left);
    }, [
        backable,
        left
    ]);
    var renderRightIn = useCallback(function() {
        if (!rightIn) return null;
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.isValidElement(rightIn) ? /*#__PURE__*/ React.createElement("div", {
            className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
        }, rightIn) : /*#__PURE__*/ React.createElement("div", {
            className: "".concat(classPrefix, "-rightin")
        }, rightIn));
    }, [
        rightIn
    ]);
    var renderRight = useCallback(function() {
        if (!right) return null;
        return /*#__PURE__*/ React.createElement("div", {
            className: "".concat(classPrefix, "-right")
        }, right);
    }, [
        right
    ]);
    var renderClear = useCallback(function() {
        if (!value || !clearable) return null;
        return /*#__PURE__*/ React.createElement("div", {
            className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
            onClick: clearaVal,
            "aria-label": "清除"
        }, /*#__PURE__*/ React.createElement(MaskClose, null));
    }, [
        value,
        clearable,
        clearaVal
    ]);
    return /*#__PURE__*/ React.createElement("div", {
        className: cls,
        style: style
    }, renderLeft(), /*#__PURE__*/ React.createElement("div", {
        className: classNames("".concat(classPrefix, "-content"), _define_property({}, "".concat(classPrefix, "-round"), shape === 'round'))
    }, renderLeftIn(), renderField(), innerTag ? renderValueByTags() : renderClear(), renderRightIn()), renderRight());
};
SearchBar.displayName = 'NutSearchBar';