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

package/dist/components/inputs/FilterItems.js

@@ -4,41 +4,128 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
 var _ReduxCheckbox = _interopRequireDefault(require("./checkbox/ReduxCheckbox"));
 var _ReduxSlider = _interopRequireDefault(require("./slider/ReduxSlider"));
 var _Types = require("./Types");
 var _Sort = require("../../utils/Sort");
+var _FilterItemStyle = _interopRequireDefault(require("./FilterItemStyle"));
 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; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const INITIAL_ITEM_SIZE = 20;
 const FilterItems = _ref => {
   let {
     facet,
-    sortBy
+    sortBy = null,
+    classes
   } = _ref;
   const {
     type,
     datafield,
     section
   } = facet;
+  const [displayCount, setDisplayCount] = (0, _react.useState)(INITIAL_ITEM_SIZE);
+  const scrollableRef = (0, _react.useRef)(null);
   const sortFilters = (0, _Sort.sortBySection)(_objectSpread(_objectSpread({}, facet), {}, {
     sortBy
   }));
+
+  // Memoized scroll handler
+  const handleScroll = (0, _react.useCallback)(uncheckedCount => e => {
+    if (displayCount < uncheckedCount && uncheckedCount > INITIAL_ITEM_SIZE) {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight
+      } = e.target;
+      if (scrollHeight > clientHeight) {
+        const position = Math.ceil(scrollTop / (scrollHeight - clientHeight) * 100);
+        if (position >= 90) {
+          setDisplayCount(prevCount => prevCount + INITIAL_ITEM_SIZE);
+        }
+      }
+    }
+  }, [displayCount]);
   const filterItems = () => {
     switch (type) {
       case _Types.InputTypes.CHECKBOX:
-        return sortFilters.map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
-          checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
-            index,
-            section
-          }),
-          datafield: datafield,
-          facet: facet
-        }));
+        {
+          // Only use lazy loading if we have more items than the initial size
+          const uncheckedCount = sortFilters.filter(item => !item.isChecked).length;
+          if (uncheckedCount <= INITIAL_ITEM_SIZE) {
+            // Render all items normally if below threshold
+            return sortFilters.map((item, index) => /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
+              key: "all-".concat(item.name, "-").concat(index),
+              checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
+                index,
+                section
+              }),
+              datafield: datafield,
+              facet: facet
+            }));
+          }
+
+          // Single pass: separate checked and unchecked items with their indices - O(n) complexity
+          const checkedItemsWithIndices = [];
+          const uncheckedItemsWithIndices = [];
+          sortFilters.forEach((item, originalIndex) => {
+            if (item.isChecked) {
+              checkedItemsWithIndices.push({
+                item,
+                originalIndex
+              });
+            } else {
+              uncheckedItemsWithIndices.push({
+                item,
+                originalIndex
+              });
+            }
+          });
+
+          // Always show checked items first
+          const checkedItems = checkedItemsWithIndices.map(_ref2 => {
+            let {
+              item,
+              originalIndex
+            } = _ref2;
+            return /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
+              key: "checked-".concat(item.name, "-").concat(originalIndex),
+              checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
+                index: originalIndex,
+                section
+              }),
+              datafield: datafield,
+              facet: facet
+            });
+          });
+          const uncheckedItems = uncheckedItemsWithIndices.slice(0, displayCount).map(_ref3 => {
+            let {
+              item,
+              originalIndex
+            } = _ref3;
+            return /*#__PURE__*/_react.default.createElement(_ReduxCheckbox.default, {
+              key: "unchecked-".concat(item.name, "-").concat(originalIndex),
+              checkboxItem: _objectSpread(_objectSpread({}, item), {}, {
+                index: originalIndex,
+                section
+              }),
+              datafield: datafield,
+              facet: facet
+            });
+          });
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, checkedItems), /*#__PURE__*/_react.default.createElement("div", {
+            ref: scrollableRef,
+            className: classes.itemsContainer,
+            onScroll: handleScroll(uncheckedItemsWithIndices.length)
+          }, uncheckedItems));
+        }
       case _Types.InputTypes.SLIDER:
         return /*#__PURE__*/_react.default.createElement(_ReduxSlider.default, {
           facet: facet
@@ -47,7 +134,13 @@ const FilterItems = _ref => {
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
     }
   };
+  (0, _react.useEffect)(() => {
+    setDisplayCount(INITIAL_ITEM_SIZE);
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTo(0, 0);
+    }
+  }, [sortBy]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filterItems());
 };
-var _default = FilterItems;
+var _default = (0, _core.withStyles)(_FilterItemStyle.default)(FilterItems);
 exports.default = _default;

package/package.json

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

package/src/components/inputs/FilterItems.js

@@ -1,28 +1,105 @@
 /* eslint-disable react/jsx-wrap-multilines */
 /* eslint-disable react/jsx-indent */
-import React from 'react';
+import React,
+{
+  useEffect, useState, useRef, useCallback,
+} from 'react';
+import { withStyles } from '@material-ui/core';
 import ReduxCheckbox from './checkbox/ReduxCheckbox';
 import ReduxSlider from './slider/ReduxSlider';
 import { InputTypes } from './Types';
 import { sortBySection } from '../../utils/Sort';
+import styles from './FilterItemStyle';
+
+const INITIAL_ITEM_SIZE = 20;
 
 const FilterItems = ({
   facet,
-  sortBy,
+  sortBy = null,
+  classes,
 }) => {
   const { type, datafield, section } = facet;
+  const [displayCount, setDisplayCount] = useState(INITIAL_ITEM_SIZE);
+  const scrollableRef = useRef(null);
   const sortFilters = sortBySection({ ...facet, sortBy });
 
+  // Memoized scroll handler
+  const handleScroll = useCallback((uncheckedCount) => (e) => {
+    if (displayCount < uncheckedCount && uncheckedCount > INITIAL_ITEM_SIZE) {
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      if (scrollHeight > clientHeight) {
+        const position = Math.ceil((scrollTop / (scrollHeight - clientHeight)) * 100);
+        if (position >= 90) {
+          setDisplayCount((prevCount) => prevCount + INITIAL_ITEM_SIZE);
+        }
+      }
+    }
+  }, [displayCount]);
+
   const filterItems = () => {
     switch (type) {
-      case InputTypes.CHECKBOX:
-        return sortFilters.map((item, index) => (
+      case InputTypes.CHECKBOX: {
+        // Only use lazy loading if we have more items than the initial size
+        const uncheckedCount = sortFilters.filter((item) => !item.isChecked).length;
+        if (uncheckedCount <= INITIAL_ITEM_SIZE) {
+          // Render all items normally if below threshold
+          return sortFilters.map((item, index) => (
+            <ReduxCheckbox
+              key={`all-${item.name}-${index}`}
+              checkboxItem={{ ...item, index, section }}
+              datafield={datafield}
+              facet={facet}
+            />
+          ));
+        }
+
+        // Single pass: separate checked and unchecked items with their indices - O(n) complexity
+        const checkedItemsWithIndices = [];
+        const uncheckedItemsWithIndices = [];
+
+        sortFilters.forEach((item, originalIndex) => {
+          if (item.isChecked) {
+            checkedItemsWithIndices.push({ item, originalIndex });
+          } else {
+            uncheckedItemsWithIndices.push({ item, originalIndex });
+          }
+        });
+
+        // Always show checked items first
+        const checkedItems = checkedItemsWithIndices.map(({ item, originalIndex }) => (
           <ReduxCheckbox
-            checkboxItem={{ ...item, index, section }}
+            key={`checked-${item.name}-${originalIndex}`}
+            checkboxItem={{ ...item, index: originalIndex, section }}
             datafield={datafield}
             facet={facet}
           />
         ));
+        const uncheckedItems = uncheckedItemsWithIndices
+          .slice(0, displayCount)
+          .map(({ item, originalIndex }) => (
+            <ReduxCheckbox
+              key={`unchecked-${item.name}-${originalIndex}`}
+              checkboxItem={{ ...item, index: originalIndex, section }}
+              datafield={datafield}
+              facet={facet}
+            />
+          ));
+
+        return (
+          <>
+            <div>
+              {checkedItems}
+            </div>
+            <div
+              ref={scrollableRef}
+              className={classes.itemsContainer}
+              onScroll={handleScroll(uncheckedItemsWithIndices.length)}
+            >
+              {uncheckedItems}
+            </div>
+          </>
+        );
+      }
       case InputTypes.SLIDER:
         return (<ReduxSlider facet={facet} />);
       default:
@@ -30,6 +107,13 @@ const FilterItems = ({
     }
   };
 
+  useEffect(() => {
+    setDisplayCount(INITIAL_ITEM_SIZE);
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTo(0, 0);
+    }
+  }, [sortBy]);
+
   return (
     <>
       {filterItems()}
@@ -37,4 +121,4 @@ const FilterItems = ({
   );
 };
 
-export default FilterItems;
+export default withStyles(styles)(FilterItems);