@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
236 lines (235 loc) • 10.3 kB
JavaScript
"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 _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _iconsreact = require("@nutui/icons-react");
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _configprovider = require("../configprovider");
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(_iconsreact.Search, null),
tag: false
});
var SearchBar = function SearchBar(props) {
var classPrefix = 'nut-searchbar';
var locale = (0, _configprovider.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 handleChange = (0, _react.useCallback)(function(event) {
var value = event.target.value;
onChange && onChange(value, event);
setValue(value);
}, [
onChange,
setValue
]);
var handleInputClick = (0, _react.useCallback)(function(event) {
onInputClick === null || onInputClick === void 0 ? void 0 : onInputClick(event);
}, [
onInputClick
]);
var handleFocus = (0, _react.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 = (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_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
]);
(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,
forceFocus
]);
var onKeydown = (0, _react.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 = (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();
}
}, [
autoFocus,
forceFocus
]);
var renderField = function renderField() {
var inputCls = (0, _classnames.default)("".concat(classPrefix, "-input"));
return /*#__PURE__*/ _react.default.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 = (0, _react.useCallback)(function() {
if (!value) {
setTimeout(function() {
forceFocus();
}, 0);
return null;
}
var list = value.split(',');
if (!list) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
className: "nut-searchbar-values"
}, list.map(function(item, index) {
return /*#__PURE__*/ _react.default.createElement("div", {
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(_iconsreact.Close, null));
}));
}, [
value,
onItemClick
]);
var renderLeftIn = (0, _react.useCallback)(function() {
if (!leftIn) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
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("div", {
className: "".concat(classPrefix, "-left")
}, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreact.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("div", {
className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
}, rightIn) : /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-rightin")
}, rightIn));
}, [
rightIn
]);
var renderRight = (0, _react.useCallback)(function() {
if (!right) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-right")
}, right);
}, [
right
]);
var renderClear = (0, _react.useCallback)(function() {
if (!value || !clearable) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
onClick: clearaVal,
"aria-label": "清除"
}, /*#__PURE__*/ _react.default.createElement(_iconsreact.MaskClose, null));
}, [
value,
clearable,
clearaVal
]);
return /*#__PURE__*/ _react.default.createElement("div", {
className: cls,
style: style
}, renderLeft(), /*#__PURE__*/ _react.default.createElement("div", {
className: (0, _classnames.default)("".concat(classPrefix, "-content"), (0, _define_property._)({}, "".concat(classPrefix, "-round"), shape === 'round'))
}, renderLeftIn(), renderField(), innerTag ? renderValueByTags() : renderClear(), renderRightIn()), renderRight());
};
SearchBar.displayName = 'NutSearchBar';