@nutui/nutui-react-taro/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 Taro from "@tarojs/taro";
import React, { useCallback, useEffect, useRef, useState, useMemo } from "react";
import { Input as TaroInput, View } from "@tarojs/components";
import { ArrowLeft, Close, MaskClose, Search } from "@nutui/icons-react-taro";
import classNames from "classnames";
import { useConfig } from "../configprovider/index";
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 handleInput = useCallback(function(event) {
        var _event_detail;
        var eventValue = (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
        if (value === eventValue) return;
        onChange && onChange(eventValue, event);
        setValue(eventValue);
        eventValue === '' && forceFocus();
    }, [
        onChange,
        setValue,
        forceFocus,
        value
    ]);
    var handleFocus = useCallback(function(event) {
        var _event_detail;
        onFocus && onFocus((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
        if (tag) setInnerTag(false);
    }, [
        onFocus
    ]);
    var _useState1 = _sliced_to_array(useState(null), 2), blurTimer = _useState1[0], setBlurTimer = _useState1[1];
    var handleBlur = useCallback(function(event) {
        var _searchInputRef_current, _event_detail;
        (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.blur();
        onBlur && onBlur((_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
        if (tag) {
            var timer = setTimeout(function() {
                if (Taro.getEnv() === 'WEB') {
                    var _event_target;
                    setInnerTag(((_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.value) ? tag : false);
                } else {
                    setInnerTag(tag);
                }
            }, 200);
            setBlurTimer(timer);
        }
    }, [
        onBlur,
        tag,
        value
    ]);
    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
    ]);
    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();
        }
        if (tag && !innerTag) {
            forceFocus();
        }
    }, [
        autoFocus,
        forceFocus,
        innerTag
    ]);
    var renderField = function() {
        var inputCls = classNames("".concat(classPrefix, "-input"));
        return /*#__PURE__*/ React.createElement(React.Fragment, null, Taro.getEnv() === 'WEB' ? /*#__PURE__*/ React.createElement(TaroInput, {
            className: inputCls,
            ref: searchInputRef,
            style: _object_spread({}, style, {
                color: "".concat(innerTag ? 'transparent' : '#333')
            }),
            value: value,
            placeholder: placeholder || locale.placeholder,
            disabled: disabled || readOnly,
            maxlength: maxLength,
            autoFocus: autoFocus,
            onInput: handleInput,
            onFocus: handleFocus,
            onBlur: handleBlur,
            onClick: onInputClick,
            onConfirm: onConfirm
        }) : /*#__PURE__*/ React.createElement(TaroInput, {
            className: inputCls,
            ref: searchInputRef,
            style: _object_spread({}, style, {
                color: "".concat(innerTag ? 'transparent' : '#333')
            }),
            value: value,
            placeholder: placeholder || locale.placeholder,
            disabled: disabled || readOnly,
            maxlength: maxLength,
            focus: autoFocus,
            onInput: handleInput,
            onFocus: handleFocus,
            onBlur: handleBlur,
            onClick: onInputClick,
            onConfirm: onConfirm
        }));
    };
    var renderValueByTags = useCallback(function() {
        if (!innerTag) return null;
        if (!value) {
            setTimeout(function() {
                forceFocus();
            }, 0);
            return null;
        }
        var list = value.split(',');
        if (!list) return null;
        return /*#__PURE__*/ React.createElement(View, {
            className: "nut-searchbar-values"
        }, list.map(function(item, index) {
            return /*#__PURE__*/ React.createElement(View, {
                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,
        innerTag
    ]);
    var renderLeftIn = useCallback(function() {
        if (!leftIn) return null;
        return /*#__PURE__*/ React.createElement(View, {
            className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
        }, leftIn);
    }, [
        leftIn
    ]);
    var renderLeft = useCallback(function() {
        if (!backable && !left) return null;
        return /*#__PURE__*/ React.createElement(View, {
            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(View, {
            className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
        }, rightIn) : /*#__PURE__*/ React.createElement(View, {
            className: "".concat(classPrefix, "-rightin")
        }, rightIn));
    }, [
        rightIn
    ]);
    var renderRight = useCallback(function() {
        if (!right) return null;
        return /*#__PURE__*/ React.createElement(View, {
            className: "".concat(classPrefix, "-right")
        }, right);
    }, [
        right
    ]);
    var renderClear = useCallback(function() {
        return /*#__PURE__*/ React.createElement(View, {
            className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
            style: {
                visibility: "".concat(!innerTag && value && clearable ? 'visible' : 'hidden')
            },
            onClick: clearaVal,
            "aria-label": "清除"
        }, /*#__PURE__*/ React.createElement(MaskClose, null));
    }, [
        value,
        clearable,
        clearaVal,
        innerTag
    ]);
    var onConfirm = function() {
        onSearch && onSearch(value);
    };
    return /*#__PURE__*/ React.createElement(View, {
        className: cls,
        style: style
    }, renderLeft(), /*#__PURE__*/ React.createElement(View, {
        className: classNames("".concat(classPrefix, "-content"), _define_property({}, "".concat(classPrefix, "-round"), shape === 'round'))
    }, renderLeftIn(), /*#__PURE__*/ React.createElement(View, {
        className: "nut-searchbar-input-box"
    }, renderField()), renderValueByTags(), renderClear(), renderRightIn()), renderRight());
};
SearchBar.displayName = 'NutSearchBar';