box-ui-elements-mlh
Version:
185 lines (177 loc) • 6.76 kB
Markdown
### Examples
```jsx
const { Formik, Form, Field } = require('formik');
const isEqual = require('lodash/isEqual');
const TextInput = require('box-ui-elements/es/components/text-input').TextInputField;
const TextArea = require('box-ui-elements/es/components/text-area').TextAreaField;
const Toggle = require('box-ui-elements/es/components/toggle').ToggleField;
const Checkbox = require('box-ui-elements/es/components/checkbox').CheckboxField;
const RadioGroup = require('box-ui-elements/es/components/radio').RadioGroupField;
const RadioButtonField = require('box-ui-elements/es/components/radio').RadioButtonField;
const RadioButton = require('box-ui-elements/es/components/radio').RadioButton;
const SelectField = require('box-ui-elements/es/components/select-field').SelectField;
const PillSelectorDropdownField = require('box-ui-elements/es/components/pill-selector-dropdown').PillSelectorDropdownField;
const DatalistItem = require('box-ui-elements/es/components/datalist-item').default;
const pillSelectorValidator = option => {
const value = typeof option === 'string' ? option : option.value;
return ['red', 'green', 'blue', 'yellow', 'white', 'black'].includes(value);
};
<Formik
initialValues={{
textinput: 'textinput',
textarea: 'textarea',
toggle: true,
checkbox: true,
radiogroup: 'red',
}}
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 => (
<React.Fragment>
<Form
style={{
display: 'inline-block',
}}>
<Field
name="checkbox"
label="Checkbox Field"
component={Checkbox}
/>
<Field
name="toggle"
label="Toggle Field"
component={Toggle}
/>
<Field
isRequired
label="Text Input Field"
name="textinput"
type="text"
placeholder="Text Input Field"
component={TextInput}
/>
<Field
isRequired
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>
</React.Fragment>
)}
</Formik>
```