From ee51e0caf2b55b8094e51203fbe840444eb218c9 Mon Sep 17 00:00:00 2001
From: Mike Murray <hellomikemurray@gmail.com>
Date: Wed, 2 Oct 2019 16:28:21 -0700
Subject: [PATCH] feat: add clear button

Signed-off-by: Mike Murray <hellomikemurray@gmail.com>
---
 .../DataTableFilter/DataTableFilter.js        | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/package/src/components/DataTableFilter/DataTableFilter.js b/package/src/components/DataTableFilter/DataTableFilter.js
index 28fca598..17f8cea9 100644
--- a/package/src/components/DataTableFilter/DataTableFilter.js
+++ b/package/src/components/DataTableFilter/DataTableFilter.js
@@ -109,6 +109,7 @@ const DataTableFilter = React.forwardRef(function DataTableFilter(props, ref) {
             control={<Checkbox />}
             label={label}
             disabled={isDisabled}
+            checked={Array.isArray(value) && value.includes(optionValue)}
           />
         </ListItem>
       );
@@ -117,9 +118,15 @@ const DataTableFilter = React.forwardRef(function DataTableFilter(props, ref) {
     menuItems = (
       <RadioGroup
         onChange={(event) => onSelect(event.target.value)}
-        defaultValue={value}
+        value={value || ""}
         aria-label={title}
       >
+        <FormControlLabel
+          style={{ display: "none" }}
+          key="noneSelected"
+          control={<Radio />}
+          value=""
+        />
         {options.map((option, index) => {
           const {
             label,
@@ -151,9 +158,14 @@ const DataTableFilter = React.forwardRef(function DataTableFilter(props, ref) {
           <Typography>{title}</Typography>
         </ExpansionPanelSummary>
         <ExpansionPanelDetails className={classes.expansionPanelDetails}>
-          <List>
-            {menuItems}
-          </List>
+          <Box>
+            <List>
+              {menuItems}
+            </List>
+            <Button onClick={() => onSelect(null)}>
+              Clear all
+            </Button>
+          </Box>
         </ExpansionPanelDetails>
       </ExpansionPanel>
     );
@@ -189,6 +201,11 @@ const DataTableFilter = React.forwardRef(function DataTableFilter(props, ref) {
           </Box>
         </MenuItem>
         {menuItems}
+        <ListItem key="clear-button">
+          <Button onClick={() => onSelect(null)}>
+            Clear
+          </Button>
+        </ListItem>
       </Menu>
     </Fragment>
   );