@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
202 lines (201 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.FormItem = FormItem;
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 _useDeepCompareEffect = _interopRequireDefault(require("use-deep-compare-effect"));
var _formContext = _interopRequireDefault(require("../form/core/formContext"));
var _defaultProps = require("../default-props");
var _label2 = _interopRequireDefault(require("./label"));
var _message = _interopRequireDefault(require("./message"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["id", "name", "layout", "children", "label", "labelName", "required", "rules", "trigger", "validateTrigger", "labelClassName", "requiredClassName", "controllClassName", "className", "requiredIcon", "feedback", "valueKey", "renderRight", "mutiLevel", "valueFormat", "messageClassName", "borderBottom", "controllFlexEnd"];
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; }
var prefixCls = 'vant-form-formItem';
function FormItem(props) {
var _useState = (0, _react.useState)((0, _defaultProps.get)().FormItem),
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
d = _useState2[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
id = _d$props.id,
name = _d$props.name,
_d$props$layout = _d$props.layout,
layout = _d$props$layout === void 0 ? 'horizontal' : _d$props$layout,
children = _d$props.children,
label = _d$props.label,
labelName = _d$props.labelName,
_d$props$required = _d$props.required,
required = _d$props$required === void 0 ? false : _d$props$required,
_d$props$rules = _d$props.rules,
rules = _d$props$rules === void 0 ? {} : _d$props$rules,
_d$props$trigger = _d$props.trigger,
trigger = _d$props$trigger === void 0 ? 'onChange' : _d$props$trigger,
_d$props$validateTrig = _d$props.validateTrigger,
validateTrigger = _d$props$validateTrig === void 0 ? 'onChange' : _d$props$validateTrig,
_d$props$labelClassNa = _d$props.labelClassName,
labelClassName = _d$props$labelClassNa === void 0 ? '' : _d$props$labelClassNa,
_d$props$requiredClas = _d$props.requiredClassName,
requiredClassName = _d$props$requiredClas === void 0 ? '' : _d$props$requiredClas,
_d$props$controllClas = _d$props.controllClassName,
controllClassName = _d$props$controllClas === void 0 ? '' : _d$props$controllClas,
_d$props$className = _d$props.className,
className = _d$props$className === void 0 ? '' : _d$props$className,
_d$props$requiredIcon = _d$props.requiredIcon,
requiredIcon = _d$props$requiredIcon === void 0 ? '' : _d$props$requiredIcon,
_d$props$feedback = _d$props.feedback,
feedback = _d$props$feedback === void 0 ? 'failed' : _d$props$feedback,
_d$props$valueKey = _d$props.valueKey,
valueKey = _d$props$valueKey === void 0 ? 'value' : _d$props$valueKey,
renderRight = _d$props.renderRight,
mutiLevel = _d$props.mutiLevel,
valueFormat = _d$props.valueFormat,
_d$props$messageClass = _d$props.messageClassName,
messageClassName = _d$props$messageClass === void 0 ? '' : _d$props$messageClass,
_d$props$borderBottom = _d$props.borderBottom,
borderBottom = _d$props$borderBottom === void 0 ? false : _d$props$borderBottom,
_d$props$controllFlex = _d$props.controllFlexEnd,
controllFlexEnd = _d$props$controllFlex === void 0 ? false : _d$props$controllFlex,
others = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var formInstance = (0, _react.useContext)(_formContext.default);
var registerValidateFields = formInstance.registerValidateFields,
dispatch = formInstance.dispatch,
unRegisterValidate = formInstance.unRegisterValidate;
var _useState3 = (0, _react.useState)({}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
forceUpdate_ = _useState4[1];
var _name = Array.isArray(name) ? name.join('.') : name;
var _label = (0, _react.useMemo)(function () {
var l = '';
if (typeof label === 'string') {
l = label;
} else if (labelName) {
l = labelName;
}
return l;
}, [label, labelName]);
var onStoreChange = (0, _react.useMemo)(function () {
var onStoreChange = {
changeValue: function changeValue() {
forceUpdate_({});
}
};
return onStoreChange;
}, []);
(0, _useDeepCompareEffect.default)(function () {
/* 注册表单 */
_name && registerValidateFields(_name, onStoreChange, {
rules: rules,
required: required,
mutiLevel: mutiLevel,
label: _label
});
}, [_name, mutiLevel, onStoreChange, registerValidateFields, required, rules, unRegisterValidate, _label]);
(0, _react.useEffect)(function () {
return function () {
_name && unRegisterValidate(_name);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var innnerValue = dispatch({
type: 'getFieldValue'
}, _name);
var nextHandle = (0, _react.useCallback)(function (value, e, trigger_) {
dispatch({
type: 'setFieldsValue'
}, _name, value);
if (trigger_) trigger_(e);
}, [_name, dispatch]);
var defaultValueFormat = (0, _react.useCallback)(function (e, _name, _formInstance) {
return e.detail;
}, []);
var getControlled = (0, _react.useCallback)(function (child) {
var props = _objectSpread({}, child.props);
if (!_name) return props;
var trigger_ = props[trigger];
var isWeappInput = /*#__PURE__*/(0, _react.isValidElement)(children) && (children === null || children === void 0 ? void 0 : children.type) === 'input' && process.env.TARO_ENV === 'weapp';
var valueFormat_ = valueFormat || defaultValueFormat;
var handleChange = function handleChange(e, isValidateField) {
var result = valueFormat_(e, _name, formInstance);
// 兼容注入的Promise
if (result !== null && result !== void 0 && result.then && result !== null && result !== void 0 && result.catch) {
if (isWeappInput) {
console.warn("\u5FAE\u4FE1\u7AEFInput\u7EC4\u4EF6\u8BF7\u5C3D\u91CF\u4E0D\u8981\u5F02\u6B65\u51FD\u6570\u5904\u7406\uFF0C\u7531\u4E8EFormItem\u4EE3\u7406\u7684Input\u4F1A\u57FA\u4E8E\u5FAE\u4FE1\u7AEF\u505A\u6027\u80FD\u4F18\u5316\uFF0C\n \u8BF7\u67E5\u9605https://developers.weixin.qq.com/miniprogram/dev/component/input.html");
}
result.then(function (v) {
nextHandle(v, e, trigger_);
isValidateField && dispatch({
type: 'validateFieldValue'
}, _name);
});
} else {
nextHandle(result, e, trigger_);
isValidateField && dispatch({
type: 'validateFieldValue'
}, _name);
if (isWeappInput) {
// 微信端Input输入存在性能问题，微信2.1版本后基于bindInput返回值做优化
return result;
}
}
};
props[trigger] = handleChange;
if (required || rules) {
var originValidateTrigger = props[validateTrigger] ? props[validateTrigger].bind({}) : undefined;
// 这里不可以使用异步，否则会导致微信小程序输入框显示异常，详见：https://github.com/AntmJS/vantui/issues/459
props[validateTrigger] = function (e) {
if (validateTrigger === trigger) {
handleChange(e, true);
} else {
originValidateTrigger === null || originValidateTrigger === void 0 ? void 0 : originValidateTrigger(e);
dispatch({
type: 'validateFieldValue'
}, _name);
}
};
}
props[valueKey] = innnerValue;
return props;
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[innnerValue, _name, trigger, required, rules]);
var renderChildren = (0, _react.useMemo)(function () {
return /*#__PURE__*/(0, _react.isValidElement)(children) ? /*#__PURE__*/(0, _react.cloneElement)(children, getControlled(children)) : children;
}, [children, getControlled]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, _objectSpread(_objectSpread({
className: "".concat(prefixCls, "-wrapper")
}, others), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
id: id,
className: "".concat(prefixCls, " ").concat(prefixCls, "-").concat(layout, " ").concat(className, "\n ").concat(borderBottom ? "vant-form-formItem-bottom-border" : ''),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_label2.default, {
label: label,
required: required,
className: labelClassName,
requiredClassName: requiredClassName,
requiredIcon: requiredIcon
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "".concat(prefixCls, "-controll ").concat(controllClassName),
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "".concat(prefixCls, "-controll-item ").concat(controllFlexEnd ? "".concat(prefixCls, "-controll-item-flex-end") : ''),
children: [renderChildren, renderRight]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_message.default, _objectSpread({
name: label,
className: messageClassName,
feedback: feedback
}, dispatch({
type: 'getFieldModel'
}, _name)))]
})]
})
}));
}
var _default = FormItem;
exports.default = _default;