vantui-edit
Version:
一套适用于Taro3及React的vantui组件库
209 lines (187 loc) • 8.33 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
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, useContext, cloneElement, isValidElement, useMemo, useEffect, useCallback } from 'react';
import { View } from '@tarojs/components';
import useDeepCompareEffect from 'use-deep-compare-effect';
import FormContext from '../form/core/formContext';
import Label from './label';
import Message from './message';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var prefixCls = 'vant-form-formItem';
export 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 = useContext(FormContext);
var registerValidateFields = formInstance.registerValidateFields,
dispatch = formInstance.dispatch,
unRegisterValidate = formInstance.unRegisterValidate;
var _useState = useState({}),
_useState2 = _slicedToArray(_useState, 2),
forceUpdate_ = _useState2[1];
var _name = Array.isArray(name) ? name.join('.') : name;
var onStoreChange = useMemo(function () {
var onStoreChange = {
changeValue: function changeValue() {
forceUpdate_({});
}
};
return onStoreChange;
}, []);
useDeepCompareEffect(function () {
/* 注册表单 */
_name && registerValidateFields(_name, onStoreChange, {
rules: rules,
required: required,
label: label,
mutiLevel: mutiLevel
});
}, [_name, label, mutiLevel, onStoreChange, registerValidateFields, required, rules, unRegisterValidate]);
useEffect(function () {
return function () {
_name && unRegisterValidate(_name);
}; // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
var innnerValue = dispatch({
type: 'getFieldValue'
}, _name);
var getControlled = useCallback(function (child) {
var props = _objectSpread({}, child.props);
if (!_name) return props;
var trigger_ = props[trigger];
var handleChange = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
var value;
return _regeneratorRuntime.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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
return _regeneratorRuntime.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 = useMemo(function () {
return /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, getControlled(children)) : children;
}, [children, getControlled]);
return /*#__PURE__*/_jsx(View, {
className: "".concat(prefixCls, "-wrapper"),
children: /*#__PURE__*/_jsxs(View, {
id: id,
className: "".concat(prefixCls, " ").concat(prefixCls, "-").concat(layout, " ").concat(className),
children: [/*#__PURE__*/_jsx(Label, {
label: label,
required: required,
className: labelClassName,
requiredClassName: requiredClassName,
requiredIcon: requiredIcon
}), /*#__PURE__*/_jsxs(View, {
className: "".concat(prefixCls, "-controll ").concat(controllClassName),
children: [/*#__PURE__*/_jsxs(View, {
className: "".concat(prefixCls, "-controll-item"),
children: [renderChildren, renderRight]
}), /*#__PURE__*/_jsx(Message, _objectSpread({
name: label,
className: messageClassName,
feedback: feedback
}, dispatch({
type: 'getFieldModel'
}, _name)))]
})]
})
});
}
export default FormItem;