@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
80 lines (79 loc) • 3.54 kB
JavaScript
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React from "react";
import classNames from "classnames";
import { Context } from "./context";
import { SECRET, useForm } from "./useform";
import { ComponentDefaults } from "../../utils/typings";
import Cell from "../cell";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
labelPosition: 'right',
starPosition: 'left',
disabled: false,
divider: false,
validateTrigger: 'onChange',
onFinish: function(values) {},
onFinishFailed: function(values, errorFields) {}
});
var PositionInfo = {
top: 'form-layout-top',
left: 'form-layout-left',
right: 'form-layout-right'
};
export var Form = /*#__PURE__*/ React.forwardRef(function(props, ref) {
var classPrefix = 'nut-form';
var _$_object_spread = _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 = _sliced_to_array(useForm(), 1), formInstance = _$ref[0], _$ref;
}
React.useImperativeHandle(ref, function() {
return formInstance;
});
formInstance.starPosition = starPosition;
var submit = formInstance.submit, resetFields = formInstance.resetFields;
var _formInstance_getInternal = formInstance.getInternal(SECRET), setCallback = _formInstance_getInternal.setCallback, setInitialValues = _formInstance_getInternal.setInitialValues;
// 设置校验后的回调，给组件的使用者暴露的接口
setCallback({
onFinish: onFinish,
onFinishFailed: onFinishFailed
});
// 初始化 initialValues 和 store
var mountRef = React.useRef(false);
setInitialValues(initialValues, !mountRef.current);
if (!mountRef.current) {
mountRef.current = true;
}
return /*#__PURE__*/ React.createElement("form", {
className: classNames(classPrefix, PositionInfo[labelPosition], className),
style: style,
onSubmit: function(e) {
e.preventDefault();
e.stopPropagation();
submit();
},
onReset: function(e) {
e.preventDefault();
e.stopPropagation();
resetFields();
}
}, /*#__PURE__*/ React.createElement(Cell.Group, {
divider: divider
}, /*#__PURE__*/ React.createElement(Context.Provider, {
value: {
formInstance: formInstance,
labelPosition: labelPosition,
disabled: disabled,
validateTrigger: validateTrigger
}
}, children), footer ? /*#__PURE__*/ React.createElement(Cell, {
className: "".concat(classPrefix, "-footer")
}, footer) : null));
});
Form.displayName = 'NutForm';