rsuite 5.59.1 → 5.59.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/DateRangePicker/styles/index.css +27 -0
- package/DateRangePicker/styles/index.less +27 -0
- package/cjs/@types/common.d.ts +1 -1
- package/cjs/Calendar/CalendarContainer.js +4 -4
- package/cjs/DatePicker/DatePicker.d.ts +3 -38
- package/cjs/DatePicker/DatePicker.js +86 -137
- package/cjs/DatePicker/PredefinedRanges.d.ts +1 -1
- package/cjs/DatePicker/PredefinedRanges.js +3 -3
- package/cjs/DatePicker/Toolbar.d.ts +1 -1
- package/cjs/DatePicker/Toolbar.js +13 -12
- package/cjs/DatePicker/hooks/useFocus.d.ts +13 -0
- package/cjs/DatePicker/hooks/useFocus.js +96 -0
- package/cjs/DatePicker/hooks/useMonthView.d.ts +10 -0
- package/cjs/DatePicker/hooks/useMonthView.js +28 -0
- package/cjs/DatePicker/index.d.ts +2 -1
- package/cjs/DatePicker/types.d.ts +37 -0
- package/cjs/DatePicker/utils.d.ts +9 -0
- package/cjs/DatePicker/utils.js +20 -2
- package/cjs/DateRangePicker/DateRangePicker.d.ts +15 -3
- package/cjs/DateRangePicker/DateRangePicker.js +58 -68
- package/cjs/DateRangePicker/DateRangePickerContext.d.ts +4 -1
- package/cjs/DateRangePicker/DateRangePickerContext.js +4 -4
- package/cjs/DateRangePicker/Header.d.ts +11 -0
- package/cjs/DateRangePicker/Header.js +65 -0
- package/cjs/DateRangePicker/disabledDateUtils.d.ts +1 -1
- package/cjs/DateRangePicker/disabledDateUtils.js +1 -1
- package/cjs/DateRangePicker/index.js +5 -0
- package/cjs/Form/Form.d.ts +56 -39
- package/cjs/Form/Form.js +64 -186
- package/cjs/Form/FormContext.d.ts +12 -9
- package/cjs/Form/FormContext.js +11 -5
- package/cjs/Form/hooks/useFormRef.d.ts +55 -0
- package/cjs/Form/hooks/useFormRef.js +45 -0
- package/cjs/Form/hooks/useFormValidate.d.ts +19 -0
- package/cjs/Form/hooks/useFormValidate.js +157 -0
- package/cjs/Form/hooks/useFormValue.d.ts +2 -1
- package/cjs/Form/hooks/useFormValue.js +12 -1
- package/cjs/Form/hooks/useSchemaModel.js +5 -0
- package/cjs/Form/index.d.ts +2 -1
- package/cjs/FormControl/FormControl.d.ts +1 -1
- package/cjs/FormControl/FormControl.js +50 -68
- package/cjs/FormControl/hooks/useField.d.ts +18 -0
- package/cjs/FormControl/hooks/useField.js +54 -0
- package/cjs/FormControl/hooks/useRegisterModel.d.ts +3 -0
- package/cjs/FormControl/hooks/useRegisterModel.js +22 -0
- package/cjs/FormControl/utils.d.ts +1 -0
- package/cjs/FormControl/utils.js +8 -0
- package/cjs/FormControlLabel/FormControlLabel.js +12 -9
- package/cjs/FormErrorMessage/FormErrorMessage.js +2 -5
- package/cjs/FormGroup/FormGroup.d.ts +18 -4
- package/cjs/FormGroup/FormGroup.js +28 -2
- package/cjs/FormGroup/index.d.ts +1 -0
- package/cjs/FormGroup/index.js +4 -3
- package/cjs/FormHelpText/FormHelpText.d.ts +2 -1
- package/cjs/FormHelpText/FormHelpText.js +16 -9
- package/cjs/Input/Input.js +4 -5
- package/cjs/utils/dateUtils.d.ts +72 -10
- package/cjs/utils/dateUtils.js +88 -29
- package/dist/rsuite-no-reset-rtl.css +27 -0
- package/dist/rsuite-no-reset-rtl.min.css +1 -1
- package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
- package/dist/rsuite-no-reset.css +27 -0
- package/dist/rsuite-no-reset.min.css +1 -1
- package/dist/rsuite-no-reset.min.css.map +1 -1
- package/dist/rsuite-rtl.css +27 -0
- package/dist/rsuite-rtl.min.css +1 -1
- package/dist/rsuite-rtl.min.css.map +1 -1
- package/dist/rsuite.css +27 -0
- package/dist/rsuite.js +144 -44
- package/dist/rsuite.js.map +1 -1
- package/dist/rsuite.min.css +1 -1
- package/dist/rsuite.min.css.map +1 -1
- package/dist/rsuite.min.js +1 -1
- package/dist/rsuite.min.js.LICENSE.txt +35 -0
- package/dist/rsuite.min.js.map +1 -1
- package/esm/@types/common.d.ts +1 -1
- package/esm/Calendar/CalendarContainer.js +5 -5
- package/esm/DatePicker/DatePicker.d.ts +3 -38
- package/esm/DatePicker/DatePicker.js +88 -139
- package/esm/DatePicker/PredefinedRanges.d.ts +1 -1
- package/esm/DatePicker/PredefinedRanges.js +3 -3
- package/esm/DatePicker/Toolbar.d.ts +1 -1
- package/esm/DatePicker/Toolbar.js +13 -12
- package/esm/DatePicker/hooks/useFocus.d.ts +13 -0
- package/esm/DatePicker/hooks/useFocus.js +90 -0
- package/esm/DatePicker/hooks/useMonthView.d.ts +10 -0
- package/esm/DatePicker/hooks/useMonthView.js +22 -0
- package/esm/DatePicker/index.d.ts +2 -1
- package/esm/DatePicker/types.d.ts +37 -0
- package/esm/DatePicker/utils.d.ts +9 -0
- package/esm/DatePicker/utils.js +18 -2
- package/esm/DateRangePicker/DateRangePicker.d.ts +15 -3
- package/esm/DateRangePicker/DateRangePicker.js +61 -71
- package/esm/DateRangePicker/DateRangePickerContext.d.ts +4 -1
- package/esm/DateRangePicker/DateRangePickerContext.js +2 -2
- package/esm/DateRangePicker/Header.d.ts +11 -0
- package/esm/DateRangePicker/Header.js +59 -0
- package/esm/DateRangePicker/disabledDateUtils.d.ts +1 -1
- package/esm/DateRangePicker/disabledDateUtils.js +1 -1
- package/esm/DateRangePicker/index.js +4 -0
- package/esm/Form/Form.d.ts +56 -39
- package/esm/Form/Form.js +62 -183
- package/esm/Form/FormContext.d.ts +12 -9
- package/esm/Form/FormContext.js +6 -2
- package/esm/Form/hooks/useFormRef.d.ts +55 -0
- package/esm/Form/hooks/useFormRef.js +40 -0
- package/esm/Form/hooks/useFormValidate.d.ts +19 -0
- package/esm/Form/hooks/useFormValidate.js +152 -0
- package/esm/Form/hooks/useFormValue.d.ts +2 -1
- package/esm/Form/hooks/useFormValue.js +12 -1
- package/esm/Form/hooks/useSchemaModel.js +5 -0
- package/esm/Form/index.d.ts +2 -1
- package/esm/FormControl/FormControl.d.ts +1 -1
- package/esm/FormControl/FormControl.js +48 -66
- package/esm/FormControl/hooks/useField.d.ts +18 -0
- package/esm/FormControl/hooks/useField.js +48 -0
- package/esm/FormControl/hooks/useRegisterModel.d.ts +3 -0
- package/esm/FormControl/hooks/useRegisterModel.js +17 -0
- package/esm/FormControl/utils.d.ts +1 -0
- package/esm/FormControl/utils.js +4 -0
- package/esm/FormControlLabel/FormControlLabel.js +12 -8
- package/esm/FormErrorMessage/FormErrorMessage.js +2 -5
- package/esm/FormGroup/FormGroup.d.ts +18 -4
- package/esm/FormGroup/FormGroup.js +27 -1
- package/esm/FormGroup/index.d.ts +1 -0
- package/esm/FormGroup/index.js +1 -0
- package/esm/FormHelpText/FormHelpText.d.ts +2 -1
- package/esm/FormHelpText/FormHelpText.js +17 -9
- package/esm/Input/Input.js +4 -5
- package/esm/utils/dateUtils.d.ts +72 -10
- package/esm/utils/dateUtils.js +86 -28
- package/package.json +2 -2
- package/cjs/Form/hooks/useFormError.d.ts +0 -6
- package/cjs/Form/hooks/useFormError.js +0 -31
- package/cjs/FormControl/useRegisterModel.d.ts +0 -4
- package/cjs/FormControl/useRegisterModel.js +0 -18
- package/esm/Form/hooks/useFormError.d.ts +0 -6
- package/esm/Form/hooks/useFormError.js +0 -26
- package/esm/FormControl/useRegisterModel.d.ts +0 -4
- package/esm/FormControl/useRegisterModel.js +0 -13
package/esm/Form/Form.d.ts
CHANGED
|
@@ -1,36 +1,64 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Schema } from 'schema-typed';
|
|
3
|
-
import type { CheckResult } from 'schema-typed';
|
|
4
3
|
import FormControl from '../FormControl';
|
|
5
4
|
import FormControlLabel from '../FormControlLabel';
|
|
6
5
|
import FormErrorMessage from '../FormErrorMessage';
|
|
7
6
|
import FormGroup from '../FormGroup';
|
|
8
7
|
import FormHelpText from '../FormHelpText';
|
|
9
8
|
import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
|
|
9
|
+
import { FormInstance } from './hooks/useFormRef';
|
|
10
10
|
export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
|
|
11
11
|
[P in keyof T]?: errorMsgType;
|
|
12
12
|
}> extends WithAsProps, Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit' | 'onError'> {
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Set the left and right columns of the layout of the elements within the form。
|
|
15
|
+
*
|
|
16
|
+
* @default 'vertical'
|
|
17
|
+
*/
|
|
14
18
|
layout?: 'horizontal' | 'vertical' | 'inline';
|
|
15
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* The fluid property allows the Input 100% of the form to fill the container, valid only in vertical layouts.
|
|
21
|
+
*/
|
|
16
22
|
fluid?: boolean;
|
|
17
|
-
/**
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
/**
|
|
24
|
+
* Current value of the input. Creates a controlled component
|
|
25
|
+
*/
|
|
26
|
+
formValue?: T | null;
|
|
27
|
+
/**
|
|
28
|
+
* Initial value
|
|
29
|
+
*/
|
|
30
|
+
formDefaultValue?: T | null;
|
|
31
|
+
/**
|
|
32
|
+
* Error message of form
|
|
33
|
+
*/
|
|
34
|
+
formError?: E | null;
|
|
35
|
+
/**
|
|
36
|
+
* Trigger the type of form validation.
|
|
37
|
+
*
|
|
38
|
+
* @default 'change'
|
|
39
|
+
*/
|
|
24
40
|
checkTrigger?: TypeAttributes.CheckTrigger;
|
|
25
|
-
/**
|
|
41
|
+
/**
|
|
42
|
+
* SchemaModel object
|
|
43
|
+
*
|
|
44
|
+
* @see https://github.com/rsuite/schema-typed
|
|
45
|
+
*/
|
|
26
46
|
model?: Schema;
|
|
27
|
-
/**
|
|
47
|
+
/**
|
|
48
|
+
* Make the form readonly
|
|
49
|
+
*/
|
|
28
50
|
readOnly?: boolean;
|
|
29
|
-
/**
|
|
51
|
+
/**
|
|
52
|
+
* Render the form as plain text
|
|
53
|
+
*/
|
|
30
54
|
plaintext?: boolean;
|
|
31
|
-
/**
|
|
55
|
+
/**
|
|
56
|
+
* Disable the form
|
|
57
|
+
*/
|
|
32
58
|
disabled?: boolean;
|
|
33
|
-
/**
|
|
59
|
+
/**
|
|
60
|
+
* The error message comes from context
|
|
61
|
+
*/
|
|
34
62
|
errorFromContext?: boolean;
|
|
35
63
|
/**
|
|
36
64
|
* The form data is nested.
|
|
@@ -46,33 +74,22 @@ export interface FormProps<T = Record<string, any>, errorMsgType = any, E = {
|
|
|
46
74
|
* ```
|
|
47
75
|
*/
|
|
48
76
|
nestedField?: boolean;
|
|
49
|
-
/**
|
|
77
|
+
/**
|
|
78
|
+
* Callback fired when data changing
|
|
79
|
+
*/
|
|
50
80
|
onChange?: (formValue: T, event?: React.SyntheticEvent) => void;
|
|
51
|
-
/**
|
|
81
|
+
/**
|
|
82
|
+
* Callback fired when error checking
|
|
83
|
+
*/
|
|
52
84
|
onError?: (formError: E) => void;
|
|
53
|
-
/**
|
|
85
|
+
/**
|
|
86
|
+
* Callback fired when data cheking
|
|
87
|
+
*/
|
|
54
88
|
onCheck?: (formError: E) => void;
|
|
55
|
-
/**
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
[P in keyof T]?: errorMsg;
|
|
60
|
-
}> {
|
|
61
|
-
root: HTMLFormElement | null;
|
|
62
|
-
/** Verify form data */
|
|
63
|
-
check: (callback?: (formError: E) => void) => boolean;
|
|
64
|
-
/** Asynchronously check form data */
|
|
65
|
-
checkAsync: () => Promise<any>;
|
|
66
|
-
/** Check the data field */
|
|
67
|
-
checkForField: (fieldName: keyof T, callback?: (checkResult: CheckResult<errorMsg>) => void) => boolean;
|
|
68
|
-
/** Asynchronous verification as a data field */
|
|
69
|
-
checkForFieldAsync: (fieldName: keyof T) => Promise<CheckResult>;
|
|
70
|
-
/** Clear all error messages */
|
|
71
|
-
cleanErrors: (callback?: () => void) => void;
|
|
72
|
-
/** Clear the error message of the specified field */
|
|
73
|
-
cleanErrorForField: (fieldName: keyof E, callback?: () => void) => void;
|
|
74
|
-
/** All error messages are reset, and an initial value can be set */
|
|
75
|
-
resetErrors: (formError: E, callback?: () => void) => void;
|
|
89
|
+
/**
|
|
90
|
+
* Callback fired when form submit
|
|
91
|
+
*/
|
|
92
|
+
onSubmit?: (checkPassed: boolean, event: React.FormEvent<HTMLFormElement>) => void;
|
|
76
93
|
}
|
|
77
94
|
export interface FormComponent extends RsRefForwardingComponent<'form', FormProps & {
|
|
78
95
|
ref?: React.Ref<FormInstance>;
|
package/esm/Form/Form.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
3
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
|
-
import React
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
|
-
import omit from 'lodash/omit';
|
|
7
|
-
import set from 'lodash/set';
|
|
8
6
|
import { SchemaModel } from 'schema-typed';
|
|
9
|
-
import
|
|
7
|
+
import { FormValueProvider, FormProvider } from './FormContext';
|
|
10
8
|
import FormControl from '../FormControl';
|
|
11
9
|
import FormControlLabel from '../FormControlLabel';
|
|
12
10
|
import FormErrorMessage from '../FormErrorMessage';
|
|
@@ -15,9 +13,11 @@ import FormHelpText from '../FormHelpText';
|
|
|
15
13
|
import { useEventCallback } from '../utils';
|
|
16
14
|
import { oneOf } from '../internals/propTypes';
|
|
17
15
|
import useSchemaModel from './hooks/useSchemaModel';
|
|
18
|
-
import
|
|
16
|
+
import useFormValidate from './hooks/useFormValidate';
|
|
19
17
|
import useFormValue from './hooks/useFormValue';
|
|
20
18
|
import useFormClassNames from './hooks/useFormClassNames';
|
|
19
|
+
var defaultSchema = SchemaModel({});
|
|
20
|
+
|
|
21
21
|
/**
|
|
22
22
|
* The `Form` component is a form interface for collecting and validating user input.
|
|
23
23
|
* @see https://rsuitejs.com/components/form
|
|
@@ -31,15 +31,15 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
31
31
|
errorFromContext = _props$errorFromConte === void 0 ? true : _props$errorFromConte,
|
|
32
32
|
_props$formDefaultVal = props.formDefaultValue,
|
|
33
33
|
formDefaultValue = _props$formDefaultVal === void 0 ? {} : _props$formDefaultVal,
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
controlledFormValue = props.formValue,
|
|
35
|
+
controlledFormError = props.formError,
|
|
36
36
|
fluid = props.fluid,
|
|
37
37
|
_props$nestedField = props.nestedField,
|
|
38
38
|
nestedField = _props$nestedField === void 0 ? false : _props$nestedField,
|
|
39
39
|
_props$layout = props.layout,
|
|
40
40
|
layout = _props$layout === void 0 ? 'vertical' : _props$layout,
|
|
41
41
|
_props$model = props.model,
|
|
42
|
-
formModel = _props$model === void 0 ?
|
|
42
|
+
formModel = _props$model === void 0 ? defaultSchema : _props$model,
|
|
43
43
|
readOnly = props.readOnly,
|
|
44
44
|
plaintext = props.plaintext,
|
|
45
45
|
className = props.className,
|
|
@@ -54,6 +54,27 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
54
54
|
getCombinedModel = _useSchemaModel.getCombinedModel,
|
|
55
55
|
pushFieldRule = _useSchemaModel.pushFieldRule,
|
|
56
56
|
removeFieldRule = _useSchemaModel.removeFieldRule;
|
|
57
|
+
var _useFormValue = useFormValue(controlledFormValue, {
|
|
58
|
+
formDefaultValue: formDefaultValue,
|
|
59
|
+
nestedField: nestedField
|
|
60
|
+
}),
|
|
61
|
+
formValue = _useFormValue.formValue,
|
|
62
|
+
onRemoveValue = _useFormValue.onRemoveValue,
|
|
63
|
+
setFieldValue = _useFormValue.setFieldValue;
|
|
64
|
+
var formValidateProps = {
|
|
65
|
+
ref: ref,
|
|
66
|
+
formValue: formValue,
|
|
67
|
+
getCombinedModel: getCombinedModel,
|
|
68
|
+
onCheck: onCheck,
|
|
69
|
+
onError: onError,
|
|
70
|
+
nestedField: nestedField
|
|
71
|
+
};
|
|
72
|
+
var _useFormValidate = useFormValidate(controlledFormError, formValidateProps),
|
|
73
|
+
formError = _useFormValidate.formError,
|
|
74
|
+
setFieldError = _useFormValidate.setFieldError,
|
|
75
|
+
onRemoveError = _useFormValidate.onRemoveError,
|
|
76
|
+
check = _useFormValidate.check,
|
|
77
|
+
formRef = _useFormValidate.formRef;
|
|
57
78
|
var classes = useFormClassNames({
|
|
58
79
|
classPrefix: classPrefix,
|
|
59
80
|
className: className,
|
|
@@ -63,199 +84,57 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
63
84
|
plaintext: plaintext,
|
|
64
85
|
disabled: disabled
|
|
65
86
|
});
|
|
66
|
-
var _useFormValue = useFormValue(formValueProp, formDefaultValue),
|
|
67
|
-
formValue = _useFormValue.formValue,
|
|
68
|
-
setFormValue = _useFormValue.setFormValue,
|
|
69
|
-
onRemoveValue = _useFormValue.onRemoveValue;
|
|
70
|
-
var _useFormError = useFormError(formErrorProp),
|
|
71
|
-
formError = _useFormError.formError,
|
|
72
|
-
setFormError = _useFormError.setFormError,
|
|
73
|
-
onRemoveError = _useFormError.onRemoveError;
|
|
74
|
-
/**
|
|
75
|
-
* Validate the form data and return a boolean.
|
|
76
|
-
* The error message after verification is returned in the callback.
|
|
77
|
-
* @param callback
|
|
78
|
-
*/
|
|
79
|
-
var check = useEventCallback(function (callback) {
|
|
80
|
-
var formError = {};
|
|
81
|
-
var errorCount = 0;
|
|
82
|
-
var model = getCombinedModel();
|
|
83
|
-
Object.keys(model.getSchemaSpec()).forEach(function (key) {
|
|
84
|
-
var checkResult = model.checkForField(key, formValue || {});
|
|
85
|
-
if (checkResult.hasError === true) {
|
|
86
|
-
errorCount += 1;
|
|
87
|
-
formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
setFormError(formError);
|
|
91
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
92
|
-
callback === null || callback === void 0 ? void 0 : callback(formError);
|
|
93
|
-
if (errorCount > 0) {
|
|
94
|
-
onError === null || onError === void 0 ? void 0 : onError(formError);
|
|
95
|
-
return false;
|
|
96
|
-
}
|
|
97
|
-
return true;
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
* Check the data field
|
|
102
|
-
* @param fieldName
|
|
103
|
-
* @param callback
|
|
104
|
-
*/
|
|
105
|
-
var checkForField = useEventCallback(function (fieldName, callback) {
|
|
106
|
-
var _extends2;
|
|
107
|
-
var model = getCombinedModel();
|
|
108
|
-
var checkResult = model.checkForField(fieldName, formValue || {});
|
|
109
|
-
var nextFormError = _extends({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
|
|
110
|
-
setFormError(nextFormError);
|
|
111
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
|
|
112
|
-
callback === null || callback === void 0 ? void 0 : callback(checkResult);
|
|
113
|
-
if (checkResult.hasError) {
|
|
114
|
-
onError === null || onError === void 0 ? void 0 : onError(nextFormError);
|
|
115
|
-
}
|
|
116
|
-
return !checkResult.hasError;
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* Check form data asynchronously and return a Promise
|
|
121
|
-
*/
|
|
122
|
-
var checkAsync = useEventCallback(function () {
|
|
123
|
-
var promises = [];
|
|
124
|
-
var keys = [];
|
|
125
|
-
var model = getCombinedModel();
|
|
126
|
-
Object.keys(model.getSchemaSpec()).forEach(function (key) {
|
|
127
|
-
keys.push(key);
|
|
128
|
-
promises.push(model.checkForFieldAsync(key, formValue || {}));
|
|
129
|
-
});
|
|
130
|
-
return Promise.all(promises).then(function (values) {
|
|
131
|
-
var formError = {};
|
|
132
|
-
var errorCount = 0;
|
|
133
|
-
for (var i = 0; i < values.length; i++) {
|
|
134
|
-
if (values[i].hasError) {
|
|
135
|
-
errorCount += 1;
|
|
136
|
-
formError[keys[i]] = values[i].errorMessage;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
140
|
-
setFormError(formError);
|
|
141
|
-
if (errorCount > 0) {
|
|
142
|
-
onError === null || onError === void 0 ? void 0 : onError(formError);
|
|
143
|
-
}
|
|
144
|
-
return {
|
|
145
|
-
hasError: errorCount > 0,
|
|
146
|
-
formError: formError
|
|
147
|
-
};
|
|
148
|
-
});
|
|
149
|
-
});
|
|
150
|
-
|
|
151
|
-
/**
|
|
152
|
-
* Asynchronously check form fields and return Promise
|
|
153
|
-
* @param fieldName
|
|
154
|
-
*/
|
|
155
|
-
var checkForFieldAsync = useEventCallback(function (fieldName) {
|
|
156
|
-
var model = getCombinedModel();
|
|
157
|
-
return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {
|
|
158
|
-
var _extends3;
|
|
159
|
-
var nextFormError = _extends({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
|
|
160
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
|
|
161
|
-
setFormError(nextFormError);
|
|
162
|
-
if (checkResult.hasError) {
|
|
163
|
-
onError === null || onError === void 0 ? void 0 : onError(nextFormError);
|
|
164
|
-
}
|
|
165
|
-
return checkResult;
|
|
166
|
-
});
|
|
167
|
-
});
|
|
168
|
-
var cleanErrors = useEventCallback(function () {
|
|
169
|
-
setFormError({});
|
|
170
|
-
});
|
|
171
|
-
var cleanErrorForField = useEventCallback(function (fieldName) {
|
|
172
|
-
setFormError(omit(formError, [fieldName]));
|
|
173
|
-
});
|
|
174
|
-
var resetErrors = useEventCallback(function (formError) {
|
|
175
|
-
if (formError === void 0) {
|
|
176
|
-
formError = {};
|
|
177
|
-
}
|
|
178
|
-
setFormError(formError);
|
|
179
|
-
});
|
|
180
|
-
useImperativeHandle(ref, function () {
|
|
181
|
-
return {
|
|
182
|
-
root: rootRef.current,
|
|
183
|
-
check: check,
|
|
184
|
-
checkForField: checkForField,
|
|
185
|
-
checkAsync: checkAsync,
|
|
186
|
-
checkForFieldAsync: checkForFieldAsync,
|
|
187
|
-
cleanErrors: cleanErrors,
|
|
188
|
-
cleanErrorForField: cleanErrorForField,
|
|
189
|
-
resetErrors: resetErrors
|
|
190
|
-
};
|
|
191
|
-
});
|
|
192
|
-
var removeFieldError = useEventCallback(function (name) {
|
|
193
|
-
var formError = onRemoveError(name);
|
|
194
|
-
setFormError(formError);
|
|
195
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
196
|
-
});
|
|
197
87
|
var removeFieldValue = useEventCallback(function (name) {
|
|
198
88
|
var formValue = onRemoveValue(name);
|
|
199
89
|
onChange === null || onChange === void 0 ? void 0 : onChange(formValue);
|
|
200
90
|
});
|
|
91
|
+
var removeFieldError = useEventCallback(function (name) {
|
|
92
|
+
onRemoveError(name);
|
|
93
|
+
});
|
|
201
94
|
var handleSubmit = useEventCallback(function (event) {
|
|
95
|
+
var _event$preventDefault, _event$stopPropagatio;
|
|
96
|
+
event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event);
|
|
97
|
+
event === null || event === void 0 ? void 0 : (_event$stopPropagatio = event.stopPropagation) === null || _event$stopPropagatio === void 0 ? void 0 : _event$stopPropagatio.call(event);
|
|
202
98
|
if (disabled || readOnly || plaintext) {
|
|
203
99
|
return;
|
|
204
100
|
}
|
|
205
|
-
|
|
206
|
-
event
|
|
207
|
-
var checkStatus = check();
|
|
208
|
-
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkStatus, event);
|
|
101
|
+
var checkResult = check();
|
|
102
|
+
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(checkResult, event);
|
|
209
103
|
});
|
|
210
|
-
var
|
|
211
|
-
|
|
212
|
-
var nextFormError = _extends({}, formError, (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
|
|
213
|
-
setFormError(nextFormError);
|
|
214
|
-
onError === null || onError === void 0 ? void 0 : onError(nextFormError);
|
|
215
|
-
onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
|
|
104
|
+
var onFieldError = useEventCallback(function (name, checkResult) {
|
|
105
|
+
setFieldError(name, checkResult);
|
|
216
106
|
});
|
|
217
|
-
var
|
|
107
|
+
var onFieldSuccess = useEventCallback(function (name) {
|
|
218
108
|
removeFieldError(name);
|
|
219
109
|
});
|
|
220
|
-
var
|
|
221
|
-
var
|
|
222
|
-
if (nestedField) {
|
|
223
|
-
return set(_extends({}, formValue), fieldName, fieldValue);
|
|
224
|
-
}
|
|
225
|
-
return _extends({}, formValue, (_extends5 = {}, _extends5[fieldName] = fieldValue, _extends5));
|
|
226
|
-
};
|
|
227
|
-
var handleFieldChange = useEventCallback(function (name, value, event) {
|
|
228
|
-
var nextFormValue = setFieldValue(formValue, name, value);
|
|
229
|
-
setFormValue(nextFormValue);
|
|
110
|
+
var onFieldChange = useEventCallback(function (name, value, event) {
|
|
111
|
+
var nextFormValue = setFieldValue(name, value);
|
|
230
112
|
onChange === null || onChange === void 0 ? void 0 : onChange(nextFormValue, event);
|
|
231
113
|
});
|
|
232
|
-
var
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
onFieldSuccess: handleFieldSuccess
|
|
250
|
-
};
|
|
251
|
-
}, [getCombinedModel, checkTrigger, errorFromContext, readOnly, plaintext, disabled, formError, nestedField, removeFieldValue, removeFieldError, pushFieldRule, removeFieldRule, handleFieldChange, handleFieldError, handleFieldSuccess]);
|
|
114
|
+
var formContextValue = {
|
|
115
|
+
errorFromContext: errorFromContext,
|
|
116
|
+
checkTrigger: checkTrigger,
|
|
117
|
+
plaintext: plaintext,
|
|
118
|
+
readOnly: readOnly,
|
|
119
|
+
disabled: disabled,
|
|
120
|
+
formError: formError,
|
|
121
|
+
nestedField: nestedField,
|
|
122
|
+
pushFieldRule: pushFieldRule,
|
|
123
|
+
getCombinedModel: getCombinedModel,
|
|
124
|
+
removeFieldValue: removeFieldValue,
|
|
125
|
+
removeFieldError: removeFieldError,
|
|
126
|
+
removeFieldRule: removeFieldRule,
|
|
127
|
+
onFieldSuccess: onFieldSuccess,
|
|
128
|
+
onFieldChange: onFieldChange,
|
|
129
|
+
onFieldError: onFieldError
|
|
130
|
+
};
|
|
252
131
|
return /*#__PURE__*/React.createElement("form", _extends({}, rest, {
|
|
253
|
-
ref:
|
|
132
|
+
ref: formRef,
|
|
254
133
|
onSubmit: handleSubmit,
|
|
255
134
|
className: classes
|
|
256
|
-
}), /*#__PURE__*/React.createElement(
|
|
135
|
+
}), /*#__PURE__*/React.createElement(FormProvider, {
|
|
257
136
|
value: formContextValue
|
|
258
|
-
}, /*#__PURE__*/React.createElement(
|
|
137
|
+
}, /*#__PURE__*/React.createElement(FormValueProvider, {
|
|
259
138
|
value: formValue
|
|
260
139
|
}, children)));
|
|
261
140
|
});
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TypeAttributes } from '../@types/common';
|
|
3
|
-
import type { Schema } from 'schema-typed';
|
|
3
|
+
import type { Schema, CheckResult } from 'schema-typed';
|
|
4
4
|
import type { FieldRuleType } from './hooks/useSchemaModel';
|
|
5
|
-
|
|
5
|
+
declare type RecordAny = Record<string, any>;
|
|
6
|
+
interface TrulyFormContextValue<T = RecordAny, errorMsgType = any, E = {
|
|
6
7
|
[P in keyof T]?: errorMsgType;
|
|
7
8
|
}> {
|
|
8
|
-
getCombinedModel: () => Schema;
|
|
9
9
|
formError: E;
|
|
10
10
|
nestedField: boolean;
|
|
11
|
+
getCombinedModel: () => Schema;
|
|
11
12
|
removeFieldValue: (name: string) => void;
|
|
12
13
|
removeFieldError: (name: string) => void;
|
|
13
|
-
pushFieldRule: (name: string, fieldRule: FieldRuleType) => void;
|
|
14
14
|
removeFieldRule: (name: string) => void;
|
|
15
|
+
pushFieldRule: (name: string, fieldRule: FieldRuleType) => void;
|
|
16
|
+
onFieldError: (name: string, fieldError: string | CheckResult) => void;
|
|
15
17
|
onFieldChange: (name: string, value: any, event: React.SyntheticEvent) => void;
|
|
16
|
-
onFieldError: (name: string, errorMessage: string) => void;
|
|
17
18
|
onFieldSuccess: (name: string) => void;
|
|
18
19
|
}
|
|
19
20
|
declare type ExternalPropsContextValue = {
|
|
@@ -24,8 +25,10 @@ declare type ExternalPropsContextValue = {
|
|
|
24
25
|
disabled?: boolean;
|
|
25
26
|
};
|
|
26
27
|
declare type InitialContextType = Partial<Record<keyof TrulyFormContextValue, undefined>>;
|
|
27
|
-
export declare type FormContextValue<T =
|
|
28
|
-
export declare const FormContext: React.Context<FormContextValue<
|
|
29
|
-
export declare const FormValueContext: React.Context<
|
|
30
|
-
export declare const
|
|
28
|
+
export declare type FormContextValue<T = RecordAny, errorMsgType = any> = (TrulyFormContextValue<T, errorMsgType> | InitialContextType) & ExternalPropsContextValue;
|
|
29
|
+
export declare const FormContext: React.Context<FormContextValue<RecordAny, any>>;
|
|
30
|
+
export declare const FormValueContext: React.Context<RecordAny | undefined>;
|
|
31
|
+
export declare const FormProvider: React.Provider<FormContextValue<RecordAny, any>>;
|
|
32
|
+
export declare const FormValueProvider: React.Provider<RecordAny | undefined>;
|
|
33
|
+
export declare function useFormContext<T = RecordAny, E = any>(): FormContextValue<T, E>;
|
|
31
34
|
export default FormContext;
|
package/esm/Form/FormContext.js
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { useContext } from 'react';
|
|
3
3
|
export var FormContext = /*#__PURE__*/React.createContext({});
|
|
4
4
|
export var FormValueContext = /*#__PURE__*/React.createContext({});
|
|
5
|
-
export var
|
|
5
|
+
export var FormProvider = FormContext.Provider;
|
|
6
|
+
export var FormValueProvider = FormValueContext.Provider;
|
|
7
|
+
export function useFormContext() {
|
|
8
|
+
return useContext(FormContext);
|
|
9
|
+
}
|
|
6
10
|
export default FormContext;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { CheckResult } from 'schema-typed';
|
|
3
|
+
export interface FormImperativeMethods<T = Record<string, any>, M = string, E = {
|
|
4
|
+
[P in keyof T]?: M;
|
|
5
|
+
}> {
|
|
6
|
+
/**
|
|
7
|
+
* Verify form data
|
|
8
|
+
*/
|
|
9
|
+
check: (callback?: (formError: E) => void) => boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Asynchronously check form data
|
|
12
|
+
*/
|
|
13
|
+
checkAsync: () => Promise<any>;
|
|
14
|
+
/**
|
|
15
|
+
* Check the data field
|
|
16
|
+
*/
|
|
17
|
+
checkForField: (fieldName: keyof T, callback?: (checkResult: CheckResult<M>) => void) => boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Asynchronous verification as a data field
|
|
20
|
+
*/
|
|
21
|
+
checkForFieldAsync: (fieldName: keyof T) => Promise<CheckResult>;
|
|
22
|
+
/**
|
|
23
|
+
* Clear all error messages
|
|
24
|
+
*/
|
|
25
|
+
cleanErrors: (callback?: () => void) => void;
|
|
26
|
+
/**
|
|
27
|
+
* Clear the error message of the specified field
|
|
28
|
+
*/
|
|
29
|
+
cleanErrorForField: (fieldName: keyof E, callback?: () => void) => void;
|
|
30
|
+
/**
|
|
31
|
+
* All error messages are reset, and an initial value can be set
|
|
32
|
+
*/
|
|
33
|
+
resetErrors: (formError?: E) => void;
|
|
34
|
+
}
|
|
35
|
+
export interface FormInstance<T = Record<string, any>, M = string, E = {
|
|
36
|
+
[P in keyof T]?: M;
|
|
37
|
+
}> extends FormImperativeMethods<T, M, E> {
|
|
38
|
+
/**
|
|
39
|
+
* Form root element
|
|
40
|
+
*/
|
|
41
|
+
root: HTMLFormElement | null;
|
|
42
|
+
}
|
|
43
|
+
interface FormRefProps<T = Record<string, any>, M = string, E = {
|
|
44
|
+
[P in keyof T]?: M;
|
|
45
|
+
}> {
|
|
46
|
+
formError: E;
|
|
47
|
+
nestedField?: boolean;
|
|
48
|
+
setFormError: (formError: E) => void;
|
|
49
|
+
check: (callback?: (formError: E) => void) => boolean;
|
|
50
|
+
checkForField: (fieldName: keyof T, callback?: (checkResult: CheckResult<M>) => void) => boolean;
|
|
51
|
+
checkAsync: () => Promise<any>;
|
|
52
|
+
checkForFieldAsync: (fieldName: keyof T) => Promise<CheckResult>;
|
|
53
|
+
}
|
|
54
|
+
export default function useFormRef(ref: React.Ref<FormInstance>, props: FormRefProps): import("react").RefObject<HTMLFormElement>;
|
|
55
|
+
export {};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useRef, useImperativeHandle } from 'react';
|
|
3
|
+
import omit from 'lodash/omit';
|
|
4
|
+
import useEventCallback from '../../utils/useEventCallback';
|
|
5
|
+
import { nameToPath } from '../../FormControl/utils';
|
|
6
|
+
export default function useFormRef(ref, props) {
|
|
7
|
+
var rootRef = useRef(null);
|
|
8
|
+
var formError = props.formError,
|
|
9
|
+
setFormError = props.setFormError,
|
|
10
|
+
nestedField = props.nestedField,
|
|
11
|
+
check = props.check,
|
|
12
|
+
checkForField = props.checkForField,
|
|
13
|
+
checkAsync = props.checkAsync,
|
|
14
|
+
checkForFieldAsync = props.checkForFieldAsync;
|
|
15
|
+
var cleanErrors = useEventCallback(function () {
|
|
16
|
+
setFormError({});
|
|
17
|
+
});
|
|
18
|
+
var resetErrors = useEventCallback(function (formError) {
|
|
19
|
+
if (formError === void 0) {
|
|
20
|
+
formError = {};
|
|
21
|
+
}
|
|
22
|
+
setFormError(formError);
|
|
23
|
+
});
|
|
24
|
+
var cleanErrorForField = useEventCallback(function (fieldName) {
|
|
25
|
+
setFormError(omit(formError, [nestedField ? nameToPath(fieldName) : fieldName]));
|
|
26
|
+
});
|
|
27
|
+
useImperativeHandle(ref, function () {
|
|
28
|
+
return {
|
|
29
|
+
root: rootRef.current,
|
|
30
|
+
check: check,
|
|
31
|
+
checkForField: checkForField,
|
|
32
|
+
checkAsync: checkAsync,
|
|
33
|
+
checkForFieldAsync: checkForFieldAsync,
|
|
34
|
+
cleanErrors: cleanErrors,
|
|
35
|
+
cleanErrorForField: cleanErrorForField,
|
|
36
|
+
resetErrors: resetErrors
|
|
37
|
+
};
|
|
38
|
+
});
|
|
39
|
+
return rootRef;
|
|
40
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/// <reference types="lodash" />
|
|
3
|
+
import type { CheckResult } from 'schema-typed';
|
|
4
|
+
import { FormInstance } from './useFormRef';
|
|
5
|
+
export interface FormErrorProps {
|
|
6
|
+
ref: React.Ref<FormInstance>;
|
|
7
|
+
formValue: any;
|
|
8
|
+
getCombinedModel: () => any;
|
|
9
|
+
onCheck?: (formError: any) => void;
|
|
10
|
+
onError?: (formError: any) => void;
|
|
11
|
+
nestedField?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export default function useFormValidate(formError: any, props: FormErrorProps): {
|
|
14
|
+
formRef: import("react").RefObject<HTMLFormElement>;
|
|
15
|
+
formError: any;
|
|
16
|
+
check: (...args: any[]) => any;
|
|
17
|
+
setFieldError: (fieldName: string, checkResult: string | CheckResult) => any;
|
|
18
|
+
onRemoveError: (name: string) => import("lodash").Omit<any, string>;
|
|
19
|
+
};
|