@bento-core/facet-filter 1.0.1-c3dc.7 → 1.0.1-c3dc.8

package/dist/FacetFilterController.js

@@ -61,7 +61,11 @@ const FacetFilterController = props => {
             minLowerBound,
             maxUpperBound
           } = sideBar;
-          sideBar.facetValues = [minLowerBound, maxUpperBound];
+          if (minLowerBound === 0 && maxUpperBound === 0) {
+            sideBar.facetValues = [0, 0];
+          } else {
+            sideBar.facetValues = [minLowerBound, maxUpperBound];
+          }
         }
       });
     }
@@ -126,13 +130,15 @@ const FacetFilterController = props => {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
             if (lowerBound === 0 && upperBound === 0) {
-              updateFacet.filterOut = true;
+              updateFacet.minLowerBound = 0;
+              updateFacet.maxUpperBound = 0;
+              updateFacet.facetValues = [];
             } else {
               updateFacet.minLowerBound = lowerBound;
               updateFacet.maxUpperBound = upperBound;
               updateFacet.facetValues = [lowerBound, upperBound];
-              updateFacet.style = facet.style;
             }
+            updateFacet.style = facet.style;
           }
         }
         if (!updateFacet.filterOut) {

package/dist/components/facet/FacetStyle.js

@@ -55,7 +55,9 @@ var _default = () => ({
     fontFamily: 'Nunito',
     fontSize: '11px',
     marginRight: '12px',
-    marginLeft: '24px'
+    marginLeft: '24px',
+    display: 'flex',
+    alignItems: 'center'
   },
   sortGroupItem: {
     cursor: 'pointer',
@@ -65,8 +67,6 @@ var _default = () => ({
   },
 
   NonSortGroup: {
-    marginBottom: '5px',
-    borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
     paddingLeft: '10px'
   },

package/dist/components/facet/FacetView.js

@@ -82,17 +82,13 @@ const FacetView = _ref => {
     className: (0, _clsx.default)(classes.subSectionSummaryText, {
       ["activeFacet".concat(facet.section)]: isActiveFacet
     })
-  }, facet.label)), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.NonSortGroup
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.NonSortGroupItem
-  }, "No data for this field")), (facet.type === _Types.InputTypes.SLIDER || facetValues.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
+  }, facet.label)), (facet.type === _Types.InputTypes.SLIDER || facetValues.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
     className: facet.type === _Types.InputTypes.SLIDER ? classes.sortGroupSlider : classes.sortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     style: {
-      fontSize: 10
+      fontSize: 14
     },
     onClick: onClearSection
   }, /*#__PURE__*/_react.default.createElement("img", {
@@ -100,7 +96,11 @@ const FacetView = _ref => {
     height: 12,
     width: 12,
     alt: "clear-icon"
-  }))), facet.type === _Types.InputTypes.CHECKBOX && facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+  })), facetValues.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.NonSortGroup
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.NonSortGroupItem
+  }, "No data for this field"))), facet.type === _Types.InputTypes.CHECKBOX && facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.sortGroupItem, {
       [classes.highlight]: sortBy === _Sort.sortType.ALPHABET
     }),

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

@@ -18,9 +18,11 @@ function InputMinMaxView(_ref) {
     minLowerBound,
     maxUpperBound,
     onInputChange,
-    type
+    type,
+    disabled = false
   } = _ref;
   const handleInputChange = e => {
+    if (disabled) return;
     const minMaxRange = [lowerBoundVal, upperBoundVal];
     if (type === _Types.silderTypes.INPUT_MIN) {
       minMaxRange[0] = Number(e.target.value);
@@ -35,6 +37,7 @@ function InputMinMaxView(_ref) {
     id: "slider_".concat(type),
     className: classes["slider_".concat(type)],
     onChange: event => handleInputChange(event),
+    disabled: disabled,
     inputProps: {
       step: 1,
       min: minLowerBound,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _core = require("@material-ui/core");
 var _Types = require("../Types");
 var _InputMinMaxView = _interopRequireDefault(require("./InputMinMaxView"));
@@ -30,11 +31,14 @@ const SliderView = _ref => {
     datafield,
     facetValues
   } = facet;
+  // Check if bounds are invalid (both are 0)
+  const isBoundsInvalid = !facetValues || facetValues.length === 0 || facetValues[0] === 0 && facetValues[1] === 0;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
+    if (isBoundsInvalid) return false;
     const checks = [lowerBoundValue <= upperBoundValue, lowerBoundValue >= minLowerBound, upperBoundValue <= maxUpperBound];
     return checks.every(condition => condition === true);
   };
@@ -74,7 +78,8 @@ const SliderView = _ref => {
     minLowerBound: minLowerBound,
     maxUpperBound: maxUpperBound,
     type: _Types.silderTypes.INPUT_MIN,
-    onInputChange: handleChangeCommittedSlider
+    onInputChange: handleChangeCommittedSlider,
+    disabled: isBoundsInvalid
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.maxValue
   }, /*#__PURE__*/_react.default.createElement(_core.Typography, {
@@ -86,23 +91,31 @@ const SliderView = _ref => {
     minLowerBound: minLowerBound,
     maxUpperBound: maxUpperBound,
     type: _Types.silderTypes.INPUT_MAX,
-    onInputChange: handleChangeCommittedSlider
+    onInputChange: handleChangeCommittedSlider,
+    disabled: isBoundsInvalid
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes.slider
   }, /*#__PURE__*/_react.default.createElement(_core.Slider, {
     disableSwap: true,
+    disabled: isBoundsInvalid,
     getAriaValueText: valuetext,
-    onChange: handleChangeSlider,
-    onChangeCommitted: (event, value) => handleChangeCommittedSlider(value),
-    value: [...sliderValue],
+    onChange: isBoundsInvalid ? undefined : handleChangeSlider,
+    onChangeCommitted: isBoundsInvalid ? undefined : (event, value) => handleChangeCommittedSlider(value),
+    value: maxUpperBound === 0 ? [0, 0] : [...sliderValue],
     valueLabelDisplay: "auto",
     min: minLowerBound,
-    max: maxUpperBound,
+    max: maxUpperBound === 0 ? undefined : maxUpperBound,
     classes: {
-      colorPrimary: classes.colorPrimary,
-      rail: classes.rail,
-      thumb: isValid() ? classes.thumb : classes.invalidThumb,
-      track: isValid() ? classes.track : classes.invalidTrack
+      colorPrimary: (0, _clsx.default)("colorPrimary".concat(facet.section), classes.colorPrimary),
+      rail: (0, _clsx.default)("rail".concat(facet.section), classes.rail),
+      thumb: (0, _clsx.default)("thumb".concat(facet.section), {
+        isThumbValid: isValid(),
+        invalidThumb: !isValid()
+      }),
+      track: (0, _clsx.default)("track".concat(facet.section), {
+        isTrackValid: isValid(),
+        invalidTrack: !isValid()
+      })
     }
   })), /*#__PURE__*/_react.default.createElement(_core.Box, {
     className: classes.lowerUpperBound
@@ -110,7 +123,7 @@ const SliderView = _ref => {
     className: classes.lowerBound
   }, minLowerBound.toLocaleString()), /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: classes.upperBound
-  }, maxUpperBound.toLocaleString()))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
+  }, minLowerBound === 0 && maxUpperBound === 0 ? '-' : maxUpperBound !== 0 ? maxUpperBound.toLocaleString() : '.'))), (sliderValue[0] > minLowerBound || sliderValue[1] < maxUpperBound) && /*#__PURE__*/_react.default.createElement(_core.Typography, {
     className: isValid() ? classes.sliderText : classes.invalidSliderText
   }, sliderValue[0], ' - ', sliderValue[1], "\xA0", quantifier));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-c3dc.7",
+  "version": "1.0.1-c3dc.8",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

package/src/FacetFilterController.js

@@ -54,7 +54,11 @@ const FacetFilterController = (props) => {
          */
         if (sideBar.type === InputTypes.SLIDER) {
           const { minLowerBound, maxUpperBound } = sideBar;
-          sideBar.facetValues = [minLowerBound, maxUpperBound];
+          if (minLowerBound === 0 && maxUpperBound === 0) {
+            sideBar.facetValues = [0, 0];
+          } else {
+            sideBar.facetValues = [minLowerBound, maxUpperBound];
+          }
         }
       });
     }
@@ -65,7 +69,7 @@ const FacetFilterController = (props) => {
     const sideBar = {};
 
     arr.forEach(({ section, ...item }) => {
-      const { isExpanded } =facetSectionConfig[section];
+      const { isExpanded } = facetSectionConfig[section];
       if (!sideBar[section]) {
         sideBar[section] = {
           name: section,
@@ -110,14 +114,17 @@ const FacetFilterController = (props) => {
           if (facet.type === InputTypes.SLIDER) {
             const lowerBound = data[apiForFiltering][ApiLowerBoundName];
             const upperBound = data[apiForFiltering][ApiUpperBoundName];
+
             if (lowerBound === 0 && upperBound === 0) {
-              updateFacet.filterOut = true;
+              updateFacet.minLowerBound = 0;
+              updateFacet.maxUpperBound = 0;
+              updateFacet.facetValues = [];
             } else {
               updateFacet.minLowerBound = lowerBound;
               updateFacet.maxUpperBound = upperBound;
               updateFacet.facetValues = [lowerBound, upperBound];
-              updateFacet.style = facet.style;
             }
+            updateFacet.style = facet.style;
           }
         }
         if (!updateFacet.filterOut) {

package/src/components/facet/FacetStyle.js

@@ -50,6 +50,8 @@ export default () => ({
     fontSize: '11px',
     marginRight: '12px',
     marginLeft: '24px',
+    display: 'flex',
+    alignItems: 'center',
   },
   sortGroupItem: {
     cursor: 'pointer',
@@ -58,8 +60,6 @@ export default () => ({
     // marginRight: '32px',
   },
   NonSortGroup: {
-    marginBottom: '5px',
-    borderTop: '1px solid #B1B1B1',
     textAlign: 'left',
     paddingLeft: '10px',
   },

package/src/components/facet/FacetView.js

@@ -89,18 +89,7 @@ const FacetView = ({
             </div>
           </CustomAccordionSummary>
         )}
-        {
-          (facetValues.length === 0)
-          && (
-          <div className={classes.NonSortGroup}>
-            <span
-              className={classes.NonSortGroupItem}
-            >
-              No data for this field
-            </span>
-          </div>
-          )
-        }
+
         {
           (facet.type === InputTypes.SLIDER || facetValues.length > 0)
           && (
@@ -110,7 +99,7 @@ const FacetView = ({
           >
             <span className={classes.sortGroupIcon}>
               <Icon
-                style={{ fontSize: 10 }}
+                style={{ fontSize: 14 }}
                 onClick={onClearSection}
               >
                 <img
@@ -120,6 +109,17 @@ const FacetView = ({
                   alt="clear-icon"
                 />
               </Icon>
+
+              {facetValues.length === 0
+              && (
+              <div className={classes.NonSortGroup}>
+                <span
+                  className={classes.NonSortGroupItem}
+                >
+                  No data for this field
+                </span>
+              </div>
+              )}
             </span>
             { (facet.type === InputTypes.CHECKBOX && facetValues.length > 0)
           && (

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

@@ -14,8 +14,10 @@ function InputMinMaxView({
   maxUpperBound,
   onInputChange,
   type,
+  disabled = false,
 }) {
   const handleInputChange = (e) => {
+    if (disabled) return;
     const minMaxRange = [lowerBoundVal, upperBoundVal];
     if (type === silderTypes.INPUT_MIN) {
       minMaxRange[0] = Number(e.target.value);
@@ -32,6 +34,7 @@ function InputMinMaxView({
       id={`slider_${type}`}
       className={classes[`slider_${type}`]}
       onChange={(event) => handleInputChange(event)}
+      disabled={disabled}
       inputProps={{
         step: 1,
         min: minLowerBound,

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

@@ -3,6 +3,7 @@
 /* eslint-disable react/jsx-indent */
 /* eslint-disable object-curly-newline */
 import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
 import { withStyles, Slider, Typography, Box } from '@material-ui/core';
 // import styles from './SliderStyle';
 import { silderTypes } from '../Types';
@@ -15,11 +16,16 @@ const SliderView = ({
   filterState,
 }) => {
   const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
+  // Check if bounds are invalid (both are 0)
+  const isBoundsInvalid = !facetValues
+    || facetValues.length === 0
+    || (facetValues[0] === 0 && facetValues[1] === 0);
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
+    if (isBoundsInvalid) return false;
     const checks = [
       lowerBoundValue <= upperBoundValue,
       lowerBoundValue >= minLowerBound,
@@ -66,6 +72,7 @@ const SliderView = ({
               maxUpperBound={maxUpperBound}
               type={silderTypes.INPUT_MIN}
               onInputChange={handleChangeCommittedSlider}
+              disabled={isBoundsInvalid}
             />
           </div>
           <div className={classes.maxValue}>
@@ -80,6 +87,7 @@ const SliderView = ({
               maxUpperBound={maxUpperBound}
               type={silderTypes.INPUT_MAX}
               onInputChange={handleChangeCommittedSlider}
+              disabled={isBoundsInvalid}
             />
           </div>
         </div>
@@ -87,18 +95,27 @@ const SliderView = ({
           {/* Change to red if invalid range */}
           <Slider
             disableSwap
+            disabled={isBoundsInvalid}
             getAriaValueText={valuetext}
-            onChange={handleChangeSlider}
-            onChangeCommitted={(event, value) => handleChangeCommittedSlider(value)}
-            value={[...sliderValue]}
+            onChange={isBoundsInvalid ? undefined : handleChangeSlider}
+            onChangeCommitted={
+              isBoundsInvalid ? undefined : (event, value) => handleChangeCommittedSlider(value)
+            }
+            value={maxUpperBound === 0 ? [0, 0] : [...sliderValue]}
             valueLabelDisplay="auto"
             min={minLowerBound}
-            max={maxUpperBound}
+            max={maxUpperBound === 0 ? undefined : maxUpperBound}
             classes={{
-              colorPrimary: classes.colorPrimary,
-              rail: classes.rail,
-              thumb: isValid() ? classes.thumb : classes.invalidThumb,
-              track: isValid() ? classes.track : classes.invalidTrack,
+              colorPrimary: clsx(`colorPrimary${facet.section}`, classes.colorPrimary),
+              rail: clsx(`rail${facet.section}`, classes.rail),
+              thumb: clsx(`thumb${facet.section}`, {
+                isThumbValid: isValid(),
+                invalidThumb: !isValid(),
+              }),
+              track: clsx(`track${facet.section}`, {
+                isTrackValid: isValid(),
+                invalidTrack: !isValid(),
+              }),
             }}
           />
         </div>
@@ -107,7 +124,7 @@ const SliderView = ({
             {minLowerBound.toLocaleString()}
           </Typography>
           <Typography className={classes.upperBound}>
-            {maxUpperBound.toLocaleString()}
+            {(minLowerBound === 0 && maxUpperBound === 0) ? '-' : (maxUpperBound !== 0 ? maxUpperBound.toLocaleString() : '.')}
           </Typography>
         </Box>
       </div>