@bigbinary/neeto-atoms 1.0.133 → 1.0.134-beta1
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/dist/cjs/formik/BlockNavigation.js +36 -7
- package/dist/cjs/formik/BlockNavigation.js.map +1 -1
- package/dist/cjs/formik/Form.js +2 -2
- package/dist/cjs/formik/Form.js.map +1 -1
- package/dist/formik/BlockNavigation/BlockNavigationAlert.d.ts +10 -3
- package/dist/formik/BlockNavigation/index.d.ts +2 -2
- package/dist/formik/BlockNavigation.js +36 -7
- package/dist/formik/BlockNavigation.js.map +1 -1
- package/dist/formik/Form.js +2 -2
- package/dist/formik/Form.js.map +1 -1
- package/package.json +2 -2
- package/CHANGELOG.md +0 -3
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var formik = require('formik');
|
|
5
4
|
var React = require('react');
|
|
5
|
+
var formik = require('formik');
|
|
6
6
|
var reactRouterDom = require('react-router-dom');
|
|
7
7
|
var Dialog = require('../Dialog-ZUHGaoAE.js');
|
|
8
8
|
var Button = require('../Button-BQ4rpzsl.js');
|
|
@@ -99,24 +99,27 @@ const useNavPrompt = ({
|
|
|
99
99
|
|
|
100
100
|
const BlockNavigationAlert = ({
|
|
101
101
|
isOpen = false,
|
|
102
|
+
isSaving = false,
|
|
103
|
+
saveAndContinue = true,
|
|
102
104
|
onClose,
|
|
103
105
|
onSubmit,
|
|
104
106
|
onDiscardChanges,
|
|
105
107
|
title = "You have unsaved changes",
|
|
106
108
|
message = "Are you sure you want to leave? All unsaved changes will be lost.",
|
|
107
109
|
cancelButtonLabel = "Discard and leave",
|
|
108
|
-
submitButtonLabel
|
|
110
|
+
submitButtonLabel
|
|
109
111
|
}) => {
|
|
110
112
|
const submitButtonRef = React.useRef(null);
|
|
113
|
+
const primaryButtonLabel = submitButtonLabel ?? (saveAndContinue ? "Save and continue" : "Stay on this page");
|
|
111
114
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
112
115
|
Dialog.Dialog,
|
|
113
116
|
{
|
|
114
117
|
isOpen,
|
|
115
118
|
onClose: onClose ?? (() => {
|
|
116
119
|
}),
|
|
117
|
-
closeButton:
|
|
118
|
-
closeOnEsc:
|
|
119
|
-
closeOnOutsideClick:
|
|
120
|
+
closeButton: !isSaving,
|
|
121
|
+
closeOnEsc: !isSaving,
|
|
122
|
+
closeOnOutsideClick: !isSaving,
|
|
120
123
|
initialFocusRef: submitButtonRef,
|
|
121
124
|
size: "medium",
|
|
122
125
|
"data-testid": "alert-box",
|
|
@@ -135,6 +138,7 @@ const BlockNavigationAlert = ({
|
|
|
135
138
|
Button.Button,
|
|
136
139
|
{
|
|
137
140
|
"data-testid": "alert-cancel-button",
|
|
141
|
+
disabled: isSaving,
|
|
138
142
|
label: cancelButtonLabel,
|
|
139
143
|
variant: "destructive",
|
|
140
144
|
onClick: onDiscardChanges
|
|
@@ -144,7 +148,8 @@ const BlockNavigationAlert = ({
|
|
|
144
148
|
Button.Button,
|
|
145
149
|
{
|
|
146
150
|
"data-testid": "alert-submit-button",
|
|
147
|
-
label:
|
|
151
|
+
label: primaryButtonLabel,
|
|
152
|
+
loading: isSaving,
|
|
148
153
|
ref: submitButtonRef,
|
|
149
154
|
onClick: onSubmit
|
|
150
155
|
}
|
|
@@ -158,8 +163,10 @@ BlockNavigationAlert.displayName = "BlockNavigationAlert";
|
|
|
158
163
|
|
|
159
164
|
const FormikBlockNavigation = ({
|
|
160
165
|
isDirty = false,
|
|
166
|
+
saveAndContinue = true,
|
|
161
167
|
...otherProps
|
|
162
168
|
}) => {
|
|
169
|
+
const [isSaving, setIsSaving] = React.useState(false);
|
|
163
170
|
const formikContext = formik.useFormikContext();
|
|
164
171
|
const shouldBlock = isDirty || Boolean(formikContext) && Boolean(formikContext.dirty);
|
|
165
172
|
const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({
|
|
@@ -170,13 +177,35 @@ const FormikBlockNavigation = ({
|
|
|
170
177
|
hidePrompt();
|
|
171
178
|
continueNavigation();
|
|
172
179
|
};
|
|
180
|
+
const handleSaveAndContinue = async () => {
|
|
181
|
+
if (!formikContext) {
|
|
182
|
+
hidePrompt();
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
setIsSaving(true);
|
|
186
|
+
try {
|
|
187
|
+
const errors = await formikContext.validateForm();
|
|
188
|
+
if (Object.keys(errors).length > 0) {
|
|
189
|
+
await formikContext.submitForm();
|
|
190
|
+
hidePrompt();
|
|
191
|
+
return;
|
|
192
|
+
}
|
|
193
|
+
await formikContext.submitForm();
|
|
194
|
+
continueNavigation();
|
|
195
|
+
} catch {
|
|
196
|
+
hidePrompt();
|
|
197
|
+
} finally {
|
|
198
|
+
setIsSaving(false);
|
|
199
|
+
}
|
|
200
|
+
};
|
|
173
201
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
174
202
|
BlockNavigationAlert,
|
|
175
203
|
{
|
|
204
|
+
...{ isSaving, saveAndContinue },
|
|
176
205
|
isOpen: isBlocked,
|
|
177
206
|
onClose: hidePrompt,
|
|
178
207
|
onDiscardChanges: handleDiscardChanges,
|
|
179
|
-
onSubmit: hidePrompt,
|
|
208
|
+
onSubmit: saveAndContinue ? handleSaveAndContinue : hidePrompt,
|
|
180
209
|
...otherProps
|
|
181
210
|
}
|
|
182
211
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockNavigation.js","sources":["../../../src/formik/BlockNavigation/hooks/useNavPrompt.ts","../../../src/formik/BlockNavigation/BlockNavigationAlert.tsx","../../../src/formik/BlockNavigation/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\n\ninterface UseNavPromptOptions {\n /** Whether navigation should be blocked. */\n shouldBlock?: boolean;\n}\n\ninterface UseNavPromptReturn {\n /** Whether a navigation attempt is currently blocked. */\n isBlocked: boolean;\n /** Unblock and continue the pending navigation. */\n continueNavigation: () => void;\n /** Dismiss the prompt without navigating. */\n hidePrompt: () => void;\n}\n\nconst useNavPrompt = ({\n shouldBlock = true,\n}: UseNavPromptOptions): UseNavPromptReturn => {\n const [isBlocked, setIsBlocked] = useState(false);\n\n const history = useHistory();\n\n const unblockRef = useRef<(() => void) | undefined>(undefined);\n const navRef = useRef<{ transition: string; action: string } | null>(null);\n\n const handleNavigation = useCallback(\n (action: string, transition: string) => {\n switch (action) {\n case \"PUSH\":\n history.push(transition);\n break;\n case \"REPLACE\":\n history.replace(transition);\n break;\n case \"POP\":\n history.goBack();\n break;\n }\n },\n [history]\n );\n\n const continueNavigation = useCallback(() => {\n if (isBlocked && unblockRef.current) {\n unblockRef.current();\n setIsBlocked(false);\n if (navRef.current) {\n const { action, transition } = navRef.current;\n handleNavigation(action, transition);\n }\n }\n }, [isBlocked, handleNavigation]);\n\n const hidePrompt = useCallback(() => setIsBlocked(false), []);\n\n useEffect(() => {\n if (shouldBlock) {\n unblockRef.current = history.block(\n (transition: { pathname: string }, action: string) => {\n setIsBlocked(true);\n navRef.current = { transition: transition.pathname, action };\n\n return false;\n }\n ) as unknown as () => void;\n\n return () => {\n unblockRef.current?.();\n };\n }\n\n return undefined;\n }, [shouldBlock, history]);\n\n return { isBlocked, continueNavigation, hidePrompt };\n};\n\nexport { useNavPrompt };\nexport type { UseNavPromptOptions, UseNavPromptReturn };\n","import { useRef } from \"react\";\n\nimport { Button } from \"src/components/Button\";\nimport { Dialog } from \"src/components/Dialog\";\n\nexport interface BlockNavigationAlertProps {\n /** Whether the alert dialog is open. */\n isOpen?: boolean;\n /** Called when the dialog should close. */\n onClose?: () => void;\n /** Called when the user chooses to stay. */\n onSubmit?: () => void;\n /** Called when the user chooses to discard and leave. */\n onDiscardChanges?: () => void;\n /** Custom title for the alert. */\n title?: string;\n /** Custom message for the alert body. */\n message?: string;\n /** Custom label for the discard/cancel button. */\n cancelButtonLabel?: string;\n /** Custom label for the stay/submit button. */\n submitButtonLabel?: string;\n}\n\nconst BlockNavigationAlert = ({\n isOpen = false,\n onClose,\n onSubmit,\n onDiscardChanges,\n title = \"You have unsaved changes\",\n message = \"Are you sure you want to leave? All unsaved changes will be lost.\",\n cancelButtonLabel = \"Discard and leave\",\n submitButtonLabel = \"Stay on this page\",\n}: BlockNavigationAlertProps) => {\n const submitButtonRef = useRef<HTMLButtonElement>(null);\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose ?? (() => {})}\n closeButton\n closeOnEsc\n closeOnOutsideClick\n initialFocusRef={submitButtonRef}\n size=\"medium\"\n data-testid=\"alert-box\"\n >\n <Dialog.Header>\n <Dialog.Title data-testid=\"alert-title\">{title}</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body>\n <p\n data-testid=\"alert-message\"\n className=\"text-sm text-muted-foreground\"\n >\n {message}\n </p>\n </Dialog.Body>\n <Dialog.Footer className=\"flex items-center justify-end gap-2\">\n <Button\n data-testid=\"alert-cancel-button\"\n label={cancelButtonLabel}\n variant=\"destructive\"\n onClick={onDiscardChanges}\n />\n <Button\n data-testid=\"alert-submit-button\"\n label={submitButtonLabel}\n ref={submitButtonRef}\n onClick={onSubmit}\n />\n </Dialog.Footer>\n </Dialog>\n );\n};\n\nBlockNavigationAlert.displayName = \"BlockNavigationAlert\";\n\nexport { BlockNavigationAlert };\n","import { useFormikContext } from \"formik\";\n\nimport { useNavPrompt } from \"./hooks/useNavPrompt\";\n\nimport {\n BlockNavigationAlert,\n type BlockNavigationAlertProps,\n} from \"./BlockNavigationAlert\";\n\nexport interface FormikBlockNavigationProps extends Omit<\n BlockNavigationAlertProps,\n \"isOpen\" | \"onClose\" | \"onSubmit\" | \"onDiscardChanges\"\n> {\n /** Force the navigation block regardless of Formik dirty state. */\n isDirty?: boolean;\n}\n\nconst FormikBlockNavigation = ({\n isDirty = false,\n ...otherProps\n}: FormikBlockNavigationProps) => {\n const formikContext = useFormikContext();\n const shouldBlock =\n isDirty || (Boolean(formikContext) && Boolean(formikContext.dirty));\n\n const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({\n shouldBlock,\n });\n\n const handleDiscardChanges = () => {\n if (formikContext) formikContext.resetForm();\n hidePrompt();\n continueNavigation();\n };\n\n return (\n <BlockNavigationAlert\n isOpen={isBlocked}\n onClose={hidePrompt}\n onDiscardChanges={handleDiscardChanges}\n onSubmit={hidePrompt}\n {...otherProps}\n />\n );\n};\n\nFormikBlockNavigation.displayName = \"FormikBlockNavigation\";\n\nexport { FormikBlockNavigation };\nexport type { BlockNavigationAlertProps };\n"],"names":["useState","useHistory","useRef","useCallback","useEffect","jsxs","Dialog","jsx","Button","useFormikContext"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BlockNavigation.js","sources":["../../../src/formik/BlockNavigation/hooks/useNavPrompt.ts","../../../src/formik/BlockNavigation/BlockNavigationAlert.tsx","../../../src/formik/BlockNavigation/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\n\ninterface UseNavPromptOptions {\n /** Whether navigation should be blocked. */\n shouldBlock?: boolean;\n}\n\ninterface UseNavPromptReturn {\n /** Whether a navigation attempt is currently blocked. */\n isBlocked: boolean;\n /** Unblock and continue the pending navigation. */\n continueNavigation: () => void;\n /** Dismiss the prompt without navigating. */\n hidePrompt: () => void;\n}\n\nconst useNavPrompt = ({\n shouldBlock = true,\n}: UseNavPromptOptions): UseNavPromptReturn => {\n const [isBlocked, setIsBlocked] = useState(false);\n\n const history = useHistory();\n\n const unblockRef = useRef<(() => void) | undefined>(undefined);\n const navRef = useRef<{ transition: string; action: string } | null>(null);\n\n const handleNavigation = useCallback(\n (action: string, transition: string) => {\n switch (action) {\n case \"PUSH\":\n history.push(transition);\n break;\n case \"REPLACE\":\n history.replace(transition);\n break;\n case \"POP\":\n history.goBack();\n break;\n }\n },\n [history]\n );\n\n const continueNavigation = useCallback(() => {\n if (isBlocked && unblockRef.current) {\n unblockRef.current();\n setIsBlocked(false);\n if (navRef.current) {\n const { action, transition } = navRef.current;\n handleNavigation(action, transition);\n }\n }\n }, [isBlocked, handleNavigation]);\n\n const hidePrompt = useCallback(() => setIsBlocked(false), []);\n\n useEffect(() => {\n if (shouldBlock) {\n unblockRef.current = history.block(\n (transition: { pathname: string }, action: string) => {\n setIsBlocked(true);\n navRef.current = { transition: transition.pathname, action };\n\n return false;\n }\n ) as unknown as () => void;\n\n return () => {\n unblockRef.current?.();\n };\n }\n\n return undefined;\n }, [shouldBlock, history]);\n\n return { isBlocked, continueNavigation, hidePrompt };\n};\n\nexport { useNavPrompt };\nexport type { UseNavPromptOptions, UseNavPromptReturn };\n","import { useRef } from \"react\";\n\nimport { Button } from \"src/components/Button\";\nimport { Dialog } from \"src/components/Dialog\";\n\nexport interface BlockNavigationAlertProps {\n /** Whether the alert dialog is open. */\n isOpen?: boolean;\n /** Whether the form is being saved. Shows a loader on the primary button and\n * prevents the dialog from being dismissed. */\n isSaving?: boolean;\n /** Whether the primary button saves the form before resuming navigation.\n * Defaults to true; pass false for the older \"Stay on this page\" behaviour. */\n saveAndContinue?: boolean;\n /** Called when the dialog should close. */\n onClose?: () => void;\n /** Called when the user chooses to save and continue, or to stay. */\n onSubmit?: () => void;\n /** Called when the user chooses to discard and leave. */\n onDiscardChanges?: () => void;\n /** Custom title for the alert. */\n title?: string;\n /** Custom message for the alert body. */\n message?: string;\n /** Custom label for the discard/cancel button. */\n cancelButtonLabel?: string;\n /** Custom label for the primary button. Defaults to \"Save and continue\" when\n * saveAndContinue is enabled and \"Stay on this page\" otherwise. */\n submitButtonLabel?: string;\n}\n\nconst BlockNavigationAlert = ({\n isOpen = false,\n isSaving = false,\n saveAndContinue = true,\n onClose,\n onSubmit,\n onDiscardChanges,\n title = \"You have unsaved changes\",\n message = \"Are you sure you want to leave? All unsaved changes will be lost.\",\n cancelButtonLabel = \"Discard and leave\",\n submitButtonLabel,\n}: BlockNavigationAlertProps) => {\n const submitButtonRef = useRef<HTMLButtonElement>(null);\n\n const primaryButtonLabel =\n submitButtonLabel ??\n (saveAndContinue ? \"Save and continue\" : \"Stay on this page\");\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose ?? (() => {})}\n closeButton={!isSaving}\n closeOnEsc={!isSaving}\n closeOnOutsideClick={!isSaving}\n initialFocusRef={submitButtonRef}\n size=\"medium\"\n data-testid=\"alert-box\"\n >\n <Dialog.Header>\n <Dialog.Title data-testid=\"alert-title\">{title}</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body>\n <p\n data-testid=\"alert-message\"\n className=\"text-sm text-muted-foreground\"\n >\n {message}\n </p>\n </Dialog.Body>\n <Dialog.Footer className=\"flex items-center justify-end gap-2\">\n <Button\n data-testid=\"alert-cancel-button\"\n disabled={isSaving}\n label={cancelButtonLabel}\n variant=\"destructive\"\n onClick={onDiscardChanges}\n />\n <Button\n data-testid=\"alert-submit-button\"\n label={primaryButtonLabel}\n loading={isSaving}\n ref={submitButtonRef}\n onClick={onSubmit}\n />\n </Dialog.Footer>\n </Dialog>\n );\n};\n\nBlockNavigationAlert.displayName = \"BlockNavigationAlert\";\n\nexport { BlockNavigationAlert };\n","import { useState } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { useNavPrompt } from \"./hooks/useNavPrompt\";\n\nimport {\n BlockNavigationAlert,\n type BlockNavigationAlertProps,\n} from \"./BlockNavigationAlert\";\n\nexport interface FormikBlockNavigationProps extends Omit<\n BlockNavigationAlertProps,\n \"isOpen\" | \"isSaving\" | \"onClose\" | \"onSubmit\" | \"onDiscardChanges\"\n> {\n /** Force the navigation block regardless of Formik dirty state. */\n isDirty?: boolean;\n}\n\nconst FormikBlockNavigation = ({\n isDirty = false,\n saveAndContinue = true,\n ...otherProps\n}: FormikBlockNavigationProps) => {\n const [isSaving, setIsSaving] = useState(false);\n\n const formikContext = useFormikContext();\n const shouldBlock =\n isDirty || (Boolean(formikContext) && Boolean(formikContext.dirty));\n\n const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({\n shouldBlock,\n });\n\n const handleDiscardChanges = () => {\n if (formikContext) formikContext.resetForm();\n hidePrompt();\n continueNavigation();\n };\n\n const handleSaveAndContinue = async () => {\n if (!formikContext) {\n hidePrompt();\n\n return;\n }\n\n setIsSaving(true);\n try {\n const errors = await formikContext.validateForm();\n if (Object.keys(errors).length > 0) {\n await formikContext.submitForm();\n hidePrompt();\n\n return;\n }\n\n await formikContext.submitForm();\n continueNavigation();\n } catch {\n hidePrompt();\n } finally {\n setIsSaving(false);\n }\n };\n\n return (\n <BlockNavigationAlert\n {...{ isSaving, saveAndContinue }}\n isOpen={isBlocked}\n onClose={hidePrompt}\n onDiscardChanges={handleDiscardChanges}\n onSubmit={saveAndContinue ? handleSaveAndContinue : hidePrompt}\n {...otherProps}\n />\n );\n};\n\nFormikBlockNavigation.displayName = \"FormikBlockNavigation\";\n\nexport { FormikBlockNavigation };\nexport type { BlockNavigationAlertProps };\n"],"names":["useState","useHistory","useRef","useCallback","useEffect","jsxs","Dialog","jsx","Button","useFormikContext"],"mappings":"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"}
|
package/dist/cjs/formik/Form.js
CHANGED
|
@@ -78,11 +78,11 @@ const FormWrapper = React.forwardRef(
|
|
|
78
78
|
scrollToError(formRef, errors, status);
|
|
79
79
|
}
|
|
80
80
|
} else {
|
|
81
|
-
submitForm();
|
|
81
|
+
await submitForm();
|
|
82
82
|
}
|
|
83
83
|
} catch (error) {
|
|
84
84
|
console.error(
|
|
85
|
-
"An unhandled error was caught
|
|
85
|
+
"An unhandled error was caught while validating or submitting the form",
|
|
86
86
|
error
|
|
87
87
|
);
|
|
88
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../../src/formik/Form/ScrollToErrorField/utils.ts","../../../src/formik/Form/ScrollToErrorField/index.tsx","../../../src/formik/Form/FormWrapper.tsx","../../../src/formik/Form/index.tsx"],"sourcesContent":["import { is } from \"ramda\";\n\nconst transformObjectToDotNotation = (\n object: Record<string, unknown>,\n prefix = \"\"\n): string[] => {\n const result: string[] = [];\n\n Object.entries(object).forEach(([key, value]) => {\n if (!value) return;\n const nextKey = prefix ? `${prefix}.${key}` : key;\n if (is(Object, value)) {\n result.push(\n ...transformObjectToDotNotation(\n value as Record<string, unknown>,\n nextKey\n )\n );\n } else {\n result.push(nextKey);\n }\n });\n\n return result;\n};\n\nconst getErrorFieldName = (\n formikErrors: Record<string, unknown>\n): string | undefined => transformObjectToDotNotation(formikErrors)?.[0];\n\nexport const getFieldsWithServerError = (\n status: Record<string, unknown> = {}\n): string[] =>\n Object.keys(status).filter(\n fieldName => status[fieldName] != null && status[fieldName] !== \"\"\n );\n\nexport const scrollToError = (\n formRef: React.RefObject<HTMLFormElement | null>,\n errors: Record<string, unknown>,\n status: Record<string, unknown>\n): void => {\n const fieldErrorName = getErrorFieldName(errors);\n const [fieldWithServerError] = getFieldsWithServerError(status);\n\n if (!fieldErrorName && !fieldWithServerError) return;\n\n const errorFieldName = fieldErrorName || fieldWithServerError;\n const errorFormElement = formRef.current?.querySelector(\n `[name=\"${errorFieldName}\"]`\n );\n\n errorFormElement?.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n};\n","import { useEffect } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { getFieldsWithServerError, scrollToError } from \"./utils\";\n\ninterface ScrollToErrorFieldProps {\n formRef: React.RefObject<HTMLFormElement | null>;\n}\n\nconst ScrollToErrorField = ({ formRef }: ScrollToErrorFieldProps) => {\n const { submitCount, isValid, errors, status } = useFormikContext();\n\n useEffect(() => {\n const fieldsWithServerError = getFieldsWithServerError(status);\n if (!formRef.current || (isValid && fieldsWithServerError.length === 0)) {\n return;\n }\n\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }, [submitCount]);\n\n return null;\n};\n\nexport default ScrollToErrorField;\n","import React, { useCallback, forwardRef, useRef } from \"react\";\n\nimport { Form as FormikForm, useFormikContext } from \"formik\";\n\nimport ScrollToErrorField from \"./ScrollToErrorField\";\nimport {\n getFieldsWithServerError,\n scrollToError,\n} from \"./ScrollToErrorField/utils\";\n\ninterface FormWrapperProps {\n className?: string;\n formProps?: React.ComponentProps<\"form\">;\n children: React.ReactNode;\n scrollToErrorField: boolean;\n}\n\nconst FormWrapper = forwardRef<HTMLFormElement, FormWrapperProps>(\n ({ className, formProps, children, scrollToErrorField }, ref) => {\n const { validateForm, setErrors, setTouched, submitForm, ...formikBag } =\n useFormikContext();\n\n const { dirty: isFormDirty, isSubmitting, status } = formikBag;\n\n const formRefForScrollToErrorField = useRef<HTMLFormElement>(null);\n const formRef =\n (ref as React.RefObject<HTMLFormElement | null>) ||\n formRefForScrollToErrorField;\n\n const handleKeyDown = useCallback(\n async (event: React.KeyboardEvent<HTMLFormElement>) => {\n const target = event.target as HTMLElement & { editor?: unknown };\n const isEventFromEditorOrTextarea =\n target.tagName === \"TEXTAREA\" || target.editor;\n\n if (event.key !== \"Enter\") return;\n if (isEventFromEditorOrTextarea && !event.metaKey) return;\n\n event.preventDefault();\n\n if (event.shiftKey) return;\n if (!isFormDirty || isSubmitting) return;\n\n try {\n const errors = await validateForm();\n const fieldStatuses = getFieldsWithServerError(status);\n\n if (\n Object.keys(errors).length > 0 ||\n Object.keys(fieldStatuses).length > 0\n ) {\n setErrors(errors);\n setTouched({ ...errors, ...status });\n if (scrollToErrorField) {\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }\n } else {\n submitForm();\n }\n } catch (error) {\n console.error(\n \"An unhandled error was caught from validateForm()\",\n error\n );\n }\n },\n [\n validateForm,\n setErrors,\n setTouched,\n isFormDirty,\n isSubmitting,\n submitForm,\n status,\n scrollToErrorField,\n formRef,\n ]\n );\n\n return (\n <FormikForm\n {...{ className }}\n noValidate\n ref={formRef}\n onKeyDown={handleKeyDown}\n {...formProps}\n >\n {scrollToErrorField && <ScrollToErrorField {...{ formRef }} />}\n {children}\n </FormikForm>\n );\n }\n);\n\nFormWrapper.displayName = \"FormWrapper\";\n\nexport default FormWrapper;\n","import React, { forwardRef, useRef } from \"react\";\n\nimport { Formik, FormikConfig, FormikProps, FormikValues } from \"formik\";\n\nimport FormWrapper from \"./FormWrapper\";\nimport { getFieldsWithServerError } from \"./ScrollToErrorField/utils\";\n\nexport interface FormProps<T extends FormikValues = FormikValues> {\n /** Formik configuration: initialValues, validationSchema, onSubmit, etc. */\n formikProps: FormikConfig<T>;\n /** Props forwarded to the HTML form element. */\n formProps?: React.ComponentProps<\"form\">;\n /** Auto-scroll to the first error field on submit. */\n scrollToErrorField?: boolean;\n /** Additional class name for the form wrapper. */\n className?: string;\n /** Render children directly or as a function receiving FormikProps. */\n children: React.ReactNode | ((props: FormikProps<T>) => React.ReactNode);\n}\n\nconst Form = forwardRef<HTMLFormElement, FormProps>(\n (\n { className, children, formikProps, formProps, scrollToErrorField = false },\n ref\n ) => {\n const formikRef = useRef<FormikProps<FormikValues>>(null);\n\n const handleSubmit: FormikConfig<FormikValues>[\"onSubmit\"] = (\n values,\n actions\n ) => {\n const fieldsWithServerError = getFieldsWithServerError(\n formikRef.current?.status\n );\n\n if (fieldsWithServerError.length > 0) {\n actions.setSubmitting(false);\n\n return undefined;\n }\n\n return formikProps.onSubmit(values, actions);\n };\n\n return (\n <Formik\n innerRef={formikRef as React.Ref<FormikProps<FormikValues>>}\n {...formikProps}\n onSubmit={handleSubmit}\n >\n {props => (\n <FormWrapper {...{ className, formProps, ref, scrollToErrorField }}>\n {typeof children === \"function\" ? children(props) : children}\n </FormWrapper>\n )}\n </Formik>\n );\n }\n);\n\nForm.displayName = \"Form\";\n\nexport { Form };\n"],"names":["is","useFormikContext","useEffect","forwardRef","useRef","useCallback","jsxs","FormikForm","jsx","Formik"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../../src/formik/Form/ScrollToErrorField/utils.ts","../../../src/formik/Form/ScrollToErrorField/index.tsx","../../../src/formik/Form/FormWrapper.tsx","../../../src/formik/Form/index.tsx"],"sourcesContent":["import { is } from \"ramda\";\n\nconst transformObjectToDotNotation = (\n object: Record<string, unknown>,\n prefix = \"\"\n): string[] => {\n const result: string[] = [];\n\n Object.entries(object).forEach(([key, value]) => {\n if (!value) return;\n const nextKey = prefix ? `${prefix}.${key}` : key;\n if (is(Object, value)) {\n result.push(\n ...transformObjectToDotNotation(\n value as Record<string, unknown>,\n nextKey\n )\n );\n } else {\n result.push(nextKey);\n }\n });\n\n return result;\n};\n\nconst getErrorFieldName = (\n formikErrors: Record<string, unknown>\n): string | undefined => transformObjectToDotNotation(formikErrors)?.[0];\n\nexport const getFieldsWithServerError = (\n status: Record<string, unknown> = {}\n): string[] =>\n Object.keys(status).filter(\n fieldName => status[fieldName] != null && status[fieldName] !== \"\"\n );\n\nexport const scrollToError = (\n formRef: React.RefObject<HTMLFormElement | null>,\n errors: Record<string, unknown>,\n status: Record<string, unknown>\n): void => {\n const fieldErrorName = getErrorFieldName(errors);\n const [fieldWithServerError] = getFieldsWithServerError(status);\n\n if (!fieldErrorName && !fieldWithServerError) return;\n\n const errorFieldName = fieldErrorName || fieldWithServerError;\n const errorFormElement = formRef.current?.querySelector(\n `[name=\"${errorFieldName}\"]`\n );\n\n errorFormElement?.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n};\n","import { useEffect } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { getFieldsWithServerError, scrollToError } from \"./utils\";\n\ninterface ScrollToErrorFieldProps {\n formRef: React.RefObject<HTMLFormElement | null>;\n}\n\nconst ScrollToErrorField = ({ formRef }: ScrollToErrorFieldProps) => {\n const { submitCount, isValid, errors, status } = useFormikContext();\n\n useEffect(() => {\n const fieldsWithServerError = getFieldsWithServerError(status);\n if (!formRef.current || (isValid && fieldsWithServerError.length === 0)) {\n return;\n }\n\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }, [submitCount]);\n\n return null;\n};\n\nexport default ScrollToErrorField;\n","import React, { useCallback, forwardRef, useRef } from \"react\";\n\nimport { Form as FormikForm, useFormikContext } from \"formik\";\n\nimport ScrollToErrorField from \"./ScrollToErrorField\";\nimport {\n getFieldsWithServerError,\n scrollToError,\n} from \"./ScrollToErrorField/utils\";\n\ninterface FormWrapperProps {\n className?: string;\n formProps?: React.ComponentProps<\"form\">;\n children: React.ReactNode;\n scrollToErrorField: boolean;\n}\n\nconst FormWrapper = forwardRef<HTMLFormElement, FormWrapperProps>(\n ({ className, formProps, children, scrollToErrorField }, ref) => {\n const { validateForm, setErrors, setTouched, submitForm, ...formikBag } =\n useFormikContext();\n\n const { dirty: isFormDirty, isSubmitting, status } = formikBag;\n\n const formRefForScrollToErrorField = useRef<HTMLFormElement>(null);\n const formRef =\n (ref as React.RefObject<HTMLFormElement | null>) ||\n formRefForScrollToErrorField;\n\n const handleKeyDown = useCallback(\n async (event: React.KeyboardEvent<HTMLFormElement>) => {\n const target = event.target as HTMLElement & { editor?: unknown };\n const isEventFromEditorOrTextarea =\n target.tagName === \"TEXTAREA\" || target.editor;\n\n if (event.key !== \"Enter\") return;\n if (isEventFromEditorOrTextarea && !event.metaKey) return;\n\n event.preventDefault();\n\n if (event.shiftKey) return;\n if (!isFormDirty || isSubmitting) return;\n\n try {\n const errors = await validateForm();\n const fieldStatuses = getFieldsWithServerError(status);\n\n if (\n Object.keys(errors).length > 0 ||\n Object.keys(fieldStatuses).length > 0\n ) {\n setErrors(errors);\n setTouched({ ...errors, ...status });\n if (scrollToErrorField) {\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }\n } else {\n await submitForm();\n }\n } catch (error) {\n console.error(\n \"An unhandled error was caught while validating or submitting the form\",\n error\n );\n }\n },\n [\n validateForm,\n setErrors,\n setTouched,\n isFormDirty,\n isSubmitting,\n submitForm,\n status,\n scrollToErrorField,\n formRef,\n ]\n );\n\n return (\n <FormikForm\n {...{ className }}\n noValidate\n ref={formRef}\n onKeyDown={handleKeyDown}\n {...formProps}\n >\n {scrollToErrorField && <ScrollToErrorField {...{ formRef }} />}\n {children}\n </FormikForm>\n );\n }\n);\n\nFormWrapper.displayName = \"FormWrapper\";\n\nexport default FormWrapper;\n","import React, { forwardRef, useRef } from \"react\";\n\nimport { Formik, FormikConfig, FormikProps, FormikValues } from \"formik\";\n\nimport FormWrapper from \"./FormWrapper\";\nimport { getFieldsWithServerError } from \"./ScrollToErrorField/utils\";\n\nexport interface FormProps<T extends FormikValues = FormikValues> {\n /** Formik configuration: initialValues, validationSchema, onSubmit, etc. */\n formikProps: FormikConfig<T>;\n /** Props forwarded to the HTML form element. */\n formProps?: React.ComponentProps<\"form\">;\n /** Auto-scroll to the first error field on submit. */\n scrollToErrorField?: boolean;\n /** Additional class name for the form wrapper. */\n className?: string;\n /** Render children directly or as a function receiving FormikProps. */\n children: React.ReactNode | ((props: FormikProps<T>) => React.ReactNode);\n}\n\nconst Form = forwardRef<HTMLFormElement, FormProps>(\n (\n { className, children, formikProps, formProps, scrollToErrorField = false },\n ref\n ) => {\n const formikRef = useRef<FormikProps<FormikValues>>(null);\n\n const handleSubmit: FormikConfig<FormikValues>[\"onSubmit\"] = (\n values,\n actions\n ) => {\n const fieldsWithServerError = getFieldsWithServerError(\n formikRef.current?.status\n );\n\n if (fieldsWithServerError.length > 0) {\n actions.setSubmitting(false);\n\n return undefined;\n }\n\n return formikProps.onSubmit(values, actions);\n };\n\n return (\n <Formik\n innerRef={formikRef as React.Ref<FormikProps<FormikValues>>}\n {...formikProps}\n onSubmit={handleSubmit}\n >\n {props => (\n <FormWrapper {...{ className, formProps, ref, scrollToErrorField }}>\n {typeof children === \"function\" ? children(props) : children}\n </FormWrapper>\n )}\n </Formik>\n );\n }\n);\n\nForm.displayName = \"Form\";\n\nexport { Form };\n"],"names":["is","useFormikContext","useEffect","forwardRef","useRef","useCallback","jsxs","FormikForm","jsx","Formik"],"mappings":";;;;;;;AAEA,MAAM,4BAAA,GAA+B,CACnC,MAAA,EACA,MAAA,GAAS,EAAA,KACI;AACb,EAAA,MAAM,SAAmB,EAAC;AAE1B,EAAA,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAC,GAAA,EAAK,KAAK,CAAA,KAAM;AAC/C,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,MAAM,UAAU,MAAA,GAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GAAK,GAAA;AAC9C,IAAA,IAAIA,QAAA,CAAG,MAAA,EAAQ,KAAK,CAAA,EAAG;AACrB,MAAA,MAAA,CAAO,IAAA;AAAA,QACL,GAAG,4BAAA;AAAA,UACD,KAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,IACF,CAAA,MAAO;AACL,MAAA,MAAA,CAAO,KAAK,OAAO,CAAA;AAAA,IACrB;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO,MAAA;AACT,CAAA;AAEA,MAAM,oBAAoB,CACxB,YAAA,KACuB,4BAAA,CAA6B,YAAY,IAAI,CAAC,CAAA;AAEhE,MAAM,wBAAA,GAA2B,CACtC,MAAA,GAAkC,OAElC,MAAA,CAAO,IAAA,CAAK,MAAM,CAAA,CAAE,MAAA;AAAA,EAClB,eAAa,MAAA,CAAO,SAAS,KAAK,IAAA,IAAQ,MAAA,CAAO,SAAS,CAAA,KAAM;AAClE,CAAA;AAEK,MAAM,aAAA,GAAgB,CAC3B,OAAA,EACA,MAAA,EACA,MAAA,KACS;AACT,EAAA,MAAM,cAAA,GAAiB,kBAAkB,MAAM,CAAA;AAC/C,EAAA,MAAM,CAAC,oBAAoB,CAAA,GAAI,wBAAA,CAAyB,MAAM,CAAA;AAE9D,EAAA,IAAI,CAAC,cAAA,IAAkB,CAAC,oBAAA,EAAsB;AAE9C,EAAA,MAAM,iBAAiB,cAAA,IAAkB,oBAAA;AACzC,EAAA,MAAM,gBAAA,GAAmB,QAAQ,OAAA,EAAS,aAAA;AAAA,IACxC,UAAU,cAAc,CAAA,EAAA;AAAA,GAC1B;AAEA,EAAA,gBAAA,EAAkB,cAAA,CAAe;AAAA,IAC/B,QAAA,EAAU,QAAA;AAAA,IACV,KAAA,EAAO;AAAA,GACR,CAAA;AACH,CAAA;;AC9CA,MAAM,kBAAA,GAAqB,CAAC,EAAE,OAAA,EAAQ,KAA+B;AACnE,EAAA,MAAM,EAAE,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,MAAA,KAAWC,uBAAA,EAAiB;AAElE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,qBAAA,GAAwB,yBAAyB,MAAM,CAAA;AAC7D,IAAA,IAAI,CAAC,OAAA,CAAQ,OAAA,IAAY,OAAA,IAAW,qBAAA,CAAsB,WAAW,CAAA,EAAI;AACvE,MAAA;AAAA,IACF;AAEA,IAAA,aAAA,CAAc,OAAA,EAAS,QAAmC,MAAM,CAAA;AAAA,EAClE,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,OAAO,IAAA;AACT,CAAA;;ACNA,MAAM,WAAA,GAAcC,gBAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,WAAW,QAAA,EAAU,kBAAA,IAAsB,GAAA,KAAQ;AAC/D,IAAA,MAAM,EAAE,cAAc,SAAA,EAAW,UAAA,EAAY,YAAY,GAAG,SAAA,KAC1DF,uBAAA,EAAiB;AAEnB,IAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAa,YAAA,EAAc,QAAO,GAAI,SAAA;AAErD,IAAA,MAAM,4BAAA,GAA+BG,aAAwB,IAAI,CAAA;AACjE,IAAA,MAAM,UACH,GAAA,IACD,4BAAA;AAEF,IAAA,MAAM,aAAA,GAAgBC,iBAAA;AAAA,MACpB,OAAO,KAAA,KAAgD;AACrD,QAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,QAAA,MAAM,2BAAA,GACJ,MAAA,CAAO,OAAA,KAAY,UAAA,IAAc,MAAA,CAAO,MAAA;AAE1C,QAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AAC3B,QAAA,IAAI,2BAAA,IAA+B,CAAC,KAAA,CAAM,OAAA,EAAS;AAEnD,QAAA,KAAA,CAAM,cAAA,EAAe;AAErB,QAAA,IAAI,MAAM,QAAA,EAAU;AACpB,QAAA,IAAI,CAAC,eAAe,YAAA,EAAc;AAElC,QAAA,IAAI;AACF,UAAA,MAAM,MAAA,GAAS,MAAM,YAAA,EAAa;AAClC,UAAA,MAAM,aAAA,GAAgB,yBAAyB,MAAM,CAAA;AAErD,UAAA,IACE,MAAA,CAAO,IAAA,CAAK,MAAM,CAAA,CAAE,MAAA,GAAS,CAAA,IAC7B,MAAA,CAAO,IAAA,CAAK,aAAa,CAAA,CAAE,MAAA,GAAS,CAAA,EACpC;AACA,YAAA,SAAA,CAAU,MAAM,CAAA;AAChB,YAAA,UAAA,CAAW,EAAE,GAAG,MAAA,EAAQ,GAAG,QAAQ,CAAA;AACnC,YAAA,IAAI,kBAAA,EAAoB;AACtB,cAAA,aAAA,CAAc,OAAA,EAAS,QAAmC,MAAM,CAAA;AAAA,YAClE;AAAA,UACF,CAAA,MAAO;AACL,YAAA,MAAM,UAAA,EAAW;AAAA,UACnB;AAAA,QACF,SAAS,KAAA,EAAO;AACd,UAAA,OAAA,CAAQ,KAAA;AAAA,YACN,uEAAA;AAAA,YACA;AAAA,WACF;AAAA,QACF;AAAA,MACF,CAAA;AAAA,MACA;AAAA,QACE,YAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA,WAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,MAAA;AAAA,QACA,kBAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,uBACEC,eAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACE,GAAG,EAAE,SAAA,EAAU;AAAA,QAChB,UAAA,EAAU,IAAA;AAAA,QACV,GAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,aAAA;AAAA,QACV,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,kBAAA,oBAAsBC,cAAA,CAAC,kBAAA,EAAA,EAAoB,GAAG,EAAE,SAAQ,EAAG,CAAA;AAAA,UAC3D;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;AC1E1B,MAAM,IAAA,GAAOL,gBAAA;AAAA,EACX,CACE,EAAE,SAAA,EAAW,QAAA,EAAU,aAAa,SAAA,EAAW,kBAAA,GAAqB,KAAA,EAAM,EAC1E,GAAA,KACG;AACH,IAAA,MAAM,SAAA,GAAYC,aAAkC,IAAI,CAAA;AAExD,IAAA,MAAM,YAAA,GAAuD,CAC3D,MAAA,EACA,OAAA,KACG;AACH,MAAA,MAAM,qBAAA,GAAwB,wBAAA;AAAA,QAC5B,UAAU,OAAA,EAAS;AAAA,OACrB;AAEA,MAAA,IAAI,qBAAA,CAAsB,SAAS,CAAA,EAAG;AACpC,QAAA,OAAA,CAAQ,cAAc,KAAK,CAAA;AAE3B,QAAA,OAAO,MAAA;AAAA,MACT;AAEA,MAAA,OAAO,WAAA,CAAY,QAAA,CAAS,MAAA,EAAQ,OAAO,CAAA;AAAA,IAC7C,CAAA;AAEA,IAAA,uBACEI,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,SAAA;AAAA,QACT,GAAG,WAAA;AAAA,QACJ,QAAA,EAAU,YAAA;AAAA,QAET,qCACCD,cAAA,CAAC,WAAA,EAAA,EAAa,GAAG,EAAE,WAAW,SAAA,EAAW,GAAA,EAAK,kBAAA,EAAmB,EAC9D,iBAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,KAAK,IAAI,QAAA,EACtD;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
export interface BlockNavigationAlertProps {
|
|
2
2
|
/** Whether the alert dialog is open. */
|
|
3
3
|
isOpen?: boolean;
|
|
4
|
+
/** Whether the form is being saved. Shows a loader on the primary button and
|
|
5
|
+
* prevents the dialog from being dismissed. */
|
|
6
|
+
isSaving?: boolean;
|
|
7
|
+
/** Whether the primary button saves the form before resuming navigation.
|
|
8
|
+
* Defaults to true; pass false for the older "Stay on this page" behaviour. */
|
|
9
|
+
saveAndContinue?: boolean;
|
|
4
10
|
/** Called when the dialog should close. */
|
|
5
11
|
onClose?: () => void;
|
|
6
|
-
/** Called when the user chooses to stay. */
|
|
12
|
+
/** Called when the user chooses to save and continue, or to stay. */
|
|
7
13
|
onSubmit?: () => void;
|
|
8
14
|
/** Called when the user chooses to discard and leave. */
|
|
9
15
|
onDiscardChanges?: () => void;
|
|
@@ -13,11 +19,12 @@ export interface BlockNavigationAlertProps {
|
|
|
13
19
|
message?: string;
|
|
14
20
|
/** Custom label for the discard/cancel button. */
|
|
15
21
|
cancelButtonLabel?: string;
|
|
16
|
-
/** Custom label for the
|
|
22
|
+
/** Custom label for the primary button. Defaults to "Save and continue" when
|
|
23
|
+
* saveAndContinue is enabled and "Stay on this page" otherwise. */
|
|
17
24
|
submitButtonLabel?: string;
|
|
18
25
|
}
|
|
19
26
|
declare const BlockNavigationAlert: {
|
|
20
|
-
({ isOpen, onClose, onSubmit, onDiscardChanges, title, message, cancelButtonLabel, submitButtonLabel, }: BlockNavigationAlertProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
({ isOpen, isSaving, saveAndContinue, onClose, onSubmit, onDiscardChanges, title, message, cancelButtonLabel, submitButtonLabel, }: BlockNavigationAlertProps): import("react/jsx-runtime").JSX.Element;
|
|
21
28
|
displayName: string;
|
|
22
29
|
};
|
|
23
30
|
export { BlockNavigationAlert };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { type BlockNavigationAlertProps } from "./BlockNavigationAlert";
|
|
2
|
-
export interface FormikBlockNavigationProps extends Omit<BlockNavigationAlertProps, "isOpen" | "onClose" | "onSubmit" | "onDiscardChanges"> {
|
|
2
|
+
export interface FormikBlockNavigationProps extends Omit<BlockNavigationAlertProps, "isOpen" | "isSaving" | "onClose" | "onSubmit" | "onDiscardChanges"> {
|
|
3
3
|
/** Force the navigation block regardless of Formik dirty state. */
|
|
4
4
|
isDirty?: boolean;
|
|
5
5
|
}
|
|
6
6
|
declare const FormikBlockNavigation: {
|
|
7
|
-
({ isDirty, ...otherProps }: FormikBlockNavigationProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
({ isDirty, saveAndContinue, ...otherProps }: FormikBlockNavigationProps): import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
displayName: string;
|
|
9
9
|
};
|
|
10
10
|
export { FormikBlockNavigation };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useFormikContext } from 'formik';
|
|
3
2
|
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
3
|
+
import { useFormikContext } from 'formik';
|
|
4
4
|
import { useHistory } from 'react-router-dom';
|
|
5
5
|
import { D as Dialog } from '../Dialog-Yw34WDqY.js';
|
|
6
6
|
import { b as Button } from '../Button-ZssOVkG0.js';
|
|
@@ -97,24 +97,27 @@ const useNavPrompt = ({
|
|
|
97
97
|
|
|
98
98
|
const BlockNavigationAlert = ({
|
|
99
99
|
isOpen = false,
|
|
100
|
+
isSaving = false,
|
|
101
|
+
saveAndContinue = true,
|
|
100
102
|
onClose,
|
|
101
103
|
onSubmit,
|
|
102
104
|
onDiscardChanges,
|
|
103
105
|
title = "You have unsaved changes",
|
|
104
106
|
message = "Are you sure you want to leave? All unsaved changes will be lost.",
|
|
105
107
|
cancelButtonLabel = "Discard and leave",
|
|
106
|
-
submitButtonLabel
|
|
108
|
+
submitButtonLabel
|
|
107
109
|
}) => {
|
|
108
110
|
const submitButtonRef = useRef(null);
|
|
111
|
+
const primaryButtonLabel = submitButtonLabel ?? (saveAndContinue ? "Save and continue" : "Stay on this page");
|
|
109
112
|
return /* @__PURE__ */ jsxs(
|
|
110
113
|
Dialog,
|
|
111
114
|
{
|
|
112
115
|
isOpen,
|
|
113
116
|
onClose: onClose ?? (() => {
|
|
114
117
|
}),
|
|
115
|
-
closeButton:
|
|
116
|
-
closeOnEsc:
|
|
117
|
-
closeOnOutsideClick:
|
|
118
|
+
closeButton: !isSaving,
|
|
119
|
+
closeOnEsc: !isSaving,
|
|
120
|
+
closeOnOutsideClick: !isSaving,
|
|
118
121
|
initialFocusRef: submitButtonRef,
|
|
119
122
|
size: "medium",
|
|
120
123
|
"data-testid": "alert-box",
|
|
@@ -133,6 +136,7 @@ const BlockNavigationAlert = ({
|
|
|
133
136
|
Button,
|
|
134
137
|
{
|
|
135
138
|
"data-testid": "alert-cancel-button",
|
|
139
|
+
disabled: isSaving,
|
|
136
140
|
label: cancelButtonLabel,
|
|
137
141
|
variant: "destructive",
|
|
138
142
|
onClick: onDiscardChanges
|
|
@@ -142,7 +146,8 @@ const BlockNavigationAlert = ({
|
|
|
142
146
|
Button,
|
|
143
147
|
{
|
|
144
148
|
"data-testid": "alert-submit-button",
|
|
145
|
-
label:
|
|
149
|
+
label: primaryButtonLabel,
|
|
150
|
+
loading: isSaving,
|
|
146
151
|
ref: submitButtonRef,
|
|
147
152
|
onClick: onSubmit
|
|
148
153
|
}
|
|
@@ -156,8 +161,10 @@ BlockNavigationAlert.displayName = "BlockNavigationAlert";
|
|
|
156
161
|
|
|
157
162
|
const FormikBlockNavigation = ({
|
|
158
163
|
isDirty = false,
|
|
164
|
+
saveAndContinue = true,
|
|
159
165
|
...otherProps
|
|
160
166
|
}) => {
|
|
167
|
+
const [isSaving, setIsSaving] = useState(false);
|
|
161
168
|
const formikContext = useFormikContext();
|
|
162
169
|
const shouldBlock = isDirty || Boolean(formikContext) && Boolean(formikContext.dirty);
|
|
163
170
|
const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({
|
|
@@ -168,13 +175,35 @@ const FormikBlockNavigation = ({
|
|
|
168
175
|
hidePrompt();
|
|
169
176
|
continueNavigation();
|
|
170
177
|
};
|
|
178
|
+
const handleSaveAndContinue = async () => {
|
|
179
|
+
if (!formikContext) {
|
|
180
|
+
hidePrompt();
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
setIsSaving(true);
|
|
184
|
+
try {
|
|
185
|
+
const errors = await formikContext.validateForm();
|
|
186
|
+
if (Object.keys(errors).length > 0) {
|
|
187
|
+
await formikContext.submitForm();
|
|
188
|
+
hidePrompt();
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
await formikContext.submitForm();
|
|
192
|
+
continueNavigation();
|
|
193
|
+
} catch {
|
|
194
|
+
hidePrompt();
|
|
195
|
+
} finally {
|
|
196
|
+
setIsSaving(false);
|
|
197
|
+
}
|
|
198
|
+
};
|
|
171
199
|
return /* @__PURE__ */ jsx(
|
|
172
200
|
BlockNavigationAlert,
|
|
173
201
|
{
|
|
202
|
+
...{ isSaving, saveAndContinue },
|
|
174
203
|
isOpen: isBlocked,
|
|
175
204
|
onClose: hidePrompt,
|
|
176
205
|
onDiscardChanges: handleDiscardChanges,
|
|
177
|
-
onSubmit: hidePrompt,
|
|
206
|
+
onSubmit: saveAndContinue ? handleSaveAndContinue : hidePrompt,
|
|
178
207
|
...otherProps
|
|
179
208
|
}
|
|
180
209
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockNavigation.js","sources":["../../src/formik/BlockNavigation/hooks/useNavPrompt.ts","../../src/formik/BlockNavigation/BlockNavigationAlert.tsx","../../src/formik/BlockNavigation/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\n\ninterface UseNavPromptOptions {\n /** Whether navigation should be blocked. */\n shouldBlock?: boolean;\n}\n\ninterface UseNavPromptReturn {\n /** Whether a navigation attempt is currently blocked. */\n isBlocked: boolean;\n /** Unblock and continue the pending navigation. */\n continueNavigation: () => void;\n /** Dismiss the prompt without navigating. */\n hidePrompt: () => void;\n}\n\nconst useNavPrompt = ({\n shouldBlock = true,\n}: UseNavPromptOptions): UseNavPromptReturn => {\n const [isBlocked, setIsBlocked] = useState(false);\n\n const history = useHistory();\n\n const unblockRef = useRef<(() => void) | undefined>(undefined);\n const navRef = useRef<{ transition: string; action: string } | null>(null);\n\n const handleNavigation = useCallback(\n (action: string, transition: string) => {\n switch (action) {\n case \"PUSH\":\n history.push(transition);\n break;\n case \"REPLACE\":\n history.replace(transition);\n break;\n case \"POP\":\n history.goBack();\n break;\n }\n },\n [history]\n );\n\n const continueNavigation = useCallback(() => {\n if (isBlocked && unblockRef.current) {\n unblockRef.current();\n setIsBlocked(false);\n if (navRef.current) {\n const { action, transition } = navRef.current;\n handleNavigation(action, transition);\n }\n }\n }, [isBlocked, handleNavigation]);\n\n const hidePrompt = useCallback(() => setIsBlocked(false), []);\n\n useEffect(() => {\n if (shouldBlock) {\n unblockRef.current = history.block(\n (transition: { pathname: string }, action: string) => {\n setIsBlocked(true);\n navRef.current = { transition: transition.pathname, action };\n\n return false;\n }\n ) as unknown as () => void;\n\n return () => {\n unblockRef.current?.();\n };\n }\n\n return undefined;\n }, [shouldBlock, history]);\n\n return { isBlocked, continueNavigation, hidePrompt };\n};\n\nexport { useNavPrompt };\nexport type { UseNavPromptOptions, UseNavPromptReturn };\n","import { useRef } from \"react\";\n\nimport { Button } from \"src/components/Button\";\nimport { Dialog } from \"src/components/Dialog\";\n\nexport interface BlockNavigationAlertProps {\n /** Whether the alert dialog is open. */\n isOpen?: boolean;\n /** Called when the dialog should close. */\n onClose?: () => void;\n /** Called when the user chooses to stay. */\n onSubmit?: () => void;\n /** Called when the user chooses to discard and leave. */\n onDiscardChanges?: () => void;\n /** Custom title for the alert. */\n title?: string;\n /** Custom message for the alert body. */\n message?: string;\n /** Custom label for the discard/cancel button. */\n cancelButtonLabel?: string;\n /** Custom label for the stay/submit button. */\n submitButtonLabel?: string;\n}\n\nconst BlockNavigationAlert = ({\n isOpen = false,\n onClose,\n onSubmit,\n onDiscardChanges,\n title = \"You have unsaved changes\",\n message = \"Are you sure you want to leave? All unsaved changes will be lost.\",\n cancelButtonLabel = \"Discard and leave\",\n submitButtonLabel = \"Stay on this page\",\n}: BlockNavigationAlertProps) => {\n const submitButtonRef = useRef<HTMLButtonElement>(null);\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose ?? (() => {})}\n closeButton\n closeOnEsc\n closeOnOutsideClick\n initialFocusRef={submitButtonRef}\n size=\"medium\"\n data-testid=\"alert-box\"\n >\n <Dialog.Header>\n <Dialog.Title data-testid=\"alert-title\">{title}</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body>\n <p\n data-testid=\"alert-message\"\n className=\"text-sm text-muted-foreground\"\n >\n {message}\n </p>\n </Dialog.Body>\n <Dialog.Footer className=\"flex items-center justify-end gap-2\">\n <Button\n data-testid=\"alert-cancel-button\"\n label={cancelButtonLabel}\n variant=\"destructive\"\n onClick={onDiscardChanges}\n />\n <Button\n data-testid=\"alert-submit-button\"\n label={submitButtonLabel}\n ref={submitButtonRef}\n onClick={onSubmit}\n />\n </Dialog.Footer>\n </Dialog>\n );\n};\n\nBlockNavigationAlert.displayName = \"BlockNavigationAlert\";\n\nexport { BlockNavigationAlert };\n","import { useFormikContext } from \"formik\";\n\nimport { useNavPrompt } from \"./hooks/useNavPrompt\";\n\nimport {\n BlockNavigationAlert,\n type BlockNavigationAlertProps,\n} from \"./BlockNavigationAlert\";\n\nexport interface FormikBlockNavigationProps extends Omit<\n BlockNavigationAlertProps,\n \"isOpen\" | \"onClose\" | \"onSubmit\" | \"onDiscardChanges\"\n> {\n /** Force the navigation block regardless of Formik dirty state. */\n isDirty?: boolean;\n}\n\nconst FormikBlockNavigation = ({\n isDirty = false,\n ...otherProps\n}: FormikBlockNavigationProps) => {\n const formikContext = useFormikContext();\n const shouldBlock =\n isDirty || (Boolean(formikContext) && Boolean(formikContext.dirty));\n\n const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({\n shouldBlock,\n });\n\n const handleDiscardChanges = () => {\n if (formikContext) formikContext.resetForm();\n hidePrompt();\n continueNavigation();\n };\n\n return (\n <BlockNavigationAlert\n isOpen={isBlocked}\n onClose={hidePrompt}\n onDiscardChanges={handleDiscardChanges}\n onSubmit={hidePrompt}\n {...otherProps}\n />\n );\n};\n\nFormikBlockNavigation.displayName = \"FormikBlockNavigation\";\n\nexport { FormikBlockNavigation };\nexport type { BlockNavigationAlertProps };\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BlockNavigation.js","sources":["../../src/formik/BlockNavigation/hooks/useNavPrompt.ts","../../src/formik/BlockNavigation/BlockNavigationAlert.tsx","../../src/formik/BlockNavigation/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\n\ninterface UseNavPromptOptions {\n /** Whether navigation should be blocked. */\n shouldBlock?: boolean;\n}\n\ninterface UseNavPromptReturn {\n /** Whether a navigation attempt is currently blocked. */\n isBlocked: boolean;\n /** Unblock and continue the pending navigation. */\n continueNavigation: () => void;\n /** Dismiss the prompt without navigating. */\n hidePrompt: () => void;\n}\n\nconst useNavPrompt = ({\n shouldBlock = true,\n}: UseNavPromptOptions): UseNavPromptReturn => {\n const [isBlocked, setIsBlocked] = useState(false);\n\n const history = useHistory();\n\n const unblockRef = useRef<(() => void) | undefined>(undefined);\n const navRef = useRef<{ transition: string; action: string } | null>(null);\n\n const handleNavigation = useCallback(\n (action: string, transition: string) => {\n switch (action) {\n case \"PUSH\":\n history.push(transition);\n break;\n case \"REPLACE\":\n history.replace(transition);\n break;\n case \"POP\":\n history.goBack();\n break;\n }\n },\n [history]\n );\n\n const continueNavigation = useCallback(() => {\n if (isBlocked && unblockRef.current) {\n unblockRef.current();\n setIsBlocked(false);\n if (navRef.current) {\n const { action, transition } = navRef.current;\n handleNavigation(action, transition);\n }\n }\n }, [isBlocked, handleNavigation]);\n\n const hidePrompt = useCallback(() => setIsBlocked(false), []);\n\n useEffect(() => {\n if (shouldBlock) {\n unblockRef.current = history.block(\n (transition: { pathname: string }, action: string) => {\n setIsBlocked(true);\n navRef.current = { transition: transition.pathname, action };\n\n return false;\n }\n ) as unknown as () => void;\n\n return () => {\n unblockRef.current?.();\n };\n }\n\n return undefined;\n }, [shouldBlock, history]);\n\n return { isBlocked, continueNavigation, hidePrompt };\n};\n\nexport { useNavPrompt };\nexport type { UseNavPromptOptions, UseNavPromptReturn };\n","import { useRef } from \"react\";\n\nimport { Button } from \"src/components/Button\";\nimport { Dialog } from \"src/components/Dialog\";\n\nexport interface BlockNavigationAlertProps {\n /** Whether the alert dialog is open. */\n isOpen?: boolean;\n /** Whether the form is being saved. Shows a loader on the primary button and\n * prevents the dialog from being dismissed. */\n isSaving?: boolean;\n /** Whether the primary button saves the form before resuming navigation.\n * Defaults to true; pass false for the older \"Stay on this page\" behaviour. */\n saveAndContinue?: boolean;\n /** Called when the dialog should close. */\n onClose?: () => void;\n /** Called when the user chooses to save and continue, or to stay. */\n onSubmit?: () => void;\n /** Called when the user chooses to discard and leave. */\n onDiscardChanges?: () => void;\n /** Custom title for the alert. */\n title?: string;\n /** Custom message for the alert body. */\n message?: string;\n /** Custom label for the discard/cancel button. */\n cancelButtonLabel?: string;\n /** Custom label for the primary button. Defaults to \"Save and continue\" when\n * saveAndContinue is enabled and \"Stay on this page\" otherwise. */\n submitButtonLabel?: string;\n}\n\nconst BlockNavigationAlert = ({\n isOpen = false,\n isSaving = false,\n saveAndContinue = true,\n onClose,\n onSubmit,\n onDiscardChanges,\n title = \"You have unsaved changes\",\n message = \"Are you sure you want to leave? All unsaved changes will be lost.\",\n cancelButtonLabel = \"Discard and leave\",\n submitButtonLabel,\n}: BlockNavigationAlertProps) => {\n const submitButtonRef = useRef<HTMLButtonElement>(null);\n\n const primaryButtonLabel =\n submitButtonLabel ??\n (saveAndContinue ? \"Save and continue\" : \"Stay on this page\");\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose ?? (() => {})}\n closeButton={!isSaving}\n closeOnEsc={!isSaving}\n closeOnOutsideClick={!isSaving}\n initialFocusRef={submitButtonRef}\n size=\"medium\"\n data-testid=\"alert-box\"\n >\n <Dialog.Header>\n <Dialog.Title data-testid=\"alert-title\">{title}</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body>\n <p\n data-testid=\"alert-message\"\n className=\"text-sm text-muted-foreground\"\n >\n {message}\n </p>\n </Dialog.Body>\n <Dialog.Footer className=\"flex items-center justify-end gap-2\">\n <Button\n data-testid=\"alert-cancel-button\"\n disabled={isSaving}\n label={cancelButtonLabel}\n variant=\"destructive\"\n onClick={onDiscardChanges}\n />\n <Button\n data-testid=\"alert-submit-button\"\n label={primaryButtonLabel}\n loading={isSaving}\n ref={submitButtonRef}\n onClick={onSubmit}\n />\n </Dialog.Footer>\n </Dialog>\n );\n};\n\nBlockNavigationAlert.displayName = \"BlockNavigationAlert\";\n\nexport { BlockNavigationAlert };\n","import { useState } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { useNavPrompt } from \"./hooks/useNavPrompt\";\n\nimport {\n BlockNavigationAlert,\n type BlockNavigationAlertProps,\n} from \"./BlockNavigationAlert\";\n\nexport interface FormikBlockNavigationProps extends Omit<\n BlockNavigationAlertProps,\n \"isOpen\" | \"isSaving\" | \"onClose\" | \"onSubmit\" | \"onDiscardChanges\"\n> {\n /** Force the navigation block regardless of Formik dirty state. */\n isDirty?: boolean;\n}\n\nconst FormikBlockNavigation = ({\n isDirty = false,\n saveAndContinue = true,\n ...otherProps\n}: FormikBlockNavigationProps) => {\n const [isSaving, setIsSaving] = useState(false);\n\n const formikContext = useFormikContext();\n const shouldBlock =\n isDirty || (Boolean(formikContext) && Boolean(formikContext.dirty));\n\n const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({\n shouldBlock,\n });\n\n const handleDiscardChanges = () => {\n if (formikContext) formikContext.resetForm();\n hidePrompt();\n continueNavigation();\n };\n\n const handleSaveAndContinue = async () => {\n if (!formikContext) {\n hidePrompt();\n\n return;\n }\n\n setIsSaving(true);\n try {\n const errors = await formikContext.validateForm();\n if (Object.keys(errors).length > 0) {\n await formikContext.submitForm();\n hidePrompt();\n\n return;\n }\n\n await formikContext.submitForm();\n continueNavigation();\n } catch {\n hidePrompt();\n } finally {\n setIsSaving(false);\n }\n };\n\n return (\n <BlockNavigationAlert\n {...{ isSaving, saveAndContinue }}\n isOpen={isBlocked}\n onClose={hidePrompt}\n onDiscardChanges={handleDiscardChanges}\n onSubmit={saveAndContinue ? handleSaveAndContinue : hidePrompt}\n {...otherProps}\n />\n );\n};\n\nFormikBlockNavigation.displayName = \"FormikBlockNavigation\";\n\nexport { FormikBlockNavigation };\nexport type { BlockNavigationAlertProps };\n"],"names":[],"mappings":"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"}
|
package/dist/formik/Form.js
CHANGED
|
@@ -76,11 +76,11 @@ const FormWrapper = forwardRef(
|
|
|
76
76
|
scrollToError(formRef, errors, status);
|
|
77
77
|
}
|
|
78
78
|
} else {
|
|
79
|
-
submitForm();
|
|
79
|
+
await submitForm();
|
|
80
80
|
}
|
|
81
81
|
} catch (error) {
|
|
82
82
|
console.error(
|
|
83
|
-
"An unhandled error was caught
|
|
83
|
+
"An unhandled error was caught while validating or submitting the form",
|
|
84
84
|
error
|
|
85
85
|
);
|
|
86
86
|
}
|
package/dist/formik/Form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../src/formik/Form/ScrollToErrorField/utils.ts","../../src/formik/Form/ScrollToErrorField/index.tsx","../../src/formik/Form/FormWrapper.tsx","../../src/formik/Form/index.tsx"],"sourcesContent":["import { is } from \"ramda\";\n\nconst transformObjectToDotNotation = (\n object: Record<string, unknown>,\n prefix = \"\"\n): string[] => {\n const result: string[] = [];\n\n Object.entries(object).forEach(([key, value]) => {\n if (!value) return;\n const nextKey = prefix ? `${prefix}.${key}` : key;\n if (is(Object, value)) {\n result.push(\n ...transformObjectToDotNotation(\n value as Record<string, unknown>,\n nextKey\n )\n );\n } else {\n result.push(nextKey);\n }\n });\n\n return result;\n};\n\nconst getErrorFieldName = (\n formikErrors: Record<string, unknown>\n): string | undefined => transformObjectToDotNotation(formikErrors)?.[0];\n\nexport const getFieldsWithServerError = (\n status: Record<string, unknown> = {}\n): string[] =>\n Object.keys(status).filter(\n fieldName => status[fieldName] != null && status[fieldName] !== \"\"\n );\n\nexport const scrollToError = (\n formRef: React.RefObject<HTMLFormElement | null>,\n errors: Record<string, unknown>,\n status: Record<string, unknown>\n): void => {\n const fieldErrorName = getErrorFieldName(errors);\n const [fieldWithServerError] = getFieldsWithServerError(status);\n\n if (!fieldErrorName && !fieldWithServerError) return;\n\n const errorFieldName = fieldErrorName || fieldWithServerError;\n const errorFormElement = formRef.current?.querySelector(\n `[name=\"${errorFieldName}\"]`\n );\n\n errorFormElement?.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n};\n","import { useEffect } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { getFieldsWithServerError, scrollToError } from \"./utils\";\n\ninterface ScrollToErrorFieldProps {\n formRef: React.RefObject<HTMLFormElement | null>;\n}\n\nconst ScrollToErrorField = ({ formRef }: ScrollToErrorFieldProps) => {\n const { submitCount, isValid, errors, status } = useFormikContext();\n\n useEffect(() => {\n const fieldsWithServerError = getFieldsWithServerError(status);\n if (!formRef.current || (isValid && fieldsWithServerError.length === 0)) {\n return;\n }\n\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }, [submitCount]);\n\n return null;\n};\n\nexport default ScrollToErrorField;\n","import React, { useCallback, forwardRef, useRef } from \"react\";\n\nimport { Form as FormikForm, useFormikContext } from \"formik\";\n\nimport ScrollToErrorField from \"./ScrollToErrorField\";\nimport {\n getFieldsWithServerError,\n scrollToError,\n} from \"./ScrollToErrorField/utils\";\n\ninterface FormWrapperProps {\n className?: string;\n formProps?: React.ComponentProps<\"form\">;\n children: React.ReactNode;\n scrollToErrorField: boolean;\n}\n\nconst FormWrapper = forwardRef<HTMLFormElement, FormWrapperProps>(\n ({ className, formProps, children, scrollToErrorField }, ref) => {\n const { validateForm, setErrors, setTouched, submitForm, ...formikBag } =\n useFormikContext();\n\n const { dirty: isFormDirty, isSubmitting, status } = formikBag;\n\n const formRefForScrollToErrorField = useRef<HTMLFormElement>(null);\n const formRef =\n (ref as React.RefObject<HTMLFormElement | null>) ||\n formRefForScrollToErrorField;\n\n const handleKeyDown = useCallback(\n async (event: React.KeyboardEvent<HTMLFormElement>) => {\n const target = event.target as HTMLElement & { editor?: unknown };\n const isEventFromEditorOrTextarea =\n target.tagName === \"TEXTAREA\" || target.editor;\n\n if (event.key !== \"Enter\") return;\n if (isEventFromEditorOrTextarea && !event.metaKey) return;\n\n event.preventDefault();\n\n if (event.shiftKey) return;\n if (!isFormDirty || isSubmitting) return;\n\n try {\n const errors = await validateForm();\n const fieldStatuses = getFieldsWithServerError(status);\n\n if (\n Object.keys(errors).length > 0 ||\n Object.keys(fieldStatuses).length > 0\n ) {\n setErrors(errors);\n setTouched({ ...errors, ...status });\n if (scrollToErrorField) {\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }\n } else {\n submitForm();\n }\n } catch (error) {\n console.error(\n \"An unhandled error was caught from validateForm()\",\n error\n );\n }\n },\n [\n validateForm,\n setErrors,\n setTouched,\n isFormDirty,\n isSubmitting,\n submitForm,\n status,\n scrollToErrorField,\n formRef,\n ]\n );\n\n return (\n <FormikForm\n {...{ className }}\n noValidate\n ref={formRef}\n onKeyDown={handleKeyDown}\n {...formProps}\n >\n {scrollToErrorField && <ScrollToErrorField {...{ formRef }} />}\n {children}\n </FormikForm>\n );\n }\n);\n\nFormWrapper.displayName = \"FormWrapper\";\n\nexport default FormWrapper;\n","import React, { forwardRef, useRef } from \"react\";\n\nimport { Formik, FormikConfig, FormikProps, FormikValues } from \"formik\";\n\nimport FormWrapper from \"./FormWrapper\";\nimport { getFieldsWithServerError } from \"./ScrollToErrorField/utils\";\n\nexport interface FormProps<T extends FormikValues = FormikValues> {\n /** Formik configuration: initialValues, validationSchema, onSubmit, etc. */\n formikProps: FormikConfig<T>;\n /** Props forwarded to the HTML form element. */\n formProps?: React.ComponentProps<\"form\">;\n /** Auto-scroll to the first error field on submit. */\n scrollToErrorField?: boolean;\n /** Additional class name for the form wrapper. */\n className?: string;\n /** Render children directly or as a function receiving FormikProps. */\n children: React.ReactNode | ((props: FormikProps<T>) => React.ReactNode);\n}\n\nconst Form = forwardRef<HTMLFormElement, FormProps>(\n (\n { className, children, formikProps, formProps, scrollToErrorField = false },\n ref\n ) => {\n const formikRef = useRef<FormikProps<FormikValues>>(null);\n\n const handleSubmit: FormikConfig<FormikValues>[\"onSubmit\"] = (\n values,\n actions\n ) => {\n const fieldsWithServerError = getFieldsWithServerError(\n formikRef.current?.status\n );\n\n if (fieldsWithServerError.length > 0) {\n actions.setSubmitting(false);\n\n return undefined;\n }\n\n return formikProps.onSubmit(values, actions);\n };\n\n return (\n <Formik\n innerRef={formikRef as React.Ref<FormikProps<FormikValues>>}\n {...formikProps}\n onSubmit={handleSubmit}\n >\n {props => (\n <FormWrapper {...{ className, formProps, ref, scrollToErrorField }}>\n {typeof children === \"function\" ? children(props) : children}\n </FormWrapper>\n )}\n </Formik>\n );\n }\n);\n\nForm.displayName = \"Form\";\n\nexport { Form };\n"],"names":["FormikForm"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../src/formik/Form/ScrollToErrorField/utils.ts","../../src/formik/Form/ScrollToErrorField/index.tsx","../../src/formik/Form/FormWrapper.tsx","../../src/formik/Form/index.tsx"],"sourcesContent":["import { is } from \"ramda\";\n\nconst transformObjectToDotNotation = (\n object: Record<string, unknown>,\n prefix = \"\"\n): string[] => {\n const result: string[] = [];\n\n Object.entries(object).forEach(([key, value]) => {\n if (!value) return;\n const nextKey = prefix ? `${prefix}.${key}` : key;\n if (is(Object, value)) {\n result.push(\n ...transformObjectToDotNotation(\n value as Record<string, unknown>,\n nextKey\n )\n );\n } else {\n result.push(nextKey);\n }\n });\n\n return result;\n};\n\nconst getErrorFieldName = (\n formikErrors: Record<string, unknown>\n): string | undefined => transformObjectToDotNotation(formikErrors)?.[0];\n\nexport const getFieldsWithServerError = (\n status: Record<string, unknown> = {}\n): string[] =>\n Object.keys(status).filter(\n fieldName => status[fieldName] != null && status[fieldName] !== \"\"\n );\n\nexport const scrollToError = (\n formRef: React.RefObject<HTMLFormElement | null>,\n errors: Record<string, unknown>,\n status: Record<string, unknown>\n): void => {\n const fieldErrorName = getErrorFieldName(errors);\n const [fieldWithServerError] = getFieldsWithServerError(status);\n\n if (!fieldErrorName && !fieldWithServerError) return;\n\n const errorFieldName = fieldErrorName || fieldWithServerError;\n const errorFormElement = formRef.current?.querySelector(\n `[name=\"${errorFieldName}\"]`\n );\n\n errorFormElement?.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n};\n","import { useEffect } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { getFieldsWithServerError, scrollToError } from \"./utils\";\n\ninterface ScrollToErrorFieldProps {\n formRef: React.RefObject<HTMLFormElement | null>;\n}\n\nconst ScrollToErrorField = ({ formRef }: ScrollToErrorFieldProps) => {\n const { submitCount, isValid, errors, status } = useFormikContext();\n\n useEffect(() => {\n const fieldsWithServerError = getFieldsWithServerError(status);\n if (!formRef.current || (isValid && fieldsWithServerError.length === 0)) {\n return;\n }\n\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }, [submitCount]);\n\n return null;\n};\n\nexport default ScrollToErrorField;\n","import React, { useCallback, forwardRef, useRef } from \"react\";\n\nimport { Form as FormikForm, useFormikContext } from \"formik\";\n\nimport ScrollToErrorField from \"./ScrollToErrorField\";\nimport {\n getFieldsWithServerError,\n scrollToError,\n} from \"./ScrollToErrorField/utils\";\n\ninterface FormWrapperProps {\n className?: string;\n formProps?: React.ComponentProps<\"form\">;\n children: React.ReactNode;\n scrollToErrorField: boolean;\n}\n\nconst FormWrapper = forwardRef<HTMLFormElement, FormWrapperProps>(\n ({ className, formProps, children, scrollToErrorField }, ref) => {\n const { validateForm, setErrors, setTouched, submitForm, ...formikBag } =\n useFormikContext();\n\n const { dirty: isFormDirty, isSubmitting, status } = formikBag;\n\n const formRefForScrollToErrorField = useRef<HTMLFormElement>(null);\n const formRef =\n (ref as React.RefObject<HTMLFormElement | null>) ||\n formRefForScrollToErrorField;\n\n const handleKeyDown = useCallback(\n async (event: React.KeyboardEvent<HTMLFormElement>) => {\n const target = event.target as HTMLElement & { editor?: unknown };\n const isEventFromEditorOrTextarea =\n target.tagName === \"TEXTAREA\" || target.editor;\n\n if (event.key !== \"Enter\") return;\n if (isEventFromEditorOrTextarea && !event.metaKey) return;\n\n event.preventDefault();\n\n if (event.shiftKey) return;\n if (!isFormDirty || isSubmitting) return;\n\n try {\n const errors = await validateForm();\n const fieldStatuses = getFieldsWithServerError(status);\n\n if (\n Object.keys(errors).length > 0 ||\n Object.keys(fieldStatuses).length > 0\n ) {\n setErrors(errors);\n setTouched({ ...errors, ...status });\n if (scrollToErrorField) {\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }\n } else {\n await submitForm();\n }\n } catch (error) {\n console.error(\n \"An unhandled error was caught while validating or submitting the form\",\n error\n );\n }\n },\n [\n validateForm,\n setErrors,\n setTouched,\n isFormDirty,\n isSubmitting,\n submitForm,\n status,\n scrollToErrorField,\n formRef,\n ]\n );\n\n return (\n <FormikForm\n {...{ className }}\n noValidate\n ref={formRef}\n onKeyDown={handleKeyDown}\n {...formProps}\n >\n {scrollToErrorField && <ScrollToErrorField {...{ formRef }} />}\n {children}\n </FormikForm>\n );\n }\n);\n\nFormWrapper.displayName = \"FormWrapper\";\n\nexport default FormWrapper;\n","import React, { forwardRef, useRef } from \"react\";\n\nimport { Formik, FormikConfig, FormikProps, FormikValues } from \"formik\";\n\nimport FormWrapper from \"./FormWrapper\";\nimport { getFieldsWithServerError } from \"./ScrollToErrorField/utils\";\n\nexport interface FormProps<T extends FormikValues = FormikValues> {\n /** Formik configuration: initialValues, validationSchema, onSubmit, etc. */\n formikProps: FormikConfig<T>;\n /** Props forwarded to the HTML form element. */\n formProps?: React.ComponentProps<\"form\">;\n /** Auto-scroll to the first error field on submit. */\n scrollToErrorField?: boolean;\n /** Additional class name for the form wrapper. */\n className?: string;\n /** Render children directly or as a function receiving FormikProps. */\n children: React.ReactNode | ((props: FormikProps<T>) => React.ReactNode);\n}\n\nconst Form = forwardRef<HTMLFormElement, FormProps>(\n (\n { className, children, formikProps, formProps, scrollToErrorField = false },\n ref\n ) => {\n const formikRef = useRef<FormikProps<FormikValues>>(null);\n\n const handleSubmit: FormikConfig<FormikValues>[\"onSubmit\"] = (\n values,\n actions\n ) => {\n const fieldsWithServerError = getFieldsWithServerError(\n formikRef.current?.status\n );\n\n if (fieldsWithServerError.length > 0) {\n actions.setSubmitting(false);\n\n return undefined;\n }\n\n return formikProps.onSubmit(values, actions);\n };\n\n return (\n <Formik\n innerRef={formikRef as React.Ref<FormikProps<FormikValues>>}\n {...formikProps}\n onSubmit={handleSubmit}\n >\n {props => (\n <FormWrapper {...{ className, formProps, ref, scrollToErrorField }}>\n {typeof children === \"function\" ? children(props) : children}\n </FormWrapper>\n )}\n </Formik>\n );\n }\n);\n\nForm.displayName = \"Form\";\n\nexport { Form };\n"],"names":["FormikForm"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neeto-atoms",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.134-beta1",
|
|
4
4
|
"author": "BigBinary",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -209,4 +209,4 @@
|
|
|
209
209
|
"react-router-dom": "^5.3.3"
|
|
210
210
|
},
|
|
211
211
|
"packageManager": "yarn@4.9.2"
|
|
212
|
-
}
|
|
212
|
+
}
|
package/CHANGELOG.md
DELETED