@bento-core/facet-filter 1.0.1-icdc.2 → 1.0.1-icdc.4

package/dist/FacetFilterView.js

@@ -17,7 +17,8 @@ const BentoFacetFilter = _ref => {
   let {
     sideBarSections,
     CustomFacetSection,
-    CustomFacetView
+    CustomFacetView,
+    enableClearSection
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sideBarSections.map((section, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Divider, {
     variant: "middle",
@@ -27,7 +28,8 @@ const BentoFacetFilter = _ref => {
     CustomSection: CustomFacetSection
   }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
     facet: facet,
-    CustomView: CustomFacetView
+    CustomView: CustomFacetView,
+    enableClearSection: enableClearSection
   }))))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);

package/dist/components/facet/FacetStyle.js

@@ -20,6 +20,13 @@ var _default = () => ({
       position: 'initial'
     }
   },
+  subSectionSummaryTextWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingRight: '15px'
+  },
   subSectionSummaryText: {
     marginLeft: '10px',
     lineHeight: 0,

package/dist/components/facet/FacetView.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _core = require("@material-ui/core");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _Refresh = _interopRequireDefault(require("@material-ui/icons/Refresh"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 var _AccordionSummaryView = _interopRequireDefault(require("../summary/AccordionSummaryView"));
 var _Types = require("../inputs/Types");
 var _FacetStyle = _interopRequireDefault(require("./FacetStyle"));
@@ -25,6 +27,7 @@ const FacetView = _ref => {
   let {
     classes,
     facet,
+    enableClearSection,
     onClearFacetSection,
     onClearSliderSection,
     CustomView,
@@ -35,8 +38,8 @@ const FacetView = _ref => {
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-  * expand section incase of active local search
-  */
+   * expand section incase of active local search
+   */
   (0, _react.useEffect)(() => {
     if (autoComplete && autoComplete.length > 0 || upload && upload.length > 0) {
       setExpand(true);
@@ -75,14 +78,25 @@ const FacetView = _ref => {
     },
     id: facet.section
   }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
+    clearFacetSectionValues: onClearSection,
+    hasSelections: selectedItems.length,
     facet: facet,
     facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)
-  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, /*#__PURE__*/_react.default.createElement("div", {
+  }) : /*#__PURE__*/_react.default.createElement(_AccordionSummaryView.default, null, !enableClearSection ? /*#__PURE__*/_react.default.createElement("div", {
+    id: "filterGroup_ ".concat(facet.datafield, "\n                ").concat(facet.label),
+    className: (0, _clsx.default)(classes.subSectionSummaryText, {
+      ["activeFacet".concat(facet.section)]: isActiveFacet
+    })
+  }, facet.label) : /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.subSectionSummaryTextWrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
     id: "filterGroup_ ".concat(facet.datafield, "\n                ").concat(facet.label),
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label), selectedItems.length ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: onClearSection
+  }, /*#__PURE__*/_react.default.createElement(_Refresh.default, null)) : null)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length === 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: classes.NonSortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.NonSortGroupItem

package/dist/components/facet/ReduxFacetView.js

@@ -19,6 +19,7 @@ const mapStateToProps = state => {
   };
 };
 const mapDispatchToProps = dispatch => ({
+  onToggle: facet => dispatch((0, _Actions.toggleCheckBox)(facet)),
   onClearFacetSection: facet => {
     dispatch((0, _Actions.clearFacetSection)(facet));
   },

package/dist/components/inputs/slider/SliderStyle.js

@@ -119,7 +119,6 @@ var _default = () => ({
   },
   lowerUpperBound: {
     height: '15px'
-  },
-  minMaxInputs: {}
+  }
 });
 exports.default = _default;

package/dist/components/summary/AccordionSummaryView.js

@@ -11,6 +11,7 @@ var _AccordionSummaryStyle = _interopRequireDefault(require("./AccordionSummaryS
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Summary = (0, _core.withStyles)({
   root: {
+    width: '307px',
     marginBottom: -1,
     minHeight: 48,
     paddingLeft: 14,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-icdc.2",
+  "version": "1.0.1-icdc.4",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/FacetFilterView.js

@@ -1,10 +1,7 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable padded-blocks */
 import React from 'react';
-import {
-  Divider,
-  withStyles,
-} from '@material-ui/core';
+import { Divider, withStyles } from '@material-ui/core';
 import styles from './FacetFilterStyle';
 import FacetSectionView from './components/section/FacetSectionView';
 import FacetView from './components/facet/ReduxFacetView';
@@ -13,30 +10,27 @@ const BentoFacetFilter = ({
   sideBarSections,
   CustomFacetSection,
   CustomFacetView,
+  enableClearSection,
 }) => {
   return (
     <>
-      {
-        sideBarSections.map((section, index) => (
-          <>
-            <Divider
-              variant="middle"
-              className={`divider${index}`}
-            />
-            <FacetSectionView
-              section={section}
-              CustomSection={CustomFacetSection}
-            >
-              {section.items.map((facet) => (
-                <FacetView
-                  facet={facet}
-                  CustomView={CustomFacetView}
-                />
-              ))}
-            </FacetSectionView>
-          </>
-        ))
-      }
+      {sideBarSections.map((section, index) => (
+        <>
+          <Divider variant="middle" className={`divider${index}`} />
+          <FacetSectionView
+            section={section}
+            CustomSection={CustomFacetSection}
+          >
+            {section.items.map((facet) => (
+              <FacetView
+                facet={facet}
+                CustomView={CustomFacetView}
+                enableClearSection={enableClearSection}
+              />
+            ))}
+          </FacetSectionView>
+        </>
+      ))}
     </>
   );
 };

package/src/components/facet/FacetStyle.js

@@ -14,6 +14,13 @@ export default () => ({
       position: 'initial',
     },
   },
+  subSectionSummaryTextWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingRight: '15px',
+  },
   subSectionSummaryText: {
     marginLeft: '10px',
     lineHeight: 0,

package/src/components/facet/FacetView.js

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import {
-  Accordion,
-  List,
-  withStyles,
-  Icon,
+  Accordion, List, withStyles, Icon,
 } from '@material-ui/core';
 import clsx from 'clsx';
+import RefreshIcon from '@material-ui/icons/Refresh';
+import IconButton from '@material-ui/core/IconButton';
 import CustomAccordionSummary from '../summary/AccordionSummaryView';
 import { InputTypes } from '../inputs/Types';
 import styles from './FacetStyle';
@@ -16,6 +15,7 @@ import clearIcon from './assets/clearIcon.svg';
 const FacetView = ({
   classes,
   facet,
+  enableClearSection,
   onClearFacetSection,
   onClearSliderSection,
   CustomView,
@@ -26,11 +26,13 @@ const FacetView = ({
   const onExpandFacet = () => setExpand(!expand);
 
   /**
-  * expand section incase of active local search
-  */
+   * expand section incase of active local search
+   */
   useEffect(() => {
-    if ((autoComplete && autoComplete.length > 0)
-      || (upload && upload.length > 0)) {
+    if (
+      (autoComplete && autoComplete.length > 0)
+      || (upload && upload.length > 0)
+    ) {
       setExpand(true);
     }
   }, [autoComplete, upload]);
@@ -57,6 +59,7 @@ const FacetView = ({
   displayFacet.facetValues = selectedItems;
   const isActiveFacet = [...selectedItems].length > 0;
   const limitCheckBoxCount = facet?.showCheckboxCount || 5;
+
   return (
     <>
       <Accordion
@@ -68,119 +71,103 @@ const FacetView = ({
         }}
         id={facet.section}
       >
-        { CustomView ? (
+        {CustomView ? (
           <CustomView
+            clearFacetSectionValues={onClearSection}
+            hasSelections={selectedItems.length}
             facet={facet}
             facetClasses={
-            isActiveFacet ? `activeFacet${facet.section}`
-              : `inactiveFacet${facet.section}`
+              isActiveFacet
+                ? `activeFacet${facet.section}`
+                : `inactiveFacet${facet.section}`
             }
           />
         ) : (
           <CustomAccordionSummary>
-            <div
-              id={
-                `filterGroup_ ${facet.datafield}
-                ${facet.label}`
-              }
-              className={clsx(classes.subSectionSummaryText, {
-                [`activeFacet${facet.section}`]: isActiveFacet,
-              })}
-            >
-              {facet.label}
-            </div>
+            {!enableClearSection ? (
+              <div
+                id={`filterGroup_ ${facet.datafield}
+                ${facet.label}`}
+                className={clsx(classes.subSectionSummaryText, {
+                  [`activeFacet${facet.section}`]: isActiveFacet,
+                })}
+              >
+                {facet.label}
+              </div>
+            ) : (
+              <div className={classes.subSectionSummaryTextWrapper}>
+                <div
+                  id={`filterGroup_ ${facet.datafield}
+                ${facet.label}`}
+                  className={clsx(classes.subSectionSummaryText, {
+                    [`activeFacet${facet.section}`]: isActiveFacet,
+                  })}
+                >
+                  {facet.label}
+                </div>
+                {selectedItems.length ? (
+                  <IconButton onClick={onClearSection}>
+                    <RefreshIcon />
+                  </IconButton>
+                ) : null}
+              </div>
+            )}
           </CustomAccordionSummary>
         )}
-        {
-          (facet.type === InputTypes.SLIDER || facetValues.length === 0)
-          && (
+        {(facet.type === InputTypes.SLIDER || facetValues.length === 0) && (
           <div className={classes.NonSortGroup}>
-            <span
-              className={classes.NonSortGroupItem}
-            >
+            <span className={classes.NonSortGroupItem}>
               No data for this field
             </span>
           </div>
-          )
-        }
-        {
-          (facet.type === InputTypes.SLIDER || facetValues.length > 0)
-          && (
+        )}
+        {(facet.type === InputTypes.SLIDER || facetValues.length > 0) && (
           <div className={classes.sortGroup}>
             <span className={classes.sortGroupIcon}>
-              <Icon
-                style={{ fontSize: 10 }}
-                onClick={onClearSection}
-              >
-                <img
-                  src={clearIcon}
-                  height={12}
-                  width={12}
-                  alt="clear-icon"
-                />
+              <Icon style={{ fontSize: 10 }} onClick={onClearSection}>
+                <img src={clearIcon} height={12} width={12} alt="clear-icon" />
               </Icon>
             </span>
-            { (facet.type === InputTypes.CHECKBOX && facetValues.length > 0)
-          && (
-          <>
-            <span
-              className={
-                    clsx(classes.sortGroupItem, {
-                      [classes.highlight]: sortBy === sortType.ALPHABET,
-                    })
-                  }
-              onClick={() => {
-                onSortFacet(sortType.ALPHABET);
-              }}
-            >
-              Sort alphabetically
-            </span>
-            <span
-              className={
-                    clsx(classes.sortGroupItemCounts, {
-                      [classes.highlight]: sortBy === sortType.NUMERIC,
-                    })
-                  }
-              onClick={() => {
-                onSortFacet(sortType.NUMERIC);
-              }}
-            >
-              Sort by count
-            </span>
-          </>
-          )}
+            {facet.type === InputTypes.CHECKBOX && facetValues.length > 0 && (
+              <>
+                <span
+                  className={clsx(classes.sortGroupItem, {
+                    [classes.highlight]: sortBy === sortType.ALPHABET,
+                  })}
+                  onClick={() => {
+                    onSortFacet(sortType.ALPHABET);
+                  }}
+                >
+                  Sort alphabetically
+                </span>
+                <span
+                  className={clsx(classes.sortGroupItemCounts, {
+                    [classes.highlight]: sortBy === sortType.NUMERIC,
+                  })}
+                  onClick={() => {
+                    onSortFacet(sortType.NUMERIC);
+                  }}
+                >
+                  Sort by count
+                </span>
+              </>
+            )}
           </div>
-          )
-}
-        {(expand)
-          && (
-          <FilterItems
-            facet={facet}
-            sortBy={sortBy}
-          />
-          )}
+        )}
+        {expand && <FilterItems facet={facet} sortBy={sortBy} />}
       </Accordion>
-      {
-        (!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0) && (
-          <>
-            <List id="filter_Items">
-              <FilterItems
-                facet={displayFacet}
-              />
-            </List>
-          </>
-        )
-      }
-      {
-        (!expand && selectedItems.length > limitCheckBoxCount) && (
-          <div
-            className={classes.showMore}
-            onClick={onExpandFacet}
-          >
-            ...expand to see all selections
-          </div>
-        )
-      }
+      {!expand && type === InputTypes.CHECKBOX && selectedItems.length > 0 && (
+        <>
+          <List id="filter_Items">
+            <FilterItems facet={displayFacet} />
+          </List>
+        </>
+      )}
+      {!expand && selectedItems.length > limitCheckBoxCount && (
+        <div className={classes.showMore} onClick={onExpandFacet}>
+          ...expand to see all selections
+        </div>
+      )}
     </>
   );
 };

package/src/components/facet/ReduxFacetView.js

@@ -1,9 +1,13 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { clearFacetSection, clearSliderSection } from '../../store/actions/Actions';
+import {
+  clearFacetSection,
+  clearSliderSection,
+  toggleCheckBox,
+} from '../../store/actions/Actions';
 import FacetView from './FacetView';
 
-const ReduxFacetView = ((props) => <FacetView {...props} />);
+const ReduxFacetView = (props) => <FacetView {...props} />;
 
 const mapStateToProps = (state) => ({
   filterState: state.statusReducer.filterState,
@@ -12,8 +16,13 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  onClearFacetSection: (facet) => { dispatch(clearFacetSection(facet)); },
-  onClearSliderSection: (facet) => { dispatch(clearSliderSection(facet)); },
+  onToggle: (facet) => dispatch(toggleCheckBox(facet)),
+  onClearFacetSection: (facet) => {
+    dispatch(clearFacetSection(facet));
+  },
+  onClearSliderSection: (facet) => {
+    dispatch(clearSliderSection(facet));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxFacetView);

package/src/components/inputs/checkbox/CheckboxView.js

@@ -20,7 +20,8 @@ import {
 } from '@material-ui/core';
 import clsx from 'clsx';
 import {
-  CheckBox as CheckBoxIcon, CheckBoxOutlineBlank as CheckBoxBlankIcon,
+  CheckBox as CheckBoxIcon,
+  CheckBoxOutlineBlank as CheckBoxBlankIcon,
 } from '@material-ui/icons';
 import styles from './CheckboxStyle';
 
@@ -31,12 +32,7 @@ const CheckBoxView = ({
   onToggle,
   facet,
 }) => {
-  const {
-    isChecked = false,
-    index,
-    section,
-    tooltip,
-  } = checkboxItem;
+  const { isChecked = false, index, section, tooltip } = checkboxItem;
   const {
     field = 'group',
     count = 'subjects',
@@ -65,9 +61,7 @@ const CheckBoxView = ({
         [`${checkedSection}NameChecked`]: isChecked,
       })}
     >
-      <Typography className={classes.checkboxName}>
-        {name}
-      </Typography>
+      <Typography className={classes.checkboxName}>{name}</Typography>
     </Box>
   );
 
@@ -79,7 +73,9 @@ const CheckBoxView = ({
         alignItems="flex-start"
         onClick={handleToggle}
         classes={{ gutters: classes.listItemGutters }}
-        className={clsx({ [`${checkedSection}Checked${indexType}`]: isChecked })}
+        className={clsx({
+          [`${checkedSection}Checked${indexType}`]: isChecked,
+        })}
       >
         <Checkbox
           id={`checkbox_${facet.label}_${name}`}
@@ -91,23 +87,21 @@ const CheckBoxView = ({
           }
           onClick={handleToggle}
           checked={isChecked}
-          checkedIcon={(
+          checkedIcon={
             <CheckBoxIcon
               style={{
                 fontSize: 18,
               }}
               className={`${checkedSection}CheckedIcon`}
             />
-          )}
+          }
           disableRipple
           color="secondary"
           classes={{ root: classes.checkboxRoot }}
         />
-        { tooltip ? (
+        {tooltip ? (
           <Tooltip id={datafield} title={tooltip}>
-            <div className={datafield}>
-              {name}
-            </div>
+            <div className={datafield}>{name}</div>
           </Tooltip>
         ) : (
           <LabelComponent />

package/src/components/inputs/checkbox/ReduxCheckbox.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { toggleCheckBox } from '../../../store/actions/Actions';
 import CheckboxView from './CheckboxView';
 
-const ReduxCheckbox = ((props) => <CheckboxView {...props} />);
+const ReduxCheckbox = (props) => <CheckboxView {...props} />;
 
 const mapStateToProps = (state) => ({
   filterState: state.statusReducer.filterState,

package/src/components/inputs/slider/SliderStyle.js

@@ -114,6 +114,4 @@ export default () => ({
   lowerUpperBound: {
     height: '15px',
   },
-  minMaxInputs: {
-  },
 });

package/src/components/summary/AccordionSummaryView.js

@@ -1,15 +1,11 @@
 import React from 'react';
-import {
-  AccordionSummary,
-  withStyles,
-} from '@material-ui/core';
-import {
-  ExpandMore as ExpandMoreIcon,
-} from '@material-ui/icons';
+import { AccordionSummary, withStyles } from '@material-ui/core';
+import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
 import style from './AccordionSummaryStyle';
 
 const Summary = withStyles({
   root: {
+    width: '307px',
     marginBottom: -1,
     minHeight: 48,
     paddingLeft: 14,
@@ -27,10 +23,7 @@ const Summary = withStyles({
   expanded: {},
 })(AccordionSummary);
 
-const CustomAccordionSummary = ({
-  children,
-  classes,
-}) => (
+const CustomAccordionSummary = ({ children, classes }) => (
   <Summary
     expandIcon={(
       <ExpandMoreIcon