@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
165 lines (164 loc) • 8.96 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Search = Search;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _components = require("@tarojs/components");
var utils = _interopRequireWildcard(require("../wxs/utils"));
var _field = require("../field");
var _defaultProps = require("../default-props");
var _jsxRuntime = require("react/jsx-runtime");
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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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) { (0, _defineProperty2.default)(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; }
function Search(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().Search),
_useState2 = (0, _slicedToArray2.default)(_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 = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var noControlled = (0, _react.useMemo)(function () {
return typeof value === 'undefined';
}, [value]);
var _useState3 = (0, _react.useState)(noControlled ? defaultValue : value),
_useState4 = (0, _slicedToArray2.default)(_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);
};
(0, _react.useEffect)(function () {
if (!noControlled) {
setInnerValue(value);
}
}, [noControlled, value]);
var searchValue = noControlled ? innerValue : value;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, _objectSpread(_objectSpread({
className: "".concat(utils.bem('search', {
withaction: showAction || !!renderAction
}), " ").concat(className),
style: utils.style([{
background: background
}, style])
}, others), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: utils.bem('search__content', [shape]),
children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-search__label",
children: label
}) : renderLabel, /*#__PURE__*/(0, _jsxRuntime.jsx)(_field.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__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-search__action",
hoverClass: "van-search__action--hover",
hoverStayTime: 70,
children: renderAction || /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
onClick: _cancel,
className: "cancel-class",
children: actionText
})
})]
}));
}
var _default = Search;
exports.default = _default;