@snack-uikit/utils 3.6.0 → 3.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 3.7.0 (2025-01-23)
+
+
+### Features
+
+* **PDS-926:** add useDynamicList hook ([1d95c09](https://github.com/cloud-ru-tech/snack-uikit/commit/1d95c0969ef96e7b891e927543a38b0929edc760))
+
+
+
+
+
 # 3.6.0 (2024-12-12)
 
 

package/README.md

@@ -18,6 +18,11 @@
 
 Хук задерживает выполнение функции или обновление значения до тех пор,
 пока не пройдет определенный период времени без новых вызовов.
+## useDynamicList
+`React hook` 
+
+Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+в зависимости от ширины контейнера
 ## useEventHandler
 `React hook` 
 

package/dist/cjs/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useDebounce';
+export * from './useDynamicList';
 export * from './useEventHandler';
 export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';

package/dist/cjs/hooks/index.js

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 __exportStar(require("./useDebounce"), exports);
+__exportStar(require("./useDynamicList"), exports);
 __exportStar(require("./useEventHandler"), exports);
 __exportStar(require("./useIsomorphicLayoutEffect"), exports);
 __exportStar(require("./useSwipeable"), exports);

package/dist/cjs/hooks/useDynamicList.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+type UseDynamicListProps<T extends object> = {
+    items: T[];
+    resizingContainerRef?: RefObject<HTMLDivElement>;
+    parentContainerRef: RefObject<HTMLDivElement>;
+    maxVisibleItems?: number;
+};
+type UseDynamicListReturnType<T extends object> = {
+    visibleItems: T[];
+    hiddenItems: T[];
+};
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+export declare function useDynamicList<T extends object>({ parentContainerRef, resizingContainerRef, items, maxVisibleItems, }: UseDynamicListProps<T>): UseDynamicListReturnType<T>;
+export {};

package/dist/cjs/hooks/useDynamicList.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDynamicList = useDynamicList;
+const react_1 = require("react");
+const useEventHandler_1 = require("./useEventHandler");
+const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+function useDynamicList(_ref) {
+  let {
+    parentContainerRef,
+    resizingContainerRef = parentContainerRef,
+    items,
+    maxVisibleItems = Infinity
+  } = _ref;
+  const adjustAmount = value => Math.min(maxVisibleItems, value);
+  const [visibleItemsAmount, setVisibleItemsAmount] = (0, react_1.useState)(adjustAmount(items.length));
+  const [width, setWidth] = (0, react_1.useState)(Infinity);
+  const widthRef = (0, react_1.useRef)(width);
+  const handleVisibleItemsAmount = param => {
+    if (typeof param === 'number') {
+      setVisibleItemsAmount(adjustAmount(param));
+    } else {
+      setVisibleItemsAmount(v => param(adjustAmount(v)));
+    }
+  };
+  const tryHidingItem = (0, useEventHandler_1.useEventHandler)(() => {
+    const container = parentContainerRef.current;
+    if (container && container.scrollWidth - container.offsetWidth > 0) {
+      const itemToHide = items[visibleItemsAmount - 1];
+      if (itemToHide) {
+        handleVisibleItemsAmount(value => value - 1);
+      }
+    }
+  });
+  const tryShowingItem = (0, useEventHandler_1.useEventHandler)(() => {
+    const itemToShow = items[visibleItemsAmount];
+    if (itemToShow) {
+      handleVisibleItemsAmount(value => value + 1);
+    }
+  });
+  const toggleItemWidth = (0, useEventHandler_1.useEventHandler)(_ref2 => {
+    let {
+      changedWidth,
+      initialWidth
+    } = _ref2;
+    if (changedWidth > initialWidth) {
+      //try to add extra item
+      if (visibleItemsAmount < maxVisibleItems) {
+        tryShowingItem();
+      }
+    } else if (changedWidth < initialWidth) {
+      // check if item should be hidden
+      tryHidingItem();
+    }
+  });
+  (0, react_1.useEffect)(() => {
+    const listener = () => {
+      tryHidingItem();
+      if (parentContainerRef.current) {
+        setWidth(parentContainerRef.current.scrollWidth);
+      }
+    };
+    document.fonts.addEventListener('loadingdone', listener);
+    return () => document.fonts.removeEventListener('loadingdone', listener);
+  }, [parentContainerRef, tryHidingItem]);
+  (0, react_1.useEffect)(() => {
+    const container = resizingContainerRef.current;
+    if (container) {
+      const observer = new ResizeObserver(entities => entities.forEach(entity => {
+        if (entity.target === container) {
+          const [{
+            inlineSize: newWidth
+          }] = entity.contentBoxSize;
+          setWidth(Math.floor(newWidth));
+        }
+      }));
+      observer.observe(container);
+      return () => observer.disconnect();
+    }
+  }, [resizingContainerRef]);
+  (0, useIsomorphicLayoutEffect_1.useLayoutEffect)(() => {
+    if (parentContainerRef.current) {
+      toggleItemWidth({
+        initialWidth: parentContainerRef.current.scrollWidth,
+        changedWidth: widthRef.current
+      });
+    }
+  }, [items, parentContainerRef, toggleItemWidth]);
+  (0, useIsomorphicLayoutEffect_1.useLayoutEffect)(() => {
+    toggleItemWidth({
+      initialWidth: widthRef.current,
+      changedWidth: width
+    });
+    widthRef.current = width;
+  }, [width, toggleItemWidth]);
+  (0, useIsomorphicLayoutEffect_1.useLayoutEffect)(() => {
+    tryHidingItem();
+  }, [tryHidingItem, visibleItemsAmount]);
+  return {
+    visibleItems: items.slice(0, visibleItemsAmount),
+    hiddenItems: items.slice(visibleItemsAmount)
+  };
+}

package/dist/esm/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useDebounce';
+export * from './useDynamicList';
 export * from './useEventHandler';
 export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';

package/dist/esm/hooks/index.js

@@ -1,4 +1,5 @@
 export * from './useDebounce';
+export * from './useDynamicList';
 export * from './useEventHandler';
 export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';

package/dist/esm/hooks/useDynamicList.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+type UseDynamicListProps<T extends object> = {
+    items: T[];
+    resizingContainerRef?: RefObject<HTMLDivElement>;
+    parentContainerRef: RefObject<HTMLDivElement>;
+    maxVisibleItems?: number;
+};
+type UseDynamicListReturnType<T extends object> = {
+    visibleItems: T[];
+    hiddenItems: T[];
+};
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+export declare function useDynamicList<T extends object>({ parentContainerRef, resizingContainerRef, items, maxVisibleItems, }: UseDynamicListProps<T>): UseDynamicListReturnType<T>;
+export {};

package/dist/esm/hooks/useDynamicList.js

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import { useEventHandler } from './useEventHandler';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect';
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+export function useDynamicList({ parentContainerRef, resizingContainerRef = parentContainerRef, items, maxVisibleItems = Infinity, }) {
+    const adjustAmount = (value) => Math.min(maxVisibleItems, value);
+    const [visibleItemsAmount, setVisibleItemsAmount] = useState(adjustAmount(items.length));
+    const [width, setWidth] = useState(Infinity);
+    const widthRef = useRef(width);
+    const handleVisibleItemsAmount = param => {
+        if (typeof param === 'number') {
+            setVisibleItemsAmount(adjustAmount(param));
+        }
+        else {
+            setVisibleItemsAmount(v => param(adjustAmount(v)));
+        }
+    };
+    const tryHidingItem = useEventHandler(() => {
+        const container = parentContainerRef.current;
+        if (container && container.scrollWidth - container.offsetWidth > 0) {
+            const itemToHide = items[visibleItemsAmount - 1];
+            if (itemToHide) {
+                handleVisibleItemsAmount(value => value - 1);
+            }
+        }
+    });
+    const tryShowingItem = useEventHandler(() => {
+        const itemToShow = items[visibleItemsAmount];
+        if (itemToShow) {
+            handleVisibleItemsAmount(value => value + 1);
+        }
+    });
+    const toggleItemWidth = useEventHandler(({ changedWidth, initialWidth }) => {
+        if (changedWidth > initialWidth) {
+            //try to add extra item
+            if (visibleItemsAmount < maxVisibleItems) {
+                tryShowingItem();
+            }
+        }
+        else if (changedWidth < initialWidth) {
+            // check if item should be hidden
+            tryHidingItem();
+        }
+    });
+    useEffect(() => {
+        const listener = () => {
+            tryHidingItem();
+            if (parentContainerRef.current) {
+                setWidth(parentContainerRef.current.scrollWidth);
+            }
+        };
+        document.fonts.addEventListener('loadingdone', listener);
+        return () => document.fonts.removeEventListener('loadingdone', listener);
+    }, [parentContainerRef, tryHidingItem]);
+    useEffect(() => {
+        const container = resizingContainerRef.current;
+        if (container) {
+            const observer = new ResizeObserver(entities => entities.forEach(entity => {
+                if (entity.target === container) {
+                    const [{ inlineSize: newWidth }] = entity.contentBoxSize;
+                    setWidth(Math.floor(newWidth));
+                }
+            }));
+            observer.observe(container);
+            return () => observer.disconnect();
+        }
+    }, [resizingContainerRef]);
+    useLayoutEffect(() => {
+        if (parentContainerRef.current) {
+            toggleItemWidth({
+                initialWidth: parentContainerRef.current.scrollWidth,
+                changedWidth: widthRef.current,
+            });
+        }
+    }, [items, parentContainerRef, toggleItemWidth]);
+    useLayoutEffect(() => {
+        toggleItemWidth({
+            initialWidth: widthRef.current,
+            changedWidth: width,
+        });
+        widthRef.current = width;
+    }, [width, toggleItemWidth]);
+    useLayoutEffect(() => {
+        tryHidingItem();
+    }, [tryHidingItem, visibleItemsAmount]);
+    return {
+        visibleItems: items.slice(0, visibleItemsAmount),
+        hiddenItems: items.slice(visibleItemsAmount),
+    };
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Utils",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "react-swipeable": "7.0.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "ac8fa414e1a84f72594d9c509b0daca04b5e48be"
+  "gitHead": "3528e78aec23804dca44d311947c1dcd4ed3792b"
 }

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useDebounce';
+export * from './useDynamicList';
 export * from './useEventHandler';
 export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';

package/src/hooks/useDynamicList.ts

@@ -0,0 +1,135 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+
+import { useEventHandler } from './useEventHandler';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect';
+
+type UseDynamicListProps<T extends object> = {
+  items: T[];
+  resizingContainerRef?: RefObject<HTMLDivElement>;
+  parentContainerRef: RefObject<HTMLDivElement>;
+  maxVisibleItems?: number;
+};
+
+type UseDynamicListReturnType<T extends object> = {
+  visibleItems: T[];
+  hiddenItems: T[];
+};
+
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+export function useDynamicList<T extends object>({
+  parentContainerRef,
+  resizingContainerRef = parentContainerRef,
+  items,
+  maxVisibleItems = Infinity,
+}: UseDynamicListProps<T>): UseDynamicListReturnType<T> {
+  const adjustAmount = (value: number) => Math.min(maxVisibleItems, value);
+
+  const [visibleItemsAmount, setVisibleItemsAmount] = useState<number>(adjustAmount(items.length));
+  const [width, setWidth] = useState(Infinity);
+  const widthRef = useRef(width);
+
+  const handleVisibleItemsAmount: typeof setVisibleItemsAmount = param => {
+    if (typeof param === 'number') {
+      setVisibleItemsAmount(adjustAmount(param));
+    } else {
+      setVisibleItemsAmount(v => param(adjustAmount(v)));
+    }
+  };
+
+  const tryHidingItem = useEventHandler(() => {
+    const container = parentContainerRef.current;
+
+    if (container && container.scrollWidth - container.offsetWidth > 0) {
+      const itemToHide = items[visibleItemsAmount - 1];
+
+      if (itemToHide) {
+        handleVisibleItemsAmount(value => value - 1);
+      }
+    }
+  });
+
+  const tryShowingItem = useEventHandler(() => {
+    const itemToShow = items[visibleItemsAmount];
+
+    if (itemToShow) {
+      handleVisibleItemsAmount(value => value + 1);
+    }
+  });
+
+  const toggleItemWidth = useEventHandler(
+    ({ changedWidth, initialWidth }: { changedWidth: number; initialWidth: number }) => {
+      if (changedWidth > initialWidth) {
+        //try to add extra item
+        if (visibleItemsAmount < maxVisibleItems) {
+          tryShowingItem();
+        }
+      } else if (changedWidth < initialWidth) {
+        // check if item should be hidden
+        tryHidingItem();
+      }
+    },
+  );
+
+  useEffect(() => {
+    const listener = () => {
+      tryHidingItem();
+
+      if (parentContainerRef.current) {
+        setWidth(parentContainerRef.current.scrollWidth);
+      }
+    };
+
+    document.fonts.addEventListener('loadingdone', listener);
+    return () => document.fonts.removeEventListener('loadingdone', listener);
+  }, [parentContainerRef, tryHidingItem]);
+
+  useEffect(() => {
+    const container = resizingContainerRef.current;
+
+    if (container) {
+      const observer = new ResizeObserver(entities =>
+        entities.forEach(entity => {
+          if (entity.target === container) {
+            const [{ inlineSize: newWidth }] = entity.contentBoxSize;
+            setWidth(Math.floor(newWidth));
+          }
+        }),
+      );
+
+      observer.observe(container);
+
+      return () => observer.disconnect();
+    }
+  }, [resizingContainerRef]);
+
+  useLayoutEffect(() => {
+    if (parentContainerRef.current) {
+      toggleItemWidth({
+        initialWidth: parentContainerRef.current.scrollWidth,
+        changedWidth: widthRef.current,
+      });
+    }
+  }, [items, parentContainerRef, toggleItemWidth]);
+
+  useLayoutEffect(() => {
+    toggleItemWidth({
+      initialWidth: widthRef.current,
+      changedWidth: width,
+    });
+
+    widthRef.current = width;
+  }, [width, toggleItemWidth]);
+
+  useLayoutEffect(() => {
+    tryHidingItem();
+  }, [tryHidingItem, visibleItemsAmount]);
+
+  return {
+    visibleItems: items.slice(0, visibleItemsAmount),
+    hiddenItems: items.slice(visibleItemsAmount),
+  };
+}