@kne/react-filter 1.0.6 → 1.0.7

package/dist/index.js

@@ -132,13 +132,14 @@ const useVisibleItemCount = ({
   enabled,
   strategy = 'asc'
 }) => {
+  const safeItems = Array.isArray(items) ? items : [];
   const containerRef = react.useRef(null);
   const measureRef = react.useRef(null);
   const moreMeasureRef = react.useRef(null);
   const rafRef = react.useRef(null);
   const lastWidthRef = react.useRef(0);
   const [containerEl, setContainerEl] = react.useState(null);
-  const [visibleCount, setVisibleCount] = react.useState(() => items.length > 0 ? 1 : 0);
+  const [visibleCount, setVisibleCount] = react.useState(() => safeItems.length > 0 ? 1 : 0);
   const setContainerRef = react.useCallback(node => {
     containerRef.current = node;
     setContainerEl(node || null);
@@ -164,7 +165,7 @@ const useVisibleItemCount = ({
       return null;
     }
     const moreButtonWidth = moreMeasureRef.current?.getBoundingClientRect().width || 0;
-    if (items.length > 1 && moreButtonWidth <= 0) {
+    if (safeItems.length > 1 && moreButtonWidth <= 0) {
       return null;
     }
     const itemWidths = Array.from(itemNodes, node => node.getBoundingClientRect().width);
@@ -173,24 +174,24 @@ const useVisibleItemCount = ({
       itemWidths,
       moreButtonWidth
     };
-  }, [items.length]);
+  }, [safeItems.length]);
   const getWidthForCount = react.useCallback((itemWidths, moreButtonWidth, count) => {
     let usedWidth = 0;
     for (let i = 0; i < count; i++) {
       usedWidth += itemWidths[i] + (i > 0 ? GAP : 0);
     }
-    if (count < items.length) {
+    if (count < safeItems.length) {
       usedWidth += GAP + moreButtonWidth;
     }
     return usedWidth;
-  }, [items.length]);
+  }, [safeItems.length]);
   const resolveVisibleCount = react.useCallback(widths => {
     const {
       containerWidth,
       itemWidths,
       moreButtonWidth
     } = widths;
-    const maxCount = Math.min(items.length, itemWidths.length);
+    const maxCount = Math.min(safeItems.length, itemWidths.length);
     let count = 1;
     if (strategy === 'desc') {
       count = maxCount;
@@ -213,10 +214,10 @@ const useVisibleItemCount = ({
       }
     }
     return Math.max(1, count);
-  }, [getWidthForCount, items.length, strategy]);
+  }, [getWidthForCount, safeItems.length, strategy]);
   const calculateByWidth = react.useCallback(() => {
-    if (!enabled || !items.length) {
-      setVisibleCount(prev => prev === items.length ? prev : items.length);
+    if (!enabled || !safeItems.length) {
+      setVisibleCount(prev => prev === safeItems.length ? prev : safeItems.length);
       return;
     }
     const widths = getWidths();
@@ -225,7 +226,7 @@ const useVisibleItemCount = ({
     }
     const nextCount = resolveVisibleCount(widths);
     setVisibleCount(prev => prev === nextCount ? prev : nextCount);
-  }, [enabled, getWidths, items.length, resolveVisibleCount]);
+  }, [enabled, getWidths, safeItems.length, resolveVisibleCount]);
   const scheduleCalculate = react.useCallback(() => {
     if (rafRef.current) {
       window.cancelAnimationFrame(rafRef.current);
@@ -243,7 +244,7 @@ const useVisibleItemCount = ({
         rafRef.current = null;
       }
     };
-  }, [items, scheduleCalculate]);
+  }, [safeItems, scheduleCalculate]);
   react.useEffect(() => {
     if (!enabled || !containerEl) {
       return undefined;
@@ -298,14 +299,14 @@ const normalizeFilterList = list => {
   if (isNestedFilterList(safeList)) {
     return {
       mode: 'nested',
-      items: null,
+      items: [],
       lines: safeList
     };
   }
   return {
     mode: 'flat',
     items: safeList,
-    lines: null
+    lines: []
   };
 };
 const getMobileFilterList = list => {