@uiw/react-form
Version:
Form component
274 lines (272 loc) • 10.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _react = _interopRequireWildcard(require("react"));
var _FormItem = _interopRequireDefault(require("./FormItem"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "fields", "children", "resetOnSubmit", "onSubmitError", "onChange", "onSubmit", "afterSubmit"],
_excluded2 = ["children", "validator", "name", "help", "label", "labelFor", "labelClassName", "labelStyle", "inline", "initialValue"];
function newFormState(fields, cb) {
var state = {
initial: {},
current: {},
submitting: false,
errors: {}
};
for (var name in fields) {
var props = fields[name];
if (!props) continue;
var _cb = cb((0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, props), {}, {
name: name
})),
initialValue = _cb.initialValue,
_currentValue = _cb.currentValue;
state.initial[name] = Array.isArray(initialValue) ? (0, _toConsumableArray2["default"])(initialValue) : initialValue;
state.current[name] = _currentValue;
}
return state;
}
function newInitialValue(value) {
return value === null || value === undefined ? '' : value;
}
var isPromise = function isPromise(promise) {
return promise && typeof promise.then === 'function';
};
function Form(props, ref) {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'w-form' : _props$prefixCls,
className = props.className,
fields = props.fields,
children = props.children,
resetOnSubmit = props.resetOnSubmit,
onSubmitError = props.onSubmitError,
onChange = props.onChange,
onSubmit = props.onSubmit,
afterSubmit = props.afterSubmit,
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
var initData = (0, _react.useMemo)(function () {
return newFormState(fields, function (_ref) {
var initialValue = _ref.initialValue;
initialValue = newInitialValue(initialValue);
return {
initialValue: initialValue,
currentValue: initialValue
};
});
}, []);
var _useState = (0, _react.useState)(initData),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
data = _useState2[0],
setData = _useState2[1];
(0, _react.useImperativeHandle)(ref, function () {
return {
onSubmit: handleSubmit,
resetForm: handleReset,
getFieldValues: function getFieldValues() {
return data.current;
},
getError: function getError() {
return data.errors;
},
setFields: setFields,
setFieldValue: setFieldValue
};
}, [data]);
var formUnits = {};
for (var name in fields) {
var itemProps = fields[name];
if (!itemProps) continue;
var error = data.errors[name];
if (typeof itemProps.initialValue === 'boolean') {
itemProps.checked = itemProps.initialValue;
}
var childField = controlField((0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, itemProps), {}, {
name: name
}));
var help = error || itemProps.help;
var labelFor = itemProps.labelFor;
formUnits[name] = /*#__PURE__*/(0, _react.createElement)(_FormItem["default"], (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, itemProps), {}, {
key: name,
children: childField,
help: help,
labelFor: labelFor,
name: name,
hasError: !!error
}));
}
function setFields(fields) {
var tempData = (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data), {}, {
current: fields
});
setData(tempData);
}
function setFieldValue(fieldName, value) {
var tempData = (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data), {}, {
current: (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data.current), {}, (0, _defineProperty2["default"])({}, fieldName, value))
});
setData(tempData);
}
function handleChange(name, validator, element, cb) {
return function (env, list) {
var value = env && env.target && 'value' in env.target ? env.target.value : env;
// 控件 Checkbox.Group 多选值的处理
value = list || value;
// 控件 Checkbox 值的处理
if (!list && element && env && env.target && /(radio)/.test(env.target.type)) {
// 控件 Switch/Radio/Checkbox 值的处理
value = env.target.value ? env.target.value : env.target.checked;
}
if (!list && element && env && env.target && /(checkbox)/.test(env.target.type)) {
// 控件 Switch/Radio/Checkbox 值的处理
value = env.target.checked;
}
var nextState = {
current: (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data.current), {}, (0, _defineProperty2["default"])({}, name, value))
};
var error = validator && validator(value);
if (!error) {
nextState.errors = (0, _objectSpread4["default"])({}, data.errors);
delete nextState.errors[name];
}
if (env && env.persist && typeof env.persist === 'function') env.persist();
setData((0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data), nextState));
if (cb) {
cb(env);
}
onChange && onChange((0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data), nextState));
};
}
function handleSubmit(e) {
e && e.preventDefault();
var initial = data.initial,
current = data.current;
setData((0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data), {}, {
submitting: true
}));
var nextState = {
submitting: false
};
var onError = function onError(evn) {
return setData((0, _objectSpread4["default"])((0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data), nextState), {}, {
errors: onSubmitError && onSubmitError(evn) || {}
}));
};
var onSuccess = function onSuccess(response) {
if (resetOnSubmit) {
nextState.current = initial;
}
setData((0, _objectSpread4["default"])((0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data), nextState), {}, {
errors: {}
}));
afterSubmit && afterSubmit({
state: data,
response: response,
reset: handleReset
});
};
try {
var afterSubmitPromise = onSubmit ? onSubmit({
initial: initial,
current: current
}, e) : undefined;
if (afterSubmitPromise && isPromise(afterSubmitPromise)) {
return afterSubmitPromise.then(onSuccess)["catch"](onError);
} else {
return onSuccess(afterSubmitPromise);
}
} catch (evn) {
onError(evn);
}
}
function canSubmit() {
var submitting = data.submitting,
_data$current = data.current,
current = _data$current === void 0 ? {} : _data$current;
var passesValidators = true;
for (var _name in fields) {
if (Object.prototype.hasOwnProperty.call(fields, _name)) {
var fieldsProps = fields[_name];
if (!fieldsProps) continue;
if (fieldsProps.validator && fieldsProps.validator(current[_name])) {
passesValidators = false;
break;
}
}
}
return !submitting && passesValidators;
}
function handleReset() {
var initial = data.initial;
var initials = (0, _objectSpread4["default"])({}, initial);
Object.entries(initials).map(function (_ref2) {
var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
key = _ref3[0],
value = _ref3[1];
if (Array.isArray(value)) {
initials[key] = (0, _toConsumableArray2["default"])(value);
}
});
setData((0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, data), {}, {
initial: initial,
current: initials,
errors: {}
}));
}
function controlField(_ref4) {
var children = _ref4.children,
validator = _ref4.validator,
name = _ref4.name,
help = _ref4.help,
label = _ref4.label,
labelFor = _ref4.labelFor,
labelClassName = _ref4.labelClassName,
labelStyle = _ref4.labelStyle,
inline = _ref4.inline,
initialValue = _ref4.initialValue,
other = (0, _objectWithoutProperties2["default"])(_ref4, _excluded2);
var element = typeof children !== 'function' ? children : children({
onChange: handleChange(name, validator),
onSubmit: handleSubmit,
canSubmit: canSubmit
});
if (!element || _react["default"].Children.count(element) !== 1 || !name) return element;
var props = (0, _objectSpread4["default"])({
name: element.props.name || name
}, other);
var hasCurrentValue = Object.prototype.hasOwnProperty.call(data.current, name);
props.id = element.props.id;
props.value = hasCurrentValue ? data.current && data.current[name] : props.value;
// : element.props.value;
var type = element.props.type;
if (type === 'checkbox' || type === 'switch' || typeof props.value === 'boolean') {
props.checked = !!props.value;
delete props.value;
}
props.onChange = handleChange(name, validator, element, element.props.onChange);
return /*#__PURE__*/_react["default"].cloneElement(element, props);
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("form", (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, others), {}, {
className: [prefixCls, className].filter(Boolean).join(' ').trim(),
onSubmit: handleSubmit,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
disabled: data.submitting,
children: typeof children === 'function' ? children({
fields: formUnits,
state: data,
resetForm: handleReset,
canSubmit: canSubmit
}) : children
})
}));
}
var _default = exports["default"] = /*#__PURE__*/_react["default"].forwardRef(Form);
module.exports = exports.default;