@bento-core/facet-filter 1.0.1-icdc.5 → 1.0.1-icdc.7

package/dist/FacetFilterView.js

@@ -18,7 +18,8 @@ const BentoFacetFilter = _ref => {
     sideBarSections,
     CustomFacetSection,
     CustomFacetView,
-    enableClearSection
+    enableClearSection,
+    enableFacetCollapse
   } = _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",
@@ -29,7 +30,8 @@ const BentoFacetFilter = _ref => {
   }, section.items.map(facet => /*#__PURE__*/_react.default.createElement(_ReduxFacetView.default, {
     facet: facet,
     CustomView: CustomFacetView,
-    enableClearSection: enableClearSection
+    enableClearSection: enableClearSection,
+    enableFacetCollapse: enableFacetCollapse
   }))))));
 };
 var _default = (0, _core.withStyles)(_FacetFilterStyle.default)(BentoFacetFilter);

package/dist/components/facet/FacetStyle.js

@@ -44,7 +44,7 @@ var _default = () => ({
     // marginLeft: '-5px',
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'space-around'
   },
   sortGroupIcon: {
     cursor: 'pointer',

package/dist/components/facet/FacetView.js

@@ -15,6 +15,7 @@ var _FacetStyle = _interopRequireDefault(require("./FacetStyle"));
 var _FilterItems = _interopRequireDefault(require("../inputs/FilterItems"));
 var _Sort = require("../../utils/Sort");
 var _clearIcon = _interopRequireDefault(require("./assets/clearIcon.svg"));
+var _ActionTypes = require("../../store/actions/ActionTypes");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -32,10 +33,29 @@ const FacetView = _ref => {
     onClearSliderSection,
     CustomView,
     autoComplete,
-    upload
+    upload,
+    filterState,
+    currentActionType = {},
+    enableFacetCollapse
   } = _ref;
   const [expand, setExpand] = (0, _react.useState)(false);
   const onExpandFacet = () => setExpand(!expand);
+  const {
+    datafield
+  } = facet;
+  /**
+   * Collapse expanded facet or facets
+   * 1. on clear facet section
+   * 2. on clear all
+   */
+  (0, _react.useEffect)(() => {
+    if (enableFacetCollapse) {
+      const actionType = currentActionType[datafield];
+      if (actionType && actionType === _ActionTypes.sideBarActionTypes.CLEAR_FACET_SECTION || currentActionType === _ActionTypes.sideBarActionTypes.CLEAR_ALL_FILTERS) {
+        setExpand(false);
+      }
+    }
+  }, [currentActionType]);
 
   /**
    * expand section incase of active local search
@@ -51,10 +71,13 @@ const FacetView = _ref => {
   };
   const onClearSection = () => {
     setSortBy(null);
-    if (facet.type === _Types.InputTypes.SLIDER) {
-      onClearSliderSection(facet);
-    } else {
-      onClearFacetSection(facet);
+    const activeFilterItems = filterState[datafield];
+    if (activeFilterItems && Object.keys(activeFilterItems).length > 0) {
+      if (facet.type === _Types.InputTypes.SLIDER) {
+        onClearSliderSection(facet);
+      } else {
+        onClearFacetSection(facet);
+      }
     }
   };
   /**

package/dist/components/facet/ReduxFacetView.js

@@ -14,6 +14,7 @@ const mapStateToProps = state => {
   var _state$localFind, _state$localFind2;
   return {
     filterState: state.statusReducer.filterState,
+    currentActionType: state.statusReducer.currentActionType,
     autoComplete: (state === null || state === void 0 ? void 0 : (_state$localFind = state.localFind) === null || _state$localFind === void 0 ? void 0 : _state$localFind.autocomplete) || [],
     upload: (state === null || state === void 0 ? void 0 : (_state$localFind2 = state.localFind) === null || _state$localFind2 === void 0 ? void 0 : _state$localFind2.upload) || []
   };

package/dist/store/reducers/SideBarReducer.js

@@ -44,7 +44,10 @@ const onClearFacetSection = _ref2 => {
   if (updatedState[datafield]) {
     updatedState[datafield] = {};
   }
-  return updatedState;
+  return {
+    updatedState,
+    datafield
+  };
 };
 exports.onClearFacetSection = onClearFacetSection;
 const onClearSliderSection = _ref3 => {
@@ -97,12 +100,21 @@ function sideBarReducerGenerator() {
           });
         case _ActionTypes.sideBarActionTypes.CLEAR_ALL_FILTERS:
           return _objectSpread(_objectSpread({}, state), {}, {
-            filterState: {}
+            filterState: {},
+            currentActionType: _ActionTypes.sideBarActionTypes.CLEAR_ALL_FILTERS
           });
         case _ActionTypes.sideBarActionTypes.CLEAR_FACET_SECTION:
-          updateState = onClearFacetSection(_objectSpread(_objectSpread({}, payload), state));
+          const {
+            updatedState: updtState,
+            datafield
+          } = onClearFacetSection(_objectSpread(_objectSpread({}, payload), state));
+          updateState = updtState;
+          const currentActionType = {
+            [datafield]: _ActionTypes.sideBarActionTypes.CLEAR_FACET_SECTION
+          };
           return _objectSpread(_objectSpread({}, state), {}, {
-            filterState: _objectSpread({}, updateState)
+            filterState: _objectSpread({}, updateState),
+            currentActionType
           });
         case _ActionTypes.sideBarActionTypes.CLEAR_SLIDER_SECTION:
           updateState = onClearSliderSection(_objectSpread(_objectSpread({}, payload), state));
@@ -113,6 +125,8 @@ function sideBarReducerGenerator() {
           return {
             filterState: payload
           };
+        case _ActionTypes.sideBarActionTypes.CURR_FILTER_ACTION:
+          return _objectSpread(_objectSpread({}, state), payload);
         default:
           return state;
       }

package/package.json

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

package/src/FacetFilterView.js

@@ -11,6 +11,7 @@ const BentoFacetFilter = ({
   CustomFacetSection,
   CustomFacetView,
   enableClearSection,
+  enableFacetCollapse,
 }) => {
   return (
     <>
@@ -26,6 +27,7 @@ const BentoFacetFilter = ({
                 facet={facet}
                 CustomView={CustomFacetView}
                 enableClearSection={enableClearSection}
+                enableFacetCollapse={enableFacetCollapse}
               />
             ))}
           </FacetSectionView>

package/src/components/facet/FacetStyle.js

@@ -38,7 +38,7 @@ export default () => ({
     // marginLeft: '-5px',
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'space-around',
   },
   sortGroupIcon: {
     cursor: 'pointer',

package/src/components/facet/FacetView.js

@@ -11,6 +11,7 @@ import styles from './FacetStyle';
 import FilterItems from '../inputs/FilterItems';
 import { sortType } from '../../utils/Sort';
 import clearIcon from './assets/clearIcon.svg';
+import { sideBarActionTypes } from '../../store/actions/ActionTypes';
 
 const FacetView = ({
   classes,
@@ -21,10 +22,29 @@ const FacetView = ({
   CustomView,
   autoComplete,
   upload,
+  filterState,
+  currentActionType = {},
+  enableFacetCollapse,
 }) => {
   const [expand, setExpand] = useState(false);
   const onExpandFacet = () => setExpand(!expand);
 
+  const { datafield } = facet;
+  /**
+   * Collapse expanded facet or facets
+   * 1. on clear facet section
+   * 2. on clear all
+   */
+  useEffect(() => {
+    if (enableFacetCollapse) {
+      const actionType = currentActionType[datafield];
+      if ((actionType && actionType === sideBarActionTypes.CLEAR_FACET_SECTION)
+        || currentActionType === sideBarActionTypes.CLEAR_ALL_FILTERS) {
+        setExpand(false);
+      }
+    }
+  }, [currentActionType]);
+
   /**
    * expand section incase of active local search
    */
@@ -44,10 +64,13 @@ const FacetView = ({
 
   const onClearSection = () => {
     setSortBy(null);
-    if (facet.type === InputTypes.SLIDER) {
-      onClearSliderSection(facet);
-    } else {
-      onClearFacetSection(facet);
+    const activeFilterItems = filterState[datafield];
+    if (activeFilterItems && Object.keys(activeFilterItems).length > 0) {
+      if (facet.type === InputTypes.SLIDER) {
+        onClearSliderSection(facet);
+      } else {
+        onClearFacetSection(facet);
+      }
     }
   };
   /**

package/src/components/facet/ReduxFacetView.js

@@ -11,6 +11,7 @@ const ReduxFacetView = (props) => <FacetView {...props} />;
 
 const mapStateToProps = (state) => ({
   filterState: state.statusReducer.filterState,
+  currentActionType: state.statusReducer.currentActionType,
   autoComplete: state?.localFind?.autocomplete || [],
   upload: state?.localFind?.upload || [],
 });

package/src/store/reducers/SideBarReducer.js

@@ -30,7 +30,7 @@ export const onClearFacetSection = ({
   if (updatedState[datafield]) {
     updatedState[datafield] = {};
   }
-  return updatedState;
+  return { updatedState, datafield };
 };
 
 export const onClearSliderSection = ({
@@ -78,12 +78,19 @@ export function sideBarReducerGenerator() {
           return {
             ...state,
             filterState: {},
+            currentActionType: sideBarActionTypes.CLEAR_ALL_FILTERS,
           };
         case sideBarActionTypes.CLEAR_FACET_SECTION:
-          updateState = onClearFacetSection({ ...payload, ...state });
+          const {
+            updatedState: updtState,
+            datafield,
+          } = onClearFacetSection({ ...payload, ...state });
+          updateState = updtState;
+          const currentActionType = { [datafield]: sideBarActionTypes.CLEAR_FACET_SECTION };
           return {
             ...state,
             filterState: { ...updateState },
+            currentActionType,
           };
         case sideBarActionTypes.CLEAR_SLIDER_SECTION:
           updateState = onClearSliderSection({ ...payload, ...state });