@baseplate-dev/plugin-auth 0.1.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.
- package/LICENSE +390 -0
- package/dist/auth/core/common.d.ts +7 -0
- package/dist/auth/core/common.d.ts.map +1 -0
- package/dist/auth/core/common.js +26 -0
- package/dist/auth/core/common.js.map +1 -0
- package/dist/auth/core/components/auth-definition-editor.d.ts +5 -0
- package/dist/auth/core/components/auth-definition-editor.d.ts.map +1 -0
- package/dist/auth/core/components/auth-definition-editor.js +57 -0
- package/dist/auth/core/components/auth-definition-editor.js.map +1 -0
- package/dist/auth/core/components/role-editor-form.d.ts +10 -0
- package/dist/auth/core/components/role-editor-form.d.ts.map +1 -0
- package/dist/auth/core/components/role-editor-form.js +27 -0
- package/dist/auth/core/components/role-editor-form.js.map +1 -0
- package/dist/auth/core/node.d.ts +5 -0
- package/dist/auth/core/node.d.ts.map +1 -0
- package/dist/auth/core/node.js +58 -0
- package/dist/auth/core/node.js.map +1 -0
- package/dist/auth/core/schema/models.d.ts +9 -0
- package/dist/auth/core/schema/models.d.ts.map +1 -0
- package/dist/auth/core/schema/models.js +187 -0
- package/dist/auth/core/schema/models.js.map +1 -0
- package/dist/auth/core/schema/plugin-definition.d.ts +88 -0
- package/dist/auth/core/schema/plugin-definition.d.ts.map +1 -0
- package/dist/auth/core/schema/plugin-definition.js +29 -0
- package/dist/auth/core/schema/plugin-definition.js.map +1 -0
- package/dist/auth/core/web.d.ts +6 -0
- package/dist/auth/core/web.d.ts.map +1 -0
- package/dist/auth/core/web.js +14 -0
- package/dist/auth/core/web.js.map +1 -0
- package/dist/auth/generators/fastify/auth-module/auth-module.generator.d.ts +65 -0
- package/dist/auth/generators/fastify/auth-module/auth-module.generator.d.ts.map +1 -0
- package/dist/auth/generators/fastify/auth-module/auth-module.generator.js +62 -0
- package/dist/auth/generators/fastify/auth-module/auth-module.generator.js.map +1 -0
- package/dist/auth/generators/fastify/auth-module/generated/ts-templates.d.ts +96 -0
- package/dist/auth/generators/fastify/auth-module/generated/ts-templates.d.ts.map +1 -0
- package/dist/auth/generators/fastify/auth-module/generated/ts-templates.js +94 -0
- package/dist/auth/generators/fastify/auth-module/generated/ts-templates.js.map +1 -0
- package/dist/auth/generators/fastify/auth-module/templates/management.ts +22 -0
- package/dist/auth/generators/fastify/auth-module/templates/schema/user-session-payload.object-type.ts +23 -0
- package/dist/auth/generators/fastify/auth-module/templates/schema/user-session.mutations.ts +22 -0
- package/dist/auth/generators/fastify/auth-module/templates/schema/user-session.queries.ts +20 -0
- package/dist/auth/generators/fastify/auth-module/templates/services/user-session.service.ts +251 -0
- package/dist/auth/generators/fastify/auth-module/templates/user-session.constants.ts +19 -0
- package/dist/auth/generators/fastify/auth-module/templates/user-session.service.ts +101 -0
- package/dist/auth/generators/fastify/auth-module/templates/utils/cookie-signer.ts +71 -0
- package/dist/auth/generators/fastify/auth-module/templates/utils/session-cookie.ts +42 -0
- package/dist/auth/generators/fastify/auth-module/templates/utils/verify-request-origin.ts +45 -0
- package/dist/auth/generators/fastify/index.d.ts +2 -0
- package/dist/auth/generators/fastify/index.d.ts.map +1 -0
- package/dist/auth/generators/fastify/index.js +2 -0
- package/dist/auth/generators/fastify/index.js.map +1 -0
- package/dist/auth/generators/index.d.ts +2 -0
- package/dist/auth/generators/index.d.ts.map +1 -0
- package/dist/auth/generators/index.js +2 -0
- package/dist/auth/generators/index.js.map +1 -0
- package/dist/auth/index.d.ts +2 -0
- package/dist/auth/index.d.ts.map +1 -0
- package/dist/auth/index.js +2 -0
- package/dist/auth/index.js.map +1 -0
- package/dist/auth/metadata.json +8 -0
- package/dist/auth/static/icon.svg +1 -0
- package/dist/auth0/constants/packages.d.ts +6 -0
- package/dist/auth0/constants/packages.d.ts.map +1 -0
- package/dist/auth0/constants/packages.js +6 -0
- package/dist/auth0/constants/packages.js.map +1 -0
- package/dist/auth0/core/common.d.ts +7 -0
- package/dist/auth0/core/common.d.ts.map +1 -0
- package/dist/auth0/core/common.js +28 -0
- package/dist/auth0/core/common.js.map +1 -0
- package/dist/auth0/core/components/auth-definition-editor.d.ts +5 -0
- package/dist/auth0/core/components/auth-definition-editor.d.ts.map +1 -0
- package/dist/auth0/core/components/auth-definition-editor.js +57 -0
- package/dist/auth0/core/components/auth-definition-editor.js.map +1 -0
- package/dist/auth0/core/components/role-dialog.d.ts +14 -0
- package/dist/auth0/core/components/role-dialog.d.ts.map +1 -0
- package/dist/auth0/core/components/role-dialog.js +27 -0
- package/dist/auth0/core/components/role-dialog.js.map +1 -0
- package/dist/auth0/core/components/role-editor-form.d.ts +10 -0
- package/dist/auth0/core/components/role-editor-form.d.ts.map +1 -0
- package/dist/auth0/core/components/role-editor-form.js +52 -0
- package/dist/auth0/core/components/role-editor-form.js.map +1 -0
- package/dist/auth0/core/node.d.ts +5 -0
- package/dist/auth0/core/node.d.ts.map +1 -0
- package/dist/auth0/core/node.js +86 -0
- package/dist/auth0/core/node.js.map +1 -0
- package/dist/auth0/core/schema/migrations.d.ts +3 -0
- package/dist/auth0/core/schema/migrations.d.ts.map +1 -0
- package/dist/auth0/core/schema/migrations.js +17 -0
- package/dist/auth0/core/schema/migrations.js.map +1 -0
- package/dist/auth0/core/schema/models.d.ts +6 -0
- package/dist/auth0/core/schema/models.d.ts.map +1 -0
- package/dist/auth0/core/schema/models.js +33 -0
- package/dist/auth0/core/schema/models.js.map +1 -0
- package/dist/auth0/core/schema/plugin-definition.d.ts +73 -0
- package/dist/auth0/core/schema/plugin-definition.d.ts.map +1 -0
- package/dist/auth0/core/schema/plugin-definition.js +17 -0
- package/dist/auth0/core/schema/plugin-definition.js.map +1 -0
- package/dist/auth0/core/web.d.ts +6 -0
- package/dist/auth0/core/web.d.ts.map +1 -0
- package/dist/auth0/core/web.js +14 -0
- package/dist/auth0/core/web.js.map +1 -0
- package/dist/auth0/generators/fastify/auth0-module/auth0-module.generator.d.ts +67 -0
- package/dist/auth0/generators/fastify/auth0-module/auth0-module.generator.d.ts.map +1 -0
- package/dist/auth0/generators/fastify/auth0-module/auth0-module.generator.js +125 -0
- package/dist/auth0/generators/fastify/auth0-module/auth0-module.generator.js.map +1 -0
- package/dist/auth0/generators/fastify/auth0-module/generated/ts-import-maps.d.ts +3 -0
- package/dist/auth0/generators/fastify/auth0-module/generated/ts-import-maps.d.ts.map +1 -0
- package/dist/auth0/generators/fastify/auth0-module/generated/ts-import-maps.js +12 -0
- package/dist/auth0/generators/fastify/auth0-module/generated/ts-import-maps.js.map +1 -0
- package/dist/auth0/generators/fastify/auth0-module/generated/ts-templates.d.ts +43 -0
- package/dist/auth0/generators/fastify/auth0-module/generated/ts-templates.d.ts.map +1 -0
- package/dist/auth0/generators/fastify/auth0-module/generated/ts-templates.js +25 -0
- package/dist/auth0/generators/fastify/auth0-module/generated/ts-templates.js.map +1 -0
- package/dist/auth0/generators/fastify/auth0-module/templates/management.ts +22 -0
- package/dist/auth0/generators/fastify/auth0-module/templates/user-session.service.ts +101 -0
- package/dist/auth0/generators/fastify/index.d.ts +2 -0
- package/dist/auth0/generators/fastify/index.d.ts.map +1 -0
- package/dist/auth0/generators/fastify/index.js +2 -0
- package/dist/auth0/generators/fastify/index.js.map +1 -0
- package/dist/auth0/generators/index.d.ts +3 -0
- package/dist/auth0/generators/index.d.ts.map +1 -0
- package/dist/auth0/generators/index.js +3 -0
- package/dist/auth0/generators/index.js.map +1 -0
- package/dist/auth0/generators/react/auth0-apollo/auth0-apollo.generator.d.ts +10 -0
- package/dist/auth0/generators/react/auth0-apollo/auth0-apollo.generator.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-apollo/auth0-apollo.generator.js +41 -0
- package/dist/auth0/generators/react/auth0-apollo/auth0-apollo.generator.js.map +1 -0
- package/dist/auth0/generators/react/auth0-apollo/templates/auth-link.ts +11 -0
- package/dist/auth0/generators/react/auth0-callback/auth0-callback.generator.d.ts +61 -0
- package/dist/auth0/generators/react/auth0-callback/auth0-callback.generator.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-callback/auth0-callback.generator.js +59 -0
- package/dist/auth0/generators/react/auth0-callback/auth0-callback.generator.js.map +1 -0
- package/dist/auth0/generators/react/auth0-callback/generated/ts-templates.d.ts +106 -0
- package/dist/auth0/generators/react/auth0-callback/generated/ts-templates.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-callback/generated/ts-templates.js +28 -0
- package/dist/auth0/generators/react/auth0-callback/generated/ts-templates.js.map +1 -0
- package/dist/auth0/generators/react/auth0-callback/templates/auth0-callback.page.tsx +61 -0
- package/dist/auth0/generators/react/auth0-callback/templates/signup.page.tsx +48 -0
- package/dist/auth0/generators/react/auth0-components/auth0-components.generator.d.ts +53 -0
- package/dist/auth0/generators/react/auth0-components/auth0-components.generator.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-components/auth0-components.generator.js +44 -0
- package/dist/auth0/generators/react/auth0-components/auth0-components.generator.js.map +1 -0
- package/dist/auth0/generators/react/auth0-components/generated/ts-import-maps.d.ts +3 -0
- package/dist/auth0/generators/react/auth0-components/generated/ts-import-maps.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-components/generated/ts-import-maps.js +12 -0
- package/dist/auth0/generators/react/auth0-components/generated/ts-import-maps.js.map +1 -0
- package/dist/auth0/generators/react/auth0-components/generated/ts-templates.d.ts +45 -0
- package/dist/auth0/generators/react/auth0-components/generated/ts-templates.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-components/generated/ts-templates.js +13 -0
- package/dist/auth0/generators/react/auth0-components/generated/ts-templates.js.map +1 -0
- package/dist/auth0/generators/react/auth0-components/templates/RequireAuth.tsx +22 -0
- package/dist/auth0/generators/react/auth0-hooks/auth0-hooks.generator.d.ts +28 -0
- package/dist/auth0/generators/react/auth0-hooks/auth0-hooks.generator.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-hooks/auth0-hooks.generator.js +65 -0
- package/dist/auth0/generators/react/auth0-hooks/auth0-hooks.generator.js.map +1 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/text-templates.d.ts +8 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/text-templates.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/text-templates.js +12 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/text-templates.js.map +1 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/ts-import-maps.d.ts +3 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/ts-import-maps.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/ts-import-maps.js +16 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/ts-import-maps.js.map +1 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/ts-templates.d.ts +33 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/ts-templates.d.ts.map +1 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/ts-templates.js +50 -0
- package/dist/auth0/generators/react/auth0-hooks/generated/ts-templates.js.map +1 -0
- package/dist/auth0/generators/react/auth0-hooks/templates/useCurrentUser.gql +10 -0
- package/dist/auth0/generators/react/auth0-hooks/templates/useCurrentUser.ts +29 -0
- package/dist/auth0/generators/react/auth0-hooks/templates/useLogOut.ts +14 -0
- package/dist/auth0/generators/react/auth0-hooks/templates/useRequiredUserId.ts +11 -0
- package/dist/auth0/generators/react/auth0-hooks/templates/useSession.ts +23 -0
- package/dist/auth0/generators/react/index.d.ts +6 -0
- package/dist/auth0/generators/react/index.d.ts.map +1 -0
- package/dist/auth0/generators/react/index.js +6 -0
- package/dist/auth0/generators/react/index.js.map +1 -0
- package/dist/auth0/generators/react/react-auth0/react-auth0.generator.d.ts +23 -0
- package/dist/auth0/generators/react/react-auth0/react-auth0.generator.d.ts.map +1 -0
- package/dist/auth0/generators/react/react-auth0/react-auth0.generator.js +64 -0
- package/dist/auth0/generators/react/react-auth0/react-auth0.generator.js.map +1 -0
- package/dist/auth0/metadata.json +8 -0
- package/dist/auth0/static/icon.svg +7 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/roles/constants.d.ts +4 -0
- package/dist/roles/constants.d.ts.map +1 -0
- package/dist/roles/constants.js +25 -0
- package/dist/roles/constants.js.map +1 -0
- package/dist/roles/index.d.ts +3 -0
- package/dist/roles/index.d.ts.map +1 -0
- package/dist/roles/index.js +3 -0
- package/dist/roles/index.js.map +1 -0
- package/dist/roles/schema.d.ts +65 -0
- package/dist/roles/schema.d.ts.map +1 -0
- package/dist/roles/schema.js +43 -0
- package/dist/roles/schema.js.map +1 -0
- package/dist/utils/cn.d.ts +2 -0
- package/dist/utils/cn.d.ts.map +1 -0
- package/dist/utils/cn.js +2 -0
- package/dist/utils/cn.js.map +1 -0
- package/dist/web/assets/__federation_expose_auth0CoreCommon--n6esVYP.js +54 -0
- package/dist/web/assets/__federation_expose_auth0CoreCommon--n6esVYP.js.map +1 -0
- package/dist/web/assets/__federation_expose_auth0CoreWeb-Ql6gpX5q.js +377 -0
- package/dist/web/assets/__federation_expose_auth0CoreWeb-Ql6gpX5q.js.map +1 -0
- package/dist/web/assets/__federation_fn_import-BiwmVFwy.js +421 -0
- package/dist/web/assets/__federation_fn_import-BiwmVFwy.js.map +1 -0
- package/dist/web/assets/__federation_shared_@baseplate-dev/project-builder-lib/web-CY8oz43s.js +330 -0
- package/dist/web/assets/__federation_shared_@baseplate-dev/project-builder-lib/web-CY8oz43s.js.map +1 -0
- package/dist/web/assets/__federation_shared_@baseplate-dev/project-builder-lib-B62IPizQ.js +10559 -0
- package/dist/web/assets/__federation_shared_@baseplate-dev/project-builder-lib-B62IPizQ.js.map +1 -0
- package/dist/web/assets/__federation_shared_@baseplate-dev/ui-components-BU2QTWNs.js +12718 -0
- package/dist/web/assets/__federation_shared_@baseplate-dev/ui-components-BU2QTWNs.js.map +1 -0
- package/dist/web/assets/__federation_shared_react-dom-Bwq4pLax.js +250 -0
- package/dist/web/assets/__federation_shared_react-dom-Bwq4pLax.js.map +1 -0
- package/dist/web/assets/__federation_shared_react-uocnGSER.js +7 -0
- package/dist/web/assets/__federation_shared_react-uocnGSER.js.map +1 -0
- package/dist/web/assets/__federation_shared_zod-BK7IELHt.js +4380 -0
- package/dist/web/assets/__federation_shared_zod-BK7IELHt.js.map +1 -0
- package/dist/web/assets/index-B1hOKVPw.js +574 -0
- package/dist/web/assets/index-B1hOKVPw.js.map +1 -0
- package/dist/web/assets/index-CgJx-krK.js +95 -0
- package/dist/web/assets/index-CgJx-krK.js.map +1 -0
- package/dist/web/assets/index-l0sNRNKZ.js.map +1 -0
- package/dist/web/assets/index.esm-BcxPd7Ha.js +2584 -0
- package/dist/web/assets/index.esm-BcxPd7Ha.js.map +1 -0
- package/dist/web/assets/model-utils-CbQJy1wE.js +1263 -0
- package/dist/web/assets/model-utils-CbQJy1wE.js.map +1 -0
- package/dist/web/assets/plugin-definition-BQRupXoQ.js +78 -0
- package/dist/web/assets/plugin-definition-BQRupXoQ.js.map +1 -0
- package/dist/web/assets/react-2jQE8aG0.js +47 -0
- package/dist/web/assets/react-2jQE8aG0.js.map +1 -0
- package/dist/web/assets/remoteEntry.js +54 -0
- package/dist/web/assets/remoteEntry.js.map +1 -0
- package/dist/web/assets/style-BdgwWjAf.css +95 -0
- package/dist/web/index.html +24 -0
- package/dist/web-export.d.ts +2 -0
- package/dist/web-export.js +2 -0
- package/dist/web-export.js.map +1 -0
- package/manifest.json +4 -0
- package/package.json +80 -0
|
@@ -0,0 +1,2584 @@
|
|
|
1
|
+
import { importShared } from './__federation_fn_import-BiwmVFwy.js';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = {exports: {}};
|
|
4
|
+
|
|
5
|
+
var reactJsxRuntime_production = {};
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @license React
|
|
9
|
+
* react-jsx-runtime.production.js
|
|
10
|
+
*
|
|
11
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
12
|
+
*
|
|
13
|
+
* This source code is licensed under the MIT license found in the
|
|
14
|
+
* LICENSE file in the root directory of this source tree.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
var hasRequiredReactJsxRuntime_production;
|
|
18
|
+
|
|
19
|
+
function requireReactJsxRuntime_production () {
|
|
20
|
+
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
|
|
21
|
+
hasRequiredReactJsxRuntime_production = 1;
|
|
22
|
+
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
|
|
23
|
+
REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
|
|
24
|
+
function jsxProd(type, config, maybeKey) {
|
|
25
|
+
var key = null;
|
|
26
|
+
void 0 !== maybeKey && (key = "" + maybeKey);
|
|
27
|
+
void 0 !== config.key && (key = "" + config.key);
|
|
28
|
+
if ("key" in config) {
|
|
29
|
+
maybeKey = {};
|
|
30
|
+
for (var propName in config)
|
|
31
|
+
"key" !== propName && (maybeKey[propName] = config[propName]);
|
|
32
|
+
} else maybeKey = config;
|
|
33
|
+
config = maybeKey.ref;
|
|
34
|
+
return {
|
|
35
|
+
$$typeof: REACT_ELEMENT_TYPE,
|
|
36
|
+
type: type,
|
|
37
|
+
key: key,
|
|
38
|
+
ref: void 0 !== config ? config : null,
|
|
39
|
+
props: maybeKey
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
|
|
43
|
+
reactJsxRuntime_production.jsx = jsxProd;
|
|
44
|
+
reactJsxRuntime_production.jsxs = jsxProd;
|
|
45
|
+
return reactJsxRuntime_production;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
var hasRequiredJsxRuntime;
|
|
49
|
+
|
|
50
|
+
function requireJsxRuntime () {
|
|
51
|
+
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
|
|
52
|
+
hasRequiredJsxRuntime = 1;
|
|
53
|
+
{
|
|
54
|
+
jsxRuntime.exports = requireReactJsxRuntime_production();
|
|
55
|
+
}
|
|
56
|
+
return jsxRuntime.exports;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
var jsxRuntimeExports = requireJsxRuntime();
|
|
60
|
+
|
|
61
|
+
const React = await importShared('react');
|
|
62
|
+
|
|
63
|
+
const React__default = await importShared('react');
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
var isCheckBoxInput = (element) => element.type === 'checkbox';
|
|
67
|
+
|
|
68
|
+
var isDateObject = (value) => value instanceof Date;
|
|
69
|
+
|
|
70
|
+
var isNullOrUndefined = (value) => value == null;
|
|
71
|
+
|
|
72
|
+
const isObjectType = (value) => typeof value === 'object';
|
|
73
|
+
var isObject = (value) => !isNullOrUndefined(value) &&
|
|
74
|
+
!Array.isArray(value) &&
|
|
75
|
+
isObjectType(value) &&
|
|
76
|
+
!isDateObject(value);
|
|
77
|
+
|
|
78
|
+
var getEventValue = (event) => isObject(event) && event.target
|
|
79
|
+
? isCheckBoxInput(event.target)
|
|
80
|
+
? event.target.checked
|
|
81
|
+
: event.target.value
|
|
82
|
+
: event;
|
|
83
|
+
|
|
84
|
+
var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
|
|
85
|
+
|
|
86
|
+
var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
|
|
87
|
+
|
|
88
|
+
var isPlainObject = (tempObject) => {
|
|
89
|
+
const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
|
|
90
|
+
return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
var isWeb = typeof window !== 'undefined' &&
|
|
94
|
+
typeof window.HTMLElement !== 'undefined' &&
|
|
95
|
+
typeof document !== 'undefined';
|
|
96
|
+
|
|
97
|
+
function cloneObject(data) {
|
|
98
|
+
let copy;
|
|
99
|
+
const isArray = Array.isArray(data);
|
|
100
|
+
const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
|
|
101
|
+
if (data instanceof Date) {
|
|
102
|
+
copy = new Date(data);
|
|
103
|
+
}
|
|
104
|
+
else if (data instanceof Set) {
|
|
105
|
+
copy = new Set(data);
|
|
106
|
+
}
|
|
107
|
+
else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
|
|
108
|
+
(isArray || isObject(data))) {
|
|
109
|
+
copy = isArray ? [] : {};
|
|
110
|
+
if (!isArray && !isPlainObject(data)) {
|
|
111
|
+
copy = data;
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
for (const key in data) {
|
|
115
|
+
if (data.hasOwnProperty(key)) {
|
|
116
|
+
copy[key] = cloneObject(data[key]);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
return data;
|
|
123
|
+
}
|
|
124
|
+
return copy;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
|
|
128
|
+
|
|
129
|
+
var isUndefined = (val) => val === undefined;
|
|
130
|
+
|
|
131
|
+
var get = (object, path, defaultValue) => {
|
|
132
|
+
if (!path || !isObject(object)) {
|
|
133
|
+
return defaultValue;
|
|
134
|
+
}
|
|
135
|
+
const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
|
|
136
|
+
return isUndefined(result) || result === object
|
|
137
|
+
? isUndefined(object[path])
|
|
138
|
+
? defaultValue
|
|
139
|
+
: object[path]
|
|
140
|
+
: result;
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
var isBoolean = (value) => typeof value === 'boolean';
|
|
144
|
+
|
|
145
|
+
var isKey = (value) => /^\w*$/.test(value);
|
|
146
|
+
|
|
147
|
+
var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
|
|
148
|
+
|
|
149
|
+
var set = (object, path, value) => {
|
|
150
|
+
let index = -1;
|
|
151
|
+
const tempPath = isKey(path) ? [path] : stringToPath(path);
|
|
152
|
+
const length = tempPath.length;
|
|
153
|
+
const lastIndex = length - 1;
|
|
154
|
+
while (++index < length) {
|
|
155
|
+
const key = tempPath[index];
|
|
156
|
+
let newValue = value;
|
|
157
|
+
if (index !== lastIndex) {
|
|
158
|
+
const objValue = object[key];
|
|
159
|
+
newValue =
|
|
160
|
+
isObject(objValue) || Array.isArray(objValue)
|
|
161
|
+
? objValue
|
|
162
|
+
: !isNaN(+tempPath[index + 1])
|
|
163
|
+
? []
|
|
164
|
+
: {};
|
|
165
|
+
}
|
|
166
|
+
if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
object[key] = newValue;
|
|
170
|
+
object = object[key];
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
const EVENTS = {
|
|
175
|
+
BLUR: 'blur',
|
|
176
|
+
FOCUS_OUT: 'focusout',
|
|
177
|
+
CHANGE: 'change',
|
|
178
|
+
};
|
|
179
|
+
const VALIDATION_MODE = {
|
|
180
|
+
onBlur: 'onBlur',
|
|
181
|
+
onChange: 'onChange',
|
|
182
|
+
onSubmit: 'onSubmit',
|
|
183
|
+
onTouched: 'onTouched',
|
|
184
|
+
all: 'all',
|
|
185
|
+
};
|
|
186
|
+
const INPUT_VALIDATION_RULES = {
|
|
187
|
+
max: 'max',
|
|
188
|
+
min: 'min',
|
|
189
|
+
maxLength: 'maxLength',
|
|
190
|
+
minLength: 'minLength',
|
|
191
|
+
pattern: 'pattern',
|
|
192
|
+
required: 'required',
|
|
193
|
+
validate: 'validate',
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
const HookFormContext = React__default.createContext(null);
|
|
197
|
+
/**
|
|
198
|
+
* This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
|
|
199
|
+
*
|
|
200
|
+
* @remarks
|
|
201
|
+
* [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
|
|
202
|
+
*
|
|
203
|
+
* @returns return all useForm methods
|
|
204
|
+
*
|
|
205
|
+
* @example
|
|
206
|
+
* ```tsx
|
|
207
|
+
* function App() {
|
|
208
|
+
* const methods = useForm();
|
|
209
|
+
* const onSubmit = data => console.log(data);
|
|
210
|
+
*
|
|
211
|
+
* return (
|
|
212
|
+
* <FormProvider {...methods} >
|
|
213
|
+
* <form onSubmit={methods.handleSubmit(onSubmit)}>
|
|
214
|
+
* <NestedInput />
|
|
215
|
+
* <input type="submit" />
|
|
216
|
+
* </form>
|
|
217
|
+
* </FormProvider>
|
|
218
|
+
* );
|
|
219
|
+
* }
|
|
220
|
+
*
|
|
221
|
+
* function NestedInput() {
|
|
222
|
+
* const { register } = useFormContext(); // retrieve all hook methods
|
|
223
|
+
* return <input {...register("test")} />;
|
|
224
|
+
* }
|
|
225
|
+
* ```
|
|
226
|
+
*/
|
|
227
|
+
const useFormContext = () => React__default.useContext(HookFormContext);
|
|
228
|
+
|
|
229
|
+
var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
|
|
230
|
+
const result = {
|
|
231
|
+
defaultValues: control._defaultValues,
|
|
232
|
+
};
|
|
233
|
+
for (const key in formState) {
|
|
234
|
+
Object.defineProperty(result, key, {
|
|
235
|
+
get: () => {
|
|
236
|
+
const _key = key;
|
|
237
|
+
if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
|
|
238
|
+
control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
|
|
239
|
+
}
|
|
240
|
+
localProxyFormState && (localProxyFormState[_key] = true);
|
|
241
|
+
return formState[_key];
|
|
242
|
+
},
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
return result;
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
|
|
249
|
+
|
|
250
|
+
/**
|
|
251
|
+
* This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
|
|
252
|
+
*
|
|
253
|
+
* @remarks
|
|
254
|
+
* [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
|
|
255
|
+
*
|
|
256
|
+
* @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
|
|
257
|
+
*
|
|
258
|
+
* @example
|
|
259
|
+
* ```tsx
|
|
260
|
+
* function App() {
|
|
261
|
+
* const { register, handleSubmit, control } = useForm({
|
|
262
|
+
* defaultValues: {
|
|
263
|
+
* firstName: "firstName"
|
|
264
|
+
* }});
|
|
265
|
+
* const { dirtyFields } = useFormState({
|
|
266
|
+
* control
|
|
267
|
+
* });
|
|
268
|
+
* const onSubmit = (data) => console.log(data);
|
|
269
|
+
*
|
|
270
|
+
* return (
|
|
271
|
+
* <form onSubmit={handleSubmit(onSubmit)}>
|
|
272
|
+
* <input {...register("firstName")} placeholder="First Name" />
|
|
273
|
+
* {dirtyFields.firstName && <p>Field is dirty.</p>}
|
|
274
|
+
* <input type="submit" />
|
|
275
|
+
* </form>
|
|
276
|
+
* );
|
|
277
|
+
* }
|
|
278
|
+
* ```
|
|
279
|
+
*/
|
|
280
|
+
function useFormState(props) {
|
|
281
|
+
const methods = useFormContext();
|
|
282
|
+
const { control = methods.control, disabled, name, exact } = props || {};
|
|
283
|
+
const [formState, updateFormState] = React__default.useState(control._formState);
|
|
284
|
+
const _localProxyFormState = React__default.useRef({
|
|
285
|
+
isDirty: false,
|
|
286
|
+
isLoading: false,
|
|
287
|
+
dirtyFields: false,
|
|
288
|
+
touchedFields: false,
|
|
289
|
+
validatingFields: false,
|
|
290
|
+
isValidating: false,
|
|
291
|
+
isValid: false,
|
|
292
|
+
errors: false,
|
|
293
|
+
});
|
|
294
|
+
useIsomorphicLayoutEffect(() => control._subscribe({
|
|
295
|
+
name: name,
|
|
296
|
+
formState: _localProxyFormState.current,
|
|
297
|
+
exact,
|
|
298
|
+
callback: (formState) => {
|
|
299
|
+
!disabled &&
|
|
300
|
+
updateFormState({
|
|
301
|
+
...control._formState,
|
|
302
|
+
...formState,
|
|
303
|
+
});
|
|
304
|
+
},
|
|
305
|
+
}), [name, disabled, exact]);
|
|
306
|
+
React__default.useEffect(() => {
|
|
307
|
+
_localProxyFormState.current.isValid && control._setValid(true);
|
|
308
|
+
}, [control]);
|
|
309
|
+
return React__default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
var isString = (value) => typeof value === 'string';
|
|
313
|
+
|
|
314
|
+
var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
|
|
315
|
+
if (isString(names)) {
|
|
316
|
+
isGlobal && _names.watch.add(names);
|
|
317
|
+
return get(formValues, names, defaultValue);
|
|
318
|
+
}
|
|
319
|
+
if (Array.isArray(names)) {
|
|
320
|
+
return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName), get(formValues, fieldName)));
|
|
321
|
+
}
|
|
322
|
+
isGlobal && (_names.watchAll = true);
|
|
323
|
+
return formValues;
|
|
324
|
+
};
|
|
325
|
+
|
|
326
|
+
/**
|
|
327
|
+
* Custom hook to subscribe to field change and isolate re-rendering at the component level.
|
|
328
|
+
*
|
|
329
|
+
* @remarks
|
|
330
|
+
*
|
|
331
|
+
* [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
|
|
332
|
+
*
|
|
333
|
+
* @example
|
|
334
|
+
* ```tsx
|
|
335
|
+
* const { control } = useForm();
|
|
336
|
+
* const values = useWatch({
|
|
337
|
+
* name: "fieldName"
|
|
338
|
+
* control,
|
|
339
|
+
* })
|
|
340
|
+
* ```
|
|
341
|
+
*/
|
|
342
|
+
function useWatch(props) {
|
|
343
|
+
const methods = useFormContext();
|
|
344
|
+
const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
|
|
345
|
+
const _defaultValue = React__default.useRef(defaultValue);
|
|
346
|
+
const [value, updateValue] = React__default.useState(control._getWatch(name, _defaultValue.current));
|
|
347
|
+
useIsomorphicLayoutEffect(() => control._subscribe({
|
|
348
|
+
name: name,
|
|
349
|
+
formState: {
|
|
350
|
+
values: true,
|
|
351
|
+
},
|
|
352
|
+
exact,
|
|
353
|
+
callback: (formState) => !disabled &&
|
|
354
|
+
updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current)),
|
|
355
|
+
}), [name, control, disabled, exact]);
|
|
356
|
+
React__default.useEffect(() => control._removeUnmounted());
|
|
357
|
+
return value;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/**
|
|
361
|
+
* Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
|
|
362
|
+
*
|
|
363
|
+
* @remarks
|
|
364
|
+
* [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
|
|
365
|
+
*
|
|
366
|
+
* @param props - the path name to the form field value, and validation rules.
|
|
367
|
+
*
|
|
368
|
+
* @returns field properties, field and form state. {@link UseControllerReturn}
|
|
369
|
+
*
|
|
370
|
+
* @example
|
|
371
|
+
* ```tsx
|
|
372
|
+
* function Input(props) {
|
|
373
|
+
* const { field, fieldState, formState } = useController(props);
|
|
374
|
+
* return (
|
|
375
|
+
* <div>
|
|
376
|
+
* <input {...field} placeholder={props.name} />
|
|
377
|
+
* <p>{fieldState.isTouched && "Touched"}</p>
|
|
378
|
+
* <p>{formState.isSubmitted ? "submitted" : ""}</p>
|
|
379
|
+
* </div>
|
|
380
|
+
* );
|
|
381
|
+
* }
|
|
382
|
+
* ```
|
|
383
|
+
*/
|
|
384
|
+
function useController(props) {
|
|
385
|
+
const methods = useFormContext();
|
|
386
|
+
const { name, disabled, control = methods.control, shouldUnregister } = props;
|
|
387
|
+
const isArrayField = isNameInFieldArray(control._names.array, name);
|
|
388
|
+
const value = useWatch({
|
|
389
|
+
control,
|
|
390
|
+
name,
|
|
391
|
+
defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
|
|
392
|
+
exact: true,
|
|
393
|
+
});
|
|
394
|
+
const formState = useFormState({
|
|
395
|
+
control,
|
|
396
|
+
name,
|
|
397
|
+
exact: true,
|
|
398
|
+
});
|
|
399
|
+
const _props = React__default.useRef(props);
|
|
400
|
+
const _registerProps = React__default.useRef(control.register(name, {
|
|
401
|
+
...props.rules,
|
|
402
|
+
value,
|
|
403
|
+
...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
|
|
404
|
+
}));
|
|
405
|
+
const fieldState = React__default.useMemo(() => Object.defineProperties({}, {
|
|
406
|
+
invalid: {
|
|
407
|
+
enumerable: true,
|
|
408
|
+
get: () => !!get(formState.errors, name),
|
|
409
|
+
},
|
|
410
|
+
isDirty: {
|
|
411
|
+
enumerable: true,
|
|
412
|
+
get: () => !!get(formState.dirtyFields, name),
|
|
413
|
+
},
|
|
414
|
+
isTouched: {
|
|
415
|
+
enumerable: true,
|
|
416
|
+
get: () => !!get(formState.touchedFields, name),
|
|
417
|
+
},
|
|
418
|
+
isValidating: {
|
|
419
|
+
enumerable: true,
|
|
420
|
+
get: () => !!get(formState.validatingFields, name),
|
|
421
|
+
},
|
|
422
|
+
error: {
|
|
423
|
+
enumerable: true,
|
|
424
|
+
get: () => get(formState.errors, name),
|
|
425
|
+
},
|
|
426
|
+
}), [formState, name]);
|
|
427
|
+
const onChange = React__default.useCallback((event) => _registerProps.current.onChange({
|
|
428
|
+
target: {
|
|
429
|
+
value: getEventValue(event),
|
|
430
|
+
name: name,
|
|
431
|
+
},
|
|
432
|
+
type: EVENTS.CHANGE,
|
|
433
|
+
}), [name]);
|
|
434
|
+
const onBlur = React__default.useCallback(() => _registerProps.current.onBlur({
|
|
435
|
+
target: {
|
|
436
|
+
value: get(control._formValues, name),
|
|
437
|
+
name: name,
|
|
438
|
+
},
|
|
439
|
+
type: EVENTS.BLUR,
|
|
440
|
+
}), [name, control._formValues]);
|
|
441
|
+
const ref = React__default.useCallback((elm) => {
|
|
442
|
+
const field = get(control._fields, name);
|
|
443
|
+
if (field && elm) {
|
|
444
|
+
field._f.ref = {
|
|
445
|
+
focus: () => elm.focus(),
|
|
446
|
+
select: () => elm.select(),
|
|
447
|
+
setCustomValidity: (message) => elm.setCustomValidity(message),
|
|
448
|
+
reportValidity: () => elm.reportValidity(),
|
|
449
|
+
};
|
|
450
|
+
}
|
|
451
|
+
}, [control._fields, name]);
|
|
452
|
+
const field = React__default.useMemo(() => ({
|
|
453
|
+
name,
|
|
454
|
+
value,
|
|
455
|
+
...(isBoolean(disabled) || formState.disabled
|
|
456
|
+
? { disabled: formState.disabled || disabled }
|
|
457
|
+
: {}),
|
|
458
|
+
onChange,
|
|
459
|
+
onBlur,
|
|
460
|
+
ref,
|
|
461
|
+
}), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
|
|
462
|
+
React__default.useEffect(() => {
|
|
463
|
+
const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
|
|
464
|
+
control.register(name, {
|
|
465
|
+
..._props.current.rules,
|
|
466
|
+
...(isBoolean(_props.current.disabled)
|
|
467
|
+
? { disabled: _props.current.disabled }
|
|
468
|
+
: {}),
|
|
469
|
+
});
|
|
470
|
+
const updateMounted = (name, value) => {
|
|
471
|
+
const field = get(control._fields, name);
|
|
472
|
+
if (field && field._f) {
|
|
473
|
+
field._f.mount = value;
|
|
474
|
+
}
|
|
475
|
+
};
|
|
476
|
+
updateMounted(name, true);
|
|
477
|
+
if (_shouldUnregisterField) {
|
|
478
|
+
const value = cloneObject(get(control._options.defaultValues, name));
|
|
479
|
+
set(control._defaultValues, name, value);
|
|
480
|
+
if (isUndefined(get(control._formValues, name))) {
|
|
481
|
+
set(control._formValues, name, value);
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
!isArrayField && control.register(name);
|
|
485
|
+
return () => {
|
|
486
|
+
(isArrayField
|
|
487
|
+
? _shouldUnregisterField && !control._state.action
|
|
488
|
+
: _shouldUnregisterField)
|
|
489
|
+
? control.unregister(name)
|
|
490
|
+
: updateMounted(name, false);
|
|
491
|
+
};
|
|
492
|
+
}, [name, control, isArrayField, shouldUnregister]);
|
|
493
|
+
React__default.useEffect(() => {
|
|
494
|
+
control._setDisabledField({
|
|
495
|
+
disabled,
|
|
496
|
+
name,
|
|
497
|
+
});
|
|
498
|
+
}, [disabled, name, control]);
|
|
499
|
+
return React__default.useMemo(() => ({
|
|
500
|
+
field,
|
|
501
|
+
formState,
|
|
502
|
+
fieldState,
|
|
503
|
+
}), [field, formState, fieldState]);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria
|
|
507
|
+
? {
|
|
508
|
+
...errors[name],
|
|
509
|
+
types: {
|
|
510
|
+
...(errors[name] && errors[name].types ? errors[name].types : {}),
|
|
511
|
+
[type]: message || true,
|
|
512
|
+
},
|
|
513
|
+
}
|
|
514
|
+
: {};
|
|
515
|
+
|
|
516
|
+
var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
|
|
517
|
+
|
|
518
|
+
var createSubject = () => {
|
|
519
|
+
let _observers = [];
|
|
520
|
+
const next = (value) => {
|
|
521
|
+
for (const observer of _observers) {
|
|
522
|
+
observer.next && observer.next(value);
|
|
523
|
+
}
|
|
524
|
+
};
|
|
525
|
+
const subscribe = (observer) => {
|
|
526
|
+
_observers.push(observer);
|
|
527
|
+
return {
|
|
528
|
+
unsubscribe: () => {
|
|
529
|
+
_observers = _observers.filter((o) => o !== observer);
|
|
530
|
+
},
|
|
531
|
+
};
|
|
532
|
+
};
|
|
533
|
+
const unsubscribe = () => {
|
|
534
|
+
_observers = [];
|
|
535
|
+
};
|
|
536
|
+
return {
|
|
537
|
+
get observers() {
|
|
538
|
+
return _observers;
|
|
539
|
+
},
|
|
540
|
+
next,
|
|
541
|
+
subscribe,
|
|
542
|
+
unsubscribe,
|
|
543
|
+
};
|
|
544
|
+
};
|
|
545
|
+
|
|
546
|
+
var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
|
|
547
|
+
|
|
548
|
+
function deepEqual(object1, object2) {
|
|
549
|
+
if (isPrimitive(object1) || isPrimitive(object2)) {
|
|
550
|
+
return object1 === object2;
|
|
551
|
+
}
|
|
552
|
+
if (isDateObject(object1) && isDateObject(object2)) {
|
|
553
|
+
return object1.getTime() === object2.getTime();
|
|
554
|
+
}
|
|
555
|
+
const keys1 = Object.keys(object1);
|
|
556
|
+
const keys2 = Object.keys(object2);
|
|
557
|
+
if (keys1.length !== keys2.length) {
|
|
558
|
+
return false;
|
|
559
|
+
}
|
|
560
|
+
for (const key of keys1) {
|
|
561
|
+
const val1 = object1[key];
|
|
562
|
+
if (!keys2.includes(key)) {
|
|
563
|
+
return false;
|
|
564
|
+
}
|
|
565
|
+
if (key !== 'ref') {
|
|
566
|
+
const val2 = object2[key];
|
|
567
|
+
if ((isDateObject(val1) && isDateObject(val2)) ||
|
|
568
|
+
(isObject(val1) && isObject(val2)) ||
|
|
569
|
+
(Array.isArray(val1) && Array.isArray(val2))
|
|
570
|
+
? !deepEqual(val1, val2)
|
|
571
|
+
: val1 !== val2) {
|
|
572
|
+
return false;
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
return true;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
|
|
580
|
+
|
|
581
|
+
var isFileInput = (element) => element.type === 'file';
|
|
582
|
+
|
|
583
|
+
var isFunction = (value) => typeof value === 'function';
|
|
584
|
+
|
|
585
|
+
var isHTMLElement = (value) => {
|
|
586
|
+
if (!isWeb) {
|
|
587
|
+
return false;
|
|
588
|
+
}
|
|
589
|
+
const owner = value ? value.ownerDocument : 0;
|
|
590
|
+
return (value instanceof
|
|
591
|
+
(owner && owner.defaultView ? owner.defaultView.HTMLElement : HTMLElement));
|
|
592
|
+
};
|
|
593
|
+
|
|
594
|
+
var isMultipleSelect = (element) => element.type === `select-multiple`;
|
|
595
|
+
|
|
596
|
+
var isRadioInput = (element) => element.type === 'radio';
|
|
597
|
+
|
|
598
|
+
var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
|
|
599
|
+
|
|
600
|
+
var live = (ref) => isHTMLElement(ref) && ref.isConnected;
|
|
601
|
+
|
|
602
|
+
function baseGet(object, updatePath) {
|
|
603
|
+
const length = updatePath.slice(0, -1).length;
|
|
604
|
+
let index = 0;
|
|
605
|
+
while (index < length) {
|
|
606
|
+
object = isUndefined(object) ? index++ : object[updatePath[index++]];
|
|
607
|
+
}
|
|
608
|
+
return object;
|
|
609
|
+
}
|
|
610
|
+
function isEmptyArray(obj) {
|
|
611
|
+
for (const key in obj) {
|
|
612
|
+
if (obj.hasOwnProperty(key) && !isUndefined(obj[key])) {
|
|
613
|
+
return false;
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
return true;
|
|
617
|
+
}
|
|
618
|
+
function unset(object, path) {
|
|
619
|
+
const paths = Array.isArray(path)
|
|
620
|
+
? path
|
|
621
|
+
: isKey(path)
|
|
622
|
+
? [path]
|
|
623
|
+
: stringToPath(path);
|
|
624
|
+
const childObject = paths.length === 1 ? object : baseGet(object, paths);
|
|
625
|
+
const index = paths.length - 1;
|
|
626
|
+
const key = paths[index];
|
|
627
|
+
if (childObject) {
|
|
628
|
+
delete childObject[key];
|
|
629
|
+
}
|
|
630
|
+
if (index !== 0 &&
|
|
631
|
+
((isObject(childObject) && isEmptyObject(childObject)) ||
|
|
632
|
+
(Array.isArray(childObject) && isEmptyArray(childObject)))) {
|
|
633
|
+
unset(object, paths.slice(0, -1));
|
|
634
|
+
}
|
|
635
|
+
return object;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
var objectHasFunction = (data) => {
|
|
639
|
+
for (const key in data) {
|
|
640
|
+
if (isFunction(data[key])) {
|
|
641
|
+
return true;
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
return false;
|
|
645
|
+
};
|
|
646
|
+
|
|
647
|
+
function markFieldsDirty(data, fields = {}) {
|
|
648
|
+
const isParentNodeArray = Array.isArray(data);
|
|
649
|
+
if (isObject(data) || isParentNodeArray) {
|
|
650
|
+
for (const key in data) {
|
|
651
|
+
if (Array.isArray(data[key]) ||
|
|
652
|
+
(isObject(data[key]) && !objectHasFunction(data[key]))) {
|
|
653
|
+
fields[key] = Array.isArray(data[key]) ? [] : {};
|
|
654
|
+
markFieldsDirty(data[key], fields[key]);
|
|
655
|
+
}
|
|
656
|
+
else if (!isNullOrUndefined(data[key])) {
|
|
657
|
+
fields[key] = true;
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
}
|
|
661
|
+
return fields;
|
|
662
|
+
}
|
|
663
|
+
function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues) {
|
|
664
|
+
const isParentNodeArray = Array.isArray(data);
|
|
665
|
+
if (isObject(data) || isParentNodeArray) {
|
|
666
|
+
for (const key in data) {
|
|
667
|
+
if (Array.isArray(data[key]) ||
|
|
668
|
+
(isObject(data[key]) && !objectHasFunction(data[key]))) {
|
|
669
|
+
if (isUndefined(formValues) ||
|
|
670
|
+
isPrimitive(dirtyFieldsFromValues[key])) {
|
|
671
|
+
dirtyFieldsFromValues[key] = Array.isArray(data[key])
|
|
672
|
+
? markFieldsDirty(data[key], [])
|
|
673
|
+
: { ...markFieldsDirty(data[key]) };
|
|
674
|
+
}
|
|
675
|
+
else {
|
|
676
|
+
getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
|
|
677
|
+
}
|
|
678
|
+
}
|
|
679
|
+
else {
|
|
680
|
+
dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
return dirtyFieldsFromValues;
|
|
685
|
+
}
|
|
686
|
+
var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
|
|
687
|
+
|
|
688
|
+
const defaultResult = {
|
|
689
|
+
value: false,
|
|
690
|
+
isValid: false,
|
|
691
|
+
};
|
|
692
|
+
const validResult = { value: true, isValid: true };
|
|
693
|
+
var getCheckboxValue = (options) => {
|
|
694
|
+
if (Array.isArray(options)) {
|
|
695
|
+
if (options.length > 1) {
|
|
696
|
+
const values = options
|
|
697
|
+
.filter((option) => option && option.checked && !option.disabled)
|
|
698
|
+
.map((option) => option.value);
|
|
699
|
+
return { value: values, isValid: !!values.length };
|
|
700
|
+
}
|
|
701
|
+
return options[0].checked && !options[0].disabled
|
|
702
|
+
? // @ts-expect-error expected to work in the browser
|
|
703
|
+
options[0].attributes && !isUndefined(options[0].attributes.value)
|
|
704
|
+
? isUndefined(options[0].value) || options[0].value === ''
|
|
705
|
+
? validResult
|
|
706
|
+
: { value: options[0].value, isValid: true }
|
|
707
|
+
: validResult
|
|
708
|
+
: defaultResult;
|
|
709
|
+
}
|
|
710
|
+
return defaultResult;
|
|
711
|
+
};
|
|
712
|
+
|
|
713
|
+
var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value)
|
|
714
|
+
? value
|
|
715
|
+
: valueAsNumber
|
|
716
|
+
? value === ''
|
|
717
|
+
? NaN
|
|
718
|
+
: value
|
|
719
|
+
? +value
|
|
720
|
+
: value
|
|
721
|
+
: valueAsDate && isString(value)
|
|
722
|
+
? new Date(value)
|
|
723
|
+
: setValueAs
|
|
724
|
+
? setValueAs(value)
|
|
725
|
+
: value;
|
|
726
|
+
|
|
727
|
+
const defaultReturn = {
|
|
728
|
+
isValid: false,
|
|
729
|
+
value: null,
|
|
730
|
+
};
|
|
731
|
+
var getRadioValue = (options) => Array.isArray(options)
|
|
732
|
+
? options.reduce((previous, option) => option && option.checked && !option.disabled
|
|
733
|
+
? {
|
|
734
|
+
isValid: true,
|
|
735
|
+
value: option.value,
|
|
736
|
+
}
|
|
737
|
+
: previous, defaultReturn)
|
|
738
|
+
: defaultReturn;
|
|
739
|
+
|
|
740
|
+
function getFieldValue(_f) {
|
|
741
|
+
const ref = _f.ref;
|
|
742
|
+
if (isFileInput(ref)) {
|
|
743
|
+
return ref.files;
|
|
744
|
+
}
|
|
745
|
+
if (isRadioInput(ref)) {
|
|
746
|
+
return getRadioValue(_f.refs).value;
|
|
747
|
+
}
|
|
748
|
+
if (isMultipleSelect(ref)) {
|
|
749
|
+
return [...ref.selectedOptions].map(({ value }) => value);
|
|
750
|
+
}
|
|
751
|
+
if (isCheckBoxInput(ref)) {
|
|
752
|
+
return getCheckboxValue(_f.refs).value;
|
|
753
|
+
}
|
|
754
|
+
return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
|
|
755
|
+
}
|
|
756
|
+
|
|
757
|
+
var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
|
|
758
|
+
const fields = {};
|
|
759
|
+
for (const name of fieldsNames) {
|
|
760
|
+
const field = get(_fields, name);
|
|
761
|
+
field && set(fields, name, field._f);
|
|
762
|
+
}
|
|
763
|
+
return {
|
|
764
|
+
criteriaMode,
|
|
765
|
+
names: [...fieldsNames],
|
|
766
|
+
fields,
|
|
767
|
+
shouldUseNativeValidation,
|
|
768
|
+
};
|
|
769
|
+
};
|
|
770
|
+
|
|
771
|
+
var isRegex = (value) => value instanceof RegExp;
|
|
772
|
+
|
|
773
|
+
var getRuleValue = (rule) => isUndefined(rule)
|
|
774
|
+
? rule
|
|
775
|
+
: isRegex(rule)
|
|
776
|
+
? rule.source
|
|
777
|
+
: isObject(rule)
|
|
778
|
+
? isRegex(rule.value)
|
|
779
|
+
? rule.value.source
|
|
780
|
+
: rule.value
|
|
781
|
+
: rule;
|
|
782
|
+
|
|
783
|
+
var getValidationModes = (mode) => ({
|
|
784
|
+
isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
|
|
785
|
+
isOnBlur: mode === VALIDATION_MODE.onBlur,
|
|
786
|
+
isOnChange: mode === VALIDATION_MODE.onChange,
|
|
787
|
+
isOnAll: mode === VALIDATION_MODE.all,
|
|
788
|
+
isOnTouch: mode === VALIDATION_MODE.onTouched,
|
|
789
|
+
});
|
|
790
|
+
|
|
791
|
+
const ASYNC_FUNCTION = 'AsyncFunction';
|
|
792
|
+
var hasPromiseValidation = (fieldReference) => !!fieldReference &&
|
|
793
|
+
!!fieldReference.validate &&
|
|
794
|
+
!!((isFunction(fieldReference.validate) &&
|
|
795
|
+
fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
|
|
796
|
+
(isObject(fieldReference.validate) &&
|
|
797
|
+
Object.values(fieldReference.validate).find((validateFunction) => validateFunction.constructor.name === ASYNC_FUNCTION)));
|
|
798
|
+
|
|
799
|
+
var hasValidation = (options) => options.mount &&
|
|
800
|
+
(options.required ||
|
|
801
|
+
options.min ||
|
|
802
|
+
options.max ||
|
|
803
|
+
options.maxLength ||
|
|
804
|
+
options.minLength ||
|
|
805
|
+
options.pattern ||
|
|
806
|
+
options.validate);
|
|
807
|
+
|
|
808
|
+
var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
|
|
809
|
+
(_names.watchAll ||
|
|
810
|
+
_names.watch.has(name) ||
|
|
811
|
+
[..._names.watch].some((watchName) => name.startsWith(watchName) &&
|
|
812
|
+
/^\.\w+/.test(name.slice(watchName.length))));
|
|
813
|
+
|
|
814
|
+
const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
|
|
815
|
+
for (const key of fieldsNames || Object.keys(fields)) {
|
|
816
|
+
const field = get(fields, key);
|
|
817
|
+
if (field) {
|
|
818
|
+
const { _f, ...currentField } = field;
|
|
819
|
+
if (_f) {
|
|
820
|
+
if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
|
|
821
|
+
return true;
|
|
822
|
+
}
|
|
823
|
+
else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
|
|
824
|
+
return true;
|
|
825
|
+
}
|
|
826
|
+
else {
|
|
827
|
+
if (iterateFieldsByAction(currentField, action)) {
|
|
828
|
+
break;
|
|
829
|
+
}
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
else if (isObject(currentField)) {
|
|
833
|
+
if (iterateFieldsByAction(currentField, action)) {
|
|
834
|
+
break;
|
|
835
|
+
}
|
|
836
|
+
}
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
return;
|
|
840
|
+
};
|
|
841
|
+
|
|
842
|
+
function schemaErrorLookup(errors, _fields, name) {
|
|
843
|
+
const error = get(errors, name);
|
|
844
|
+
if (error || isKey(name)) {
|
|
845
|
+
return {
|
|
846
|
+
error,
|
|
847
|
+
name,
|
|
848
|
+
};
|
|
849
|
+
}
|
|
850
|
+
const names = name.split('.');
|
|
851
|
+
while (names.length) {
|
|
852
|
+
const fieldName = names.join('.');
|
|
853
|
+
const field = get(_fields, fieldName);
|
|
854
|
+
const foundError = get(errors, fieldName);
|
|
855
|
+
if (field && !Array.isArray(field) && name !== fieldName) {
|
|
856
|
+
return { name };
|
|
857
|
+
}
|
|
858
|
+
if (foundError && foundError.type) {
|
|
859
|
+
return {
|
|
860
|
+
name: fieldName,
|
|
861
|
+
error: foundError,
|
|
862
|
+
};
|
|
863
|
+
}
|
|
864
|
+
names.pop();
|
|
865
|
+
}
|
|
866
|
+
return {
|
|
867
|
+
name,
|
|
868
|
+
};
|
|
869
|
+
}
|
|
870
|
+
|
|
871
|
+
var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
|
|
872
|
+
updateFormState(formStateData);
|
|
873
|
+
const { name, ...formState } = formStateData;
|
|
874
|
+
return (isEmptyObject(formState) ||
|
|
875
|
+
Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
|
|
876
|
+
Object.keys(formState).find((key) => _proxyFormState[key] ===
|
|
877
|
+
(!isRoot || VALIDATION_MODE.all)));
|
|
878
|
+
};
|
|
879
|
+
|
|
880
|
+
var shouldSubscribeByName = (name, signalName, exact) => !name ||
|
|
881
|
+
!signalName ||
|
|
882
|
+
name === signalName ||
|
|
883
|
+
convertToArrayPayload(name).some((currentName) => currentName &&
|
|
884
|
+
(exact
|
|
885
|
+
? currentName === signalName
|
|
886
|
+
: currentName.startsWith(signalName) ||
|
|
887
|
+
signalName.startsWith(currentName)));
|
|
888
|
+
|
|
889
|
+
var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
|
|
890
|
+
if (mode.isOnAll) {
|
|
891
|
+
return false;
|
|
892
|
+
}
|
|
893
|
+
else if (!isSubmitted && mode.isOnTouch) {
|
|
894
|
+
return !(isTouched || isBlurEvent);
|
|
895
|
+
}
|
|
896
|
+
else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
|
|
897
|
+
return !isBlurEvent;
|
|
898
|
+
}
|
|
899
|
+
else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
|
|
900
|
+
return isBlurEvent;
|
|
901
|
+
}
|
|
902
|
+
return true;
|
|
903
|
+
};
|
|
904
|
+
|
|
905
|
+
var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
|
|
906
|
+
|
|
907
|
+
var updateFieldArrayRootError = (errors, error, name) => {
|
|
908
|
+
const fieldArrayErrors = convertToArrayPayload(get(errors, name));
|
|
909
|
+
set(fieldArrayErrors, 'root', error[name]);
|
|
910
|
+
set(errors, name, fieldArrayErrors);
|
|
911
|
+
return errors;
|
|
912
|
+
};
|
|
913
|
+
|
|
914
|
+
var isMessage = (value) => isString(value);
|
|
915
|
+
|
|
916
|
+
function getValidateError(result, ref, type = 'validate') {
|
|
917
|
+
if (isMessage(result) ||
|
|
918
|
+
(Array.isArray(result) && result.every(isMessage)) ||
|
|
919
|
+
(isBoolean(result) && !result)) {
|
|
920
|
+
return {
|
|
921
|
+
type,
|
|
922
|
+
message: isMessage(result) ? result : '',
|
|
923
|
+
ref,
|
|
924
|
+
};
|
|
925
|
+
}
|
|
926
|
+
}
|
|
927
|
+
|
|
928
|
+
var getValueAndMessage = (validationData) => isObject(validationData) && !isRegex(validationData)
|
|
929
|
+
? validationData
|
|
930
|
+
: {
|
|
931
|
+
value: validationData,
|
|
932
|
+
message: '',
|
|
933
|
+
};
|
|
934
|
+
|
|
935
|
+
var validateField = async (field, disabledFieldNames, formValues, validateAllFieldCriteria, shouldUseNativeValidation, isFieldArray) => {
|
|
936
|
+
const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
|
|
937
|
+
const inputValue = get(formValues, name);
|
|
938
|
+
if (!mount || disabledFieldNames.has(name)) {
|
|
939
|
+
return {};
|
|
940
|
+
}
|
|
941
|
+
const inputRef = refs ? refs[0] : ref;
|
|
942
|
+
const setCustomValidity = (message) => {
|
|
943
|
+
if (shouldUseNativeValidation && inputRef.reportValidity) {
|
|
944
|
+
inputRef.setCustomValidity(isBoolean(message) ? '' : message || '');
|
|
945
|
+
inputRef.reportValidity();
|
|
946
|
+
}
|
|
947
|
+
};
|
|
948
|
+
const error = {};
|
|
949
|
+
const isRadio = isRadioInput(ref);
|
|
950
|
+
const isCheckBox = isCheckBoxInput(ref);
|
|
951
|
+
const isRadioOrCheckbox = isRadio || isCheckBox;
|
|
952
|
+
const isEmpty = ((valueAsNumber || isFileInput(ref)) &&
|
|
953
|
+
isUndefined(ref.value) &&
|
|
954
|
+
isUndefined(inputValue)) ||
|
|
955
|
+
(isHTMLElement(ref) && ref.value === '') ||
|
|
956
|
+
inputValue === '' ||
|
|
957
|
+
(Array.isArray(inputValue) && !inputValue.length);
|
|
958
|
+
const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
|
|
959
|
+
const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
|
|
960
|
+
const message = exceedMax ? maxLengthMessage : minLengthMessage;
|
|
961
|
+
error[name] = {
|
|
962
|
+
type: exceedMax ? maxType : minType,
|
|
963
|
+
message,
|
|
964
|
+
ref,
|
|
965
|
+
...appendErrorsCurry(exceedMax ? maxType : minType, message),
|
|
966
|
+
};
|
|
967
|
+
};
|
|
968
|
+
if (isFieldArray
|
|
969
|
+
? !Array.isArray(inputValue) || !inputValue.length
|
|
970
|
+
: required &&
|
|
971
|
+
((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||
|
|
972
|
+
(isBoolean(inputValue) && !inputValue) ||
|
|
973
|
+
(isCheckBox && !getCheckboxValue(refs).isValid) ||
|
|
974
|
+
(isRadio && !getRadioValue(refs).isValid))) {
|
|
975
|
+
const { value, message } = isMessage(required)
|
|
976
|
+
? { value: !!required, message: required }
|
|
977
|
+
: getValueAndMessage(required);
|
|
978
|
+
if (value) {
|
|
979
|
+
error[name] = {
|
|
980
|
+
type: INPUT_VALIDATION_RULES.required,
|
|
981
|
+
message,
|
|
982
|
+
ref: inputRef,
|
|
983
|
+
...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),
|
|
984
|
+
};
|
|
985
|
+
if (!validateAllFieldCriteria) {
|
|
986
|
+
setCustomValidity(message);
|
|
987
|
+
return error;
|
|
988
|
+
}
|
|
989
|
+
}
|
|
990
|
+
}
|
|
991
|
+
if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
|
|
992
|
+
let exceedMax;
|
|
993
|
+
let exceedMin;
|
|
994
|
+
const maxOutput = getValueAndMessage(max);
|
|
995
|
+
const minOutput = getValueAndMessage(min);
|
|
996
|
+
if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
|
|
997
|
+
const valueNumber = ref.valueAsNumber ||
|
|
998
|
+
(inputValue ? +inputValue : inputValue);
|
|
999
|
+
if (!isNullOrUndefined(maxOutput.value)) {
|
|
1000
|
+
exceedMax = valueNumber > maxOutput.value;
|
|
1001
|
+
}
|
|
1002
|
+
if (!isNullOrUndefined(minOutput.value)) {
|
|
1003
|
+
exceedMin = valueNumber < minOutput.value;
|
|
1004
|
+
}
|
|
1005
|
+
}
|
|
1006
|
+
else {
|
|
1007
|
+
const valueDate = ref.valueAsDate || new Date(inputValue);
|
|
1008
|
+
const convertTimeToDate = (time) => new Date(new Date().toDateString() + ' ' + time);
|
|
1009
|
+
const isTime = ref.type == 'time';
|
|
1010
|
+
const isWeek = ref.type == 'week';
|
|
1011
|
+
if (isString(maxOutput.value) && inputValue) {
|
|
1012
|
+
exceedMax = isTime
|
|
1013
|
+
? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value)
|
|
1014
|
+
: isWeek
|
|
1015
|
+
? inputValue > maxOutput.value
|
|
1016
|
+
: valueDate > new Date(maxOutput.value);
|
|
1017
|
+
}
|
|
1018
|
+
if (isString(minOutput.value) && inputValue) {
|
|
1019
|
+
exceedMin = isTime
|
|
1020
|
+
? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value)
|
|
1021
|
+
: isWeek
|
|
1022
|
+
? inputValue < minOutput.value
|
|
1023
|
+
: valueDate < new Date(minOutput.value);
|
|
1024
|
+
}
|
|
1025
|
+
}
|
|
1026
|
+
if (exceedMax || exceedMin) {
|
|
1027
|
+
getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
|
|
1028
|
+
if (!validateAllFieldCriteria) {
|
|
1029
|
+
setCustomValidity(error[name].message);
|
|
1030
|
+
return error;
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
if ((maxLength || minLength) &&
|
|
1035
|
+
!isEmpty &&
|
|
1036
|
+
(isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))) {
|
|
1037
|
+
const maxLengthOutput = getValueAndMessage(maxLength);
|
|
1038
|
+
const minLengthOutput = getValueAndMessage(minLength);
|
|
1039
|
+
const exceedMax = !isNullOrUndefined(maxLengthOutput.value) &&
|
|
1040
|
+
inputValue.length > +maxLengthOutput.value;
|
|
1041
|
+
const exceedMin = !isNullOrUndefined(minLengthOutput.value) &&
|
|
1042
|
+
inputValue.length < +minLengthOutput.value;
|
|
1043
|
+
if (exceedMax || exceedMin) {
|
|
1044
|
+
getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
|
|
1045
|
+
if (!validateAllFieldCriteria) {
|
|
1046
|
+
setCustomValidity(error[name].message);
|
|
1047
|
+
return error;
|
|
1048
|
+
}
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
if (pattern && !isEmpty && isString(inputValue)) {
|
|
1052
|
+
const { value: patternValue, message } = getValueAndMessage(pattern);
|
|
1053
|
+
if (isRegex(patternValue) && !inputValue.match(patternValue)) {
|
|
1054
|
+
error[name] = {
|
|
1055
|
+
type: INPUT_VALIDATION_RULES.pattern,
|
|
1056
|
+
message,
|
|
1057
|
+
ref,
|
|
1058
|
+
...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),
|
|
1059
|
+
};
|
|
1060
|
+
if (!validateAllFieldCriteria) {
|
|
1061
|
+
setCustomValidity(message);
|
|
1062
|
+
return error;
|
|
1063
|
+
}
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
if (validate) {
|
|
1067
|
+
if (isFunction(validate)) {
|
|
1068
|
+
const result = await validate(inputValue, formValues);
|
|
1069
|
+
const validateError = getValidateError(result, inputRef);
|
|
1070
|
+
if (validateError) {
|
|
1071
|
+
error[name] = {
|
|
1072
|
+
...validateError,
|
|
1073
|
+
...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message),
|
|
1074
|
+
};
|
|
1075
|
+
if (!validateAllFieldCriteria) {
|
|
1076
|
+
setCustomValidity(validateError.message);
|
|
1077
|
+
return error;
|
|
1078
|
+
}
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
else if (isObject(validate)) {
|
|
1082
|
+
let validationResult = {};
|
|
1083
|
+
for (const key in validate) {
|
|
1084
|
+
if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
|
|
1085
|
+
break;
|
|
1086
|
+
}
|
|
1087
|
+
const validateError = getValidateError(await validate[key](inputValue, formValues), inputRef, key);
|
|
1088
|
+
if (validateError) {
|
|
1089
|
+
validationResult = {
|
|
1090
|
+
...validateError,
|
|
1091
|
+
...appendErrorsCurry(key, validateError.message),
|
|
1092
|
+
};
|
|
1093
|
+
setCustomValidity(validateError.message);
|
|
1094
|
+
if (validateAllFieldCriteria) {
|
|
1095
|
+
error[name] = validationResult;
|
|
1096
|
+
}
|
|
1097
|
+
}
|
|
1098
|
+
}
|
|
1099
|
+
if (!isEmptyObject(validationResult)) {
|
|
1100
|
+
error[name] = {
|
|
1101
|
+
ref: inputRef,
|
|
1102
|
+
...validationResult,
|
|
1103
|
+
};
|
|
1104
|
+
if (!validateAllFieldCriteria) {
|
|
1105
|
+
return error;
|
|
1106
|
+
}
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
}
|
|
1110
|
+
setCustomValidity(true);
|
|
1111
|
+
return error;
|
|
1112
|
+
};
|
|
1113
|
+
|
|
1114
|
+
const defaultOptions = {
|
|
1115
|
+
mode: VALIDATION_MODE.onSubmit,
|
|
1116
|
+
reValidateMode: VALIDATION_MODE.onChange,
|
|
1117
|
+
shouldFocusError: true,
|
|
1118
|
+
};
|
|
1119
|
+
function createFormControl(props = {}) {
|
|
1120
|
+
let _options = {
|
|
1121
|
+
...defaultOptions,
|
|
1122
|
+
...props,
|
|
1123
|
+
};
|
|
1124
|
+
let _formState = {
|
|
1125
|
+
submitCount: 0,
|
|
1126
|
+
isDirty: false,
|
|
1127
|
+
isReady: false,
|
|
1128
|
+
isLoading: isFunction(_options.defaultValues),
|
|
1129
|
+
isValidating: false,
|
|
1130
|
+
isSubmitted: false,
|
|
1131
|
+
isSubmitting: false,
|
|
1132
|
+
isSubmitSuccessful: false,
|
|
1133
|
+
isValid: false,
|
|
1134
|
+
touchedFields: {},
|
|
1135
|
+
dirtyFields: {},
|
|
1136
|
+
validatingFields: {},
|
|
1137
|
+
errors: _options.errors || {},
|
|
1138
|
+
disabled: _options.disabled || false,
|
|
1139
|
+
};
|
|
1140
|
+
const _fields = {};
|
|
1141
|
+
let _defaultValues = isObject(_options.defaultValues) || isObject(_options.values)
|
|
1142
|
+
? cloneObject(_options.defaultValues || _options.values) || {}
|
|
1143
|
+
: {};
|
|
1144
|
+
let _formValues = _options.shouldUnregister
|
|
1145
|
+
? {}
|
|
1146
|
+
: cloneObject(_defaultValues);
|
|
1147
|
+
let _state = {
|
|
1148
|
+
action: false,
|
|
1149
|
+
mount: false,
|
|
1150
|
+
watch: false,
|
|
1151
|
+
};
|
|
1152
|
+
let _names = {
|
|
1153
|
+
mount: new Set(),
|
|
1154
|
+
disabled: new Set(),
|
|
1155
|
+
unMount: new Set(),
|
|
1156
|
+
array: new Set(),
|
|
1157
|
+
watch: new Set(),
|
|
1158
|
+
};
|
|
1159
|
+
let delayErrorCallback;
|
|
1160
|
+
let timer = 0;
|
|
1161
|
+
const _proxyFormState = {
|
|
1162
|
+
isDirty: false,
|
|
1163
|
+
dirtyFields: false,
|
|
1164
|
+
validatingFields: false,
|
|
1165
|
+
touchedFields: false,
|
|
1166
|
+
isValidating: false,
|
|
1167
|
+
isValid: false,
|
|
1168
|
+
errors: false,
|
|
1169
|
+
};
|
|
1170
|
+
let _proxySubscribeFormState = {
|
|
1171
|
+
..._proxyFormState,
|
|
1172
|
+
};
|
|
1173
|
+
const _subjects = {
|
|
1174
|
+
array: createSubject(),
|
|
1175
|
+
state: createSubject(),
|
|
1176
|
+
};
|
|
1177
|
+
const validationModeBeforeSubmit = getValidationModes(_options.mode);
|
|
1178
|
+
const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
|
|
1179
|
+
const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
|
|
1180
|
+
const debounce = (callback) => (wait) => {
|
|
1181
|
+
clearTimeout(timer);
|
|
1182
|
+
timer = setTimeout(callback, wait);
|
|
1183
|
+
};
|
|
1184
|
+
const _setValid = async (shouldUpdateValid) => {
|
|
1185
|
+
if (!_options.disabled &&
|
|
1186
|
+
(_proxyFormState.isValid ||
|
|
1187
|
+
_proxySubscribeFormState.isValid ||
|
|
1188
|
+
shouldUpdateValid)) {
|
|
1189
|
+
const isValid = _options.resolver
|
|
1190
|
+
? isEmptyObject((await _runSchema()).errors)
|
|
1191
|
+
: await executeBuiltInValidation(_fields, true);
|
|
1192
|
+
if (isValid !== _formState.isValid) {
|
|
1193
|
+
_subjects.state.next({
|
|
1194
|
+
isValid,
|
|
1195
|
+
});
|
|
1196
|
+
}
|
|
1197
|
+
}
|
|
1198
|
+
};
|
|
1199
|
+
const _updateIsValidating = (names, isValidating) => {
|
|
1200
|
+
if (!_options.disabled &&
|
|
1201
|
+
(_proxyFormState.isValidating ||
|
|
1202
|
+
_proxyFormState.validatingFields ||
|
|
1203
|
+
_proxySubscribeFormState.isValidating ||
|
|
1204
|
+
_proxySubscribeFormState.validatingFields)) {
|
|
1205
|
+
(names || Array.from(_names.mount)).forEach((name) => {
|
|
1206
|
+
if (name) {
|
|
1207
|
+
isValidating
|
|
1208
|
+
? set(_formState.validatingFields, name, isValidating)
|
|
1209
|
+
: unset(_formState.validatingFields, name);
|
|
1210
|
+
}
|
|
1211
|
+
});
|
|
1212
|
+
_subjects.state.next({
|
|
1213
|
+
validatingFields: _formState.validatingFields,
|
|
1214
|
+
isValidating: !isEmptyObject(_formState.validatingFields),
|
|
1215
|
+
});
|
|
1216
|
+
}
|
|
1217
|
+
};
|
|
1218
|
+
const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
|
1219
|
+
if (args && method && !_options.disabled) {
|
|
1220
|
+
_state.action = true;
|
|
1221
|
+
if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
|
|
1222
|
+
const fieldValues = method(get(_fields, name), args.argA, args.argB);
|
|
1223
|
+
shouldSetValues && set(_fields, name, fieldValues);
|
|
1224
|
+
}
|
|
1225
|
+
if (shouldUpdateFieldsAndState &&
|
|
1226
|
+
Array.isArray(get(_formState.errors, name))) {
|
|
1227
|
+
const errors = method(get(_formState.errors, name), args.argA, args.argB);
|
|
1228
|
+
shouldSetValues && set(_formState.errors, name, errors);
|
|
1229
|
+
unsetEmptyArray(_formState.errors, name);
|
|
1230
|
+
}
|
|
1231
|
+
if ((_proxyFormState.touchedFields ||
|
|
1232
|
+
_proxySubscribeFormState.touchedFields) &&
|
|
1233
|
+
shouldUpdateFieldsAndState &&
|
|
1234
|
+
Array.isArray(get(_formState.touchedFields, name))) {
|
|
1235
|
+
const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
|
|
1236
|
+
shouldSetValues && set(_formState.touchedFields, name, touchedFields);
|
|
1237
|
+
}
|
|
1238
|
+
if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
|
|
1239
|
+
_formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
|
|
1240
|
+
}
|
|
1241
|
+
_subjects.state.next({
|
|
1242
|
+
name,
|
|
1243
|
+
isDirty: _getDirty(name, values),
|
|
1244
|
+
dirtyFields: _formState.dirtyFields,
|
|
1245
|
+
errors: _formState.errors,
|
|
1246
|
+
isValid: _formState.isValid,
|
|
1247
|
+
});
|
|
1248
|
+
}
|
|
1249
|
+
else {
|
|
1250
|
+
set(_formValues, name, values);
|
|
1251
|
+
}
|
|
1252
|
+
};
|
|
1253
|
+
const updateErrors = (name, error) => {
|
|
1254
|
+
set(_formState.errors, name, error);
|
|
1255
|
+
_subjects.state.next({
|
|
1256
|
+
errors: _formState.errors,
|
|
1257
|
+
});
|
|
1258
|
+
};
|
|
1259
|
+
const _setErrors = (errors) => {
|
|
1260
|
+
_formState.errors = errors;
|
|
1261
|
+
_subjects.state.next({
|
|
1262
|
+
errors: _formState.errors,
|
|
1263
|
+
isValid: false,
|
|
1264
|
+
});
|
|
1265
|
+
};
|
|
1266
|
+
const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
|
|
1267
|
+
const field = get(_fields, name);
|
|
1268
|
+
if (field) {
|
|
1269
|
+
const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
|
|
1270
|
+
isUndefined(defaultValue) ||
|
|
1271
|
+
(ref && ref.defaultChecked) ||
|
|
1272
|
+
shouldSkipSetValueAs
|
|
1273
|
+
? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
|
|
1274
|
+
: setFieldValue(name, defaultValue);
|
|
1275
|
+
_state.mount && _setValid();
|
|
1276
|
+
}
|
|
1277
|
+
};
|
|
1278
|
+
const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
|
|
1279
|
+
let shouldUpdateField = false;
|
|
1280
|
+
let isPreviousDirty = false;
|
|
1281
|
+
const output = {
|
|
1282
|
+
name,
|
|
1283
|
+
};
|
|
1284
|
+
if (!_options.disabled) {
|
|
1285
|
+
if (!isBlurEvent || shouldDirty) {
|
|
1286
|
+
if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
|
|
1287
|
+
isPreviousDirty = _formState.isDirty;
|
|
1288
|
+
_formState.isDirty = output.isDirty = _getDirty();
|
|
1289
|
+
shouldUpdateField = isPreviousDirty !== output.isDirty;
|
|
1290
|
+
}
|
|
1291
|
+
const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
|
|
1292
|
+
isPreviousDirty = !!get(_formState.dirtyFields, name);
|
|
1293
|
+
isCurrentFieldPristine
|
|
1294
|
+
? unset(_formState.dirtyFields, name)
|
|
1295
|
+
: set(_formState.dirtyFields, name, true);
|
|
1296
|
+
output.dirtyFields = _formState.dirtyFields;
|
|
1297
|
+
shouldUpdateField =
|
|
1298
|
+
shouldUpdateField ||
|
|
1299
|
+
((_proxyFormState.dirtyFields ||
|
|
1300
|
+
_proxySubscribeFormState.dirtyFields) &&
|
|
1301
|
+
isPreviousDirty !== !isCurrentFieldPristine);
|
|
1302
|
+
}
|
|
1303
|
+
if (isBlurEvent) {
|
|
1304
|
+
const isPreviousFieldTouched = get(_formState.touchedFields, name);
|
|
1305
|
+
if (!isPreviousFieldTouched) {
|
|
1306
|
+
set(_formState.touchedFields, name, isBlurEvent);
|
|
1307
|
+
output.touchedFields = _formState.touchedFields;
|
|
1308
|
+
shouldUpdateField =
|
|
1309
|
+
shouldUpdateField ||
|
|
1310
|
+
((_proxyFormState.touchedFields ||
|
|
1311
|
+
_proxySubscribeFormState.touchedFields) &&
|
|
1312
|
+
isPreviousFieldTouched !== isBlurEvent);
|
|
1313
|
+
}
|
|
1314
|
+
}
|
|
1315
|
+
shouldUpdateField && shouldRender && _subjects.state.next(output);
|
|
1316
|
+
}
|
|
1317
|
+
return shouldUpdateField ? output : {};
|
|
1318
|
+
};
|
|
1319
|
+
const shouldRenderByError = (name, isValid, error, fieldState) => {
|
|
1320
|
+
const previousFieldError = get(_formState.errors, name);
|
|
1321
|
+
const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
|
|
1322
|
+
isBoolean(isValid) &&
|
|
1323
|
+
_formState.isValid !== isValid;
|
|
1324
|
+
if (_options.delayError && error) {
|
|
1325
|
+
delayErrorCallback = debounce(() => updateErrors(name, error));
|
|
1326
|
+
delayErrorCallback(_options.delayError);
|
|
1327
|
+
}
|
|
1328
|
+
else {
|
|
1329
|
+
clearTimeout(timer);
|
|
1330
|
+
delayErrorCallback = null;
|
|
1331
|
+
error
|
|
1332
|
+
? set(_formState.errors, name, error)
|
|
1333
|
+
: unset(_formState.errors, name);
|
|
1334
|
+
}
|
|
1335
|
+
if ((error ? !deepEqual(previousFieldError, error) : previousFieldError) ||
|
|
1336
|
+
!isEmptyObject(fieldState) ||
|
|
1337
|
+
shouldUpdateValid) {
|
|
1338
|
+
const updatedFormState = {
|
|
1339
|
+
...fieldState,
|
|
1340
|
+
...(shouldUpdateValid && isBoolean(isValid) ? { isValid } : {}),
|
|
1341
|
+
errors: _formState.errors,
|
|
1342
|
+
name,
|
|
1343
|
+
};
|
|
1344
|
+
_formState = {
|
|
1345
|
+
..._formState,
|
|
1346
|
+
...updatedFormState,
|
|
1347
|
+
};
|
|
1348
|
+
_subjects.state.next(updatedFormState);
|
|
1349
|
+
}
|
|
1350
|
+
};
|
|
1351
|
+
const _runSchema = async (name) => {
|
|
1352
|
+
_updateIsValidating(name, true);
|
|
1353
|
+
const result = await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
|
|
1354
|
+
_updateIsValidating(name);
|
|
1355
|
+
return result;
|
|
1356
|
+
};
|
|
1357
|
+
const executeSchemaAndUpdateState = async (names) => {
|
|
1358
|
+
const { errors } = await _runSchema(names);
|
|
1359
|
+
if (names) {
|
|
1360
|
+
for (const name of names) {
|
|
1361
|
+
const error = get(errors, name);
|
|
1362
|
+
error
|
|
1363
|
+
? set(_formState.errors, name, error)
|
|
1364
|
+
: unset(_formState.errors, name);
|
|
1365
|
+
}
|
|
1366
|
+
}
|
|
1367
|
+
else {
|
|
1368
|
+
_formState.errors = errors;
|
|
1369
|
+
}
|
|
1370
|
+
return errors;
|
|
1371
|
+
};
|
|
1372
|
+
const executeBuiltInValidation = async (fields, shouldOnlyCheckValid, context = {
|
|
1373
|
+
valid: true,
|
|
1374
|
+
}) => {
|
|
1375
|
+
for (const name in fields) {
|
|
1376
|
+
const field = fields[name];
|
|
1377
|
+
if (field) {
|
|
1378
|
+
const { _f, ...fieldValue } = field;
|
|
1379
|
+
if (_f) {
|
|
1380
|
+
const isFieldArrayRoot = _names.array.has(_f.name);
|
|
1381
|
+
const isPromiseFunction = field._f && hasPromiseValidation(field._f);
|
|
1382
|
+
if (isPromiseFunction && _proxyFormState.validatingFields) {
|
|
1383
|
+
_updateIsValidating([name], true);
|
|
1384
|
+
}
|
|
1385
|
+
const fieldError = await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation && !shouldOnlyCheckValid, isFieldArrayRoot);
|
|
1386
|
+
if (isPromiseFunction && _proxyFormState.validatingFields) {
|
|
1387
|
+
_updateIsValidating([name]);
|
|
1388
|
+
}
|
|
1389
|
+
if (fieldError[_f.name]) {
|
|
1390
|
+
context.valid = false;
|
|
1391
|
+
if (shouldOnlyCheckValid) {
|
|
1392
|
+
break;
|
|
1393
|
+
}
|
|
1394
|
+
}
|
|
1395
|
+
!shouldOnlyCheckValid &&
|
|
1396
|
+
(get(fieldError, _f.name)
|
|
1397
|
+
? isFieldArrayRoot
|
|
1398
|
+
? updateFieldArrayRootError(_formState.errors, fieldError, _f.name)
|
|
1399
|
+
: set(_formState.errors, _f.name, fieldError[_f.name])
|
|
1400
|
+
: unset(_formState.errors, _f.name));
|
|
1401
|
+
}
|
|
1402
|
+
!isEmptyObject(fieldValue) &&
|
|
1403
|
+
(await executeBuiltInValidation(fieldValue, shouldOnlyCheckValid, context));
|
|
1404
|
+
}
|
|
1405
|
+
}
|
|
1406
|
+
return context.valid;
|
|
1407
|
+
};
|
|
1408
|
+
const _removeUnmounted = () => {
|
|
1409
|
+
for (const name of _names.unMount) {
|
|
1410
|
+
const field = get(_fields, name);
|
|
1411
|
+
field &&
|
|
1412
|
+
(field._f.refs
|
|
1413
|
+
? field._f.refs.every((ref) => !live(ref))
|
|
1414
|
+
: !live(field._f.ref)) &&
|
|
1415
|
+
unregister(name);
|
|
1416
|
+
}
|
|
1417
|
+
_names.unMount = new Set();
|
|
1418
|
+
};
|
|
1419
|
+
const _getDirty = (name, data) => !_options.disabled &&
|
|
1420
|
+
(name && data && set(_formValues, name, data),
|
|
1421
|
+
!deepEqual(getValues(), _defaultValues));
|
|
1422
|
+
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
|
1423
|
+
...(_state.mount
|
|
1424
|
+
? _formValues
|
|
1425
|
+
: isUndefined(defaultValue)
|
|
1426
|
+
? _defaultValues
|
|
1427
|
+
: isString(names)
|
|
1428
|
+
? { [names]: defaultValue }
|
|
1429
|
+
: defaultValue),
|
|
1430
|
+
}, isGlobal, defaultValue);
|
|
1431
|
+
const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
|
|
1432
|
+
const setFieldValue = (name, value, options = {}) => {
|
|
1433
|
+
const field = get(_fields, name);
|
|
1434
|
+
let fieldValue = value;
|
|
1435
|
+
if (field) {
|
|
1436
|
+
const fieldReference = field._f;
|
|
1437
|
+
if (fieldReference) {
|
|
1438
|
+
!fieldReference.disabled &&
|
|
1439
|
+
set(_formValues, name, getFieldValueAs(value, fieldReference));
|
|
1440
|
+
fieldValue =
|
|
1441
|
+
isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
|
|
1442
|
+
? ''
|
|
1443
|
+
: value;
|
|
1444
|
+
if (isMultipleSelect(fieldReference.ref)) {
|
|
1445
|
+
[...fieldReference.ref.options].forEach((optionRef) => (optionRef.selected = fieldValue.includes(optionRef.value)));
|
|
1446
|
+
}
|
|
1447
|
+
else if (fieldReference.refs) {
|
|
1448
|
+
if (isCheckBoxInput(fieldReference.ref)) {
|
|
1449
|
+
fieldReference.refs.length > 1
|
|
1450
|
+
? fieldReference.refs.forEach((checkboxRef) => (!checkboxRef.defaultChecked || !checkboxRef.disabled) &&
|
|
1451
|
+
(checkboxRef.checked = Array.isArray(fieldValue)
|
|
1452
|
+
? !!fieldValue.find((data) => data === checkboxRef.value)
|
|
1453
|
+
: fieldValue === checkboxRef.value))
|
|
1454
|
+
: fieldReference.refs[0] &&
|
|
1455
|
+
(fieldReference.refs[0].checked = !!fieldValue);
|
|
1456
|
+
}
|
|
1457
|
+
else {
|
|
1458
|
+
fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
|
|
1459
|
+
}
|
|
1460
|
+
}
|
|
1461
|
+
else if (isFileInput(fieldReference.ref)) {
|
|
1462
|
+
fieldReference.ref.value = '';
|
|
1463
|
+
}
|
|
1464
|
+
else {
|
|
1465
|
+
fieldReference.ref.value = fieldValue;
|
|
1466
|
+
if (!fieldReference.ref.type) {
|
|
1467
|
+
_subjects.state.next({
|
|
1468
|
+
name,
|
|
1469
|
+
values: cloneObject(_formValues),
|
|
1470
|
+
});
|
|
1471
|
+
}
|
|
1472
|
+
}
|
|
1473
|
+
}
|
|
1474
|
+
}
|
|
1475
|
+
(options.shouldDirty || options.shouldTouch) &&
|
|
1476
|
+
updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
|
|
1477
|
+
options.shouldValidate && trigger(name);
|
|
1478
|
+
};
|
|
1479
|
+
const setValues = (name, value, options) => {
|
|
1480
|
+
for (const fieldKey in value) {
|
|
1481
|
+
const fieldValue = value[fieldKey];
|
|
1482
|
+
const fieldName = `${name}.${fieldKey}`;
|
|
1483
|
+
const field = get(_fields, fieldName);
|
|
1484
|
+
(_names.array.has(name) ||
|
|
1485
|
+
isObject(fieldValue) ||
|
|
1486
|
+
(field && !field._f)) &&
|
|
1487
|
+
!isDateObject(fieldValue)
|
|
1488
|
+
? setValues(fieldName, fieldValue, options)
|
|
1489
|
+
: setFieldValue(fieldName, fieldValue, options);
|
|
1490
|
+
}
|
|
1491
|
+
};
|
|
1492
|
+
const setValue = (name, value, options = {}) => {
|
|
1493
|
+
const field = get(_fields, name);
|
|
1494
|
+
const isFieldArray = _names.array.has(name);
|
|
1495
|
+
const cloneValue = cloneObject(value);
|
|
1496
|
+
set(_formValues, name, cloneValue);
|
|
1497
|
+
if (isFieldArray) {
|
|
1498
|
+
_subjects.array.next({
|
|
1499
|
+
name,
|
|
1500
|
+
values: cloneObject(_formValues),
|
|
1501
|
+
});
|
|
1502
|
+
if ((_proxyFormState.isDirty ||
|
|
1503
|
+
_proxyFormState.dirtyFields ||
|
|
1504
|
+
_proxySubscribeFormState.isDirty ||
|
|
1505
|
+
_proxySubscribeFormState.dirtyFields) &&
|
|
1506
|
+
options.shouldDirty) {
|
|
1507
|
+
_subjects.state.next({
|
|
1508
|
+
name,
|
|
1509
|
+
dirtyFields: getDirtyFields(_defaultValues, _formValues),
|
|
1510
|
+
isDirty: _getDirty(name, cloneValue),
|
|
1511
|
+
});
|
|
1512
|
+
}
|
|
1513
|
+
}
|
|
1514
|
+
else {
|
|
1515
|
+
field && !field._f && !isNullOrUndefined(cloneValue)
|
|
1516
|
+
? setValues(name, cloneValue, options)
|
|
1517
|
+
: setFieldValue(name, cloneValue, options);
|
|
1518
|
+
}
|
|
1519
|
+
isWatched(name, _names) && _subjects.state.next({ ..._formState });
|
|
1520
|
+
_subjects.state.next({
|
|
1521
|
+
name: _state.mount ? name : undefined,
|
|
1522
|
+
values: cloneObject(_formValues),
|
|
1523
|
+
});
|
|
1524
|
+
};
|
|
1525
|
+
const onChange = async (event) => {
|
|
1526
|
+
_state.mount = true;
|
|
1527
|
+
const target = event.target;
|
|
1528
|
+
let name = target.name;
|
|
1529
|
+
let isFieldValueUpdated = true;
|
|
1530
|
+
const field = get(_fields, name);
|
|
1531
|
+
const _updateIsFieldValueUpdated = (fieldValue) => {
|
|
1532
|
+
isFieldValueUpdated =
|
|
1533
|
+
Number.isNaN(fieldValue) ||
|
|
1534
|
+
(isDateObject(fieldValue) && isNaN(fieldValue.getTime())) ||
|
|
1535
|
+
deepEqual(fieldValue, get(_formValues, name, fieldValue));
|
|
1536
|
+
};
|
|
1537
|
+
if (field) {
|
|
1538
|
+
let error;
|
|
1539
|
+
let isValid;
|
|
1540
|
+
const fieldValue = target.type
|
|
1541
|
+
? getFieldValue(field._f)
|
|
1542
|
+
: getEventValue(event);
|
|
1543
|
+
const isBlurEvent = event.type === EVENTS.BLUR || event.type === EVENTS.FOCUS_OUT;
|
|
1544
|
+
const shouldSkipValidation = (!hasValidation(field._f) &&
|
|
1545
|
+
!_options.resolver &&
|
|
1546
|
+
!get(_formState.errors, name) &&
|
|
1547
|
+
!field._f.deps) ||
|
|
1548
|
+
skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
|
|
1549
|
+
const watched = isWatched(name, _names, isBlurEvent);
|
|
1550
|
+
set(_formValues, name, fieldValue);
|
|
1551
|
+
if (isBlurEvent) {
|
|
1552
|
+
field._f.onBlur && field._f.onBlur(event);
|
|
1553
|
+
delayErrorCallback && delayErrorCallback(0);
|
|
1554
|
+
}
|
|
1555
|
+
else if (field._f.onChange) {
|
|
1556
|
+
field._f.onChange(event);
|
|
1557
|
+
}
|
|
1558
|
+
const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent);
|
|
1559
|
+
const shouldRender = !isEmptyObject(fieldState) || watched;
|
|
1560
|
+
!isBlurEvent &&
|
|
1561
|
+
_subjects.state.next({
|
|
1562
|
+
name,
|
|
1563
|
+
type: event.type,
|
|
1564
|
+
values: cloneObject(_formValues),
|
|
1565
|
+
});
|
|
1566
|
+
if (shouldSkipValidation) {
|
|
1567
|
+
if (_proxyFormState.isValid || _proxySubscribeFormState.isValid) {
|
|
1568
|
+
if (_options.mode === 'onBlur') {
|
|
1569
|
+
if (isBlurEvent) {
|
|
1570
|
+
_setValid();
|
|
1571
|
+
}
|
|
1572
|
+
}
|
|
1573
|
+
else if (!isBlurEvent) {
|
|
1574
|
+
_setValid();
|
|
1575
|
+
}
|
|
1576
|
+
}
|
|
1577
|
+
return (shouldRender &&
|
|
1578
|
+
_subjects.state.next({ name, ...(watched ? {} : fieldState) }));
|
|
1579
|
+
}
|
|
1580
|
+
!isBlurEvent && watched && _subjects.state.next({ ..._formState });
|
|
1581
|
+
if (_options.resolver) {
|
|
1582
|
+
const { errors } = await _runSchema([name]);
|
|
1583
|
+
_updateIsFieldValueUpdated(fieldValue);
|
|
1584
|
+
if (isFieldValueUpdated) {
|
|
1585
|
+
const previousErrorLookupResult = schemaErrorLookup(_formState.errors, _fields, name);
|
|
1586
|
+
const errorLookupResult = schemaErrorLookup(errors, _fields, previousErrorLookupResult.name || name);
|
|
1587
|
+
error = errorLookupResult.error;
|
|
1588
|
+
name = errorLookupResult.name;
|
|
1589
|
+
isValid = isEmptyObject(errors);
|
|
1590
|
+
}
|
|
1591
|
+
}
|
|
1592
|
+
else {
|
|
1593
|
+
_updateIsValidating([name], true);
|
|
1594
|
+
error = (await validateField(field, _names.disabled, _formValues, shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
|
|
1595
|
+
_updateIsValidating([name]);
|
|
1596
|
+
_updateIsFieldValueUpdated(fieldValue);
|
|
1597
|
+
if (isFieldValueUpdated) {
|
|
1598
|
+
if (error) {
|
|
1599
|
+
isValid = false;
|
|
1600
|
+
}
|
|
1601
|
+
else if (_proxyFormState.isValid ||
|
|
1602
|
+
_proxySubscribeFormState.isValid) {
|
|
1603
|
+
isValid = await executeBuiltInValidation(_fields, true);
|
|
1604
|
+
}
|
|
1605
|
+
}
|
|
1606
|
+
}
|
|
1607
|
+
if (isFieldValueUpdated) {
|
|
1608
|
+
field._f.deps &&
|
|
1609
|
+
trigger(field._f.deps);
|
|
1610
|
+
shouldRenderByError(name, isValid, error, fieldState);
|
|
1611
|
+
}
|
|
1612
|
+
}
|
|
1613
|
+
};
|
|
1614
|
+
const _focusInput = (ref, key) => {
|
|
1615
|
+
if (get(_formState.errors, key) && ref.focus) {
|
|
1616
|
+
ref.focus();
|
|
1617
|
+
return 1;
|
|
1618
|
+
}
|
|
1619
|
+
return;
|
|
1620
|
+
};
|
|
1621
|
+
const trigger = async (name, options = {}) => {
|
|
1622
|
+
let isValid;
|
|
1623
|
+
let validationResult;
|
|
1624
|
+
const fieldNames = convertToArrayPayload(name);
|
|
1625
|
+
if (_options.resolver) {
|
|
1626
|
+
const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
|
|
1627
|
+
isValid = isEmptyObject(errors);
|
|
1628
|
+
validationResult = name
|
|
1629
|
+
? !fieldNames.some((name) => get(errors, name))
|
|
1630
|
+
: isValid;
|
|
1631
|
+
}
|
|
1632
|
+
else if (name) {
|
|
1633
|
+
validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
|
|
1634
|
+
const field = get(_fields, fieldName);
|
|
1635
|
+
return await executeBuiltInValidation(field && field._f ? { [fieldName]: field } : field);
|
|
1636
|
+
}))).every(Boolean);
|
|
1637
|
+
!(!validationResult && !_formState.isValid) && _setValid();
|
|
1638
|
+
}
|
|
1639
|
+
else {
|
|
1640
|
+
validationResult = isValid = await executeBuiltInValidation(_fields);
|
|
1641
|
+
}
|
|
1642
|
+
_subjects.state.next({
|
|
1643
|
+
...(!isString(name) ||
|
|
1644
|
+
((_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
|
|
1645
|
+
isValid !== _formState.isValid)
|
|
1646
|
+
? {}
|
|
1647
|
+
: { name }),
|
|
1648
|
+
...(_options.resolver || !name ? { isValid } : {}),
|
|
1649
|
+
errors: _formState.errors,
|
|
1650
|
+
});
|
|
1651
|
+
options.shouldFocus &&
|
|
1652
|
+
!validationResult &&
|
|
1653
|
+
iterateFieldsByAction(_fields, _focusInput, name ? fieldNames : _names.mount);
|
|
1654
|
+
return validationResult;
|
|
1655
|
+
};
|
|
1656
|
+
const getValues = (fieldNames) => {
|
|
1657
|
+
const values = {
|
|
1658
|
+
...(_state.mount ? _formValues : _defaultValues),
|
|
1659
|
+
};
|
|
1660
|
+
return isUndefined(fieldNames)
|
|
1661
|
+
? values
|
|
1662
|
+
: isString(fieldNames)
|
|
1663
|
+
? get(values, fieldNames)
|
|
1664
|
+
: fieldNames.map((name) => get(values, name));
|
|
1665
|
+
};
|
|
1666
|
+
const getFieldState = (name, formState) => ({
|
|
1667
|
+
invalid: !!get((formState || _formState).errors, name),
|
|
1668
|
+
isDirty: !!get((formState || _formState).dirtyFields, name),
|
|
1669
|
+
error: get((formState || _formState).errors, name),
|
|
1670
|
+
isValidating: !!get(_formState.validatingFields, name),
|
|
1671
|
+
isTouched: !!get((formState || _formState).touchedFields, name),
|
|
1672
|
+
});
|
|
1673
|
+
const clearErrors = (name) => {
|
|
1674
|
+
name &&
|
|
1675
|
+
convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName));
|
|
1676
|
+
_subjects.state.next({
|
|
1677
|
+
errors: name ? _formState.errors : {},
|
|
1678
|
+
});
|
|
1679
|
+
};
|
|
1680
|
+
const setError = (name, error, options) => {
|
|
1681
|
+
const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
|
|
1682
|
+
const currentError = get(_formState.errors, name) || {};
|
|
1683
|
+
// Don't override existing error messages elsewhere in the object tree.
|
|
1684
|
+
const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
|
|
1685
|
+
set(_formState.errors, name, {
|
|
1686
|
+
...restOfErrorTree,
|
|
1687
|
+
...error,
|
|
1688
|
+
ref,
|
|
1689
|
+
});
|
|
1690
|
+
_subjects.state.next({
|
|
1691
|
+
name,
|
|
1692
|
+
errors: _formState.errors,
|
|
1693
|
+
isValid: false,
|
|
1694
|
+
});
|
|
1695
|
+
options && options.shouldFocus && ref && ref.focus && ref.focus();
|
|
1696
|
+
};
|
|
1697
|
+
const watch = (name, defaultValue) => isFunction(name)
|
|
1698
|
+
? _subjects.state.subscribe({
|
|
1699
|
+
next: (payload) => name(_getWatch(undefined, defaultValue), payload),
|
|
1700
|
+
})
|
|
1701
|
+
: _getWatch(name, defaultValue, true);
|
|
1702
|
+
const _subscribe = (props) => _subjects.state.subscribe({
|
|
1703
|
+
next: (formState) => {
|
|
1704
|
+
if (shouldSubscribeByName(props.name, formState.name, props.exact) &&
|
|
1705
|
+
shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
|
|
1706
|
+
props.callback({
|
|
1707
|
+
values: { ..._formValues },
|
|
1708
|
+
..._formState,
|
|
1709
|
+
...formState,
|
|
1710
|
+
});
|
|
1711
|
+
}
|
|
1712
|
+
},
|
|
1713
|
+
}).unsubscribe;
|
|
1714
|
+
const subscribe = (props) => {
|
|
1715
|
+
_state.mount = true;
|
|
1716
|
+
_proxySubscribeFormState = {
|
|
1717
|
+
..._proxySubscribeFormState,
|
|
1718
|
+
...props.formState,
|
|
1719
|
+
};
|
|
1720
|
+
return _subscribe({
|
|
1721
|
+
...props,
|
|
1722
|
+
formState: _proxySubscribeFormState,
|
|
1723
|
+
});
|
|
1724
|
+
};
|
|
1725
|
+
const unregister = (name, options = {}) => {
|
|
1726
|
+
for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
|
|
1727
|
+
_names.mount.delete(fieldName);
|
|
1728
|
+
_names.array.delete(fieldName);
|
|
1729
|
+
if (!options.keepValue) {
|
|
1730
|
+
unset(_fields, fieldName);
|
|
1731
|
+
unset(_formValues, fieldName);
|
|
1732
|
+
}
|
|
1733
|
+
!options.keepError && unset(_formState.errors, fieldName);
|
|
1734
|
+
!options.keepDirty && unset(_formState.dirtyFields, fieldName);
|
|
1735
|
+
!options.keepTouched && unset(_formState.touchedFields, fieldName);
|
|
1736
|
+
!options.keepIsValidating &&
|
|
1737
|
+
unset(_formState.validatingFields, fieldName);
|
|
1738
|
+
!_options.shouldUnregister &&
|
|
1739
|
+
!options.keepDefaultValue &&
|
|
1740
|
+
unset(_defaultValues, fieldName);
|
|
1741
|
+
}
|
|
1742
|
+
_subjects.state.next({
|
|
1743
|
+
values: cloneObject(_formValues),
|
|
1744
|
+
});
|
|
1745
|
+
_subjects.state.next({
|
|
1746
|
+
..._formState,
|
|
1747
|
+
...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
|
|
1748
|
+
});
|
|
1749
|
+
!options.keepIsValid && _setValid();
|
|
1750
|
+
};
|
|
1751
|
+
const _setDisabledField = ({ disabled, name, }) => {
|
|
1752
|
+
if ((isBoolean(disabled) && _state.mount) ||
|
|
1753
|
+
!!disabled ||
|
|
1754
|
+
_names.disabled.has(name)) {
|
|
1755
|
+
disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
|
|
1756
|
+
}
|
|
1757
|
+
};
|
|
1758
|
+
const register = (name, options = {}) => {
|
|
1759
|
+
let field = get(_fields, name);
|
|
1760
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
|
1761
|
+
set(_fields, name, {
|
|
1762
|
+
...(field || {}),
|
|
1763
|
+
_f: {
|
|
1764
|
+
...(field && field._f ? field._f : { ref: { name } }),
|
|
1765
|
+
name,
|
|
1766
|
+
mount: true,
|
|
1767
|
+
...options,
|
|
1768
|
+
},
|
|
1769
|
+
});
|
|
1770
|
+
_names.mount.add(name);
|
|
1771
|
+
if (field) {
|
|
1772
|
+
_setDisabledField({
|
|
1773
|
+
disabled: isBoolean(options.disabled)
|
|
1774
|
+
? options.disabled
|
|
1775
|
+
: _options.disabled,
|
|
1776
|
+
name,
|
|
1777
|
+
});
|
|
1778
|
+
}
|
|
1779
|
+
else {
|
|
1780
|
+
updateValidAndValue(name, true, options.value);
|
|
1781
|
+
}
|
|
1782
|
+
return {
|
|
1783
|
+
...(disabledIsDefined
|
|
1784
|
+
? { disabled: options.disabled || _options.disabled }
|
|
1785
|
+
: {}),
|
|
1786
|
+
...(_options.progressive
|
|
1787
|
+
? {
|
|
1788
|
+
required: !!options.required,
|
|
1789
|
+
min: getRuleValue(options.min),
|
|
1790
|
+
max: getRuleValue(options.max),
|
|
1791
|
+
minLength: getRuleValue(options.minLength),
|
|
1792
|
+
maxLength: getRuleValue(options.maxLength),
|
|
1793
|
+
pattern: getRuleValue(options.pattern),
|
|
1794
|
+
}
|
|
1795
|
+
: {}),
|
|
1796
|
+
name,
|
|
1797
|
+
onChange,
|
|
1798
|
+
onBlur: onChange,
|
|
1799
|
+
ref: (ref) => {
|
|
1800
|
+
if (ref) {
|
|
1801
|
+
register(name, options);
|
|
1802
|
+
field = get(_fields, name);
|
|
1803
|
+
const fieldRef = isUndefined(ref.value)
|
|
1804
|
+
? ref.querySelectorAll
|
|
1805
|
+
? ref.querySelectorAll('input,select,textarea')[0] || ref
|
|
1806
|
+
: ref
|
|
1807
|
+
: ref;
|
|
1808
|
+
const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
|
|
1809
|
+
const refs = field._f.refs || [];
|
|
1810
|
+
if (radioOrCheckbox
|
|
1811
|
+
? refs.find((option) => option === fieldRef)
|
|
1812
|
+
: fieldRef === field._f.ref) {
|
|
1813
|
+
return;
|
|
1814
|
+
}
|
|
1815
|
+
set(_fields, name, {
|
|
1816
|
+
_f: {
|
|
1817
|
+
...field._f,
|
|
1818
|
+
...(radioOrCheckbox
|
|
1819
|
+
? {
|
|
1820
|
+
refs: [
|
|
1821
|
+
...refs.filter(live),
|
|
1822
|
+
fieldRef,
|
|
1823
|
+
...(Array.isArray(get(_defaultValues, name)) ? [{}] : []),
|
|
1824
|
+
],
|
|
1825
|
+
ref: { type: fieldRef.type, name },
|
|
1826
|
+
}
|
|
1827
|
+
: { ref: fieldRef }),
|
|
1828
|
+
},
|
|
1829
|
+
});
|
|
1830
|
+
updateValidAndValue(name, false, undefined, fieldRef);
|
|
1831
|
+
}
|
|
1832
|
+
else {
|
|
1833
|
+
field = get(_fields, name, {});
|
|
1834
|
+
if (field._f) {
|
|
1835
|
+
field._f.mount = false;
|
|
1836
|
+
}
|
|
1837
|
+
(_options.shouldUnregister || options.shouldUnregister) &&
|
|
1838
|
+
!(isNameInFieldArray(_names.array, name) && _state.action) &&
|
|
1839
|
+
_names.unMount.add(name);
|
|
1840
|
+
}
|
|
1841
|
+
},
|
|
1842
|
+
};
|
|
1843
|
+
};
|
|
1844
|
+
const _focusError = () => _options.shouldFocusError &&
|
|
1845
|
+
iterateFieldsByAction(_fields, _focusInput, _names.mount);
|
|
1846
|
+
const _disableForm = (disabled) => {
|
|
1847
|
+
if (isBoolean(disabled)) {
|
|
1848
|
+
_subjects.state.next({ disabled });
|
|
1849
|
+
iterateFieldsByAction(_fields, (ref, name) => {
|
|
1850
|
+
const currentField = get(_fields, name);
|
|
1851
|
+
if (currentField) {
|
|
1852
|
+
ref.disabled = currentField._f.disabled || disabled;
|
|
1853
|
+
if (Array.isArray(currentField._f.refs)) {
|
|
1854
|
+
currentField._f.refs.forEach((inputRef) => {
|
|
1855
|
+
inputRef.disabled = currentField._f.disabled || disabled;
|
|
1856
|
+
});
|
|
1857
|
+
}
|
|
1858
|
+
}
|
|
1859
|
+
}, 0, false);
|
|
1860
|
+
}
|
|
1861
|
+
};
|
|
1862
|
+
const handleSubmit = (onValid, onInvalid) => async (e) => {
|
|
1863
|
+
let onValidError = undefined;
|
|
1864
|
+
if (e) {
|
|
1865
|
+
e.preventDefault && e.preventDefault();
|
|
1866
|
+
e.persist &&
|
|
1867
|
+
e.persist();
|
|
1868
|
+
}
|
|
1869
|
+
let fieldValues = cloneObject(_formValues);
|
|
1870
|
+
_subjects.state.next({
|
|
1871
|
+
isSubmitting: true,
|
|
1872
|
+
});
|
|
1873
|
+
if (_options.resolver) {
|
|
1874
|
+
const { errors, values } = await _runSchema();
|
|
1875
|
+
_formState.errors = errors;
|
|
1876
|
+
fieldValues = values;
|
|
1877
|
+
}
|
|
1878
|
+
else {
|
|
1879
|
+
await executeBuiltInValidation(_fields);
|
|
1880
|
+
}
|
|
1881
|
+
if (_names.disabled.size) {
|
|
1882
|
+
for (const name of _names.disabled) {
|
|
1883
|
+
set(fieldValues, name, undefined);
|
|
1884
|
+
}
|
|
1885
|
+
}
|
|
1886
|
+
unset(_formState.errors, 'root');
|
|
1887
|
+
if (isEmptyObject(_formState.errors)) {
|
|
1888
|
+
_subjects.state.next({
|
|
1889
|
+
errors: {},
|
|
1890
|
+
});
|
|
1891
|
+
try {
|
|
1892
|
+
await onValid(fieldValues, e);
|
|
1893
|
+
}
|
|
1894
|
+
catch (error) {
|
|
1895
|
+
onValidError = error;
|
|
1896
|
+
}
|
|
1897
|
+
}
|
|
1898
|
+
else {
|
|
1899
|
+
if (onInvalid) {
|
|
1900
|
+
await onInvalid({ ..._formState.errors }, e);
|
|
1901
|
+
}
|
|
1902
|
+
_focusError();
|
|
1903
|
+
setTimeout(_focusError);
|
|
1904
|
+
}
|
|
1905
|
+
_subjects.state.next({
|
|
1906
|
+
isSubmitted: true,
|
|
1907
|
+
isSubmitting: false,
|
|
1908
|
+
isSubmitSuccessful: isEmptyObject(_formState.errors) && !onValidError,
|
|
1909
|
+
submitCount: _formState.submitCount + 1,
|
|
1910
|
+
errors: _formState.errors,
|
|
1911
|
+
});
|
|
1912
|
+
if (onValidError) {
|
|
1913
|
+
throw onValidError;
|
|
1914
|
+
}
|
|
1915
|
+
};
|
|
1916
|
+
const resetField = (name, options = {}) => {
|
|
1917
|
+
if (get(_fields, name)) {
|
|
1918
|
+
if (isUndefined(options.defaultValue)) {
|
|
1919
|
+
setValue(name, cloneObject(get(_defaultValues, name)));
|
|
1920
|
+
}
|
|
1921
|
+
else {
|
|
1922
|
+
setValue(name, options.defaultValue);
|
|
1923
|
+
set(_defaultValues, name, cloneObject(options.defaultValue));
|
|
1924
|
+
}
|
|
1925
|
+
if (!options.keepTouched) {
|
|
1926
|
+
unset(_formState.touchedFields, name);
|
|
1927
|
+
}
|
|
1928
|
+
if (!options.keepDirty) {
|
|
1929
|
+
unset(_formState.dirtyFields, name);
|
|
1930
|
+
_formState.isDirty = options.defaultValue
|
|
1931
|
+
? _getDirty(name, cloneObject(get(_defaultValues, name)))
|
|
1932
|
+
: _getDirty();
|
|
1933
|
+
}
|
|
1934
|
+
if (!options.keepError) {
|
|
1935
|
+
unset(_formState.errors, name);
|
|
1936
|
+
_proxyFormState.isValid && _setValid();
|
|
1937
|
+
}
|
|
1938
|
+
_subjects.state.next({ ..._formState });
|
|
1939
|
+
}
|
|
1940
|
+
};
|
|
1941
|
+
const _reset = (formValues, keepStateOptions = {}) => {
|
|
1942
|
+
const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
|
|
1943
|
+
const cloneUpdatedValues = cloneObject(updatedValues);
|
|
1944
|
+
const isEmptyResetValues = isEmptyObject(formValues);
|
|
1945
|
+
const values = isEmptyResetValues ? _defaultValues : cloneUpdatedValues;
|
|
1946
|
+
if (!keepStateOptions.keepDefaultValues) {
|
|
1947
|
+
_defaultValues = updatedValues;
|
|
1948
|
+
}
|
|
1949
|
+
if (!keepStateOptions.keepValues) {
|
|
1950
|
+
if (keepStateOptions.keepDirtyValues) {
|
|
1951
|
+
const fieldsToCheck = new Set([
|
|
1952
|
+
..._names.mount,
|
|
1953
|
+
...Object.keys(getDirtyFields(_defaultValues, _formValues)),
|
|
1954
|
+
]);
|
|
1955
|
+
for (const fieldName of Array.from(fieldsToCheck)) {
|
|
1956
|
+
get(_formState.dirtyFields, fieldName)
|
|
1957
|
+
? set(values, fieldName, get(_formValues, fieldName))
|
|
1958
|
+
: setValue(fieldName, get(values, fieldName));
|
|
1959
|
+
}
|
|
1960
|
+
}
|
|
1961
|
+
else {
|
|
1962
|
+
if (isWeb && isUndefined(formValues)) {
|
|
1963
|
+
for (const name of _names.mount) {
|
|
1964
|
+
const field = get(_fields, name);
|
|
1965
|
+
if (field && field._f) {
|
|
1966
|
+
const fieldReference = Array.isArray(field._f.refs)
|
|
1967
|
+
? field._f.refs[0]
|
|
1968
|
+
: field._f.ref;
|
|
1969
|
+
if (isHTMLElement(fieldReference)) {
|
|
1970
|
+
const form = fieldReference.closest('form');
|
|
1971
|
+
if (form) {
|
|
1972
|
+
form.reset();
|
|
1973
|
+
break;
|
|
1974
|
+
}
|
|
1975
|
+
}
|
|
1976
|
+
}
|
|
1977
|
+
}
|
|
1978
|
+
}
|
|
1979
|
+
for (const fieldName of _names.mount) {
|
|
1980
|
+
setValue(fieldName, get(values, fieldName));
|
|
1981
|
+
}
|
|
1982
|
+
}
|
|
1983
|
+
_formValues = cloneObject(values);
|
|
1984
|
+
_subjects.array.next({
|
|
1985
|
+
values: { ...values },
|
|
1986
|
+
});
|
|
1987
|
+
_subjects.state.next({
|
|
1988
|
+
values: { ...values },
|
|
1989
|
+
});
|
|
1990
|
+
}
|
|
1991
|
+
_names = {
|
|
1992
|
+
mount: keepStateOptions.keepDirtyValues ? _names.mount : new Set(),
|
|
1993
|
+
unMount: new Set(),
|
|
1994
|
+
array: new Set(),
|
|
1995
|
+
disabled: new Set(),
|
|
1996
|
+
watch: new Set(),
|
|
1997
|
+
watchAll: false,
|
|
1998
|
+
focus: '',
|
|
1999
|
+
};
|
|
2000
|
+
_state.mount =
|
|
2001
|
+
!_proxyFormState.isValid ||
|
|
2002
|
+
!!keepStateOptions.keepIsValid ||
|
|
2003
|
+
!!keepStateOptions.keepDirtyValues;
|
|
2004
|
+
_state.watch = !!_options.shouldUnregister;
|
|
2005
|
+
_subjects.state.next({
|
|
2006
|
+
submitCount: keepStateOptions.keepSubmitCount
|
|
2007
|
+
? _formState.submitCount
|
|
2008
|
+
: 0,
|
|
2009
|
+
isDirty: isEmptyResetValues
|
|
2010
|
+
? false
|
|
2011
|
+
: keepStateOptions.keepDirty
|
|
2012
|
+
? _formState.isDirty
|
|
2013
|
+
: !!(keepStateOptions.keepDefaultValues &&
|
|
2014
|
+
!deepEqual(formValues, _defaultValues)),
|
|
2015
|
+
isSubmitted: keepStateOptions.keepIsSubmitted
|
|
2016
|
+
? _formState.isSubmitted
|
|
2017
|
+
: false,
|
|
2018
|
+
dirtyFields: isEmptyResetValues
|
|
2019
|
+
? {}
|
|
2020
|
+
: keepStateOptions.keepDirtyValues
|
|
2021
|
+
? keepStateOptions.keepDefaultValues && _formValues
|
|
2022
|
+
? getDirtyFields(_defaultValues, _formValues)
|
|
2023
|
+
: _formState.dirtyFields
|
|
2024
|
+
: keepStateOptions.keepDefaultValues && formValues
|
|
2025
|
+
? getDirtyFields(_defaultValues, formValues)
|
|
2026
|
+
: keepStateOptions.keepDirty
|
|
2027
|
+
? _formState.dirtyFields
|
|
2028
|
+
: {},
|
|
2029
|
+
touchedFields: keepStateOptions.keepTouched
|
|
2030
|
+
? _formState.touchedFields
|
|
2031
|
+
: {},
|
|
2032
|
+
errors: keepStateOptions.keepErrors ? _formState.errors : {},
|
|
2033
|
+
isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful
|
|
2034
|
+
? _formState.isSubmitSuccessful
|
|
2035
|
+
: false,
|
|
2036
|
+
isSubmitting: false,
|
|
2037
|
+
});
|
|
2038
|
+
};
|
|
2039
|
+
const reset = (formValues, keepStateOptions) => _reset(isFunction(formValues)
|
|
2040
|
+
? formValues(_formValues)
|
|
2041
|
+
: formValues, keepStateOptions);
|
|
2042
|
+
const setFocus = (name, options = {}) => {
|
|
2043
|
+
const field = get(_fields, name);
|
|
2044
|
+
const fieldReference = field && field._f;
|
|
2045
|
+
if (fieldReference) {
|
|
2046
|
+
const fieldRef = fieldReference.refs
|
|
2047
|
+
? fieldReference.refs[0]
|
|
2048
|
+
: fieldReference.ref;
|
|
2049
|
+
if (fieldRef.focus) {
|
|
2050
|
+
fieldRef.focus();
|
|
2051
|
+
options.shouldSelect &&
|
|
2052
|
+
isFunction(fieldRef.select) &&
|
|
2053
|
+
fieldRef.select();
|
|
2054
|
+
}
|
|
2055
|
+
}
|
|
2056
|
+
};
|
|
2057
|
+
const _setFormState = (updatedFormState) => {
|
|
2058
|
+
_formState = {
|
|
2059
|
+
..._formState,
|
|
2060
|
+
...updatedFormState,
|
|
2061
|
+
};
|
|
2062
|
+
};
|
|
2063
|
+
const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
|
|
2064
|
+
_options.defaultValues().then((values) => {
|
|
2065
|
+
reset(values, _options.resetOptions);
|
|
2066
|
+
_subjects.state.next({
|
|
2067
|
+
isLoading: false,
|
|
2068
|
+
});
|
|
2069
|
+
});
|
|
2070
|
+
const methods = {
|
|
2071
|
+
control: {
|
|
2072
|
+
register,
|
|
2073
|
+
unregister,
|
|
2074
|
+
getFieldState,
|
|
2075
|
+
handleSubmit,
|
|
2076
|
+
setError,
|
|
2077
|
+
_subscribe,
|
|
2078
|
+
_runSchema,
|
|
2079
|
+
_getWatch,
|
|
2080
|
+
_getDirty,
|
|
2081
|
+
_setValid,
|
|
2082
|
+
_setFieldArray,
|
|
2083
|
+
_setDisabledField,
|
|
2084
|
+
_setErrors,
|
|
2085
|
+
_getFieldArray,
|
|
2086
|
+
_reset,
|
|
2087
|
+
_resetDefaultValues,
|
|
2088
|
+
_removeUnmounted,
|
|
2089
|
+
_disableForm,
|
|
2090
|
+
_subjects,
|
|
2091
|
+
_proxyFormState,
|
|
2092
|
+
get _fields() {
|
|
2093
|
+
return _fields;
|
|
2094
|
+
},
|
|
2095
|
+
get _formValues() {
|
|
2096
|
+
return _formValues;
|
|
2097
|
+
},
|
|
2098
|
+
get _state() {
|
|
2099
|
+
return _state;
|
|
2100
|
+
},
|
|
2101
|
+
set _state(value) {
|
|
2102
|
+
_state = value;
|
|
2103
|
+
},
|
|
2104
|
+
get _defaultValues() {
|
|
2105
|
+
return _defaultValues;
|
|
2106
|
+
},
|
|
2107
|
+
get _names() {
|
|
2108
|
+
return _names;
|
|
2109
|
+
},
|
|
2110
|
+
set _names(value) {
|
|
2111
|
+
_names = value;
|
|
2112
|
+
},
|
|
2113
|
+
get _formState() {
|
|
2114
|
+
return _formState;
|
|
2115
|
+
},
|
|
2116
|
+
get _options() {
|
|
2117
|
+
return _options;
|
|
2118
|
+
},
|
|
2119
|
+
set _options(value) {
|
|
2120
|
+
_options = {
|
|
2121
|
+
..._options,
|
|
2122
|
+
...value,
|
|
2123
|
+
};
|
|
2124
|
+
},
|
|
2125
|
+
},
|
|
2126
|
+
subscribe,
|
|
2127
|
+
trigger,
|
|
2128
|
+
register,
|
|
2129
|
+
handleSubmit,
|
|
2130
|
+
watch,
|
|
2131
|
+
setValue,
|
|
2132
|
+
getValues,
|
|
2133
|
+
reset,
|
|
2134
|
+
resetField,
|
|
2135
|
+
clearErrors,
|
|
2136
|
+
unregister,
|
|
2137
|
+
setError,
|
|
2138
|
+
setFocus,
|
|
2139
|
+
getFieldState,
|
|
2140
|
+
};
|
|
2141
|
+
return {
|
|
2142
|
+
...methods,
|
|
2143
|
+
formControl: methods,
|
|
2144
|
+
};
|
|
2145
|
+
}
|
|
2146
|
+
|
|
2147
|
+
var generateId = () => {
|
|
2148
|
+
const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
|
|
2149
|
+
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
|
|
2150
|
+
const r = (Math.random() * 16 + d) % 16 | 0;
|
|
2151
|
+
return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
|
|
2152
|
+
});
|
|
2153
|
+
};
|
|
2154
|
+
|
|
2155
|
+
var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
|
|
2156
|
+
? options.focusName ||
|
|
2157
|
+
`${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
|
|
2158
|
+
: '';
|
|
2159
|
+
|
|
2160
|
+
var appendAt = (data, value) => [
|
|
2161
|
+
...data,
|
|
2162
|
+
...convertToArrayPayload(value),
|
|
2163
|
+
];
|
|
2164
|
+
|
|
2165
|
+
var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => undefined) : undefined;
|
|
2166
|
+
|
|
2167
|
+
function insert(data, index, value) {
|
|
2168
|
+
return [
|
|
2169
|
+
...data.slice(0, index),
|
|
2170
|
+
...convertToArrayPayload(value),
|
|
2171
|
+
...data.slice(index),
|
|
2172
|
+
];
|
|
2173
|
+
}
|
|
2174
|
+
|
|
2175
|
+
var moveArrayAt = (data, from, to) => {
|
|
2176
|
+
if (!Array.isArray(data)) {
|
|
2177
|
+
return [];
|
|
2178
|
+
}
|
|
2179
|
+
if (isUndefined(data[to])) {
|
|
2180
|
+
data[to] = undefined;
|
|
2181
|
+
}
|
|
2182
|
+
data.splice(to, 0, data.splice(from, 1)[0]);
|
|
2183
|
+
return data;
|
|
2184
|
+
};
|
|
2185
|
+
|
|
2186
|
+
var prependAt = (data, value) => [
|
|
2187
|
+
...convertToArrayPayload(value),
|
|
2188
|
+
...convertToArrayPayload(data),
|
|
2189
|
+
];
|
|
2190
|
+
|
|
2191
|
+
function removeAtIndexes(data, indexes) {
|
|
2192
|
+
let i = 0;
|
|
2193
|
+
const temp = [...data];
|
|
2194
|
+
for (const index of indexes) {
|
|
2195
|
+
temp.splice(index - i, 1);
|
|
2196
|
+
i++;
|
|
2197
|
+
}
|
|
2198
|
+
return compact(temp).length ? temp : [];
|
|
2199
|
+
}
|
|
2200
|
+
var removeArrayAt = (data, index) => isUndefined(index)
|
|
2201
|
+
? []
|
|
2202
|
+
: removeAtIndexes(data, convertToArrayPayload(index).sort((a, b) => a - b));
|
|
2203
|
+
|
|
2204
|
+
var swapArrayAt = (data, indexA, indexB) => {
|
|
2205
|
+
[data[indexA], data[indexB]] = [data[indexB], data[indexA]];
|
|
2206
|
+
};
|
|
2207
|
+
|
|
2208
|
+
var updateAt = (fieldValues, index, value) => {
|
|
2209
|
+
fieldValues[index] = value;
|
|
2210
|
+
return fieldValues;
|
|
2211
|
+
};
|
|
2212
|
+
|
|
2213
|
+
/**
|
|
2214
|
+
* A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc. • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn) • [Video](https://youtu.be/4MrbfGSFY2A)
|
|
2215
|
+
*
|
|
2216
|
+
* @remarks
|
|
2217
|
+
* [API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn)
|
|
2218
|
+
*
|
|
2219
|
+
* @param props - useFieldArray props
|
|
2220
|
+
*
|
|
2221
|
+
* @returns methods - functions to manipulate with the Field Arrays (dynamic inputs) {@link UseFieldArrayReturn}
|
|
2222
|
+
*
|
|
2223
|
+
* @example
|
|
2224
|
+
* ```tsx
|
|
2225
|
+
* function App() {
|
|
2226
|
+
* const { register, control, handleSubmit, reset, trigger, setError } = useForm({
|
|
2227
|
+
* defaultValues: {
|
|
2228
|
+
* test: []
|
|
2229
|
+
* }
|
|
2230
|
+
* });
|
|
2231
|
+
* const { fields, append } = useFieldArray({
|
|
2232
|
+
* control,
|
|
2233
|
+
* name: "test"
|
|
2234
|
+
* });
|
|
2235
|
+
*
|
|
2236
|
+
* return (
|
|
2237
|
+
* <form onSubmit={handleSubmit(data => console.log(data))}>
|
|
2238
|
+
* {fields.map((item, index) => (
|
|
2239
|
+
* <input key={item.id} {...register(`test.${index}.firstName`)} />
|
|
2240
|
+
* ))}
|
|
2241
|
+
* <button type="button" onClick={() => append({ firstName: "bill" })}>
|
|
2242
|
+
* append
|
|
2243
|
+
* </button>
|
|
2244
|
+
* <input type="submit" />
|
|
2245
|
+
* </form>
|
|
2246
|
+
* );
|
|
2247
|
+
* }
|
|
2248
|
+
* ```
|
|
2249
|
+
*/
|
|
2250
|
+
function useFieldArray(props) {
|
|
2251
|
+
const methods = useFormContext();
|
|
2252
|
+
const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
|
|
2253
|
+
const [fields, setFields] = React__default.useState(control._getFieldArray(name));
|
|
2254
|
+
const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
|
|
2255
|
+
const _fieldIds = React__default.useRef(fields);
|
|
2256
|
+
const _name = React__default.useRef(name);
|
|
2257
|
+
const _actioned = React__default.useRef(false);
|
|
2258
|
+
_name.current = name;
|
|
2259
|
+
_fieldIds.current = fields;
|
|
2260
|
+
control._names.array.add(name);
|
|
2261
|
+
rules &&
|
|
2262
|
+
control.register(name, rules);
|
|
2263
|
+
React__default.useEffect(() => control._subjects.array.subscribe({
|
|
2264
|
+
next: ({ values, name: fieldArrayName, }) => {
|
|
2265
|
+
if (fieldArrayName === _name.current || !fieldArrayName) {
|
|
2266
|
+
const fieldValues = get(values, _name.current);
|
|
2267
|
+
if (Array.isArray(fieldValues)) {
|
|
2268
|
+
setFields(fieldValues);
|
|
2269
|
+
ids.current = fieldValues.map(generateId);
|
|
2270
|
+
}
|
|
2271
|
+
}
|
|
2272
|
+
},
|
|
2273
|
+
}).unsubscribe, [control]);
|
|
2274
|
+
const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
|
|
2275
|
+
_actioned.current = true;
|
|
2276
|
+
control._setFieldArray(name, updatedFieldArrayValues);
|
|
2277
|
+
}, [control, name]);
|
|
2278
|
+
const append = (value, options) => {
|
|
2279
|
+
const appendValue = convertToArrayPayload(cloneObject(value));
|
|
2280
|
+
const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
|
|
2281
|
+
control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
|
|
2282
|
+
ids.current = appendAt(ids.current, appendValue.map(generateId));
|
|
2283
|
+
updateValues(updatedFieldArrayValues);
|
|
2284
|
+
setFields(updatedFieldArrayValues);
|
|
2285
|
+
control._setFieldArray(name, updatedFieldArrayValues, appendAt, {
|
|
2286
|
+
argA: fillEmptyArray(value),
|
|
2287
|
+
});
|
|
2288
|
+
};
|
|
2289
|
+
const prepend = (value, options) => {
|
|
2290
|
+
const prependValue = convertToArrayPayload(cloneObject(value));
|
|
2291
|
+
const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
|
|
2292
|
+
control._names.focus = getFocusFieldName(name, 0, options);
|
|
2293
|
+
ids.current = prependAt(ids.current, prependValue.map(generateId));
|
|
2294
|
+
updateValues(updatedFieldArrayValues);
|
|
2295
|
+
setFields(updatedFieldArrayValues);
|
|
2296
|
+
control._setFieldArray(name, updatedFieldArrayValues, prependAt, {
|
|
2297
|
+
argA: fillEmptyArray(value),
|
|
2298
|
+
});
|
|
2299
|
+
};
|
|
2300
|
+
const remove = (index) => {
|
|
2301
|
+
const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
|
|
2302
|
+
ids.current = removeArrayAt(ids.current, index);
|
|
2303
|
+
updateValues(updatedFieldArrayValues);
|
|
2304
|
+
setFields(updatedFieldArrayValues);
|
|
2305
|
+
!Array.isArray(get(control._fields, name)) &&
|
|
2306
|
+
set(control._fields, name, undefined);
|
|
2307
|
+
control._setFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
|
|
2308
|
+
argA: index,
|
|
2309
|
+
});
|
|
2310
|
+
};
|
|
2311
|
+
const insert$1 = (index, value, options) => {
|
|
2312
|
+
const insertValue = convertToArrayPayload(cloneObject(value));
|
|
2313
|
+
const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
|
|
2314
|
+
control._names.focus = getFocusFieldName(name, index, options);
|
|
2315
|
+
ids.current = insert(ids.current, index, insertValue.map(generateId));
|
|
2316
|
+
updateValues(updatedFieldArrayValues);
|
|
2317
|
+
setFields(updatedFieldArrayValues);
|
|
2318
|
+
control._setFieldArray(name, updatedFieldArrayValues, insert, {
|
|
2319
|
+
argA: index,
|
|
2320
|
+
argB: fillEmptyArray(value),
|
|
2321
|
+
});
|
|
2322
|
+
};
|
|
2323
|
+
const swap = (indexA, indexB) => {
|
|
2324
|
+
const updatedFieldArrayValues = control._getFieldArray(name);
|
|
2325
|
+
swapArrayAt(updatedFieldArrayValues, indexA, indexB);
|
|
2326
|
+
swapArrayAt(ids.current, indexA, indexB);
|
|
2327
|
+
updateValues(updatedFieldArrayValues);
|
|
2328
|
+
setFields(updatedFieldArrayValues);
|
|
2329
|
+
control._setFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
|
|
2330
|
+
argA: indexA,
|
|
2331
|
+
argB: indexB,
|
|
2332
|
+
}, false);
|
|
2333
|
+
};
|
|
2334
|
+
const move = (from, to) => {
|
|
2335
|
+
const updatedFieldArrayValues = control._getFieldArray(name);
|
|
2336
|
+
moveArrayAt(updatedFieldArrayValues, from, to);
|
|
2337
|
+
moveArrayAt(ids.current, from, to);
|
|
2338
|
+
updateValues(updatedFieldArrayValues);
|
|
2339
|
+
setFields(updatedFieldArrayValues);
|
|
2340
|
+
control._setFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
|
|
2341
|
+
argA: from,
|
|
2342
|
+
argB: to,
|
|
2343
|
+
}, false);
|
|
2344
|
+
};
|
|
2345
|
+
const update = (index, value) => {
|
|
2346
|
+
const updateValue = cloneObject(value);
|
|
2347
|
+
const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
|
|
2348
|
+
ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
|
|
2349
|
+
updateValues(updatedFieldArrayValues);
|
|
2350
|
+
setFields([...updatedFieldArrayValues]);
|
|
2351
|
+
control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
|
|
2352
|
+
argA: index,
|
|
2353
|
+
argB: updateValue,
|
|
2354
|
+
}, true, false);
|
|
2355
|
+
};
|
|
2356
|
+
const replace = (value) => {
|
|
2357
|
+
const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
|
|
2358
|
+
ids.current = updatedFieldArrayValues.map(generateId);
|
|
2359
|
+
updateValues([...updatedFieldArrayValues]);
|
|
2360
|
+
setFields([...updatedFieldArrayValues]);
|
|
2361
|
+
control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
|
|
2362
|
+
};
|
|
2363
|
+
React__default.useEffect(() => {
|
|
2364
|
+
control._state.action = false;
|
|
2365
|
+
isWatched(name, control._names) &&
|
|
2366
|
+
control._subjects.state.next({
|
|
2367
|
+
...control._formState,
|
|
2368
|
+
});
|
|
2369
|
+
if (_actioned.current &&
|
|
2370
|
+
(!getValidationModes(control._options.mode).isOnSubmit ||
|
|
2371
|
+
control._formState.isSubmitted) &&
|
|
2372
|
+
!getValidationModes(control._options.reValidateMode).isOnSubmit) {
|
|
2373
|
+
if (control._options.resolver) {
|
|
2374
|
+
control._runSchema([name]).then((result) => {
|
|
2375
|
+
const error = get(result.errors, name);
|
|
2376
|
+
const existingError = get(control._formState.errors, name);
|
|
2377
|
+
if (existingError
|
|
2378
|
+
? (!error && existingError.type) ||
|
|
2379
|
+
(error &&
|
|
2380
|
+
(existingError.type !== error.type ||
|
|
2381
|
+
existingError.message !== error.message))
|
|
2382
|
+
: error && error.type) {
|
|
2383
|
+
error
|
|
2384
|
+
? set(control._formState.errors, name, error)
|
|
2385
|
+
: unset(control._formState.errors, name);
|
|
2386
|
+
control._subjects.state.next({
|
|
2387
|
+
errors: control._formState.errors,
|
|
2388
|
+
});
|
|
2389
|
+
}
|
|
2390
|
+
});
|
|
2391
|
+
}
|
|
2392
|
+
else {
|
|
2393
|
+
const field = get(control._fields, name);
|
|
2394
|
+
if (field &&
|
|
2395
|
+
field._f &&
|
|
2396
|
+
!(getValidationModes(control._options.reValidateMode).isOnSubmit &&
|
|
2397
|
+
getValidationModes(control._options.mode).isOnSubmit)) {
|
|
2398
|
+
validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
|
|
2399
|
+
control._subjects.state.next({
|
|
2400
|
+
errors: updateFieldArrayRootError(control._formState.errors, error, name),
|
|
2401
|
+
}));
|
|
2402
|
+
}
|
|
2403
|
+
}
|
|
2404
|
+
}
|
|
2405
|
+
control._subjects.state.next({
|
|
2406
|
+
name,
|
|
2407
|
+
values: cloneObject(control._formValues),
|
|
2408
|
+
});
|
|
2409
|
+
control._names.focus &&
|
|
2410
|
+
iterateFieldsByAction(control._fields, (ref, key) => {
|
|
2411
|
+
if (control._names.focus &&
|
|
2412
|
+
key.startsWith(control._names.focus) &&
|
|
2413
|
+
ref.focus) {
|
|
2414
|
+
ref.focus();
|
|
2415
|
+
return 1;
|
|
2416
|
+
}
|
|
2417
|
+
return;
|
|
2418
|
+
});
|
|
2419
|
+
control._names.focus = '';
|
|
2420
|
+
control._setValid();
|
|
2421
|
+
_actioned.current = false;
|
|
2422
|
+
}, [fields, name, control]);
|
|
2423
|
+
React__default.useEffect(() => {
|
|
2424
|
+
!get(control._formValues, name) && control._setFieldArray(name);
|
|
2425
|
+
return () => {
|
|
2426
|
+
const updateMounted = (name, value) => {
|
|
2427
|
+
const field = get(control._fields, name);
|
|
2428
|
+
if (field && field._f) {
|
|
2429
|
+
field._f.mount = value;
|
|
2430
|
+
}
|
|
2431
|
+
};
|
|
2432
|
+
control._options.shouldUnregister || shouldUnregister
|
|
2433
|
+
? control.unregister(name)
|
|
2434
|
+
: updateMounted(name, false);
|
|
2435
|
+
};
|
|
2436
|
+
}, [name, control, keyName, shouldUnregister]);
|
|
2437
|
+
return {
|
|
2438
|
+
swap: React__default.useCallback(swap, [updateValues, name, control]),
|
|
2439
|
+
move: React__default.useCallback(move, [updateValues, name, control]),
|
|
2440
|
+
prepend: React__default.useCallback(prepend, [updateValues, name, control]),
|
|
2441
|
+
append: React__default.useCallback(append, [updateValues, name, control]),
|
|
2442
|
+
remove: React__default.useCallback(remove, [updateValues, name, control]),
|
|
2443
|
+
insert: React__default.useCallback(insert$1, [updateValues, name, control]),
|
|
2444
|
+
update: React__default.useCallback(update, [updateValues, name, control]),
|
|
2445
|
+
replace: React__default.useCallback(replace, [updateValues, name, control]),
|
|
2446
|
+
fields: React__default.useMemo(() => fields.map((field, index) => ({
|
|
2447
|
+
...field,
|
|
2448
|
+
[keyName]: ids.current[index] || generateId(),
|
|
2449
|
+
})), [fields, keyName]),
|
|
2450
|
+
};
|
|
2451
|
+
}
|
|
2452
|
+
|
|
2453
|
+
/**
|
|
2454
|
+
* Custom hook to manage the entire form.
|
|
2455
|
+
*
|
|
2456
|
+
* @remarks
|
|
2457
|
+
* [API](https://react-hook-form.com/docs/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)
|
|
2458
|
+
*
|
|
2459
|
+
* @param props - form configuration and validation parameters.
|
|
2460
|
+
*
|
|
2461
|
+
* @returns methods - individual functions to manage the form state. {@link UseFormReturn}
|
|
2462
|
+
*
|
|
2463
|
+
* @example
|
|
2464
|
+
* ```tsx
|
|
2465
|
+
* function App() {
|
|
2466
|
+
* const { register, handleSubmit, watch, formState: { errors } } = useForm();
|
|
2467
|
+
* const onSubmit = data => console.log(data);
|
|
2468
|
+
*
|
|
2469
|
+
* console.log(watch("example"));
|
|
2470
|
+
*
|
|
2471
|
+
* return (
|
|
2472
|
+
* <form onSubmit={handleSubmit(onSubmit)}>
|
|
2473
|
+
* <input defaultValue="test" {...register("example")} />
|
|
2474
|
+
* <input {...register("exampleRequired", { required: true })} />
|
|
2475
|
+
* {errors.exampleRequired && <span>This field is required</span>}
|
|
2476
|
+
* <button>Submit</button>
|
|
2477
|
+
* </form>
|
|
2478
|
+
* );
|
|
2479
|
+
* }
|
|
2480
|
+
* ```
|
|
2481
|
+
*/
|
|
2482
|
+
function useForm(props = {}) {
|
|
2483
|
+
const _formControl = React__default.useRef(undefined);
|
|
2484
|
+
const _values = React__default.useRef(undefined);
|
|
2485
|
+
const [formState, updateFormState] = React__default.useState({
|
|
2486
|
+
isDirty: false,
|
|
2487
|
+
isValidating: false,
|
|
2488
|
+
isLoading: isFunction(props.defaultValues),
|
|
2489
|
+
isSubmitted: false,
|
|
2490
|
+
isSubmitting: false,
|
|
2491
|
+
isSubmitSuccessful: false,
|
|
2492
|
+
isValid: false,
|
|
2493
|
+
submitCount: 0,
|
|
2494
|
+
dirtyFields: {},
|
|
2495
|
+
touchedFields: {},
|
|
2496
|
+
validatingFields: {},
|
|
2497
|
+
errors: props.errors || {},
|
|
2498
|
+
disabled: props.disabled || false,
|
|
2499
|
+
isReady: false,
|
|
2500
|
+
defaultValues: isFunction(props.defaultValues)
|
|
2501
|
+
? undefined
|
|
2502
|
+
: props.defaultValues,
|
|
2503
|
+
});
|
|
2504
|
+
if (!_formControl.current) {
|
|
2505
|
+
_formControl.current = {
|
|
2506
|
+
...(props.formControl ? props.formControl : createFormControl(props)),
|
|
2507
|
+
formState,
|
|
2508
|
+
};
|
|
2509
|
+
if (props.formControl &&
|
|
2510
|
+
props.defaultValues &&
|
|
2511
|
+
!isFunction(props.defaultValues)) {
|
|
2512
|
+
props.formControl.reset(props.defaultValues, props.resetOptions);
|
|
2513
|
+
}
|
|
2514
|
+
}
|
|
2515
|
+
const control = _formControl.current.control;
|
|
2516
|
+
control._options = props;
|
|
2517
|
+
useIsomorphicLayoutEffect(() => {
|
|
2518
|
+
const sub = control._subscribe({
|
|
2519
|
+
formState: control._proxyFormState,
|
|
2520
|
+
callback: () => updateFormState({ ...control._formState }),
|
|
2521
|
+
reRenderRoot: true,
|
|
2522
|
+
});
|
|
2523
|
+
updateFormState((data) => ({
|
|
2524
|
+
...data,
|
|
2525
|
+
isReady: true,
|
|
2526
|
+
}));
|
|
2527
|
+
control._formState.isReady = true;
|
|
2528
|
+
return sub;
|
|
2529
|
+
}, [control]);
|
|
2530
|
+
React__default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
|
|
2531
|
+
React__default.useEffect(() => {
|
|
2532
|
+
if (props.mode) {
|
|
2533
|
+
control._options.mode = props.mode;
|
|
2534
|
+
}
|
|
2535
|
+
if (props.reValidateMode) {
|
|
2536
|
+
control._options.reValidateMode = props.reValidateMode;
|
|
2537
|
+
}
|
|
2538
|
+
if (props.errors && !isEmptyObject(props.errors)) {
|
|
2539
|
+
control._setErrors(props.errors);
|
|
2540
|
+
}
|
|
2541
|
+
}, [control, props.errors, props.mode, props.reValidateMode]);
|
|
2542
|
+
React__default.useEffect(() => {
|
|
2543
|
+
props.shouldUnregister &&
|
|
2544
|
+
control._subjects.state.next({
|
|
2545
|
+
values: control._getWatch(),
|
|
2546
|
+
});
|
|
2547
|
+
}, [control, props.shouldUnregister]);
|
|
2548
|
+
React__default.useEffect(() => {
|
|
2549
|
+
if (control._proxyFormState.isDirty) {
|
|
2550
|
+
const isDirty = control._getDirty();
|
|
2551
|
+
if (isDirty !== formState.isDirty) {
|
|
2552
|
+
control._subjects.state.next({
|
|
2553
|
+
isDirty,
|
|
2554
|
+
});
|
|
2555
|
+
}
|
|
2556
|
+
}
|
|
2557
|
+
}, [control, formState.isDirty]);
|
|
2558
|
+
React__default.useEffect(() => {
|
|
2559
|
+
if (props.values && !deepEqual(props.values, _values.current)) {
|
|
2560
|
+
control._reset(props.values, control._options.resetOptions);
|
|
2561
|
+
_values.current = props.values;
|
|
2562
|
+
updateFormState((state) => ({ ...state }));
|
|
2563
|
+
}
|
|
2564
|
+
else {
|
|
2565
|
+
control._resetDefaultValues();
|
|
2566
|
+
}
|
|
2567
|
+
}, [control, props.values]);
|
|
2568
|
+
React__default.useEffect(() => {
|
|
2569
|
+
if (!control._state.mount) {
|
|
2570
|
+
control._setValid();
|
|
2571
|
+
control._state.mount = true;
|
|
2572
|
+
}
|
|
2573
|
+
if (control._state.watch) {
|
|
2574
|
+
control._state.watch = false;
|
|
2575
|
+
control._subjects.state.next({ ...control._formState });
|
|
2576
|
+
}
|
|
2577
|
+
control._removeUnmounted();
|
|
2578
|
+
});
|
|
2579
|
+
_formControl.current.formState = getProxyFormState(formState, control);
|
|
2580
|
+
return _formControl.current;
|
|
2581
|
+
}
|
|
2582
|
+
|
|
2583
|
+
export { useForm as a, useController as b, appendErrors as c, useFieldArray as d, useWatch as e, get as g, jsxRuntimeExports as j, set as s, useFormState as u };
|
|
2584
|
+
//# sourceMappingURL=index.esm-BcxPd7Ha.js.map
|