@nutui/nutui-react-taro/dist/cjs/packages/searchbar/searchbar.js

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

"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "SearchBar", {
    enumerable: true,
    get: function() {
        return SearchBar;
    }
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _taro = /*#__PURE__*/ _interop_require_default._(require("@tarojs/taro"));
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _components = require("@tarojs/components");
var _iconsreacttaro = require("@nutui/icons-react-taro");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _index = require("../configprovider/index");
var _typings = require("../../utils/typings");
var _usepropsvalue = require("../../hooks/use-props-value");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
    placeholder: '',
    shape: 'square',
    disabled: false,
    maxLength: 9999,
    clearable: true,
    readOnly: false,
    autoFocus: false,
    backable: false,
    left: '',
    right: '',
    rightIn: '',
    leftIn: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Search, null),
    tag: false
});
var SearchBar = function SearchBar(props) {
    var classPrefix = 'nut-searchbar';
    var locale = (0, _index.useConfig)().locale;
    var searchInputRef = (0, _react.useRef)(null);
    var _$_object_spread = (0, _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 = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
        value: outerValue,
        defaultValue: defaultValue,
        finalValue: ''
    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
    var _useState = (0, _sliced_to_array._)((0, _react.useState)(tag), 2), innerTag = _useState[0], setInnerTag = _useState[1];
    var forceFocus = (0, _react.useCallback)(function() {
        var _searchInputRef_current;
        (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.focus();
    }, []);
    var handleInput = (0, _react.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 = (0, _react.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 = (0, _sliced_to_array._)((0, _react.useState)(null), 2), blurTimer = _useState1[0], setBlurTimer = _useState1[1];
    var handleBlur = (0, _react.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.default.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
    ]);
    (0, _react.useEffect)(function() {
        return function() {
            if (blurTimer) clearTimeout(blurTimer);
        };
    }, [
        blurTimer
    ]);
    var clearaVal = (0, _react.useCallback)(function(event) {
        if (disabled || readOnly) return;
        setValue('');
        forceFocus();
        onChange && onChange('');
        onClear && onClear(event);
    }, [
        disabled,
        readOnly,
        onChange,
        onClear,
        setValue
    ]);
    var cls = (0, _react.useMemo)(function() {
        var _obj;
        return (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), (0, _define_property._)(_obj, "".concat(classPrefix, "-focus"), left || backable), _obj), className);
    }, [
        disabled,
        backable,
        left,
        className
    ]);
    (0, _react.useEffect)(function() {
        if (autoFocus) {
            forceFocus();
        }
        if (tag && !innerTag) {
            forceFocus();
        }
    }, [
        autoFocus,
        forceFocus,
        innerTag
    ]);
    var renderField = function renderField() {
        var inputCls = (0, _classnames.default)("".concat(classPrefix, "-input"));
        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, _taro.default.getEnv() === 'WEB' ? /*#__PURE__*/ _react.default.createElement(_components.Input, {
            className: inputCls,
            ref: searchInputRef,
            style: (0, _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.default.createElement(_components.Input, {
            className: inputCls,
            ref: searchInputRef,
            style: (0, _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 = (0, _react.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.default.createElement(_components.View, {
            className: "nut-searchbar-values"
        }, list.map(function(item, index) {
            return /*#__PURE__*/ _react.default.createElement(_components.View, {
                key: "def-".concat(index),
                className: "nut-searchbar-value",
                onClick: function onClick(e) {
                    return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, e);
                }
            }, item, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Close, null));
        }));
    }, [
        value,
        onItemClick,
        innerTag
    ]);
    var renderLeftIn = (0, _react.useCallback)(function() {
        if (!leftIn) return null;
        return /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
        }, leftIn);
    }, [
        leftIn
    ]);
    var renderLeft = (0, _react.useCallback)(function() {
        if (!backable && !left) return null;
        return /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "".concat(classPrefix, "-left")
        }, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowLeft, null) : left);
    }, [
        backable,
        left
    ]);
    var renderRightIn = (0, _react.useCallback)(function() {
        if (!rightIn) return null;
        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.isValidElement(rightIn) ? /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
        }, rightIn) : /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "".concat(classPrefix, "-rightin")
        }, rightIn));
    }, [
        rightIn
    ]);
    var renderRight = (0, _react.useCallback)(function() {
        if (!right) return null;
        return /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "".concat(classPrefix, "-right")
        }, right);
    }, [
        right
    ]);
    var renderClear = (0, _react.useCallback)(function() {
        return /*#__PURE__*/ _react.default.createElement(_components.View, {
            className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
            style: {
                visibility: "".concat(!innerTag && value && clearable ? 'visible' : 'hidden')
            },
            onClick: clearaVal,
            "aria-label": "清除"
        }, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.MaskClose, null));
    }, [
        value,
        clearable,
        clearaVal,
        innerTag
    ]);
    var onConfirm = function onConfirm() {
        onSearch && onSearch(value);
    };
    return /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: cls,
        style: style
    }, renderLeft(), /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: (0, _classnames.default)("".concat(classPrefix, "-content"), (0, _define_property._)({}, "".concat(classPrefix, "-round"), shape === 'round'))
    }, renderLeftIn(), /*#__PURE__*/ _react.default.createElement(_components.View, {
        className: "nut-searchbar-input-box"
    }, renderField()), renderValueByTags(), renderClear(), renderRightIn()), renderRight());
};
SearchBar.displayName = 'NutSearchBar';