mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
introduce formik select component
This commit is contained in:
parent
07419526cd
commit
3d0da891a9
1 changed files with 62 additions and 0 deletions
62
src/components/formik-forms/formik-select.jsx
Normal file
62
src/components/formik-forms/formik-select.jsx
Normal file
|
@ -0,0 +1,62 @@
|
||||||
|
const classNames = require('classnames');
|
||||||
|
const PropTypes = require('prop-types');
|
||||||
|
const React = require('react');
|
||||||
|
import {Field} from 'formik';
|
||||||
|
|
||||||
|
const ValidationMessage = require('../forms/validation-message.jsx');
|
||||||
|
|
||||||
|
require('../forms/input.scss');
|
||||||
|
require('../forms/row.scss');
|
||||||
|
|
||||||
|
const FormikSelect = ({
|
||||||
|
className,
|
||||||
|
error,
|
||||||
|
options,
|
||||||
|
validationClassName,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const optionsList = options.map((item, index) => (
|
||||||
|
<option
|
||||||
|
key={index}
|
||||||
|
value={item.value}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</option>
|
||||||
|
));
|
||||||
|
return (
|
||||||
|
<div className="col-sm-9 row row-relative">
|
||||||
|
<Field
|
||||||
|
className={classNames(
|
||||||
|
'select',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
component="select"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{optionsList}
|
||||||
|
</Field>
|
||||||
|
{error && (
|
||||||
|
<ValidationMessage
|
||||||
|
className={validationClassName}
|
||||||
|
message={error}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
FormikSelect.propTypes = {
|
||||||
|
className: PropTypes.string,
|
||||||
|
error: PropTypes.string,
|
||||||
|
// expect structure like: [
|
||||||
|
// {value: 'US', label: 'United States'}
|
||||||
|
// {value: 'AG', label: 'Angola'}
|
||||||
|
// ...
|
||||||
|
// ]
|
||||||
|
options: PropTypes.arrayOf(PropTypes.any),
|
||||||
|
validationClassName: PropTypes.string,
|
||||||
|
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = FormikSelect;
|
Loading…
Reference in a new issue