interface IFormikErrorScrollToTopProps {
    /**
     * The offset above the scrolled to element, to add even more scroll
     * Default : 130px
     */
    topElementOffset: number;
    /**
     * allows the user of the code to ovveride with their own error choosing logic,
     * Default: gets highest visible error element.
     * @param errors
     */
    getElement: (...errors: string[]) => HTMLElement;
    /**
     * What to do with the element?
     * default action is to just element.focus()
     * @param element
     */
    onFocusedElement: (element: HTMLElement) => void;
    /**
     * The delay used before the logic is activated, to scroll not instantly.
     * Default: 500 ms
     */
    onFocusedDelay: number;
    /**
     * On what condition to trigger the scroll logic?
     * Default: isSubmitting && !isValidating
     * @param errors
     * @param isSubmitting
     * @param isValidating
     */
    validationTriggerCondition: (errors: any, isSubmitting: boolean, isValidating: boolean) => boolean;

}

import * as React from 'react';
import FormikErrorScrollToTop from 'formik-top-error-focus';

const formikExampleForm = (props) => {
    return (
        <Formik
            initialValues={{
                a: undefined,
                b: undefined,
                c: undefined,
            }}
            validationSchema={
                Yup.object({
                    a: Yup.string()
                        .max(15, 'Must be 15 characters or less')
                        .required('Required'),
                    b: Yup.string()
                        .max(20, 'Must be 20 characters or less')
                        .required('Required'),
                    c: Yup.string().email('Invalid email address').required('Required'),
                })
            }
            onSubmit={async (values, {setSubmitting}) => {
                setSubmitting(false);
            }}
            initialTouched={objectArrayTools(props.ticketDetails).map(() => true).toNormalObject()}
        >
            {({submitForm, isSubmitting, setFieldValue, values, touched, errors, submitCount}) => (
                <Form translate={null}>
                    <Field name="a" type="text"/>
                    <Field name="b" type="text"/>
                    <Field name="c" type="text"/>
                    <Button
                        className="nextButton"
                        variant="contained"
                        color="primary"
                        disabled={isSubmitting}
                        onClick={submitForm}
                        ref={props.setSubmitRef}
                    >
                        submit
                    </Button>
                    <FormikErrorScrollToTop/>
                </Form>
            )}
        </Formik>
    );
};

export default formikExampleForm;