163 lines
5.3 KiB
TypeScript
163 lines
5.3 KiB
TypeScript
import {
|
|
mdiAccount,
|
|
mdiBallotOutline,
|
|
mdiGithub,
|
|
mdiMail,
|
|
mdiUpload,
|
|
} from '@mdi/js';
|
|
import { Field, Form, Formik } from 'formik';
|
|
import Head from 'next/head';
|
|
import { ReactElement } from 'react';
|
|
import BaseButton from '../components/BaseButton';
|
|
import BaseButtons from '../components/BaseButtons';
|
|
import BaseDivider from '../components/BaseDivider';
|
|
import CardBox from '../components/CardBox';
|
|
import FormCheckRadio from '../components/FormCheckRadio';
|
|
import FormCheckRadioGroup from '../components/FormCheckRadioGroup';
|
|
import FormField from '../components/FormField';
|
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
|
import SectionMain from '../components/SectionMain';
|
|
import SectionTitle from '../components/SectionTitle';
|
|
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
|
|
import { getPageTitle } from '../config';
|
|
|
|
const FormsPage = () => {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('Forms')}</title>
|
|
</Head>
|
|
|
|
<SectionMain>
|
|
<SectionTitleLineWithButton
|
|
icon={mdiBallotOutline}
|
|
title='Formik forms example'
|
|
main
|
|
>
|
|
{''}
|
|
</SectionTitleLineWithButton>
|
|
|
|
<CardBox>
|
|
<Formik
|
|
initialValues={{
|
|
fullname: 'John Doe',
|
|
email: 'john.doe@example.com',
|
|
phone: '',
|
|
color: 'green',
|
|
textarea: 'Hello',
|
|
}}
|
|
onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
|
|
>
|
|
<Form>
|
|
<FormField
|
|
label='Grouped with icons'
|
|
icons={[mdiAccount, mdiMail]}
|
|
>
|
|
<Field name='fullname' placeholder='Full name' />
|
|
<Field type='email' name='email' placeholder='Email' />
|
|
</FormField>
|
|
|
|
<FormField
|
|
label='With help line and labelFor'
|
|
labelFor='phone'
|
|
help='Help line comes here'
|
|
>
|
|
<Field name='phone' placeholder='Phone' id='phone' />
|
|
</FormField>
|
|
|
|
<FormField label='Dropdown' labelFor='color'>
|
|
<Field name='color' id='color' component='select'>
|
|
<option value='red'>Red</option>
|
|
<option value='green'>Green</option>
|
|
<option value='blue'>Blue</option>
|
|
</Field>
|
|
</FormField>
|
|
|
|
<BaseDivider />
|
|
|
|
<FormField label='Textarea' hasTextareaHeight>
|
|
<Field
|
|
name='textarea'
|
|
as='textarea'
|
|
placeholder='Your text here'
|
|
/>
|
|
</FormField>
|
|
|
|
<BaseDivider />
|
|
|
|
<BaseButtons>
|
|
<BaseButton type='submit' color='info' label='Submit' />
|
|
<BaseButton type='reset' color='info' outline label='Reset' />
|
|
</BaseButtons>
|
|
</Form>
|
|
</Formik>
|
|
</CardBox>
|
|
</SectionMain>
|
|
|
|
<SectionTitle>Custom elements</SectionTitle>
|
|
|
|
<SectionMain>
|
|
<CardBox>
|
|
<Formik
|
|
initialValues={{
|
|
checkboxes: ['lorem'],
|
|
switches: ['lorem'],
|
|
radio: 'lorem',
|
|
}}
|
|
onSubmit={() => null}
|
|
>
|
|
<Form>
|
|
<FormField label='Checkbox'>
|
|
<FormCheckRadioGroup>
|
|
<FormCheckRadio type='checkbox' label='Lorem'>
|
|
<Field type='checkbox' name='checkboxes' value='lorem' />
|
|
</FormCheckRadio>
|
|
<FormCheckRadio type='checkbox' label='Ipsum'>
|
|
<Field type='checkbox' name='checkboxes' value='ipsum' />
|
|
</FormCheckRadio>
|
|
<FormCheckRadio type='checkbox' label='Dolore'>
|
|
<Field type='checkbox' name='checkboxes' value='dolore' />
|
|
</FormCheckRadio>
|
|
</FormCheckRadioGroup>
|
|
</FormField>
|
|
|
|
<BaseDivider />
|
|
|
|
<FormField label='Radio'>
|
|
<FormCheckRadioGroup>
|
|
<FormCheckRadio type='radio' label='Lorem'>
|
|
<Field type='radio' name='radio' value='lorem' />
|
|
</FormCheckRadio>
|
|
<FormCheckRadio type='radio' label='Ipsum'>
|
|
<Field type='radio' name='radio' value='ipsum' />
|
|
</FormCheckRadio>
|
|
</FormCheckRadioGroup>
|
|
</FormField>
|
|
|
|
<BaseDivider />
|
|
|
|
<FormField label='Switch'>
|
|
<FormCheckRadioGroup>
|
|
<FormCheckRadio type='switch' label='Lorem'>
|
|
<Field type='checkbox' name='switches' value='lorem' />
|
|
</FormCheckRadio>
|
|
<FormCheckRadio type='switch' label='Ipsum'>
|
|
<Field type='checkbox' name='switches' value='ipsum' />
|
|
</FormCheckRadio>
|
|
</FormCheckRadioGroup>
|
|
</FormField>
|
|
</Form>
|
|
</Formik>
|
|
<BaseDivider />
|
|
</CardBox>
|
|
</SectionMain>
|
|
</>
|
|
);
|
|
};
|
|
|
|
FormsPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
|
};
|
|
|
|
export default FormsPage;
|