@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
154 lines • 7.18 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["value", "defaultValue", "label", "focus", "error", "disabled", "readonly", "inputAlign", "showAction", "leftIcon", "rightIcon", "placeholder", "placeholderStyle", "actionText", "background", "maxlength", "shape", "clearable", "clearTrigger", "clearIcon", "renderLabel", "renderLeftIcon", "renderRightIcon", "renderAction", "onFocus", "onBlur", "onChange", "onClear", "onClickInput", "onSearch", "onCancel", "style", "className"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import { useState, useEffect, useMemo } from 'react';
import { View } from '@tarojs/components';
import * as utils from '../wxs/utils';
import { Field } from '../field';
import { get } from '../default-props';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function Search(props) {
var _useState = useState(get().Search),
_useState2 = _slicedToArray(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
value = _d$props.value,
_d$props$defaultValue = _d$props.defaultValue,
defaultValue = _d$props$defaultValue === void 0 ? '' : _d$props$defaultValue,
label = _d$props.label,
focus = _d$props.focus,
error = _d$props.error,
disabled = _d$props.disabled,
readonly = _d$props.readonly,
inputAlign = _d$props.inputAlign,
_d$props$showAction = _d$props.showAction,
showAction = _d$props$showAction === void 0 ? false : _d$props$showAction,
_d$props$leftIcon = _d$props.leftIcon,
leftIcon = _d$props$leftIcon === void 0 ? 'search' : _d$props$leftIcon,
rightIcon = _d$props.rightIcon,
placeholder = _d$props.placeholder,
placeholderStyle = _d$props.placeholderStyle,
_d$props$actionText = _d$props.actionText,
actionText = _d$props$actionText === void 0 ? '取消' : _d$props$actionText,
_d$props$background = _d$props.background,
background = _d$props$background === void 0 ? '#ffffff' : _d$props$background,
_d$props$maxlength = _d$props.maxlength,
maxlength = _d$props$maxlength === void 0 ? -1 : _d$props$maxlength,
_d$props$shape = _d$props.shape,
shape = _d$props$shape === void 0 ? 'square' : _d$props$shape,
_d$props$clearable = _d$props.clearable,
clearable = _d$props$clearable === void 0 ? true : _d$props$clearable,
_d$props$clearTrigger = _d$props.clearTrigger,
clearTrigger = _d$props$clearTrigger === void 0 ? 'focus' : _d$props$clearTrigger,
_d$props$clearIcon = _d$props.clearIcon,
clearIcon = _d$props$clearIcon === void 0 ? 'clear' : _d$props$clearIcon,
renderLabel = _d$props.renderLabel,
renderLeftIcon = _d$props.renderLeftIcon,
renderRightIcon = _d$props.renderRightIcon,
renderAction = _d$props.renderAction,
onFocus = _d$props.onFocus,
onBlur = _d$props.onBlur,
onChange = _d$props.onChange,
onClear = _d$props.onClear,
onClickInput = _d$props.onClickInput,
onSearch = _d$props.onSearch,
onCancel = _d$props.onCancel,
style = _d$props.style,
className = _d$props.className,
others = _objectWithoutProperties(_d$props, _excluded);
var noControlled = useMemo(function () {
return typeof value === 'undefined';
}, [value]);
var _useState3 = useState(noControlled ? defaultValue : value),
_useState4 = _slicedToArray(_useState3, 2),
innerValue = _useState4[0],
setInnerValue = _useState4[1];
var _change = function _change(event) {
if (noControlled) {
setInnerValue(event.detail);
}
onChange === null || onChange === void 0 ? void 0 : onChange(event);
};
var _cancel = function _cancel(e) {
/**
* 修复修改输入框值时，输入框失焦和赋值同时触发，赋值失效
* https://github.com/youzan/@vant/weapp/issues/1768
*/
setTimeout(function () {
setInnerValue('');
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
Object.defineProperty(e, 'detail', {
value: ''
});
onChange === null || onChange === void 0 ? void 0 : onChange(e);
}, 200);
};
useEffect(function () {
if (!noControlled) {
setInnerValue(value);
}
}, [noControlled, value]);
var searchValue = noControlled ? innerValue : value;
return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
className: "".concat(utils.bem('search', {
withaction: showAction || !!renderAction
}), " ").concat(className),
style: utils.style([{
background: background
}, style])
}, others), {}, {
children: [/*#__PURE__*/_jsxs(View, {
className: utils.bem('search__content', [shape]),
children: [label ? /*#__PURE__*/_jsx(View, {
className: "van-search__label",
children: label
}) : renderLabel, /*#__PURE__*/_jsx(Field, {
type: "text",
leftIcon: !renderLeftIcon ? leftIcon : '',
rightIcon: !renderRightIcon ? rightIcon : '',
focus: focus,
error: error,
border: false,
confirmType: "search",
className: "van-search__field field-class",
value: searchValue,
disabled: disabled,
readonly: readonly,
clearable: clearable,
clearTrigger: clearTrigger,
clearIcon: clearIcon,
maxlength: maxlength,
inputAlign: inputAlign,
placeholder: placeholder,
placeholderStyle: placeholderStyle,
renderLeftIcon: renderLeftIcon,
renderRightIcon: renderRightIcon,
style: "padding: 5px 10px 5px 0; background-color: transparent;",
onBlur: onBlur,
onFocus: onFocus,
onChange: _change,
onConfirm: onSearch
// @ts-ignore
,
onClear: onClear
// @ts-ignore
,
onClickInput: onClickInput
})]
}), (showAction || renderAction) && /*#__PURE__*/_jsx(View, {
className: "van-search__action",
hoverClass: "van-search__action--hover",
hoverStayTime: 70,
children: renderAction || /*#__PURE__*/_jsx(View, {
onClick: _cancel,
className: "cancel-class",
children: actionText
})
})]
}));
}
export default Search;