From 09fd02ddec9c2a545c203554a28cb636d59234c4 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 17 Aug 2020 16:44:40 +0200 Subject: [PATCH] Update checkboxes to newest design --- src/components/Checkbox/Checkbox.tsx | 131 ++---------------- src/components/TableHead/TableHead.tsx | 22 +-- src/icons/Checkbox.tsx | 15 +- src/icons/CheckboxChecked.tsx | 17 +++ src/icons/CheckboxIndeterminate.tsx | 19 +++ src/misc.ts | 4 +- .../ProductExportDialogInfo.tsx | 3 +- src/theme.ts | 9 +- 8 files changed, 69 insertions(+), 151 deletions(-) create mode 100644 src/icons/CheckboxChecked.tsx create mode 100644 src/icons/CheckboxIndeterminate.tsx diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 529aef513..772800f6b 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,136 +1,25 @@ -import ButtonBase from "@material-ui/core/ButtonBase"; -import { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox"; -import { makeStyles } from "@material-ui/core/styles"; -import { fade } from "@material-ui/core/styles/colorManipulator"; -import classNames from "classnames"; +import MuiCheckbox, { + CheckboxProps as MuiCheckboxProps +} from "@material-ui/core/Checkbox"; import React from "react"; export type CheckboxProps = Omit< MuiCheckboxProps, - | "checkedIcon" - | "color" - | "icon" - | "indeterminateIcon" - | "classes" - | "onChange" - | "onClick" + "checkedIcon" | "color" | "icon" | "indeterminateIcon" | "classes" | "onClick" > & { disableClickPropagation?: boolean; - onChange?: (event: React.ChangeEvent) => void; }; -const useStyles = makeStyles( - theme => ({ - box: { - "&$checked": { - "&:before": { - background: theme.palette.primary.main, - color: theme.palette.background.paper, - content: '"\\2713"', - fontWeight: "bold", - textAlign: "center" - }, - borderColor: theme.palette.primary.main - }, - "&$disabled": { - borderColor: theme.palette.grey[200] - }, - "&$indeterminate": { - "&:before": { - background: theme.palette.primary.main, - height: 2, - top: 5 - }, - borderColor: theme.palette.primary.main - }, - "&:before": { - background: "rgba(0, 0, 0, 0)", - content: '""', - height: 14, - left: -1, - position: "absolute", - top: -1, - transition: theme.transitions.duration.short + "ms", - width: 14 - }, - - WebkitAppearance: "none", - border: `1px solid ${theme.palette.action.active}`, - boxSizing: "border-box", - cursor: "pointer", - height: 14, - outline: "0", - position: "relative", - userSelect: "none", - width: 14 - }, - checked: {}, - disabled: {}, - indeterminate: {}, - root: { - "&:hover": { - background: fade(theme.palette.primary.main, 0.1) - }, - alignSelf: "start", - borderRadius: "100%", - cursor: "pointer", - display: "flex", - height: 30, - justifyContent: "center", - margin: "5px 9px", - width: 30 - } - }), - { name: "Checkbox" } -); const Checkbox: React.FC = props => { - const { - checked, - className, - - disabled, - disableClickPropagation, - indeterminate, - onChange, - value, - name, - ...rest - } = props; - const classes = useStyles(props); - - const inputRef = React.useRef(null); - const handleClick = React.useCallback( - disableClickPropagation - ? event => { - event.stopPropagation(); - inputRef.current.click(); - } - : () => inputRef.current.click(), - [] - ); + const { disableClickPropagation, ...rest } = props; return ( - - - + onClick={ + disableClickPropagation ? event => event.stopPropagation() : undefined + } + /> ); }; Checkbox.displayName = "Checkbox"; diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx index 1a1d39602..f382fa1c7 100644 --- a/src/components/TableHead/TableHead.tsx +++ b/src/components/TableHead/TableHead.tsx @@ -28,23 +28,6 @@ const useStyles = makeStyles( cell: { padding: 0 }, - checkboxPartialSelect: { - "& input": { - "&:before": { - background: [theme.palette.background.paper, "!important"] as any, - border: `solid 1px ${theme.palette.primary.main}`, - content: "''" - }, - background: theme.palette.background.paper - }, - "&:after": { - background: theme.palette.primary.main, - content: "''", - height: 2, - position: "absolute", - width: 6 - } - }, checkboxSelected: { backgroundColor: fade(theme.palette.primary.main, 0.05) }, @@ -113,10 +96,7 @@ const TableHead: React.FC = props => { })} > selected && selected > 0 - })} + indeterminate={items && items.length > selected && selected > 0} checked={selected === 0 ? false : true} disabled={disabled} onChange={() => toggleAll(items, selected)} diff --git a/src/icons/Checkbox.tsx b/src/icons/Checkbox.tsx index e9ea53fea..174c99378 100644 --- a/src/icons/Checkbox.tsx +++ b/src/icons/Checkbox.tsx @@ -1,11 +1,18 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -const ArrowSort = createSvgIcon( +const Checkbox = createSvgIcon( <> - + , - "ArrowSort" + "Checkbox" ); -export default ArrowSort; +export default Checkbox; diff --git a/src/icons/CheckboxChecked.tsx b/src/icons/CheckboxChecked.tsx new file mode 100644 index 000000000..63170dac3 --- /dev/null +++ b/src/icons/CheckboxChecked.tsx @@ -0,0 +1,17 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const CheckboxChecked = createSvgIcon( + <> + + + , + "CheckboxChecked" +); + +export default CheckboxChecked; diff --git a/src/icons/CheckboxIndeterminate.tsx b/src/icons/CheckboxIndeterminate.tsx new file mode 100644 index 000000000..8079e9b24 --- /dev/null +++ b/src/icons/CheckboxIndeterminate.tsx @@ -0,0 +1,19 @@ +import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; +import React from "react"; + +const CheckboxIndeterminate = createSvgIcon( + <> + + + , + "CheckboxIndeterminate" +); + +export default CheckboxIndeterminate; diff --git a/src/misc.ts b/src/misc.ts index 933fcc916..6ab1a53d5 100644 --- a/src/misc.ts +++ b/src/misc.ts @@ -306,10 +306,10 @@ export function createHref(url: string) { interface AnyEvent { stopPropagation: () => void; } -export function stopPropagation(cb: () => void) { +export function stopPropagation(cb: (event?: AnyEvent) => void) { return (event: AnyEvent) => { event.stopPropagation(); - cb(); + cb(event); }; } diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx index 23e60815e..02654101f 100644 --- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx +++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx @@ -1,11 +1,11 @@ import Button from "@material-ui/core/Button"; -import Checkbox from "@material-ui/core/Checkbox"; import CircularProgress from "@material-ui/core/CircularProgress"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import makeStyles from "@material-ui/core/styles/makeStyles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import Accordion, { AccordionProps } from "@saleor/components/Accordion"; +import Checkbox from "@saleor/components/Checkbox"; import Chip from "@saleor/components/Chip"; import Hr from "@saleor/components/Hr"; import { MultiAutocompleteChoiceType } from "@saleor/components/MultiAutocompleteSelectField"; @@ -85,7 +85,6 @@ const Option: React.FC<{ diff --git a/src/theme.ts b/src/theme.ts index 78398b8f6..7c1b87451 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -4,8 +4,12 @@ import { createMuiTheme, Theme } from "@material-ui/core/styles"; import { darken, fade } from "@material-ui/core/styles/colorManipulator"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; +import { createElement } from "react"; import { IThemeColors } from "./components/Theme/themes"; +import CheckboxIcon from "./icons/Checkbox"; +import CheckboxCheckedIcon from "./icons/CheckboxChecked"; +import CheckboxIndeterminateIcon from "./icons/CheckboxIndeterminate"; const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) => [ @@ -565,5 +569,8 @@ Typography.defaultProps = { }; Checkbox.defaultProps = { - color: "primary" + checkedIcon: createElement(CheckboxCheckedIcon), + color: "primary", + icon: createElement(CheckboxIcon), + indeterminateIcon: createElement(CheckboxIndeterminateIcon) };