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