scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-22 23:27:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

ability to pass formik checkbox label classname

Browse source
This commit is contained in:
Ben Wheeler 2019-08-16 17:13:56 -04:00
parent 5b5ac6a66f
commit a609709f41
1 changed files with 9 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/formik-forms/formik-checkbox.jsx
View file

@ -8,19 +8,16 @@ require('./formik-forms.scss');
require('../forms/row.scss'); require('../forms/row.scss');
const FormikCheckboxSubComponent = ({ const FormikCheckboxSubComponent = ({
className,
field, field,
id, id,
label, label,
labelClassName,
...props ...props
}) => ( }) => (
<div className="checkbox"> <div className="checkbox">
<input <input
checked={field.value} checked={field.value}
className={classNames( className="formik-checkbox"
'formik-checkbox',
className
)}
id={id} id={id}
name={field.name} name={field.name}
type="checkbox" type="checkbox"
@ -32,8 +29,9 @@ const FormikCheckboxSubComponent = ({
{label && ( {label && (
<label <label
className={classNames( className={classNames(
'formik-checkbox-label',
'formik-label', 'formik-label',
'formik-checkbox-label' labelClassName
)} )}
htmlFor={id} htmlFor={id}
> >
@ -44,7 +42,6 @@ const FormikCheckboxSubComponent = ({
); );
FormikCheckboxSubComponent.propTypes = { FormikCheckboxSubComponent.propTypes = {
className: PropTypes.string,
field: PropTypes.shape({ field: PropTypes.shape({
name: PropTypes.string, name: PropTypes.string,
onBlur: PropTypes.function, onBlur: PropTypes.function,
@ -52,31 +49,32 @@ FormikCheckboxSubComponent.propTypes = {
value: PropTypes.bool value: PropTypes.bool
}), }),
id: PropTypes.string, id: PropTypes.string,
label: PropTypes.string label: PropTypes.string,
labelClassName: PropTypes.string
}; };
const FormikCheckbox = ({ const FormikCheckbox = ({
className,
id, id,
label, label,
labelClassName,
name, name,
...props ...props
}) => ( }) => (
<Field <Field
className={className}
component={FormikCheckboxSubComponent} component={FormikCheckboxSubComponent}
id={id} id={id}
label={label} label={label}
labelClassName={labelClassName}
name={name} name={name}
{...props} {...props}
/> />
); );
FormikCheckbox.propTypes = { FormikCheckbox.propTypes = {
className: PropTypes.string,
id: PropTypes.string, id: PropTypes.string,
label: PropTypes.string, label: PropTypes.string,
labelClassName: PropTypes.string,
name: PropTypes.string name: PropTypes.string
}; };