saleor-dashboard/src/components/ControlledCheckbox.tsx
Michał Droń 06f0697438
Fix partially cut checkboxes in channel dialogs (#1560) (#1613)
* wip logic for indeterminate icon

* wip remove unused imports

* fix cutted off checkbox ripples

* refactor & cleanup
2021-11-22 12:57:32 +01:00

42 lines
938 B
TypeScript

import { Checkbox, FormControlLabel } from "@material-ui/core";
import React from "react";
interface ControlledCheckboxProps {
className?: string;
name: string;
label?: React.ReactNode;
checked: boolean;
indeterminate?: boolean;
disabled?: boolean;
checkedIcon?: React.ReactNode;
onChange(event: any);
}
export const ControlledCheckbox: React.FC<ControlledCheckboxProps> = ({
checked,
disabled,
name,
label,
onChange,
checkedIcon,
indeterminate,
...props
}) => (
<FormControlLabel
disabled={disabled}
control={
<Checkbox
checkedIcon={checkedIcon}
checked={!!checked}
indeterminate={indeterminate}
disabled={disabled}
name={name}
onChange={() => onChange({ target: { name, value: !checked } })}
/>
}
label={label}
{...props}
/>
);
ControlledCheckbox.displayName = "ControlledCheckbox";
export default ControlledCheckbox;