@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
158 lines (157 loc) • 7.52 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 _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 _index = require("../configprovider/index");
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(_iconsreacttaro.Search, {
size: "16"
})
});
var SearchBar = function SearchBar(props) {
var classPrefix = 'nut-searchbar';
var locale = (0, _index.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 onInput = function onInput(event) {
var _event_detail;
var eventValue = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
if (value === eventValue) return;
onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(eventValue, event));
setValue(eventValue);
eventValue === '' && forceFocus();
};
var focus = function focus(event) {
var _event_detail;
onFocus && onFocus(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
};
var blur = function blur(event) {
var _event_detail;
var searchSelf = searchRef.current;
searchSelf && searchSelf.blur();
onBlur && onBlur(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
};
(0, _react.useEffect)(function() {
setValue(outerValue || '');
}, [
outerValue
]);
(0, _react.useEffect)(function() {
if (_taro.default.getEnv() === 'WEB') {
autoFocus && forceFocus();
}
}, [
autoFocus
]);
var renderField = function renderField() {
return /*#__PURE__*/ _react.default.createElement(_components.Input, {
className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
ref: searchRef,
style: style,
value: (value || '').toString(),
placeholder: placeholder || locale.placeholder,
disabled: disabled || readOnly,
maxlength: maxLength,
autoFocus: autoFocus,
onInput: onInput,
onFocus: focus,
onBlur: blur,
onClick: clickInput,
onConfirm: onConfirm
});
};
var clickInput = function clickInput(e) {
onInputClick && onInputClick(e);
};
var renderLeftIn = function renderLeftIn() {
if (!leftIn) return null;
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
}, leftIn);
};
var renderLeft = function renderLeft() {
if (!backable && !left) return null;
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-left")
}, backable ? /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.ArrowLeft, {
size: "16"
}) : left);
};
var renderRightIn = function renderRightIn() {
if (!rightIn) return null;
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
}, rightIn);
};
var renderRight = function renderRight() {
if (!right) return null;
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-right")
}, right);
};
var handleClear = function handleClear() {
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
onClick: function onClick(e) {
return clearaVal(e);
}
}, /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.MaskClose, {
size: 16
}));
};
var clearaVal = function clearaVal(event) {
if (disabled || readOnly) {
return;
}
setValue('');
forceFocus();
onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
onClear && onClear(event);
};
var onConfirm = function onConfirm() {
onSearch && onSearch(value);
};
return /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', " ").concat(className || ''),
style: style
}, renderLeft(), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-content ").concat(shape === 'round' ? "".concat(classPrefix, "-round") : '')
}, renderLeftIn(), /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "nut-searchbar-input-box"
}, renderField()), clearable && !value && renderRightIn(), clearable && value && handleClear()), renderRight());
};
SearchBar.displayName = 'NutSearchBar';