79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { boolean, object, ObjectSchema, string } from 'yup';
|
|
|
|
import { Button } from '@procyon/components/Button';
|
|
import { Grid, GridSizeEnum } from '@procyon/components/Grid';
|
|
import { GridCol } from '@procyon/components/GridCol';
|
|
import { BuildingStoreIcon } from '@procyon/components/Icons/BuildingStore';
|
|
import { Field } from '@procyon/forms/Field';
|
|
import { Form } from '@procyon/forms/Form';
|
|
import { FormSubmit } from '@procyon/forms/types';
|
|
import useForm from '@procyon/forms/useForm';
|
|
import { StatusEnum } from '@procyon/types/enums';
|
|
import { Option } from '@procyon/types/options';
|
|
|
|
type FormData = {
|
|
checkbox?: boolean | null;
|
|
datePicker: string;
|
|
radiobutton: Option['code'];
|
|
selectBox: string;
|
|
text: string;
|
|
textIcon: string;
|
|
timePicker: string;
|
|
};
|
|
|
|
const radioOptions = [
|
|
{ name: 'Field 1', code: 'field1' },
|
|
{ name: 'Field 2', code: 'field2' }
|
|
];
|
|
|
|
const selectBoxOptions = [
|
|
{ name: 'Option 1', code: 'option1' },
|
|
{ name: 'Option 2', code: 'option2' }
|
|
];
|
|
|
|
const { md } = GridSizeEnum;
|
|
|
|
const ExampleForm = () => {
|
|
const schema: ObjectSchema<FormData> = object({
|
|
text: string().required(),
|
|
textIcon: string().required(),
|
|
checkbox: boolean().notRequired(),
|
|
radiobutton: string().required(),
|
|
selectBox: string().required(),
|
|
datePicker: string().required(),
|
|
timePicker: string().required()
|
|
});
|
|
|
|
const formMethods = useForm<FormData>({ schema });
|
|
const { formState } = formMethods;
|
|
|
|
const onSubmit: FormSubmit<FormData> = useCallback(
|
|
(data) => {
|
|
const { isDirty, dirtyFields } = formState;
|
|
console.info(data, isDirty, dirtyFields);
|
|
},
|
|
[formState.dirtyFields, formState.isDirty]
|
|
);
|
|
|
|
return (
|
|
<Form<FormData> onSubmit={onSubmit} methods={formMethods}>
|
|
<Grid cols={{ [md]: 3 }}>
|
|
<GridCol colSpan={{ [md]: 3 }}>
|
|
<Field component="TEXT" name="text" label="Input" />
|
|
<Field component="TEXT" name="textIcon" label={<BuildingStoreIcon />} />
|
|
<Field component="CHECK" name="checkbox" label="Checkbox" description="Do you Agree?" />
|
|
<Field component="RADIO" name="radiobutton" label="Radio Button" horizontal options={radioOptions} />
|
|
<Field component="SELECT" name="selectBox" label="SelectBox" options={selectBoxOptions} />
|
|
<Field component="DATE" name="datePicker" label="DatePicker" />
|
|
<Field component="TIME" name="timePicker" label="TimePicker" />
|
|
</GridCol>
|
|
<GridCol start={{ [md]: 2 }} end={{ [md]: 2 }}>
|
|
<Button type="submit" label="Send" status={StatusEnum.success} />
|
|
</GridCol>
|
|
</Grid>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default ExampleForm;
|