rsuite 5.59.1 → 5.59.3-alpha.1

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.
Files changed (141) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/DateRangePicker/styles/index.css +27 -0
  3. package/DateRangePicker/styles/index.less +27 -0
  4. package/cjs/@types/common.d.ts +1 -1
  5. package/cjs/Calendar/CalendarContainer.js +4 -4
  6. package/cjs/DatePicker/DatePicker.d.ts +3 -38
  7. package/cjs/DatePicker/DatePicker.js +86 -137
  8. package/cjs/DatePicker/PredefinedRanges.d.ts +1 -1
  9. package/cjs/DatePicker/PredefinedRanges.js +3 -3
  10. package/cjs/DatePicker/Toolbar.d.ts +1 -1
  11. package/cjs/DatePicker/Toolbar.js +13 -12
  12. package/cjs/DatePicker/hooks/useFocus.d.ts +13 -0
  13. package/cjs/DatePicker/hooks/useFocus.js +96 -0
  14. package/cjs/DatePicker/hooks/useMonthView.d.ts +10 -0
  15. package/cjs/DatePicker/hooks/useMonthView.js +28 -0
  16. package/cjs/DatePicker/index.d.ts +2 -1
  17. package/cjs/DatePicker/types.d.ts +37 -0
  18. package/cjs/DatePicker/utils.d.ts +9 -0
  19. package/cjs/DatePicker/utils.js +20 -2
  20. package/cjs/DateRangePicker/DateRangePicker.d.ts +15 -3
  21. package/cjs/DateRangePicker/DateRangePicker.js +58 -68
  22. package/cjs/DateRangePicker/DateRangePickerContext.d.ts +4 -1
  23. package/cjs/DateRangePicker/DateRangePickerContext.js +4 -4
  24. package/cjs/DateRangePicker/Header.d.ts +11 -0
  25. package/cjs/DateRangePicker/Header.js +65 -0
  26. package/cjs/DateRangePicker/disabledDateUtils.d.ts +1 -1
  27. package/cjs/DateRangePicker/disabledDateUtils.js +1 -1
  28. package/cjs/DateRangePicker/index.js +5 -0
  29. package/cjs/Form/Form.d.ts +56 -39
  30. package/cjs/Form/Form.js +64 -186
  31. package/cjs/Form/FormContext.d.ts +12 -9
  32. package/cjs/Form/FormContext.js +11 -5
  33. package/cjs/Form/hooks/useFormRef.d.ts +55 -0
  34. package/cjs/Form/hooks/useFormRef.js +45 -0
  35. package/cjs/Form/hooks/useFormValidate.d.ts +19 -0
  36. package/cjs/Form/hooks/useFormValidate.js +157 -0
  37. package/cjs/Form/hooks/useFormValue.d.ts +2 -1
  38. package/cjs/Form/hooks/useFormValue.js +12 -1
  39. package/cjs/Form/hooks/useSchemaModel.js +5 -0
  40. package/cjs/Form/index.d.ts +2 -1
  41. package/cjs/FormControl/FormControl.d.ts +1 -1
  42. package/cjs/FormControl/FormControl.js +50 -68
  43. package/cjs/FormControl/hooks/useField.d.ts +18 -0
  44. package/cjs/FormControl/hooks/useField.js +54 -0
  45. package/cjs/FormControl/hooks/useRegisterModel.d.ts +3 -0
  46. package/cjs/FormControl/hooks/useRegisterModel.js +22 -0
  47. package/cjs/FormControl/utils.d.ts +1 -0
  48. package/cjs/FormControl/utils.js +8 -0
  49. package/cjs/FormControlLabel/FormControlLabel.js +12 -9
  50. package/cjs/FormErrorMessage/FormErrorMessage.js +2 -5
  51. package/cjs/FormGroup/FormGroup.d.ts +18 -4
  52. package/cjs/FormGroup/FormGroup.js +28 -2
  53. package/cjs/FormGroup/index.d.ts +1 -0
  54. package/cjs/FormGroup/index.js +4 -3
  55. package/cjs/FormHelpText/FormHelpText.d.ts +2 -1
  56. package/cjs/FormHelpText/FormHelpText.js +16 -9
  57. package/cjs/Input/Input.js +4 -5
  58. package/cjs/utils/dateUtils.d.ts +72 -10
  59. package/cjs/utils/dateUtils.js +88 -29
  60. package/dist/rsuite-no-reset-rtl.css +27 -0
  61. package/dist/rsuite-no-reset-rtl.min.css +1 -1
  62. package/dist/rsuite-no-reset-rtl.min.css.map +1 -1
  63. package/dist/rsuite-no-reset.css +27 -0
  64. package/dist/rsuite-no-reset.min.css +1 -1
  65. package/dist/rsuite-no-reset.min.css.map +1 -1
  66. package/dist/rsuite-rtl.css +27 -0
  67. package/dist/rsuite-rtl.min.css +1 -1
  68. package/dist/rsuite-rtl.min.css.map +1 -1
  69. package/dist/rsuite.css +27 -0
  70. package/dist/rsuite.js +144 -44
  71. package/dist/rsuite.js.map +1 -1
  72. package/dist/rsuite.min.css +1 -1
  73. package/dist/rsuite.min.css.map +1 -1
  74. package/dist/rsuite.min.js +1 -1
  75. package/dist/rsuite.min.js.LICENSE.txt +35 -0
  76. package/dist/rsuite.min.js.map +1 -1
  77. package/esm/@types/common.d.ts +1 -1
  78. package/esm/Calendar/CalendarContainer.js +5 -5
  79. package/esm/DatePicker/DatePicker.d.ts +3 -38
  80. package/esm/DatePicker/DatePicker.js +88 -139
  81. package/esm/DatePicker/PredefinedRanges.d.ts +1 -1
  82. package/esm/DatePicker/PredefinedRanges.js +3 -3
  83. package/esm/DatePicker/Toolbar.d.ts +1 -1
  84. package/esm/DatePicker/Toolbar.js +13 -12
  85. package/esm/DatePicker/hooks/useFocus.d.ts +13 -0
  86. package/esm/DatePicker/hooks/useFocus.js +90 -0
  87. package/esm/DatePicker/hooks/useMonthView.d.ts +10 -0
  88. package/esm/DatePicker/hooks/useMonthView.js +22 -0
  89. package/esm/DatePicker/index.d.ts +2 -1
  90. package/esm/DatePicker/types.d.ts +37 -0
  91. package/esm/DatePicker/utils.d.ts +9 -0
  92. package/esm/DatePicker/utils.js +18 -2
  93. package/esm/DateRangePicker/DateRangePicker.d.ts +15 -3
  94. package/esm/DateRangePicker/DateRangePicker.js +61 -71
  95. package/esm/DateRangePicker/DateRangePickerContext.d.ts +4 -1
  96. package/esm/DateRangePicker/DateRangePickerContext.js +2 -2
  97. package/esm/DateRangePicker/Header.d.ts +11 -0
  98. package/esm/DateRangePicker/Header.js +59 -0
  99. package/esm/DateRangePicker/disabledDateUtils.d.ts +1 -1
  100. package/esm/DateRangePicker/disabledDateUtils.js +1 -1
  101. package/esm/DateRangePicker/index.js +4 -0
  102. package/esm/Form/Form.d.ts +56 -39
  103. package/esm/Form/Form.js +62 -183
  104. package/esm/Form/FormContext.d.ts +12 -9
  105. package/esm/Form/FormContext.js +6 -2
  106. package/esm/Form/hooks/useFormRef.d.ts +55 -0
  107. package/esm/Form/hooks/useFormRef.js +40 -0
  108. package/esm/Form/hooks/useFormValidate.d.ts +19 -0
  109. package/esm/Form/hooks/useFormValidate.js +152 -0
  110. package/esm/Form/hooks/useFormValue.d.ts +2 -1
  111. package/esm/Form/hooks/useFormValue.js +12 -1
  112. package/esm/Form/hooks/useSchemaModel.js +5 -0
  113. package/esm/Form/index.d.ts +2 -1
  114. package/esm/FormControl/FormControl.d.ts +1 -1
  115. package/esm/FormControl/FormControl.js +48 -66
  116. package/esm/FormControl/hooks/useField.d.ts +18 -0
  117. package/esm/FormControl/hooks/useField.js +48 -0
  118. package/esm/FormControl/hooks/useRegisterModel.d.ts +3 -0
  119. package/esm/FormControl/hooks/useRegisterModel.js +17 -0
  120. package/esm/FormControl/utils.d.ts +1 -0
  121. package/esm/FormControl/utils.js +4 -0
  122. package/esm/FormControlLabel/FormControlLabel.js +12 -8
  123. package/esm/FormErrorMessage/FormErrorMessage.js +2 -5
  124. package/esm/FormGroup/FormGroup.d.ts +18 -4
  125. package/esm/FormGroup/FormGroup.js +27 -1
  126. package/esm/FormGroup/index.d.ts +1 -0
  127. package/esm/FormGroup/index.js +1 -0
  128. package/esm/FormHelpText/FormHelpText.d.ts +2 -1
  129. package/esm/FormHelpText/FormHelpText.js +17 -9
  130. package/esm/Input/Input.js +4 -5
  131. package/esm/utils/dateUtils.d.ts +72 -10
  132. package/esm/utils/dateUtils.js +86 -28
  133. package/package.json +2 -2
  134. package/cjs/Form/hooks/useFormError.d.ts +0 -6
  135. package/cjs/Form/hooks/useFormError.js +0 -31
  136. package/cjs/FormControl/useRegisterModel.d.ts +0 -4
  137. package/cjs/FormControl/useRegisterModel.js +0 -18
  138. package/esm/Form/hooks/useFormError.d.ts +0 -6
  139. package/esm/Form/hooks/useFormError.js +0 -26
  140. package/esm/FormControl/useRegisterModel.d.ts +0 -4
  141. package/esm/FormControl/useRegisterModel.js +0 -13
@@ -0,0 +1,45 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = useFormRef;
7
+ var _react = require("react");
8
+ var _omit = _interopRequireDefault(require("lodash/omit"));
9
+ var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
10
+ var _utils = require("../../FormControl/utils");
11
+ function useFormRef(ref, props) {
12
+ var rootRef = (0, _react.useRef)(null);
13
+ var formError = props.formError,
14
+ setFormError = props.setFormError,
15
+ nestedField = props.nestedField,
16
+ check = props.check,
17
+ checkForField = props.checkForField,
18
+ checkAsync = props.checkAsync,
19
+ checkForFieldAsync = props.checkForFieldAsync;
20
+ var cleanErrors = (0, _useEventCallback.default)(function () {
21
+ setFormError({});
22
+ });
23
+ var resetErrors = (0, _useEventCallback.default)(function (formError) {
24
+ if (formError === void 0) {
25
+ formError = {};
26
+ }
27
+ setFormError(formError);
28
+ });
29
+ var cleanErrorForField = (0, _useEventCallback.default)(function (fieldName) {
30
+ setFormError((0, _omit.default)(formError, [nestedField ? (0, _utils.nameToPath)(fieldName) : fieldName]));
31
+ });
32
+ (0, _react.useImperativeHandle)(ref, function () {
33
+ return {
34
+ root: rootRef.current,
35
+ check: check,
36
+ checkForField: checkForField,
37
+ checkAsync: checkAsync,
38
+ checkForFieldAsync: checkForFieldAsync,
39
+ cleanErrors: cleanErrors,
40
+ cleanErrorForField: cleanErrorForField,
41
+ resetErrors: resetErrors
42
+ };
43
+ });
44
+ return rootRef;
45
+ }
@@ -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
+ };
@@ -0,0 +1,157 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = useFormValidate;
7
+ var _extends5 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
+ var _react = require("react");
9
+ var _omit = _interopRequireDefault(require("lodash/omit"));
10
+ var _set = _interopRequireDefault(require("lodash/set"));
11
+ var _utils = require("../../utils");
12
+ var _utils2 = require("../../FormControl/utils");
13
+ var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
14
+ var _useFormRef = _interopRequireDefault(require("./useFormRef"));
15
+ function useFormValidate(formError, props) {
16
+ var ref = props.ref,
17
+ formValue = props.formValue,
18
+ getCombinedModel = props.getCombinedModel,
19
+ onCheck = props.onCheck,
20
+ onError = props.onError,
21
+ nestedField = props.nestedField;
22
+ var _useControlled = (0, _utils.useControlled)(formError, {}),
23
+ realFormError = _useControlled[0],
24
+ setFormError = _useControlled[1];
25
+ var realFormErrorRef = (0, _react.useRef)(realFormError);
26
+ realFormErrorRef.current = realFormError;
27
+
28
+ /**
29
+ * Validate the form data and return a boolean.
30
+ * The error message after verification is returned in the callback.
31
+ * @param callback
32
+ */
33
+ var check = (0, _useEventCallback.default)(function (callback) {
34
+ var formError = {};
35
+ var errorCount = 0;
36
+ var model = getCombinedModel();
37
+ Object.keys(model.getSchemaSpec()).forEach(function (key) {
38
+ var checkResult = model.checkForField(key, formValue || {});
39
+ if (checkResult.hasError === true) {
40
+ errorCount += 1;
41
+ formError[key] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult;
42
+ }
43
+ });
44
+ setFormError(formError);
45
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
46
+ callback === null || callback === void 0 ? void 0 : callback(formError);
47
+ if (errorCount > 0) {
48
+ onError === null || onError === void 0 ? void 0 : onError(formError);
49
+ return false;
50
+ }
51
+ return true;
52
+ });
53
+
54
+ /**
55
+ * Check the data field
56
+ * @param fieldName
57
+ * @param callback
58
+ */
59
+ var checkForField = (0, _useEventCallback.default)(function (fieldName, callback) {
60
+ var _extends2;
61
+ var model = getCombinedModel();
62
+ var checkResult = model.checkForField(fieldName, formValue || {});
63
+ var nextFormError = (0, _extends5.default)({}, formError, (_extends2 = {}, _extends2[fieldName] = (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult, _extends2));
64
+ setFormError(nextFormError);
65
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
66
+ callback === null || callback === void 0 ? void 0 : callback(checkResult);
67
+ if (checkResult.hasError) {
68
+ onError === null || onError === void 0 ? void 0 : onError(nextFormError);
69
+ }
70
+ return !checkResult.hasError;
71
+ });
72
+
73
+ /**
74
+ * Check form data asynchronously and return a Promise
75
+ */
76
+ var checkAsync = (0, _useEventCallback.default)(function () {
77
+ var promises = [];
78
+ var keys = [];
79
+ var model = getCombinedModel();
80
+ Object.keys(model.getSchemaSpec()).forEach(function (key) {
81
+ keys.push(key);
82
+ promises.push(model.checkForFieldAsync(key, formValue || {}));
83
+ });
84
+ return Promise.all(promises).then(function (values) {
85
+ var formError = {};
86
+ var errorCount = 0;
87
+ for (var i = 0; i < values.length; i++) {
88
+ if (values[i].hasError) {
89
+ errorCount += 1;
90
+ formError[keys[i]] = values[i].errorMessage;
91
+ }
92
+ }
93
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
94
+ setFormError(formError);
95
+ if (errorCount > 0) {
96
+ onError === null || onError === void 0 ? void 0 : onError(formError);
97
+ }
98
+ return {
99
+ hasError: errorCount > 0,
100
+ formError: formError
101
+ };
102
+ });
103
+ });
104
+
105
+ /**
106
+ * Asynchronously check form fields and return Promise
107
+ * @param fieldName
108
+ */
109
+ var checkForFieldAsync = (0, _useEventCallback.default)(function (fieldName) {
110
+ var model = getCombinedModel();
111
+ return model.checkForFieldAsync(fieldName, formValue || {}).then(function (checkResult) {
112
+ var _extends3;
113
+ var nextFormError = (0, _extends5.default)({}, formError, (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
114
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
115
+ setFormError(nextFormError);
116
+ if (checkResult.hasError) {
117
+ onError === null || onError === void 0 ? void 0 : onError(nextFormError);
118
+ }
119
+ return checkResult;
120
+ });
121
+ });
122
+ var onRemoveError = (0, _react.useCallback)(function (name) {
123
+ /**
124
+ * when this function is called when the children component is unmount,
125
+ * it's an old render frame so use Ref to get future error
126
+ */
127
+ var formError = (0, _omit.default)(realFormErrorRef.current, [nestedField ? (0, _utils2.nameToPath)(name) : name]);
128
+ realFormErrorRef.current = formError;
129
+ setFormError(formError);
130
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
131
+ return formError;
132
+ }, [nestedField, onCheck, setFormError]);
133
+ var setFieldError = (0, _react.useCallback)(function (fieldName, checkResult) {
134
+ var _extends4;
135
+ var nextFormError = nestedField ? (0, _set.default)((0, _extends5.default)({}, formError), (0, _utils2.nameToPath)(fieldName), checkResult) : (0, _extends5.default)({}, formError, (_extends4 = {}, _extends4[fieldName] = checkResult, _extends4));
136
+ setFormError(nextFormError);
137
+ onError === null || onError === void 0 ? void 0 : onError(nextFormError);
138
+ onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextFormError);
139
+ return nextFormError;
140
+ }, [formError, nestedField, onCheck, onError, setFormError]);
141
+ var formRef = (0, _useFormRef.default)(ref, {
142
+ check: check,
143
+ checkForField: checkForField,
144
+ checkAsync: checkAsync,
145
+ checkForFieldAsync: checkForFieldAsync,
146
+ formError: formError,
147
+ setFormError: setFormError,
148
+ nestedField: nestedField
149
+ });
150
+ return {
151
+ formRef: formRef,
152
+ formError: realFormError,
153
+ check: check,
154
+ setFieldError: setFieldError,
155
+ onRemoveError: onRemoveError
156
+ };
157
+ }
@@ -1,6 +1,7 @@
1
1
  /// <reference types="lodash" />
2
- export default function useFormValue(controlledValue: any, formDefaultValue: any): {
2
+ export default function useFormValue(controlledValue: any, props: any): {
3
3
  formValue: any;
4
4
  setFormValue: (value: any) => void;
5
+ setFieldValue: (fieldName: string, fieldValue: any) => any;
5
6
  onRemoveValue: (name: string) => import("lodash").Omit<any, string>;
6
7
  };
@@ -4,15 +4,25 @@
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
5
  exports.__esModule = true;
6
6
  exports.default = useFormValue;
7
+ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
7
8
  var _react = require("react");
8
9
  var _omit = _interopRequireDefault(require("lodash/omit"));
10
+ var _set = _interopRequireDefault(require("lodash/set"));
9
11
  var _utils = require("../../utils");
10
- function useFormValue(controlledValue, formDefaultValue) {
12
+ function useFormValue(controlledValue, props) {
13
+ var formDefaultValue = props.formDefaultValue,
14
+ nestedField = props.nestedField;
11
15
  var _useControlled = (0, _utils.useControlled)(controlledValue, formDefaultValue),
12
16
  formValue = _useControlled[0],
13
17
  setFormValue = _useControlled[1];
14
18
  var realFormValueRef = (0, _react.useRef)(formValue);
15
19
  realFormValueRef.current = formValue;
20
+ var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {
21
+ var _extends2;
22
+ var nextFormError = nestedField ? (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue) : (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
23
+ setFormValue(nextFormError);
24
+ return nextFormError;
25
+ }, [formValue, nestedField, setFormValue]);
16
26
  var onRemoveValue = (0, _react.useCallback)(function (name) {
17
27
  /**
18
28
  * when this function is called when the children component is unmount,
@@ -26,6 +36,7 @@ function useFormValue(controlledValue, formDefaultValue) {
26
36
  return {
27
37
  formValue: formValue,
28
38
  setFormValue: setFormValue,
39
+ setFieldValue: setFieldValue,
29
40
  onRemoveValue: onRemoveValue
30
41
  };
31
42
  }
@@ -23,6 +23,11 @@ function useSchemaModel(formModel) {
23
23
  var realSubRules = subRulesRef.current.filter(function (v) {
24
24
  return Boolean(v.fieldRule.current);
25
25
  });
26
+
27
+ // If there is no sub rule, return the original form model
28
+ if (realSubRules.length === 0) {
29
+ return formModel;
30
+ }
26
31
  return _schemaTyped.SchemaModel.combine(formModel, (0, _schemaTyped.SchemaModel)(realSubRules.map(function (_ref) {
27
32
  var _ref2;
28
33
  var name = _ref.name,
@@ -1,5 +1,6 @@
1
1
  import Form from './Form';
2
- export type { FormInstance, FormProps } from './Form';
2
+ export type { FormProps } from './Form';
3
+ export type { FormInstance } from './hooks/useFormRef';
3
4
  export type { FormGroupProps } from '../FormGroup';
4
5
  export type { FormErrorMessageProps } from '../FormErrorMessage';
5
6
  export type { FormControlLabelProps } from '../FormControlLabel';
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
+ import type { CheckType } from 'schema-typed';
2
3
  import Input from '../Input';
3
4
  import { TypeAttributes, FormControlBaseProps, WithAsProps } from '../@types/common';
4
- import type { CheckType } from 'schema-typed';
5
5
  /**
6
6
  * Props that FormControl passes to its accepter
7
7
  */
@@ -6,20 +6,18 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
6
6
  exports.__esModule = true;
7
7
  exports.default = void 0;
8
8
  var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
9
- var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
- var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
14
- var _get = _interopRequireDefault(require("lodash/get"));
15
- var _set = _interopRequireDefault(require("lodash/set"));
16
13
  var _Input = _interopRequireDefault(require("../Input"));
17
14
  var _FormErrorMessage = _interopRequireDefault(require("../FormErrorMessage"));
18
15
  var _utils = require("../utils");
19
16
  var _FormContext = _interopRequireWildcard(require("../Form/FormContext"));
20
- var _FormGroup = require("../FormGroup/FormGroup");
17
+ var _FormGroup = require("../FormGroup");
21
18
  var _propTypes2 = require("../internals/propTypes");
22
- var _useRegisterModel = _interopRequireDefault(require("./useRegisterModel"));
19
+ var _useRegisterModel = _interopRequireDefault(require("./hooks/useRegisterModel"));
20
+ var _useField2 = _interopRequireDefault(require("./hooks/useField"));
23
21
  var _Toggle = _interopRequireDefault(require("../Toggle"));
24
22
  var _templateObject;
25
23
  /**
@@ -41,8 +39,6 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
41
39
  nestedField = _useContext.nestedField,
42
40
  removeFieldValue = _useContext.removeFieldValue,
43
41
  removeFieldError = _useContext.removeFieldError,
44
- pushFieldRule = _useContext.pushFieldRule,
45
- removeFieldRule = _useContext.removeFieldRule,
46
42
  onFieldChange = _useContext.onFieldChange,
47
43
  onFieldError = _useContext.onFieldError,
48
44
  onFieldSuccess = _useContext.onFieldSuccess,
@@ -73,13 +69,17 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
73
69
  _props$shouldResetWit = props.shouldResetWithUnmount,
74
70
  shouldResetWithUnmount = _props$shouldResetWit === void 0 ? false : _props$shouldResetWit,
75
71
  rule = props.rule,
76
- rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule"]);
77
- var _useContext2 = (0, _react.useContext)(_FormGroup.FormGroupContext),
78
- controlId = _useContext2.controlId;
72
+ id = props.id,
73
+ rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "accepter", "classPrefix", "checkAsync", "checkTrigger", "errorPlacement", "errorMessage", "name", "value", "readOnly", "plaintext", "disabled", "onChange", "onBlur", "defaultValue", "shouldResetWithUnmount", "rule", "id"]);
74
+ var _useFormGroup = (0, _FormGroup.useFormGroup)(id),
75
+ controlId = _useFormGroup.controlId,
76
+ helpTextId = _useFormGroup.helpTextId,
77
+ labelId = _useFormGroup.labelId,
78
+ errorMessageId = _useFormGroup.errorMessageId;
79
79
  if (!onFieldChange) {
80
80
  throw new Error("\n <FormControl> must be inside a component decorated with <Form>.\n And need to update React to 16.6.0 +.\n ");
81
81
  }
82
- (0, _useRegisterModel.default)(name, pushFieldRule, removeFieldRule, rule);
82
+ (0, _useRegisterModel.default)(name, rule);
83
83
  (0, _utils.useWillUnmount)(function () {
84
84
  if (shouldResetWithUnmount) {
85
85
  removeFieldValue === null || removeFieldValue === void 0 ? void 0 : removeFieldValue(name);
@@ -88,91 +88,73 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
88
88
  });
89
89
  var trigger = checkTrigger || contextCheckTrigger;
90
90
  var formValue = (0, _react.useContext)(_FormContext.FormValueContext);
91
- var getFieldValue = function getFieldValue(fieldName) {
92
- if (!(0, _isUndefined.default)(value)) {
93
- return value;
94
- }
95
- return nestedField ? (0, _get.default)(formValue, fieldName) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
96
- };
97
- var setFieldValue = function setFieldValue(fieldName, fieldValue) {
98
- var _extends2;
99
- if (nestedField) {
100
- return (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue);
101
- }
102
- return (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
103
- };
104
- var getFieldError = function getFieldError(fieldName) {
105
- if (nestedField) {
106
- var _name = fieldName.includes('.') ? fieldName.replace('.', '.object.') + '.errorMessage' : fieldName;
107
- return (0, _get.default)(formError, _name);
108
- }
109
- return formError === null || formError === void 0 ? void 0 : formError[fieldName];
110
- };
111
- var fieldValue = getFieldValue(name);
91
+ var _useField = (0, _useField2.default)({
92
+ name: name,
93
+ errorMessage: errorMessage,
94
+ formValue: formValue,
95
+ formError: formError,
96
+ value: value,
97
+ nestedField: nestedField,
98
+ errorFromContext: errorFromContext
99
+ }),
100
+ fieldValue = _useField.fieldValue,
101
+ fieldError = _useField.fieldError,
102
+ setFieldValue = _useField.setFieldValue;
112
103
  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
113
104
  withClassPrefix = _useClassNames.withClassPrefix,
114
105
  prefix = _useClassNames.prefix;
115
106
  var classes = withClassPrefix('wrapper');
116
107
  var handleFieldChange = (0, _utils.useEventCallback)(function (value, event) {
117
- handleFieldCheck(value, trigger === 'change');
108
+ if (trigger === 'change') {
109
+ handleFieldCheck(value);
110
+ }
118
111
  onFieldChange === null || onFieldChange === void 0 ? void 0 : onFieldChange(name, value, event);
119
112
  onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
120
113
  });
121
114
  var handleFieldBlur = (0, _utils.useEventCallback)(function (event) {
122
- handleFieldCheck(fieldValue, trigger === 'blur');
115
+ if (trigger === 'blur') {
116
+ handleFieldCheck(fieldValue);
117
+ }
123
118
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
124
119
  });
125
- var handleFieldCheck = (0, _utils.useEventCallback)(function (value, isCheckTrigger) {
126
- var checkFieldName = nestedField ? name.split('.')[0] : name;
120
+ var handleFieldCheck = (0, _utils.useEventCallback)(function (value) {
127
121
  var callbackEvents = function callbackEvents(checkResult) {
128
- // The relevant event is triggered only when the inspection is allowed.
129
- if (isCheckTrigger) {
130
- if (checkResult.hasError) {
131
- onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(checkFieldName, (checkResult === null || checkResult === void 0 ? void 0 : checkResult.errorMessage) || checkResult);
132
- } else {
133
- onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(checkFieldName);
134
- }
122
+ if (checkResult.hasError) {
123
+ var _errorMessage = checkResult.errorMessage;
124
+ var _fieldError = nestedField ? checkResult : _errorMessage || checkResult;
125
+ onFieldError === null || onFieldError === void 0 ? void 0 : onFieldError(name, _fieldError);
126
+ } else {
127
+ onFieldSuccess === null || onFieldSuccess === void 0 ? void 0 : onFieldSuccess(name);
135
128
  }
136
129
  return checkResult;
137
130
  };
138
131
  var nextFormValue = setFieldValue(name, value);
139
132
  var model = getCombinedModel();
133
+ var checkOptions = {
134
+ nestedObject: nestedField
135
+ };
140
136
  if (checkAsync) {
141
- return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(checkFieldName, nextFormValue).then(function (checkResult) {
137
+ return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue, checkOptions).then(function (checkResult) {
142
138
  return callbackEvents(checkResult);
143
139
  });
144
140
  }
145
- return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(checkFieldName, nextFormValue)));
141
+ return Promise.resolve(callbackEvents(model === null || model === void 0 ? void 0 : model.checkForField(name, nextFormValue, checkOptions)));
146
142
  });
147
- var messageNode = null;
148
- if (!(0, _isUndefined.default)(errorMessage)) {
149
- messageNode = errorMessage;
150
- } else if (errorFromContext) {
151
- var fieldError = getFieldError(name);
152
- if (typeof fieldError === 'string' || !(fieldError !== null && fieldError !== void 0 && fieldError.array) && !(fieldError !== null && fieldError !== void 0 && fieldError.object) && fieldError !== null && fieldError !== void 0 && fieldError.hasError) {
153
- messageNode = fieldError;
154
- }
155
- }
156
- var ariaDescribedby = controlId ? controlId + "-help-text" : null;
157
- var fieldHasError = Boolean(messageNode);
158
- var ariaErrormessage = fieldHasError && controlId ? controlId + "-error-message" : undefined;
159
- var valueKey = 'value';
143
+ var fieldHasError = Boolean(fieldError);
160
144
 
161
145
  // Toggle component is a special case that uses `checked` and `defaultChecked` instead of `value` and `defaultValue` props.
162
- if (AccepterComponent === _Toggle.default) {
163
- valueKey = 'checked';
164
- }
146
+ var valueKey = AccepterComponent === _Toggle.default ? 'checked' : 'value';
165
147
  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = fieldValue === undefined ? defaultValue : fieldValue, _accepterProps);
166
148
  return /*#__PURE__*/_react.default.createElement(Component, {
167
149
  className: classes,
168
150
  ref: ref,
169
151
  "data-testid": "form-control-wrapper"
170
- }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends3.default)({
152
+ }, /*#__PURE__*/_react.default.createElement(AccepterComponent, (0, _extends2.default)({
171
153
  id: controlId,
172
- "aria-labelledby": controlId ? controlId + "-control-label" : null,
173
- "aria-describedby": ariaDescribedby,
154
+ "aria-labelledby": labelId,
155
+ "aria-describedby": helpTextId,
174
156
  "aria-invalid": fieldHasError || undefined,
175
- "aria-errormessage": ariaErrormessage
157
+ "aria-errormessage": fieldHasError ? errorMessageId : undefined
176
158
  }, accepterProps, rest, {
177
159
  readOnly: readOnly,
178
160
  plaintext: plaintext,
@@ -181,13 +163,13 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
181
163
  onChange: handleFieldChange,
182
164
  onBlur: handleFieldBlur
183
165
  })), /*#__PURE__*/_react.default.createElement(_FormErrorMessage.default, {
184
- id: controlId ? controlId + "-error-message" : undefined,
166
+ id: errorMessageId,
185
167
  role: "alert",
186
168
  "aria-relevant": "all",
187
169
  show: fieldHasError,
188
170
  className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["message-wrapper"]))),
189
171
  placement: errorPlacement
190
- }, messageNode));
172
+ }, fieldError));
191
173
  });
192
174
  FormControl.displayName = 'FormControl';
193
175
  FormControl.propTypes = {
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ interface FieldProps {
3
+ name: string;
4
+ formValue?: Record<string, any>;
5
+ formError?: Record<string, any>;
6
+ value: any;
7
+ nestedField: boolean;
8
+ errorMessage: React.ReactNode;
9
+ errorFromContext?: boolean;
10
+ }
11
+ declare function useField(props: FieldProps): {
12
+ fieldValue: any;
13
+ fieldError: any;
14
+ setFieldValue: (fieldName: string, fieldValue: any) => {
15
+ [x: string]: any;
16
+ };
17
+ };
18
+ export default useField;
@@ -0,0 +1,54 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ exports.__esModule = true;
6
+ exports.default = void 0;
7
+ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
+ var _react = require("react");
9
+ var _get2 = _interopRequireDefault(require("lodash/get"));
10
+ var _set = _interopRequireDefault(require("lodash/set"));
11
+ var _utils = require("../utils");
12
+ function useField(props) {
13
+ var name = props.name,
14
+ formValue = props.formValue,
15
+ formError = props.formError,
16
+ value = props.value,
17
+ nestedField = props.nestedField,
18
+ errorMessage = props.errorMessage,
19
+ errorFromContext = props.errorFromContext;
20
+ var fieldValue = (0, _react.useMemo)(function () {
21
+ if (typeof value !== 'undefined') {
22
+ return value;
23
+ }
24
+ return nestedField ? (0, _get2.default)(formValue, name) : formValue === null || formValue === void 0 ? void 0 : formValue[name];
25
+ }, [formValue, name, nestedField, value]);
26
+ var fieldError = (0, _react.useMemo)(function () {
27
+ if (typeof errorMessage !== 'undefined' || !errorFromContext) {
28
+ return errorMessage;
29
+ }
30
+ if (nestedField) {
31
+ var _get;
32
+ return (_get = (0, _get2.default)(formError, (0, _utils.nameToPath)(name))) === null || _get === void 0 ? void 0 : _get.errorMessage;
33
+ }
34
+ var fieldError = formError === null || formError === void 0 ? void 0 : formError[name];
35
+ if (typeof fieldError === 'string') {
36
+ return fieldError;
37
+ }
38
+ return fieldError === null || fieldError === void 0 ? void 0 : fieldError.errorMessage;
39
+ }, [errorFromContext, errorMessage, formError, name, nestedField]);
40
+ var setFieldValue = (0, _react.useCallback)(function (fieldName, fieldValue) {
41
+ var _extends2;
42
+ if (nestedField) {
43
+ return (0, _set.default)((0, _extends3.default)({}, formValue), fieldName, fieldValue);
44
+ }
45
+ return (0, _extends3.default)({}, formValue, (_extends2 = {}, _extends2[fieldName] = fieldValue, _extends2));
46
+ }, [formValue, nestedField]);
47
+ return {
48
+ fieldValue: fieldValue,
49
+ fieldError: fieldError,
50
+ setFieldValue: setFieldValue
51
+ };
52
+ }
53
+ var _default = useField;
54
+ exports.default = _default;
@@ -0,0 +1,3 @@
1
+ import type { CheckType } from 'schema-typed';
2
+ declare function useRegisterModel(name: string, rule?: CheckType<unknown, any>): void;
3
+ export default useRegisterModel;
@@ -0,0 +1,22 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ exports.__esModule = true;
5
+ exports.default = void 0;
6
+ var _react = require("react");
7
+ var _FormContext = require("../../Form/FormContext");
8
+ function useRegisterModel(name, rule) {
9
+ var _ref = (0, _FormContext.useFormContext)() || {},
10
+ pushFieldRule = _ref.pushFieldRule,
11
+ removeFieldRule = _ref.removeFieldRule;
12
+ var refRule = (0, _react.useRef)(rule);
13
+ refRule.current = rule;
14
+ (0, _react.useEffect)(function () {
15
+ pushFieldRule === null || pushFieldRule === void 0 ? void 0 : pushFieldRule(name, refRule);
16
+ return function () {
17
+ removeFieldRule === null || removeFieldRule === void 0 ? void 0 : removeFieldRule(name);
18
+ };
19
+ }, [name, pushFieldRule, removeFieldRule]);
20
+ }
21
+ var _default = useRegisterModel;
22
+ exports.default = _default;
@@ -0,0 +1 @@
1
+ export declare function nameToPath(name: string): string;
@@ -0,0 +1,8 @@
1
+ 'use client';
2
+ "use strict";
3
+
4
+ exports.__esModule = true;
5
+ exports.nameToPath = nameToPath;
6
+ function nameToPath(name) {
7
+ return name.includes('.') ? name.replace('.', '.object.') : name;
8
+ }