vantui-edit
Version:
一套适用于Taro3及React的vantui组件库
231 lines (194 loc) • 9.02 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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _label = _interopRequireDefault(require("./label"));
var _message = _interopRequireDefault(require("./message"));
var _jsxRuntime = require("react/jsx-runtime");
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 id = props.id,
name = props.name,
_props$layout = props.layout,
layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
children = props.children,
label = props.label,
_props$required = props.required,
required = _props$required === void 0 ? false : _props$required,
_props$rules = props.rules,
rules = _props$rules === void 0 ? {} : _props$rules,
_props$trigger = props.trigger,
trigger = _props$trigger === void 0 ? 'onChange' : _props$trigger,
_props$validateTrigge = props.validateTrigger,
validateTrigger = _props$validateTrigge === void 0 ? 'onChange' : _props$validateTrigge,
_props$labelClassName = props.labelClassName,
labelClassName = _props$labelClassName === void 0 ? '' : _props$labelClassName,
_props$requiredClassN = props.requiredClassName,
requiredClassName = _props$requiredClassN === void 0 ? '' : _props$requiredClassN,
_props$controllClassN = props.controllClassName,
controllClassName = _props$controllClassN === void 0 ? '' : _props$controllClassN,
_props$className = props.className,
className = _props$className === void 0 ? '' : _props$className,
_props$requiredIcon = props.requiredIcon,
requiredIcon = _props$requiredIcon === void 0 ? '' : _props$requiredIcon,
_props$feedback = props.feedback,
feedback = _props$feedback === void 0 ? 'failed' : _props$feedback,
_props$valueKey = props.valueKey,
valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
renderRight = props.renderRight,
mutiLevel = props.mutiLevel,
valueFormat = props.valueFormat,
_props$messageClassNa = props.messageClassName,
messageClassName = _props$messageClassNa === void 0 ? '' : _props$messageClassNa;
var formInstance = (0, _react.useContext)(_formContext.default);
var registerValidateFields = formInstance.registerValidateFields,
dispatch = formInstance.dispatch,
unRegisterValidate = formInstance.unRegisterValidate;
var _useState = (0, _react.useState)({}),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
forceUpdate_ = _useState2[1];
var _name = Array.isArray(name) ? name.join('.') : name;
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,
label: label,
mutiLevel: mutiLevel
});
}, [_name, label, mutiLevel, onStoreChange, registerValidateFields, required, rules, unRegisterValidate]);
(0, _react.useEffect)(function () {
return function () {
_name && unRegisterValidate(_name);
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var innnerValue = dispatch({
type: 'getFieldValue'
}, _name);
var getControlled = (0, _react.useCallback)(function (child) {
var props = _objectSpread({}, child.props);
if (!_name) return props;
var trigger_ = props[trigger];
var handleChange = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
var value;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
value = null;
if (!valueFormat) {
_context.next = 7;
break;
}
_context.next = 4;
return valueFormat(e, _name, formInstance);
case 4:
value = _context.sent;
_context.next = 8;
break;
case 7:
value = e.detail;
case 8:
dispatch({
type: 'setFieldsValue'
}, _name, value);
if (trigger_) trigger_(e);
case 10:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function handleChange(_x) {
return _ref.apply(this, arguments);
};
}();
props[trigger] = handleChange;
if (required || rules) {
props[validateTrigger] = /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(e) {
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
if (!(validateTrigger === trigger)) {
_context2.next = 3;
break;
}
_context2.next = 3;
return handleChange(e);
case 3:
dispatch({
type: 'validateFieldValue'
}, _name);
case 4:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
return function (_x2) {
return _ref2.apply(this, arguments);
};
}();
}
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, {
className: "".concat(prefixCls, "-wrapper"),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
id: id,
className: "".concat(prefixCls, " ").concat(prefixCls, "-").concat(layout, " ").concat(className),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_label.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"),
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;