2020-08-22 20:03:25 +03:00
|
|
|
import React, { ChangeEvent, FC } from 'react';
|
2020-07-14 17:12:14 +03:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import { v4 as uuid } from 'uuid';
|
2020-08-22 20:03:25 +03:00
|
|
|
import { identity } from 'ramda';
|
2020-07-14 17:12:14 +03:00
|
|
|
|
2020-08-22 20:03:25 +03:00
|
|
|
export interface BooleanControlProps {
|
|
|
|
checked?: boolean;
|
|
|
|
onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
|
|
|
|
className?: string;
|
|
|
|
}
|
2020-07-14 17:12:14 +03:00
|
|
|
|
2020-08-22 20:03:25 +03:00
|
|
|
interface BooleanControlWithTypeProps extends BooleanControlProps {
|
|
|
|
type: 'switch' | 'checkbox';
|
|
|
|
}
|
2020-07-14 17:12:14 +03:00
|
|
|
|
2020-08-22 20:03:25 +03:00
|
|
|
const BooleanControl: FC<BooleanControlWithTypeProps> = (
|
|
|
|
{ checked = false, onChange = identity, className, children, type },
|
|
|
|
) => {
|
2020-07-14 17:12:14 +03:00
|
|
|
const id = uuid();
|
2020-08-22 20:03:25 +03:00
|
|
|
const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
|
2020-07-14 17:12:14 +03:00
|
|
|
const typeClasses = {
|
|
|
|
'custom-switch': type === 'switch',
|
|
|
|
'custom-checkbox': type === 'checkbox',
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<span className={classNames('custom-control', typeClasses, className)} style={{ display: 'inline' }}>
|
|
|
|
<input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
|
|
|
|
<label className="custom-control-label" htmlFor={id}>{children}</label>
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default BooleanControl;
|