@koobiq/react-core 0.2.1 → 0.3.0

package/dist/hooks/index.d.ts

@@ -13,3 +13,5 @@ export * from './useResizeObserver';
 export * from './useElementSize';
 export * from './useRefs';
 export * from './useDebounceCallback';
+export * from './useResizeObserverRefs';
+export * from './useHideOverflowItems';

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

@@ -0,0 +1 @@
+export * from './useHideOverflowItems';

package/dist/hooks/useHideOverflowItems/useHideOverflowItems.d.ts

@@ -0,0 +1,27 @@
+export type UseHideOverflowItemsProps = {
+    /** Total number of items in the line (including the "more" item). */
+    length: number;
+    /**
+     * Index of the "more" item (defaults to the last one).
+     * @default (length - 1)
+     */
+    moreIndex?: number;
+    /**
+     * Reserved space in pixels to exclude.
+     * @default 0
+     */
+    busy?: number;
+    /**
+     * Dependencies that trigger recalculation when changed.
+     * @default []
+     */
+    deps?: unknown[];
+    /** Index that should always remain visible. */
+    pinnedIndex?: number;
+};
+export declare function useHideOverflowItems<Item extends HTMLElement = HTMLDivElement, Parent extends HTMLElement = HTMLDivElement>({ length, moreIndex, busy, deps, pinnedIndex, }: UseHideOverflowItemsProps): {
+    visibleMap: boolean[];
+    itemsRefs: import("react").RefObject<Item>[];
+    parentRef: import("react").RefObject<Parent>;
+    parentSize: number;
+};

package/dist/hooks/useHideOverflowItems/useHideOverflowItems.js

@@ -0,0 +1,58 @@
+import { useElementSize } from "../useElementSize/useElementSize.js";
+import { useRefs } from "../useRefs/useRefs.js";
+import { useResizeObserverRefs } from "../useResizeObserverRefs/useResizeObserverRefs.js";
+const createMap = (length, moreIndex, pinnedIndex) => {
+  const map = new Array(length).fill(null).map((_, i) => i !== moreIndex);
+  if (typeof pinnedIndex === "number" && pinnedIndex >= 0 && pinnedIndex < length) {
+    map[pinnedIndex] = true;
+  }
+  return map;
+};
+const calcItemsVisibleSize = (itemsSizes, map) => {
+  let sum = 0;
+  for (let index = 0; index < map.length; index++) {
+    sum += map[index] ? itemsSizes[index] : 0;
+  }
+  return sum;
+};
+function useHideOverflowItems({
+  length,
+  moreIndex = length - 1,
+  busy = 0,
+  deps = [],
+  pinnedIndex
+}) {
+  const { ref: parentRef, width: parentSize } = useElementSize();
+  const itemsRefs = useRefs(length, deps);
+  const itemsSizes = useResizeObserverRefs(itemsRefs, (el) => {
+    if (el) {
+      const { marginInlineStart, marginInlineEnd } = getComputedStyle(el);
+      return parseInt(marginInlineStart, 10) + parseInt(marginInlineEnd, 10) + el.getBoundingClientRect().width;
+    }
+    return 0;
+  });
+  const map = createMap(length, moreIndex, pinnedIndex);
+  const hideByIndex = (index) => {
+    if (!itemsSizes[index] || index === moreIndex || index === pinnedIndex) {
+      return;
+    }
+    const itemsSize = calcItemsVisibleSize(itemsSizes, map);
+    if (itemsSize + busy > parentSize) {
+      map[index] = false;
+      map[moreIndex] = true;
+    }
+  };
+  for (let index = 0; index < itemsSizes.length; index++) {
+    hideByIndex(moreIndex - index);
+    hideByIndex(moreIndex + index);
+  }
+  return {
+    visibleMap: map,
+    itemsRefs,
+    parentRef,
+    parentSize
+  };
+}
+export {
+  useHideOverflowItems
+};

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

@@ -0,0 +1 @@
+export * from './useResizeObserverRefs';

package/dist/hooks/useResizeObserverRefs/useResizeObserverRefs.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const useResizeObserverRefs: <Element extends HTMLElement | SVGGraphicsElement, ReturnType>(refs: Array<RefObject<Element>>, mapper: (el: Element | null) => ReturnType) => ReturnType[];

package/dist/hooks/useResizeObserverRefs/useResizeObserverRefs.js

@@ -0,0 +1,28 @@
+import { useState, useLayoutEffect } from "react";
+import { useMutableRef } from "../useMutableRef/useMutableRef.js";
+const useResizeObserverRefs = (refs, mapper) => {
+  const calculateDimensionsRef = useMutableRef(
+    () => refs.map((ref) => mapper(ref.current))
+  );
+  const [dimensions, setDimensions] = useState(
+    calculateDimensionsRef.current
+  );
+  useLayoutEffect(() => {
+    setDimensions(calculateDimensionsRef.current);
+  }, [refs]);
+  useLayoutEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      setDimensions(calculateDimensionsRef.current);
+    });
+    for (const ref of refs) {
+      if (ref.current) resizeObserver.observe(ref.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [refs]);
+  return dimensions;
+};
+export {
+  useResizeObserverRefs
+};

package/dist/index.js

@@ -18,6 +18,8 @@ import { useResizeObserver } from "./hooks/useResizeObserver/useResizeObserver.j
 import { useElementSize } from "./hooks/useElementSize/useElementSize.js";
 import { useRefs } from "./hooks/useRefs/useRefs.js";
 import { useDebounceCallback } from "./hooks/useDebounceCallback/useDebounceCallback.js";
+import { useResizeObserverRefs } from "./hooks/useResizeObserverRefs/useResizeObserverRefs.js";
+import { useHideOverflowItems } from "./hooks/useHideOverflowItems/useHideOverflowItems.js";
 import { polymorphicForwardRef } from "./utils/polymorphicForwardRef.js";
 import { isNotNil } from "./utils/typeGuards/isNotNil.js";
 import { isString } from "./utils/typeGuards/isString.js";
@@ -45,6 +47,7 @@ export {
   useDebounceCallback,
   useElementSize,
   useEventListener,
+  useHideOverflowItems,
   useInterval,
   useIsFirstRender,
   useIsomorphicEffect,
@@ -54,6 +57,7 @@ export {
   usePrevious,
   useRefs,
   useResizeObserver,
+  useResizeObserverRefs,
   useRouter,
   useSsr
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-core",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",