102 lines
2.0 KiB
JavaScript
102 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import FormErrors from 'components/FormItems/formErrors';
|
|
import { FastField } from 'formik';
|
|
|
|
export const SwitchFormItemNotFast = (props) => {
|
|
const {
|
|
name,
|
|
form,
|
|
hint,
|
|
size,
|
|
inputProps,
|
|
errorMessage,
|
|
required,
|
|
} = props;
|
|
|
|
const { label } = props.schema[name];
|
|
|
|
const sizeLabelClassName =
|
|
{
|
|
small: 'col-form-label-sm',
|
|
large: 'col-form-label-lg',
|
|
}[size] || '';
|
|
|
|
return (
|
|
<div className="form-group d-flex align-items-baseline">
|
|
<div>
|
|
<input
|
|
type="checkbox"
|
|
id={name}
|
|
name={name}
|
|
onChange={(event) => {
|
|
form.setFieldValue(
|
|
name,
|
|
event.target.checked,
|
|
);
|
|
form.setFieldTouched(name);
|
|
}}
|
|
checked={!!form.values[name]}
|
|
{...inputProps}
|
|
/>
|
|
|
|
<label
|
|
htmlFor={name}
|
|
>
|
|
 
|
|
</label>
|
|
</div>
|
|
|
|
{!!label && (
|
|
<label
|
|
className={`col-form-label ${
|
|
required ? 'required' : null
|
|
} ${sizeLabelClassName}`}
|
|
htmlFor={name}
|
|
>
|
|
{label}
|
|
</label>
|
|
)}
|
|
|
|
<div className="invalid-feedback">
|
|
{FormErrors.displayableError(
|
|
form,
|
|
name,
|
|
errorMessage,
|
|
)}
|
|
</div>
|
|
|
|
{!!hint && (
|
|
<small className="form-text text-muted">
|
|
{hint}
|
|
</small>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
SwitchFormItemNotFast.defaultProps = {};
|
|
|
|
SwitchFormItemNotFast.propTypes = {
|
|
form: PropTypes.object.isRequired,
|
|
name: PropTypes.string.isRequired,
|
|
required: PropTypes.bool,
|
|
hint: PropTypes.string,
|
|
size: PropTypes.string,
|
|
errorMessage: PropTypes.string,
|
|
inputProps: PropTypes.object,
|
|
};
|
|
|
|
const SwitchFormItem = (props) => (
|
|
<FastField name={props.name}>
|
|
{({ form }) => (
|
|
<SwitchFormItemNotFast
|
|
{...props}
|
|
form={form}
|
|
/>
|
|
)}
|
|
</FastField>
|
|
);
|
|
|
|
export default SwitchFormItem;
|