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