@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
91 lines (90 loc) • 4.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Form", {
enumerable: true,
get: function() {
return Form;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _context = require("./context");
var _useform = require("./useform");
var _typings = require("../../utils/typings");
var _cell = /*#__PURE__*/ _interop_require_default._(require("../cell"));
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
labelPosition: 'right',
starPosition: 'left',
disabled: false,
divider: false,
validateTrigger: 'onChange',
onFinish: function onFinish(values) {},
onFinishFailed: function onFinishFailed(values, errorFields) {}
});
var PositionInfo = {
top: 'form-layout-top',
left: 'form-layout-left',
right: 'form-layout-right'
};
var Form = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
var classPrefix = 'nut-form';
var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, footer = _$_object_spread.footer, children = _$_object_spread.children, initialValues = _$_object_spread.initialValues, divider = _$_object_spread.divider, disabled = _$_object_spread.disabled, onFinish = _$_object_spread.onFinish, onFinishFailed = _$_object_spread.onFinishFailed, validateTrigger = _$_object_spread.validateTrigger, labelPosition = _$_object_spread.labelPosition, starPosition = _$_object_spread.starPosition, form = _$_object_spread.form;
var formInstance;
if (form !== undefined) {
formInstance = form;
} else {
// eslint-disable-next-line react-hooks/rules-of-hooks
;
var _$ref;
_$ref = (0, _sliced_to_array._)((0, _useform.useForm)(), 1), formInstance = _$ref[0], _$ref;
}
_react.default.useImperativeHandle(ref, function() {
return formInstance;
});
formInstance.starPosition = starPosition;
var submit = formInstance.submit, resetFields = formInstance.resetFields;
var _formInstance_getInternal = formInstance.getInternal(_useform.SECRET), setCallback = _formInstance_getInternal.setCallback, setInitialValues = _formInstance_getInternal.setInitialValues;
// 设置校验后的回调，给组件的使用者暴露的接口
setCallback({
onFinish: onFinish,
onFinishFailed: onFinishFailed
});
// 初始化 initialValues 和 store
var mountRef = _react.default.useRef(false);
setInitialValues(initialValues, !mountRef.current);
if (!mountRef.current) {
mountRef.current = true;
}
return /*#__PURE__*/ _react.default.createElement("form", {
className: (0, _classnames.default)(classPrefix, PositionInfo[labelPosition], className),
style: style,
onSubmit: function onSubmit(e) {
e.preventDefault();
e.stopPropagation();
submit();
},
onReset: function onReset(e) {
e.preventDefault();
e.stopPropagation();
resetFields();
}
}, /*#__PURE__*/ _react.default.createElement(_cell.default.Group, {
divider: divider
}, /*#__PURE__*/ _react.default.createElement(_context.Context.Provider, {
value: {
formInstance: formInstance,
labelPosition: labelPosition,
disabled: disabled,
validateTrigger: validateTrigger
}
}, children), footer ? /*#__PURE__*/ _react.default.createElement(_cell.default, {
className: "".concat(classPrefix, "-footer")
}, footer) : null));
});
Form.displayName = 'NutForm';