box-ui-elements-mlh
Version:
185 lines (174 loc) • 7.6 kB
JavaScript
// @flow
import * as React from 'react';
import { Field, Form, Formik } from 'formik';
import { boolean } from '@storybook/addon-knobs';
import TextInput from '../../text-input/TextInput';
import TextArea from '../../text-area/TextAreaField';
import Toggle from '../../toggle/ToggleField';
import Checkbox from '../../checkbox/CheckboxField';
import SelectField from '../../select-field/SelectField';
import PillSelectorDropdownField from '../../pill-selector-dropdown/PillSelectorDropdownField';
import DatalistItem from '../../datalist-item/DatalistItem';
import { RadioButton, RadioButtonField, RadioGroup } from '../../radio';
import notes from './Formik.stories.md';
export const basic = () => {
const pillSelectorValidator = option => {
const value = typeof option === 'string' ? option : option.value;
return ['red', 'green', 'blue', 'yellow', 'white', 'black'].includes(value);
};
return (
<Formik
initialValues={{
checkbox: true,
pillselector: [],
radiogroup: 'red',
textarea: 'textarea',
textinput: 'textinput',
toggle: true,
}}
onSubmit={() => null}
validate={values => {
const errors = {};
const { textinput, textarea, pillselector } = values;
if (!textinput) {
errors.textinput = 'Required';
}
if (!textarea) {
errors.textarea = 'Required';
}
if (Array.isArray(pillselector) && !pillselector.every(pill => pillSelectorValidator(pill))) {
errors.pillselector = 'Bad colors';
}
return errors;
}}
>
{props => (
<>
<Form
style={{
display: 'inline-block',
}}
>
<Field name="checkbox" label="Checkbox Field" component={Checkbox} />
<Field name="toggle" label="Toggle Field" component={Toggle} />
<Field
isRequired={boolean('isRequired', true)}
label="Text Input Field"
name="textinput"
type="text"
placeholder="Text Input Field"
component={TextInput}
/>
<Field
isRequired={boolean('isRequired', true)}
label="Text Area Field"
name="textarea"
placeholder="Text Area Field"
component={TextArea}
/>
<b>Non-RadioGroup RadioButtons sharing the same name</b>
<br />
<br />
<Field
isSelected={false}
label="Radio Button Field 1"
name="radiobutton"
component={RadioButtonField}
value="radio1"
/>
<Field
isSelected={false}
label="Radio Button Field 2"
name="radiobutton"
component={RadioButtonField}
value="radio2"
/>
<br />
<Field
label="Single Select Field"
name="singleselect"
placeholder="Single Select Field"
options={[
{ displayText: 'Red', value: 'red' },
{ displayText: 'Green', value: 'green' },
{ displayText: 'Blue', value: 'blue' },
]}
component={SelectField}
/>
<br />
<br />
<Field
label="Multi Select Field"
name="multiselect"
placeholder="Multi Select Field"
multiple
options={[
{ displayText: 'Red', value: 'red' },
{ displayText: 'Green', value: 'green' },
{ displayText: 'Blue', value: 'blue' },
]}
component={SelectField}
/>
<br />
<br />
<b>RadioGroup-ed RadioButtons</b>
<br />
<br />
<Field name="radiogroup" component={RadioGroup}>
<RadioButton label="Red" value="red" description="Red color" />
<RadioButton label="Blue" value="blue" description="Blue color" />
</Field>
<br />
<br />
<Field
label="Pill Selector Field"
name="pillselector"
placeholder="Colors"
component={PillSelectorDropdownField}
validator={pillSelectorValidator}
/>
<br />
<br />
<Field
label="Pill Selector Field With Dropdown"
name="pillselectordropdown"
placeholder="Colors"
options={[
{ displayText: 'Red', value: 'red' },
{ displayText: 'Green', value: 'green' },
{ displayText: 'Blue', value: 'blue' },
]}
component={PillSelectorDropdownField}
validator={pillSelectorValidator}
dropdownRenderer={options =>
options.map(option => (
<DatalistItem key={option.value} style={{ color: option.value }}>
{option.displayText}
</DatalistItem>
))
}
/>
</Form>
<pre
style={{
color: '#fff',
background: '#0061D5',
fontSize: '14px',
padding: '.5rem',
float: 'right',
display: 'inline-block',
}}
>
<strong>Formik State</strong> = {JSON.stringify(props, null, 2)}
</pre>
</>
)}
</Formik>
);
};
export default {
title: 'Components|Formik Elements',
parameters: {
notes,
},
};