@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
146 lines (145 loc) • 6.63 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 Taro from "@tarojs/taro";
import React, { useEffect, useRef, useState } from "react";
import { Input as TaroInput, View } from "@tarojs/components";
import { ArrowLeft, MaskClose, Search } from "@nutui/icons-react-taro";
import { useConfig } from "../configprovider/index";
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, {
size: "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 onInput = function(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(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(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);
};
useEffect(function() {
setValue(outerValue || '');
}, [
outerValue
]);
useEffect(function() {
if (Taro.getEnv() === 'WEB') {
autoFocus && forceFocus();
}
}, [
autoFocus
]);
var renderField = function() {
return /*#__PURE__*/ React.createElement(TaroInput, {
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(e) {
onInputClick && onInputClick(e);
};
var renderLeftIn = function() {
if (!leftIn) return null;
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-leftin ").concat(classPrefix, "-icon")
}, leftIn);
};
var renderLeft = function() {
if (!backable && !left) return null;
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-left")
}, backable ? /*#__PURE__*/ React.createElement(ArrowLeft, {
size: "16"
}) : left);
};
var renderRightIn = function() {
if (!rightIn) return null;
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-rightin ").concat(classPrefix, "-icon")
}, rightIn);
};
var renderRight = function() {
if (!right) return null;
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-right")
}, right);
};
var handleClear = function() {
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-clear ").concat(classPrefix, "-icon"),
onClick: function(e) {
return clearaVal(e);
}
}, /*#__PURE__*/ React.createElement(MaskClose, {
size: 16
}));
};
var clearaVal = function(event) {
if (disabled || readOnly) {
return;
}
setValue('');
forceFocus();
onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
onClear && onClear(event);
};
var onConfirm = function() {
onSearch && onSearch(value);
};
return /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', " ").concat(className || ''),
style: style
}, renderLeft(), /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-content ").concat(shape === 'round' ? "".concat(classPrefix, "-round") : '')
}, renderLeftIn(), /*#__PURE__*/ React.createElement(View, {
className: "nut-searchbar-input-box"
}, renderField()), clearable && !value && renderRightIn(), clearable && value && handleClear()), renderRight());
};
SearchBar.displayName = 'NutSearchBar';