@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
161 lines (160 loc) • 7.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SearchBar", {
enumerable: true,
get: function() {
return SearchBar;
}
});
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
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 _configprovider = require("../configprovider");
var _typings = require("../../utils/typings");
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, {
width: "16",
height: "16"
})
});
var SearchBar = function SearchBar(props) {
var classPrefix = 'nut-searchbar';
var locale = (0, _configprovider.useConfig)().locale;
var searchRef = (0, _react.useRef)(null);
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), outerValue = _$_object_spread.value, 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, onChange = _$_object_spread.onChange, onFocus = _$_object_spread.onFocus, onBlur = _$_object_spread.onBlur, onClear = _$_object_spread.onClear, onSearch = _$_object_spread.onSearch, onInputClick = _$_object_spread.onInputClick;
var _useState = (0, _sliced_to_array._)((0, _react.useState)(function() {
return outerValue;
}), 2), value = _useState[0], setValue = _useState[1];
var forceFocus = function forceFocus() {
var searchSelf = searchRef.current;
searchSelf && searchSelf.focus();
};
var change = function change(event) {
var value = event.target.value;
onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(value, event));
setValue(value);
};
var focus = function focus(event) {
var value = event.target.value;
onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
};
var blur = function blur(event) {
var searchSelf = searchRef.current;
searchSelf && searchSelf.blur();
var value = event.target.value;
onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
};
(0, _react.useEffect)(function() {
setValue(outerValue);
}, [
outerValue
]);
(0, _react.useEffect)(function() {
autoFocus && forceFocus();
}, [
autoFocus
]);
var renderField = function renderField() {
return /*#__PURE__*/ _react.default.createElement("input", {
className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
ref: searchRef,
value: value || '',
placeholder: placeholder || locale.placeholder,
disabled: disabled,
readOnly: readOnly,
maxLength: maxLength,
onKeyDown: onKeydown,
onChange: function onChange(e) {
return change(e);
},
onFocus: function onFocus(e) {
return focus(e);
},
onBlur: function onBlur(e) {
return blur(e);
},
onClick: function onClick(e) {
return clickInput(e);
}
});
};
var clickInput = function clickInput(e) {
onInputClick && onInputClick(e);
};
var renderLeftIn = function renderLeftIn() {
if (!leftIn) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
}, leftIn);
};
var renderLeft = function renderLeft() {
if (!backable && !left) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-left")
}, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreact.ArrowLeft, {
width: "16",
height: "16"
}) : left);
};
var renderRightIn = function renderRightIn() {
if (!rightIn) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
}, rightIn);
};
var renderRight = function renderRight() {
if (!right) return null;
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-right")
}, right);
};
var handleClear = function handleClear() {
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
onClick: function onClick(e) {
return clearaVal(e);
}
}, /*#__PURE__*/ _react.default.createElement(_iconsreact.MaskClose, null));
};
var clearaVal = function clearaVal(event) {
if (disabled || readOnly) {
return;
}
setValue('');
onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
onClear && onClear(event);
forceFocus();
};
var onKeydown = function onKeydown(e) {
if (e.key === 'Enter') {
var event = e.nativeEvent;
if (typeof event.cancelable !== 'boolean' || event.cancelable) {
event.preventDefault();
}
onSearch && onSearch(value);
}
};
return /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', " ").concat(className || ''),
style: style
}, renderLeft(), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-content ").concat(shape === 'round' ? "".concat(classPrefix, "-round") : '')
}, renderLeftIn(), renderField(), clearable && !value && renderRightIn(), clearable && value && handleClear()), renderRight());
};
SearchBar.displayName = 'NutSearchBar';