import React from 'react'; import type {AnyObjectSchema} from 'yup'; import {Grid} from '@material-ui/core'; import {SQForm, SQFormButton} from '../../src'; import { Snackbar, SnackbarProvider, useSnackbar, } from 'scplus-shared-components'; import type {GridProps} from '@material-ui/core'; import type {FormikValues} from 'formik'; export interface SQFormStoryWrapperProps { children: React.ReactNode; initialValues: FormikValues; validationSchema?: AnyObjectSchema; muiGridProps?: GridProps; showSubmit?: boolean; } export function SQFormStoryWrapper({ children, initialValues, validationSchema, muiGridProps, showSubmit = true, }: SQFormStoryWrapperProps): React.ReactElement { return ( <SnackbarProvider> <Form initialValues={initialValues} validationSchema={validationSchema} muiGridProps={muiGridProps} showSubmit={showSubmit} > {children} </Form> </SnackbarProvider> ); } function Form({ children, initialValues, validationSchema, muiGridProps, showSubmit = true, }: SQFormStoryWrapperProps): React.ReactElement { const [value, setValue] = React.useState({}); const [snackbarState, {snackbar, closeSnackBar}] = useSnackbar(); const handleSubmit = (values: FormikValues) => { setValue(values); }; const firstUpdate = React.useRef(true); React.useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; } else { snackbar.success( <pre style={{fontSize: '14px', margin: 0}}> {JSON.stringify(value, null, 2)} </pre> ); } }, [snackbar, value]); return ( <> <SQForm initialValues={initialValues} validationSchema={validationSchema} muiGridProps={{wrap: 'nowrap', ...muiGridProps}} onSubmit={handleSubmit} > {children} {showSubmit && ( <Grid item={true} sm={2} style={{alignSelf: 'center'}}> <SQFormButton>Submit</SQFormButton> </Grid> )} </SQForm> <Snackbar snackbarState={snackbarState} closeSnackBar={closeSnackBar} /> </> ); }