@bento-core/facet-filter 1.0.1-ccdihub.38 → 1.0.1-ccdihub.39

package/dist/components/facet/NewFacetView.js

@@ -36,10 +36,27 @@ const NewFacetView = _ref => {
     queryParams,
     timeUnitState,
     onTimeUnitChange,
-    unknownAgesState
+    unknownAgesState,
+    expandState,
+    onToggleFacetExpand
   } = _ref;
-  const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
-  const onExpandFacet = () => setExpand(!expand);
+  const expand = expandState[facet.datafield] !== undefined ? expandState[facet.datafield] : facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false;
+  const isUserInitiated = (0, _react.useRef)(false);
+  const prevExpandRef = (0, _react.useRef)(expand);
+  (0, _react.useEffect)(() => {
+    prevExpandRef.current = expand;
+    // Reset flag after render
+    if (isUserInitiated.current) {
+      setTimeout(() => {
+        isUserInitiated.current = false;
+      }, 0);
+    }
+  }, [expand]);
+  const onExpandFacet = () => {
+    isUserInitiated.current = true;
+    const newExpandState = !expand;
+    onToggleFacetExpand(facet.datafield, newExpandState);
+  };
   const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   const navigate = (0, _reactRouterDom.useNavigate)();
 
@@ -114,7 +131,11 @@ const NewFacetView = _ref => {
     classes: {
       root: classes.expansionPanelsideBarItem
     },
-    id: facet.section
+    id: facet.section,
+    TransitionProps: {
+      // Disable animation if change is not user-initiated
+      timeout: isUserInitiated.current ? undefined : 0
+    }
   }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
     facet: facet,
     facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)

package/dist/components/facet/NewSearchFacetView.js

@@ -58,11 +58,28 @@ const SearchFacetView = _ref => {
     onSortChange,
     CustomView,
     queryParams,
-    unknownAgesState
+    unknownAgesState,
+    expandState,
+    onToggleFacetExpand
   } = _ref;
-  const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+  const expand = expandState[facet.datafield] !== undefined ? expandState[facet.datafield] : facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false;
+  const isUserInitiated = (0, _react.useRef)(false);
+  const prevExpandRef = (0, _react.useRef)(expand);
+  (0, _react.useEffect)(() => {
+    prevExpandRef.current = expand;
+    // Reset flag after render
+    if (isUserInitiated.current) {
+      setTimeout(() => {
+        isUserInitiated.current = false;
+      }, 0);
+    }
+  }, [expand]);
+  const onExpandFacet = () => {
+    isUserInitiated.current = true;
+    const newExpandState = !expand;
+    onToggleFacetExpand(facet.datafield, newExpandState);
+  };
   const [open, setOpen] = (0, _react.useState)(false);
-  const onExpandFacet = () => setExpand(!expand);
   const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   const navigate = (0, _reactRouterDom.useNavigate)();
   const onClearSection = () => {
@@ -132,7 +149,11 @@ const SearchFacetView = _ref => {
     classes: {
       root: classes.expansionPanelsideBarItem
     },
-    id: facet.section
+    id: facet.section,
+    TransitionProps: {
+      // Disable animation if change is not user-initiated
+      timeout: isUserInitiated.current ? undefined : 0
+    }
   }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
     facet: facet,
     facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)

package/dist/components/facet/ReduxNewFacetView.js

@@ -11,10 +11,11 @@ var _NewFacetView = _interopRequireDefault(require("./NewFacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxNewFacetView = props => /*#__PURE__*/_react.default.createElement(_NewFacetView.default, props);
 const mapStateToProps = state => {
-  var _state$statusReducer, _state$statusReducer2;
+  var _state$statusReducer, _state$statusReducer2, _state$statusReducer3;
   return {
     timeUnitState: (state === null || state === void 0 ? void 0 : (_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.timeUnitState) || {},
-    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {}
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {},
+    expandState: (state === null || state === void 0 ? void 0 : (_state$statusReducer3 = state.statusReducer) === null || _state$statusReducer3 === void 0 ? void 0 : _state$statusReducer3.expandState) || {}
   };
 };
 const mapDispatchToProps = dispatch => ({
@@ -29,6 +30,9 @@ const mapDispatchToProps = dispatch => ({
   },
   onUnknownAgesChange: (datafield, unknownAges) => {
     dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges));
+  },
+  onToggleFacetExpand: (datafield, expanded) => {
+    dispatch((0, _Actions.toggleFacetExpand)(datafield, expanded));
   }
 });
 var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxNewFacetView);

package/dist/components/facet/ReduxNewSearchFacetView.js

@@ -13,11 +13,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const ReduxNewSearchFacetView = props => /*#__PURE__*/_react.default.createElement(_NewSearchFacetView.default, props);
 const mapStateToProps = (state, ownProps) => {
-  var _state$statusReducer, _state$statusReducer2;
+  var _state$statusReducer, _state$statusReducer2, _state$statusReducer3;
   return {
     searchText: ((_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.searchState[ownProps.facet.datafield]) || '',
     sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null,
-    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {}
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {},
+    expandState: (state === null || state === void 0 ? void 0 : (_state$statusReducer3 = state.statusReducer) === null || _state$statusReducer3 === void 0 ? void 0 : _state$statusReducer3.expandState) || {}
   };
 };
 const mapDispatchToProps = dispatch => ({
@@ -35,6 +36,9 @@ const mapDispatchToProps = dispatch => ({
   },
   onUnknownAgesChange: (datafield, unknownAges) => {
     dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges));
+  },
+  onToggleFacetExpand: (datafield, expanded) => {
+    dispatch((0, _Actions.toggleFacetExpand)(datafield, expanded));
   }
 });
 var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxNewSearchFacetView);

package/dist/store/actions/ActionTypes.js

@@ -15,7 +15,8 @@ const sideBarActionTypes = {
   SORT_CHANGED: 'SORT_CHANGED',
   UPDATE_FILTER_STATE: 'UPDATE_FILTER_STATE',
   TIME_UNIT_CHANGED: 'TIME_UNIT_CHANGED',
-  UNKNOWN_AGES_CHANGED: 'UNKNOWN_AGES_CHANGED'
+  UNKNOWN_AGES_CHANGED: 'UNKNOWN_AGES_CHANGED',
+  TOGGLE_FACET_EXPAND: 'TOGGLE_FACET_EXPAND'
 };
 exports.sideBarActionTypes = sideBarActionTypes;
 const Actions = '';

package/dist/store/actions/Actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateFilterState = exports.unknownAgesChange = exports.toggleSilder = exports.toggleCheckBox = exports.timeUnitChange = exports.sortChange = exports.searchTextChange = exports.clearSliderSection = exports.clearFacetSection = exports.clearAllFilters = exports.clearAllAndSelectFacet = void 0;
+exports.updateFilterState = exports.unknownAgesChange = exports.toggleSilder = exports.toggleFacetExpand = exports.toggleCheckBox = exports.timeUnitChange = exports.sortChange = exports.searchTextChange = exports.clearSliderSection = exports.clearFacetSection = exports.clearAllFilters = exports.clearAllAndSelectFacet = void 0;
 var _ActionTypes = require("./ActionTypes");
 const toggleCheckBox = toggleCheckBoxItem => ({
   type: _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED,
@@ -74,4 +74,12 @@ const unknownAgesChange = (datafield, unknownAges) => ({
     unknownAges
   }
 });
-exports.unknownAgesChange = unknownAgesChange;
+exports.unknownAgesChange = unknownAgesChange;
+const toggleFacetExpand = (datafield, expanded) => ({
+  type: _ActionTypes.sideBarActionTypes.TOGGLE_FACET_EXPAND,
+  payload: {
+    datafield,
+    expanded
+  }
+});
+exports.toggleFacetExpand = toggleFacetExpand;

package/dist/store/reducers/SideBarReducer.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.onUnknownAgesChange = exports.onToggleStateUpdate = exports.onTimeUnitChange = exports.onSortChange = exports.onSearchTextChange = exports.onClearSliderSection = exports.onClearFacetSection = void 0;
+exports.onUnknownAgesChange = exports.onToggleStateUpdate = exports.onToggleFacetExpand = exports.onTimeUnitChange = exports.onSortChange = exports.onSearchTextChange = exports.onClearSliderSection = exports.onClearFacetSection = void 0;
 exports.sideBarReducerGenerator = sideBarReducerGenerator;
 exports.updateSiderValue = void 0;
 var _ActionTypes = require("../actions/ActionTypes");
@@ -16,8 +16,10 @@ const initFilterState = {
   searchState: {},
   sortState: {},
   timeUnitState: {},
-  unknownAgesState: {}
+  unknownAgesState: {},
+  expandState: {} // Add this line
 };
+
 const onToggleStateUpdate = _ref => {
   let {
     filterState,
@@ -122,6 +124,17 @@ const onUnknownAgesChange = _ref8 => {
   return updatedState;
 };
 exports.onUnknownAgesChange = onUnknownAgesChange;
+const onToggleFacetExpand = _ref9 => {
+  let {
+    datafield,
+    expanded,
+    expandState
+  } = _ref9;
+  const updatedState = _objectSpread({}, expandState);
+  updatedState[datafield] = expanded;
+  return updatedState;
+};
+exports.onToggleFacetExpand = onToggleFacetExpand;
 function sideBarReducerGenerator() {
   return {
     actionTypes: _ActionTypes.sideBarActionTypes,
@@ -196,6 +209,11 @@ function sideBarReducerGenerator() {
           return _objectSpread(_objectSpread({}, state), {}, {
             unknownAgesState: _objectSpread({}, updateState)
           });
+        case _ActionTypes.sideBarActionTypes.TOGGLE_FACET_EXPAND:
+          updateState = onToggleFacetExpand(_objectSpread(_objectSpread({}, payload), state));
+          return _objectSpread(_objectSpread({}, state), {}, {
+            expandState: _objectSpread({}, updateState)
+          });
         default:
           return state;
       }

package/package.json

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

package/src/components/facet/NewFacetView.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
   useLocation,
   useNavigate,
@@ -31,9 +31,30 @@ const NewFacetView = ({
   timeUnitState,
   onTimeUnitChange,
   unknownAgesState,
+  expandState,
+  onToggleFacetExpand,
 }) => {
-  const [expand, setExpand] = useState(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
-  const onExpandFacet = () => setExpand(!expand);
+  const expand = expandState[facet.datafield] !== undefined ? expandState[facet.datafield] : (facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+
+  const isUserInitiated = useRef(false);
+  const prevExpandRef = useRef(expand);
+
+  useEffect(() => {
+    prevExpandRef.current = expand;
+    // Reset flag after render
+    if (isUserInitiated.current) {
+      setTimeout(() => {
+        isUserInitiated.current = false;
+      }, 0);
+    }
+  }, [expand]);
+
+  const onExpandFacet = () => {
+    isUserInitiated.current = true;
+    const newExpandState = !expand;
+    onToggleFacetExpand(facet.datafield, newExpandState);
+  };
+
   const query = new URLSearchParams(useLocation().search);
   const navigate = useNavigate();
 
@@ -110,6 +131,10 @@ const NewFacetView = ({
           root: classes.expansionPanelsideBarItem,
         }}
         id={facet.section}
+        TransitionProps={{
+          // Disable animation if change is not user-initiated
+          timeout: isUserInitiated.current ? undefined : 0,
+        }}
       >
         { CustomView ? (
           <CustomView

package/src/components/facet/NewSearchFacetView.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
   useLocation,
   useNavigate,
@@ -56,10 +56,31 @@ const SearchFacetView = ({
   CustomView,
   queryParams,
   unknownAgesState,
+  expandState,
+  onToggleFacetExpand,
 }) => {
-  const [expand, setExpand] = useState(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+  const expand = expandState[facet.datafield] !== undefined ? expandState[facet.datafield] : (facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+
+  const isUserInitiated = useRef(false);
+  const prevExpandRef = useRef(expand);
+
+  useEffect(() => {
+    prevExpandRef.current = expand;
+    // Reset flag after render
+    if (isUserInitiated.current) {
+      setTimeout(() => {
+        isUserInitiated.current = false;
+      }, 0);
+    }
+  }, [expand]);
+
+  const onExpandFacet = () => {
+    isUserInitiated.current = true;
+    const newExpandState = !expand;
+    onToggleFacetExpand(facet.datafield, newExpandState);
+  };
+
   const [open, setOpen] = useState(false);
-  const onExpandFacet = () => setExpand(!expand);
   const query = new URLSearchParams(useLocation().search);
   const navigate = useNavigate();
 
@@ -133,6 +154,10 @@ const SearchFacetView = ({
           root: classes.expansionPanelsideBarItem,
         }}
         id={facet.section}
+        TransitionProps={{
+          // Disable animation if change is not user-initiated
+          timeout: isUserInitiated.current ? undefined : 0,
+        }}
       >
         {CustomView ? (
           <CustomView

package/src/components/facet/ReduxNewFacetView.js

@@ -5,6 +5,7 @@ import {
   clearSliderSection,
   timeUnitChange,
   unknownAgesChange,
+  toggleFacetExpand,
 } from '../../store/actions/Actions';
 import NewFacetView from './NewFacetView';
 
@@ -13,6 +14,7 @@ const ReduxNewFacetView = ((props) => <NewFacetView {...props} />);
 const mapStateToProps = (state) => ({
   timeUnitState: state?.statusReducer?.timeUnitState || {},
   unknownAgesState: state?.statusReducer?.unknownAgesState || {},
+  expandState: state?.statusReducer?.expandState || {},
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -22,6 +24,9 @@ const mapDispatchToProps = (dispatch) => ({
   onUnknownAgesChange: (datafield, unknownAges) => {
     dispatch(unknownAgesChange(datafield, unknownAges));
   },
+  onToggleFacetExpand: (datafield, expanded) => {
+    dispatch(toggleFacetExpand(datafield, expanded));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxNewFacetView);

package/src/components/facet/ReduxNewSearchFacetView.js

@@ -6,6 +6,7 @@ import {
   searchTextChange,
   sortChange,
   unknownAgesChange,
+  toggleFacetExpand,
 } from '../../store/actions/Actions';
 // import FacetView from './FacetView';
 import NewSearchFacetView from './NewSearchFacetView';
@@ -16,6 +17,7 @@ const mapStateToProps = (state, ownProps) => ({
   searchText: state.statusReducer?.searchState[ownProps.facet.datafield] || '',
   sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null,
   unknownAgesState: state?.statusReducer?.unknownAgesState || {},
+  expandState: state?.statusReducer?.expandState || {},
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -30,6 +32,9 @@ const mapDispatchToProps = (dispatch) => ({
   onUnknownAgesChange: (datafield, unknownAges) => {
     dispatch(unknownAgesChange(datafield, unknownAges));
   },
+  onToggleFacetExpand: (datafield, expanded) => {
+    dispatch(toggleFacetExpand(datafield, expanded));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxNewSearchFacetView);

package/src/store/actions/ActionTypes.js

@@ -10,6 +10,7 @@ export const sideBarActionTypes = {
   UPDATE_FILTER_STATE: 'UPDATE_FILTER_STATE',
   TIME_UNIT_CHANGED: 'TIME_UNIT_CHANGED',
   UNKNOWN_AGES_CHANGED: 'UNKNOWN_AGES_CHANGED',
+  TOGGLE_FACET_EXPAND: 'TOGGLE_FACET_EXPAND',
 };
 
 export const Actions = '';

package/src/store/actions/Actions.js

@@ -67,3 +67,11 @@ export const unknownAgesChange = (datafield, unknownAges) => ({
     unknownAges,
   },
 });
+
+export const toggleFacetExpand = (datafield, expanded) => ({
+  type: sideBarActionTypes.TOGGLE_FACET_EXPAND,
+  payload: {
+    datafield,
+    expanded,
+  },
+});

package/src/store/reducers/SideBarReducer.js

@@ -6,6 +6,7 @@ const initFilterState = {
   sortState: {},
   timeUnitState: {},
   unknownAgesState: {},
+  expandState: {}, // Add this line
 };
 
 export const onToggleStateUpdate = ({
@@ -100,6 +101,16 @@ export const onUnknownAgesChange = ({
   return updatedState;
 };
 
+export const onToggleFacetExpand = ({
+  datafield,
+  expanded,
+  expandState,
+}) => {
+  const updatedState = { ...expandState };
+  updatedState[datafield] = expanded;
+  return updatedState;
+};
+
 export function sideBarReducerGenerator() {
   return {
     actionTypes: sideBarActionTypes,
@@ -177,6 +188,12 @@ export function sideBarReducerGenerator() {
             ...state,
             unknownAgesState: { ...updateState },
           };
+        case sideBarActionTypes.TOGGLE_FACET_EXPAND:
+          updateState = onToggleFacetExpand({ ...payload, ...state });
+          return {
+            ...state,
+            expandState: { ...updateState },
+          };
         default:
           return state;
       }