@byeolnaerim/flex-layout 0.0.6 → 0.0.8

package/dist/flex-layout/hooks/useListPaging.cjs

@@ -0,0 +1,179 @@
+'use strict';
+
+var react = require('react');
+
+const useListPagingForSentinel = ({
+  //initPageNumber,
+  //initPageSize,
+  onReachTerminal
+}) => {
+  const [firstChildNode, setFirstChildNode] = react.useState(null);
+  const [lastChildNode, setLastChildNode] = react.useState(null);
+  const observerRef = react.useRef(null);
+  const firstChildRef = react.useCallback((node) => {
+    setFirstChildNode(node);
+  }, []);
+  const lastChildRef = react.useCallback((node) => {
+    setLastChildNode(node);
+  }, []);
+  react.useEffect(() => {
+    if (firstChildNode && observerRef.current)
+      observerRef.current.unobserve(firstChildNode);
+    if (lastChildNode && observerRef.current)
+      observerRef.current.unobserve(lastChildNode);
+    const handleIntersect = (entries, observer2) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (entry.target === firstChildNode) {
+            if (onReachTerminal)
+              onReachTerminal({
+                isFirst: true,
+                isLast: false,
+                observer: observer2
+              });
+          }
+          if (entry.target === lastChildNode) {
+            if (onReachTerminal)
+              onReachTerminal({
+                isFirst: false,
+                isLast: true,
+                observer: observer2
+              });
+          }
+        }
+      });
+    };
+    const observer = new IntersectionObserver(handleIntersect, {
+      threshold: 0.1
+    });
+    observerRef.current = observer;
+    if (firstChildNode) observer.observe(firstChildNode);
+    if (lastChildNode) observer.observe(lastChildNode);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [firstChildNode, lastChildNode]);
+  return {
+    firstChildRef,
+    lastChildRef
+  };
+};
+const usePaginationViewNumber = ({
+  initPageNumber
+}) => {
+  const [showCurrentPageNumber, setShowCurrentPageNumber] = react.useState(initPageNumber);
+  const observerRef = react.useRef(null);
+  const showCurrentPageObserveTarget = react.useCallback(
+    (node) => {
+      if (!node) return;
+      if (!observerRef.current) {
+        observerRef.current = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                const pageIndexAttr = entry.target.getAttribute(
+                  "data-page-index"
+                );
+                if (!pageIndexAttr) return;
+                const pageIndex = parseInt(pageIndexAttr, 10);
+                setShowCurrentPageNumber(pageIndex);
+              }
+            });
+          },
+          {
+            threshold: 0.1
+            // 예: 10% 이상 보여야 intersect로 판단
+          }
+        );
+      }
+      observerRef.current.observe(node);
+    },
+    []
+  );
+  react.useEffect(() => {
+    const currentObserver = observerRef.current;
+    return () => {
+      if (currentObserver) {
+        currentObserver.disconnect();
+      }
+    };
+  }, []);
+  return {
+    showCurrentPageNumber,
+    showCurrentPageObserveTarget
+  };
+};
+const usePagingHandler = ({
+  lastCallPageNumber,
+  dataListRef
+}) => {
+  const jumpingPageNumberRef = react.useRef(lastCallPageNumber);
+  react.useEffect(() => {
+    if (jumpingPageNumberRef.current) {
+      setTimeout(() => {
+        jumpingPageNumberRef.current = null;
+      }, 1e3);
+    }
+  }, [jumpingPageNumberRef]);
+  const paginationScrollIntoViewTarget = react.useRef({});
+  const pageNumberRef = react.useRef(lastCallPageNumber);
+  const setPaginationRef = react.useCallback(
+    (i) => (node) => {
+      if (!node) return;
+      paginationScrollIntoViewTarget.current[i] = node;
+      if (jumpingPageNumberRef.current !== null && i === jumpingPageNumberRef.current) {
+        node.scrollIntoView({
+          behavior: "instant",
+          // 필요한 경우 'smooth' 등으로 수정 가능
+          block: "start"
+        });
+        jumpingPageNumberRef.current = null;
+      }
+    },
+    []
+  );
+  const handleReachTerminal = ({ isFirst, isLast, observer }, dataCallFetch) => {
+    if (dataListRef.current.length === 0) return;
+    if (jumpingPageNumberRef.current != null) return;
+    if (!isFirst && !isLast) return;
+    const callPageNumber = isFirst ? Math.max(pageNumberRef.current - 1, 0) : pageNumberRef.current + 1;
+    if (dataListRef.current[callPageNumber] != null && (dataListRef.current[callPageNumber]?.length || 0) > 0)
+      return;
+    jumpingPageNumberRef.current = callPageNumber;
+    setTimeout(() => {
+      jumpingPageNumberRef.current = null;
+    }, 1e3);
+    dataCallFetch(callPageNumber);
+  };
+  const handleClickPageChange = (page, dataCallFetch) => {
+    const pageData = dataListRef.current[page];
+    if (pageData != null && Array.isArray(pageData) && pageData.length > 0) {
+      paginationScrollIntoViewTarget.current[page]?.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+      return;
+    }
+    jumpingPageNumberRef.current = page;
+    setTimeout(() => {
+      jumpingPageNumberRef.current = null;
+    }, 1e3);
+    dataCallFetch(page);
+  };
+  return {
+    jumpingPageNumberRef,
+    paginationScrollIntoViewTarget,
+    pageNumberRef,
+    setPaginationRef,
+    handleReachTerminal,
+    handleClickPageChange
+  };
+};
+
+exports.useListPagingForSentinel = useListPagingForSentinel;
+exports.usePaginationViewNumber = usePaginationViewNumber;
+exports.usePagingHandler = usePagingHandler;
+//# sourceMappingURL=useListPaging.cjs.map
+//# sourceMappingURL=useListPaging.cjs.map

package/dist/flex-layout/hooks/useListPaging.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useListPaging.ts"],"names":["useState","useRef","useCallback","useEffect","observer"],"mappings":"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","file":"useListPaging.cjs","sourcesContent":["import {\r\n\tMutableRefObject,\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\n\r\nexport type OnReachTerminalType = {\r\n\tisFirst: boolean;\r\n\tisLast: boolean;\r\n\tobserver: IntersectionObserver;\r\n};\r\ninterface UseListPagingForInfinityProps {\r\n\tonReachTerminal?: (onReachTerminalData: OnReachTerminalType) => void;\r\n}\r\nexport const useListPagingForSentinel = <E extends HTMLElement>({\r\n\t//initPageNumber,\r\n\t//initPageSize,\r\n\tonReachTerminal,\r\n}: UseListPagingForInfinityProps): {\r\n\tfirstChildRef: (node: E | null) => void;\r\n\tlastChildRef: (node: E | null) => void;\r\n\t//pageNumber: number;\r\n\t//pageSize: number;\r\n\t//setPageNumber: Dispatch<SetStateAction<number>>;\r\n\t//setPageSize: Dispatch<SetStateAction<number>>;\r\n} => {\r\n\tconst [firstChildNode, setFirstChildNode] = useState<E | null>(null);\r\n\tconst [lastChildNode, setLastChildNode] = useState<E | null>(null);\r\n\tconst observerRef = useRef<IntersectionObserver | null>(null);\r\n\r\n\tconst firstChildRef = useCallback((node: E | null) => {\r\n\t\tsetFirstChildNode(node);\r\n\t}, []);\r\n\r\n\tconst lastChildRef = useCallback((node: E | null) => {\r\n\t\tsetLastChildNode(node);\r\n\t}, []);\r\n\t// 페이지 번호가 변경될 때마다 데이터 로드를 위한 콜백 호출\r\n\r\n\tuseEffect(() => {\r\n\t\tif (firstChildNode && observerRef.current)\r\n\t\t\tobserverRef.current.unobserve(firstChildNode);\r\n\t\tif (lastChildNode && observerRef.current)\r\n\t\t\tobserverRef.current.unobserve(lastChildNode);\r\n\t\tconst handleIntersect: IntersectionObserverCallback = (\r\n\t\t\tentries,\r\n\t\t\tobserver,\r\n\t\t) => {\r\n\t\t\tentries.forEach((entry) => {\r\n\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\tif (entry.target === firstChildNode) {\r\n\t\t\t\t\t\tif (onReachTerminal)\r\n\t\t\t\t\t\t\tonReachTerminal({\r\n\t\t\t\t\t\t\t\tisFirst: true,\r\n\t\t\t\t\t\t\t\tisLast: false,\r\n\t\t\t\t\t\t\t\tobserver,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (entry.target === lastChildNode) {\r\n\t\t\t\t\t\tif (onReachTerminal)\r\n\t\t\t\t\t\t\tonReachTerminal({\r\n\t\t\t\t\t\t\t\tisFirst: false,\r\n\t\t\t\t\t\t\t\tisLast: true,\r\n\t\t\t\t\t\t\t\tobserver,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t};\r\n\r\n\t\tconst observer = new IntersectionObserver(handleIntersect, {\r\n\t\t\tthreshold: 0.1,\r\n\t\t});\r\n\r\n\t\tobserverRef.current = observer;\r\n\r\n\t\tif (firstChildNode) observer.observe(firstChildNode);\r\n\t\tif (lastChildNode) observer.observe(lastChildNode);\r\n\r\n\t\treturn () => {\r\n\t\t\tif (observerRef.current) {\r\n\t\t\t\t// if (firstChildNode)\r\n\t\t\t\t//     observerRef.current.unobserve(firstChildNode);\r\n\t\t\t\t// if (lastChildNode) observerRef.current.unobserve(lastChildNode);\r\n\t\t\t\tobserverRef.current.disconnect();\r\n\t\t\t}\r\n\t\t};\r\n\t}, [firstChildNode, lastChildNode]);\r\n\r\n\treturn {\r\n\t\tfirstChildRef,\r\n\t\tlastChildRef,\r\n\t};\r\n};\r\n\r\nexport const usePaginationViewNumber = ({\r\n\tinitPageNumber,\r\n}: {\r\n\tinitPageNumber: number;\r\n}) => {\r\n\tconst [showCurrentPageNumber, setShowCurrentPageNumber] =\r\n\t\tuseState<number>(initPageNumber);\r\n\r\n\tconst observerRef = useRef<IntersectionObserver | null>(null);\r\n\tconst showCurrentPageObserveTarget = useCallback(\r\n\t\t(node: HTMLElement | null) => {\r\n\t\t\tif (!node) return;\r\n\r\n\t\t\t// 아직 observer가 없으면 새로 생성\r\n\t\t\tif (!observerRef.current) {\r\n\t\t\t\tobserverRef.current = new IntersectionObserver(\r\n\t\t\t\t\t(entries) => {\r\n\t\t\t\t\t\tentries.forEach((entry) => {\r\n\t\t\t\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\t\t\t\tconst pageIndexAttr =\r\n\t\t\t\t\t\t\t\t\tentry.target.getAttribute(\r\n\t\t\t\t\t\t\t\t\t\t\"data-page-index\",\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (!pageIndexAttr) return;\r\n\t\t\t\t\t\t\t\t// if (!entry.target.hasAttribute('data-is-first'))\r\n\t\t\t\t\t\t\t\t//     return;\r\n\t\t\t\t\t\t\t\tconst pageIndex = parseInt(pageIndexAttr, 10);\r\n\t\t\t\t\t\t\t\tsetShowCurrentPageNumber(pageIndex);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tthreshold: 0.1, // 예: 10% 이상 보여야 intersect로 판단\r\n\t\t\t\t\t},\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\t// 해당 노드를 관찰\r\n\t\t\tobserverRef.current.observe(node);\r\n\t\t},\r\n\t\t[],\r\n\t);\r\n\tuseEffect(() => {\r\n\t\tconst currentObserver = observerRef.current;\r\n\t\treturn () => {\r\n\t\t\tif (currentObserver) {\r\n\t\t\t\tcurrentObserver.disconnect();\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\treturn {\r\n\t\tshowCurrentPageNumber,\r\n\t\tshowCurrentPageObserveTarget,\r\n\t};\r\n};\r\n\r\nexport const usePagingHandler = <T>({\r\n\tlastCallPageNumber,\r\n\tdataListRef,\r\n}: {\r\n\tlastCallPageNumber: number;\r\n\tdataListRef: MutableRefObject<Array<T[] | null>>;\r\n}) => {\r\n\tconst jumpingPageNumberRef = useRef<number | null>(lastCallPageNumber);\r\n\tuseEffect(() => {\r\n\t\tif (jumpingPageNumberRef.current) {\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t\t}, 1000);\r\n\t\t}\r\n\t}, [jumpingPageNumberRef]);\r\n\tconst paginationScrollIntoViewTarget = useRef<\r\n\t\tRecord<number, HTMLDivElement | null>\r\n\t>({});\r\n\tconst pageNumberRef = useRef<number>(lastCallPageNumber);\r\n\r\n\tconst setPaginationRef = useCallback(\r\n\t\t(i: number) => (node: HTMLDivElement | null) => {\r\n\t\t\tif (!node) return;\r\n\r\n\t\t\tpaginationScrollIntoViewTarget.current[i] = node;\r\n\r\n\t\t\t// jumpingPageNumberRef에 값이 있고, 그 값이 현재 i와 같으면 스크롤\r\n\t\t\tif (\r\n\t\t\t\tjumpingPageNumberRef.current !== null &&\r\n\t\t\t\ti === jumpingPageNumberRef.current\r\n\t\t\t) {\r\n\t\t\t\tnode.scrollIntoView({\r\n\t\t\t\t\tbehavior: \"instant\", // 필요한 경우 'smooth' 등으로 수정 가능\r\n\t\t\t\t\tblock: \"start\",\r\n\t\t\t\t});\r\n\t\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t\t}\r\n\t\t},\r\n\t\t[],\r\n\t);\r\n\r\n\t//스크롤이 “첫 아이템” 혹은 “마지막 아이템”에 닿을 때 호출\r\n\tconst handleReachTerminal = (\r\n\t\t{ isFirst, isLast, observer }: OnReachTerminalType,\r\n\t\tdataCallFetch: (callPageNumber: number) => void,\r\n\t) => {\r\n\t\t// 이미 다른 페이지로 점프 중이면, 중복 호출 방지\r\n\t\tif (dataListRef.current.length === 0) return;\r\n\t\tif (jumpingPageNumberRef.current != null) return;\r\n\t\tif (!isFirst && !isLast) return;\r\n\r\n\t\tconst callPageNumber = isFirst\r\n\t\t\t? Math.max(pageNumberRef.current - 1, 0)\r\n\t\t\t: pageNumberRef.current + 1;\r\n\r\n\t\tif (\r\n\t\t\tdataListRef.current[callPageNumber] != null &&\r\n\t\t\t(dataListRef.current[callPageNumber]?.length || 0) > 0\r\n\t\t)\r\n\t\t\treturn;\r\n\t\tjumpingPageNumberRef.current = callPageNumber;\r\n\t\tsetTimeout(() => {\r\n\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t}, 1000);\r\n\t\tdataCallFetch(callPageNumber);\r\n\t};\r\n\r\n\t//페이지네이션에서 페이지 번호를 직접 클릭했을 시\r\n\tconst handleClickPageChange = (\r\n\t\tpage: number,\r\n\t\tdataCallFetch: (callPageNumber: number) => void,\r\n\t) => {\r\n\t\t// PaginationLayer는 1-based, 내부 로직은 0-based\r\n\t\t// 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n\t\tconst pageData = dataListRef.current[page];\r\n\r\n\t\t// 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n\t\tif (\r\n\t\t\tpageData != null &&\r\n\t\t\tArray.isArray(pageData) &&\r\n\t\t\tpageData.length > 0\r\n\t\t) {\r\n\t\t\tpaginationScrollIntoViewTarget.current[page]?.scrollIntoView({\r\n\t\t\t\tbehavior: \"smooth\",\r\n\t\t\t\tblock: \"start\",\r\n\t\t\t});\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tjumpingPageNumberRef.current = page;\r\n\t\tsetTimeout(() => {\r\n\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t}, 1000);\r\n\t\tdataCallFetch(page);\r\n\t};\r\n\treturn {\r\n\t\tjumpingPageNumberRef,\r\n\t\tpaginationScrollIntoViewTarget,\r\n\t\tpageNumberRef,\r\n\t\tsetPaginationRef,\r\n\t\thandleReachTerminal,\r\n\t\thandleClickPageChange,\r\n\t};\r\n};\r\n"]}

package/dist/flex-layout/hooks/useListPaging.js

@@ -0,0 +1,175 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const useListPagingForSentinel = ({
+  //initPageNumber,
+  //initPageSize,
+  onReachTerminal
+}) => {
+  const [firstChildNode, setFirstChildNode] = useState(null);
+  const [lastChildNode, setLastChildNode] = useState(null);
+  const observerRef = useRef(null);
+  const firstChildRef = useCallback((node) => {
+    setFirstChildNode(node);
+  }, []);
+  const lastChildRef = useCallback((node) => {
+    setLastChildNode(node);
+  }, []);
+  useEffect(() => {
+    if (firstChildNode && observerRef.current)
+      observerRef.current.unobserve(firstChildNode);
+    if (lastChildNode && observerRef.current)
+      observerRef.current.unobserve(lastChildNode);
+    const handleIntersect = (entries, observer2) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (entry.target === firstChildNode) {
+            if (onReachTerminal)
+              onReachTerminal({
+                isFirst: true,
+                isLast: false,
+                observer: observer2
+              });
+          }
+          if (entry.target === lastChildNode) {
+            if (onReachTerminal)
+              onReachTerminal({
+                isFirst: false,
+                isLast: true,
+                observer: observer2
+              });
+          }
+        }
+      });
+    };
+    const observer = new IntersectionObserver(handleIntersect, {
+      threshold: 0.1
+    });
+    observerRef.current = observer;
+    if (firstChildNode) observer.observe(firstChildNode);
+    if (lastChildNode) observer.observe(lastChildNode);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [firstChildNode, lastChildNode]);
+  return {
+    firstChildRef,
+    lastChildRef
+  };
+};
+const usePaginationViewNumber = ({
+  initPageNumber
+}) => {
+  const [showCurrentPageNumber, setShowCurrentPageNumber] = useState(initPageNumber);
+  const observerRef = useRef(null);
+  const showCurrentPageObserveTarget = useCallback(
+    (node) => {
+      if (!node) return;
+      if (!observerRef.current) {
+        observerRef.current = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                const pageIndexAttr = entry.target.getAttribute(
+                  "data-page-index"
+                );
+                if (!pageIndexAttr) return;
+                const pageIndex = parseInt(pageIndexAttr, 10);
+                setShowCurrentPageNumber(pageIndex);
+              }
+            });
+          },
+          {
+            threshold: 0.1
+            // 예: 10% 이상 보여야 intersect로 판단
+          }
+        );
+      }
+      observerRef.current.observe(node);
+    },
+    []
+  );
+  useEffect(() => {
+    const currentObserver = observerRef.current;
+    return () => {
+      if (currentObserver) {
+        currentObserver.disconnect();
+      }
+    };
+  }, []);
+  return {
+    showCurrentPageNumber,
+    showCurrentPageObserveTarget
+  };
+};
+const usePagingHandler = ({
+  lastCallPageNumber,
+  dataListRef
+}) => {
+  const jumpingPageNumberRef = useRef(lastCallPageNumber);
+  useEffect(() => {
+    if (jumpingPageNumberRef.current) {
+      setTimeout(() => {
+        jumpingPageNumberRef.current = null;
+      }, 1e3);
+    }
+  }, [jumpingPageNumberRef]);
+  const paginationScrollIntoViewTarget = useRef({});
+  const pageNumberRef = useRef(lastCallPageNumber);
+  const setPaginationRef = useCallback(
+    (i) => (node) => {
+      if (!node) return;
+      paginationScrollIntoViewTarget.current[i] = node;
+      if (jumpingPageNumberRef.current !== null && i === jumpingPageNumberRef.current) {
+        node.scrollIntoView({
+          behavior: "instant",
+          // 필요한 경우 'smooth' 등으로 수정 가능
+          block: "start"
+        });
+        jumpingPageNumberRef.current = null;
+      }
+    },
+    []
+  );
+  const handleReachTerminal = ({ isFirst, isLast, observer }, dataCallFetch) => {
+    if (dataListRef.current.length === 0) return;
+    if (jumpingPageNumberRef.current != null) return;
+    if (!isFirst && !isLast) return;
+    const callPageNumber = isFirst ? Math.max(pageNumberRef.current - 1, 0) : pageNumberRef.current + 1;
+    if (dataListRef.current[callPageNumber] != null && (dataListRef.current[callPageNumber]?.length || 0) > 0)
+      return;
+    jumpingPageNumberRef.current = callPageNumber;
+    setTimeout(() => {
+      jumpingPageNumberRef.current = null;
+    }, 1e3);
+    dataCallFetch(callPageNumber);
+  };
+  const handleClickPageChange = (page, dataCallFetch) => {
+    const pageData = dataListRef.current[page];
+    if (pageData != null && Array.isArray(pageData) && pageData.length > 0) {
+      paginationScrollIntoViewTarget.current[page]?.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+      return;
+    }
+    jumpingPageNumberRef.current = page;
+    setTimeout(() => {
+      jumpingPageNumberRef.current = null;
+    }, 1e3);
+    dataCallFetch(page);
+  };
+  return {
+    jumpingPageNumberRef,
+    paginationScrollIntoViewTarget,
+    pageNumberRef,
+    setPaginationRef,
+    handleReachTerminal,
+    handleClickPageChange
+  };
+};
+
+export { useListPagingForSentinel, usePaginationViewNumber, usePagingHandler };
+//# sourceMappingURL=useListPaging.js.map
+//# sourceMappingURL=useListPaging.js.map

package/dist/flex-layout/hooks/useListPaging.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useListPaging.ts"],"names":["observer"],"mappings":"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","file":"useListPaging.js","sourcesContent":["import {\r\n\tMutableRefObject,\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\n\r\nexport type OnReachTerminalType = {\r\n\tisFirst: boolean;\r\n\tisLast: boolean;\r\n\tobserver: IntersectionObserver;\r\n};\r\ninterface UseListPagingForInfinityProps {\r\n\tonReachTerminal?: (onReachTerminalData: OnReachTerminalType) => void;\r\n}\r\nexport const useListPagingForSentinel = <E extends HTMLElement>({\r\n\t//initPageNumber,\r\n\t//initPageSize,\r\n\tonReachTerminal,\r\n}: UseListPagingForInfinityProps): {\r\n\tfirstChildRef: (node: E | null) => void;\r\n\tlastChildRef: (node: E | null) => void;\r\n\t//pageNumber: number;\r\n\t//pageSize: number;\r\n\t//setPageNumber: Dispatch<SetStateAction<number>>;\r\n\t//setPageSize: Dispatch<SetStateAction<number>>;\r\n} => {\r\n\tconst [firstChildNode, setFirstChildNode] = useState<E | null>(null);\r\n\tconst [lastChildNode, setLastChildNode] = useState<E | null>(null);\r\n\tconst observerRef = useRef<IntersectionObserver | null>(null);\r\n\r\n\tconst firstChildRef = useCallback((node: E | null) => {\r\n\t\tsetFirstChildNode(node);\r\n\t}, []);\r\n\r\n\tconst lastChildRef = useCallback((node: E | null) => {\r\n\t\tsetLastChildNode(node);\r\n\t}, []);\r\n\t// 페이지 번호가 변경될 때마다 데이터 로드를 위한 콜백 호출\r\n\r\n\tuseEffect(() => {\r\n\t\tif (firstChildNode && observerRef.current)\r\n\t\t\tobserverRef.current.unobserve(firstChildNode);\r\n\t\tif (lastChildNode && observerRef.current)\r\n\t\t\tobserverRef.current.unobserve(lastChildNode);\r\n\t\tconst handleIntersect: IntersectionObserverCallback = (\r\n\t\t\tentries,\r\n\t\t\tobserver,\r\n\t\t) => {\r\n\t\t\tentries.forEach((entry) => {\r\n\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\tif (entry.target === firstChildNode) {\r\n\t\t\t\t\t\tif (onReachTerminal)\r\n\t\t\t\t\t\t\tonReachTerminal({\r\n\t\t\t\t\t\t\t\tisFirst: true,\r\n\t\t\t\t\t\t\t\tisLast: false,\r\n\t\t\t\t\t\t\t\tobserver,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (entry.target === lastChildNode) {\r\n\t\t\t\t\t\tif (onReachTerminal)\r\n\t\t\t\t\t\t\tonReachTerminal({\r\n\t\t\t\t\t\t\t\tisFirst: false,\r\n\t\t\t\t\t\t\t\tisLast: true,\r\n\t\t\t\t\t\t\t\tobserver,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t};\r\n\r\n\t\tconst observer = new IntersectionObserver(handleIntersect, {\r\n\t\t\tthreshold: 0.1,\r\n\t\t});\r\n\r\n\t\tobserverRef.current = observer;\r\n\r\n\t\tif (firstChildNode) observer.observe(firstChildNode);\r\n\t\tif (lastChildNode) observer.observe(lastChildNode);\r\n\r\n\t\treturn () => {\r\n\t\t\tif (observerRef.current) {\r\n\t\t\t\t// if (firstChildNode)\r\n\t\t\t\t//     observerRef.current.unobserve(firstChildNode);\r\n\t\t\t\t// if (lastChildNode) observerRef.current.unobserve(lastChildNode);\r\n\t\t\t\tobserverRef.current.disconnect();\r\n\t\t\t}\r\n\t\t};\r\n\t}, [firstChildNode, lastChildNode]);\r\n\r\n\treturn {\r\n\t\tfirstChildRef,\r\n\t\tlastChildRef,\r\n\t};\r\n};\r\n\r\nexport const usePaginationViewNumber = ({\r\n\tinitPageNumber,\r\n}: {\r\n\tinitPageNumber: number;\r\n}) => {\r\n\tconst [showCurrentPageNumber, setShowCurrentPageNumber] =\r\n\t\tuseState<number>(initPageNumber);\r\n\r\n\tconst observerRef = useRef<IntersectionObserver | null>(null);\r\n\tconst showCurrentPageObserveTarget = useCallback(\r\n\t\t(node: HTMLElement | null) => {\r\n\t\t\tif (!node) return;\r\n\r\n\t\t\t// 아직 observer가 없으면 새로 생성\r\n\t\t\tif (!observerRef.current) {\r\n\t\t\t\tobserverRef.current = new IntersectionObserver(\r\n\t\t\t\t\t(entries) => {\r\n\t\t\t\t\t\tentries.forEach((entry) => {\r\n\t\t\t\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\t\t\t\tconst pageIndexAttr =\r\n\t\t\t\t\t\t\t\t\tentry.target.getAttribute(\r\n\t\t\t\t\t\t\t\t\t\t\"data-page-index\",\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (!pageIndexAttr) return;\r\n\t\t\t\t\t\t\t\t// if (!entry.target.hasAttribute('data-is-first'))\r\n\t\t\t\t\t\t\t\t//     return;\r\n\t\t\t\t\t\t\t\tconst pageIndex = parseInt(pageIndexAttr, 10);\r\n\t\t\t\t\t\t\t\tsetShowCurrentPageNumber(pageIndex);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tthreshold: 0.1, // 예: 10% 이상 보여야 intersect로 판단\r\n\t\t\t\t\t},\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\t// 해당 노드를 관찰\r\n\t\t\tobserverRef.current.observe(node);\r\n\t\t},\r\n\t\t[],\r\n\t);\r\n\tuseEffect(() => {\r\n\t\tconst currentObserver = observerRef.current;\r\n\t\treturn () => {\r\n\t\t\tif (currentObserver) {\r\n\t\t\t\tcurrentObserver.disconnect();\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\treturn {\r\n\t\tshowCurrentPageNumber,\r\n\t\tshowCurrentPageObserveTarget,\r\n\t};\r\n};\r\n\r\nexport const usePagingHandler = <T>({\r\n\tlastCallPageNumber,\r\n\tdataListRef,\r\n}: {\r\n\tlastCallPageNumber: number;\r\n\tdataListRef: MutableRefObject<Array<T[] | null>>;\r\n}) => {\r\n\tconst jumpingPageNumberRef = useRef<number | null>(lastCallPageNumber);\r\n\tuseEffect(() => {\r\n\t\tif (jumpingPageNumberRef.current) {\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t\t}, 1000);\r\n\t\t}\r\n\t}, [jumpingPageNumberRef]);\r\n\tconst paginationScrollIntoViewTarget = useRef<\r\n\t\tRecord<number, HTMLDivElement | null>\r\n\t>({});\r\n\tconst pageNumberRef = useRef<number>(lastCallPageNumber);\r\n\r\n\tconst setPaginationRef = useCallback(\r\n\t\t(i: number) => (node: HTMLDivElement | null) => {\r\n\t\t\tif (!node) return;\r\n\r\n\t\t\tpaginationScrollIntoViewTarget.current[i] = node;\r\n\r\n\t\t\t// jumpingPageNumberRef에 값이 있고, 그 값이 현재 i와 같으면 스크롤\r\n\t\t\tif (\r\n\t\t\t\tjumpingPageNumberRef.current !== null &&\r\n\t\t\t\ti === jumpingPageNumberRef.current\r\n\t\t\t) {\r\n\t\t\t\tnode.scrollIntoView({\r\n\t\t\t\t\tbehavior: \"instant\", // 필요한 경우 'smooth' 등으로 수정 가능\r\n\t\t\t\t\tblock: \"start\",\r\n\t\t\t\t});\r\n\t\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t\t}\r\n\t\t},\r\n\t\t[],\r\n\t);\r\n\r\n\t//스크롤이 “첫 아이템” 혹은 “마지막 아이템”에 닿을 때 호출\r\n\tconst handleReachTerminal = (\r\n\t\t{ isFirst, isLast, observer }: OnReachTerminalType,\r\n\t\tdataCallFetch: (callPageNumber: number) => void,\r\n\t) => {\r\n\t\t// 이미 다른 페이지로 점프 중이면, 중복 호출 방지\r\n\t\tif (dataListRef.current.length === 0) return;\r\n\t\tif (jumpingPageNumberRef.current != null) return;\r\n\t\tif (!isFirst && !isLast) return;\r\n\r\n\t\tconst callPageNumber = isFirst\r\n\t\t\t? Math.max(pageNumberRef.current - 1, 0)\r\n\t\t\t: pageNumberRef.current + 1;\r\n\r\n\t\tif (\r\n\t\t\tdataListRef.current[callPageNumber] != null &&\r\n\t\t\t(dataListRef.current[callPageNumber]?.length || 0) > 0\r\n\t\t)\r\n\t\t\treturn;\r\n\t\tjumpingPageNumberRef.current = callPageNumber;\r\n\t\tsetTimeout(() => {\r\n\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t}, 1000);\r\n\t\tdataCallFetch(callPageNumber);\r\n\t};\r\n\r\n\t//페이지네이션에서 페이지 번호를 직접 클릭했을 시\r\n\tconst handleClickPageChange = (\r\n\t\tpage: number,\r\n\t\tdataCallFetch: (callPageNumber: number) => void,\r\n\t) => {\r\n\t\t// PaginationLayer는 1-based, 내부 로직은 0-based\r\n\t\t// 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n\t\tconst pageData = dataListRef.current[page];\r\n\r\n\t\t// 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n\t\tif (\r\n\t\t\tpageData != null &&\r\n\t\t\tArray.isArray(pageData) &&\r\n\t\t\tpageData.length > 0\r\n\t\t) {\r\n\t\t\tpaginationScrollIntoViewTarget.current[page]?.scrollIntoView({\r\n\t\t\t\tbehavior: \"smooth\",\r\n\t\t\t\tblock: \"start\",\r\n\t\t\t});\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tjumpingPageNumberRef.current = page;\r\n\t\tsetTimeout(() => {\r\n\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t}, 1000);\r\n\t\tdataCallFetch(page);\r\n\t};\r\n\treturn {\r\n\t\tjumpingPageNumberRef,\r\n\t\tpaginationScrollIntoViewTarget,\r\n\t\tpageNumberRef,\r\n\t\tsetPaginationRef,\r\n\t\thandleReachTerminal,\r\n\t\thandleClickPageChange,\r\n\t};\r\n};\r\n"]}

package/dist/flex-layout/hooks/useSizes.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+var react = require('react');
+var rxjs = require('rxjs');
+
+const useSize = (sizeName) => {
+  const ref = react.useRef(null);
+  const [size, setSize] = react.useState(void 0);
+  react.useLayoutEffect(() => {
+    if (!ref.current) return;
+    const handleResize = () => {
+      if (ref.current) {
+        const newSize = ref.current.getBoundingClientRect()[sizeName];
+        setSize(newSize);
+      }
+    };
+    handleResize();
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+    resizeObserver.observe(ref.current);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [sizeName]);
+  return { ref, size };
+};
+const useFirstChildSize = (sizeName) => {
+  const ref = react.useRef(null);
+  const [sizes, setSizes] = react.useState();
+  react.useEffect(() => {
+    if (!ref.current || !ref.current.children[0]) return;
+    if (!sizes || sizes.length === 0) {
+      setSizes([
+        ref.current.getBoundingClientRect()[sizeName],
+        ref.current.children[0].getBoundingClientRect()[sizeName]
+      ]);
+    }
+  }, []);
+  react.useEffect(() => {
+    if (!ref.current || !ref.current.children[0]) return;
+    const childrenChangeObserver = new MutationObserver(
+      (mutationList, observer) => {
+        mutationList.forEach((mutation) => {
+          if (!ref.current || !sizes || !ref.current.children[0])
+            return;
+          const newSize = ref.current.getBoundingClientRect()[sizeName];
+          setSizes([
+            newSize,
+            ref.current.children[0].getBoundingClientRect()[sizeName]
+          ]);
+        });
+      }
+    );
+    childrenChangeObserver.observe(ref.current, {
+      childList: true,
+      subtree: true
+    });
+    let isFocus = false;
+    const windowResizeSubscribe = rxjs.fromEvent(window, "resize").pipe(
+      rxjs.distinctUntilChanged(),
+      rxjs.filter(
+        () => document.activeElement?.tagName !== "INPUT" && !isFocus
+      )
+    ).subscribe((ev) => {
+      if (!ref.current || !ref.current.children[0]) return;
+      setSizes([
+        ref.current.getBoundingClientRect()[sizeName],
+        ref.current.children[0].getBoundingClientRect()[sizeName]
+      ]);
+    });
+    const documentFocusoutSubscribe = rxjs.fromEvent(
+      document,
+      "focusout"
+    ).pipe(
+      rxjs.auditTime(1e3),
+      rxjs.filter((ev) => document.activeElement?.tagName !== "INPUT")
+    ).subscribe({
+      next: () => {
+        if (isFocus) isFocus = false;
+      }
+    });
+    const documentFocusinSubscribe = rxjs.fromEvent(
+      document,
+      "focusin"
+    ).subscribe({
+      next: (ev) => isFocus = ev.target.tagName === "INPUT"
+    });
+    return () => {
+      windowResizeSubscribe.unsubscribe();
+      documentFocusoutSubscribe.unsubscribe();
+      documentFocusinSubscribe.unsubscribe();
+      childrenChangeObserver.disconnect();
+    };
+  }, [sizeName, sizes]);
+  return { ref, sizes };
+};
+
+exports.useFirstChildSize = useFirstChildSize;
+exports.useSize = useSize;
+//# sourceMappingURL=useSizes.cjs.map
+//# sourceMappingURL=useSizes.cjs.map

package/dist/flex-layout/hooks/useSizes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useSizes.ts"],"names":["useRef","useState","useLayoutEffect","useEffect","fromEvent","distinctUntilChanged","filter","auditTime"],"mappings":"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","file":"useSizes.cjs","sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\r\nimport { auditTime, distinctUntilChanged, filter, fromEvent } from \"rxjs\";\r\n\r\nexport const useSize = (sizeName: \"height\" | \"width\") => {\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\tconst [size, setSize] = useState<number | undefined>(undefined);\r\n\r\n\tuseLayoutEffect(() => {\r\n\t\tif (!ref.current) return;\r\n\r\n\t\tconst handleResize = () => {\r\n\t\t\tif (ref.current) {\r\n\t\t\t\tconst newSize = ref.current.getBoundingClientRect()[\r\n\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t] as number;\r\n\t\t\t\tsetSize(newSize);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t// 초기 측정\r\n\t\thandleResize();\r\n\r\n\t\t// ResizeObserver 설정\r\n\t\tconst resizeObserver = new ResizeObserver(() => {\r\n\t\t\thandleResize();\r\n\t\t});\r\n\t\tresizeObserver.observe(ref.current);\r\n\r\n\t\t// 윈도우 리사이즈 이벤트도 청취\r\n\t\twindow.addEventListener(\"resize\", handleResize);\r\n\r\n\t\t// 클린업\r\n\t\treturn () => {\r\n\t\t\tresizeObserver.disconnect();\r\n\t\t\twindow.removeEventListener(\"resize\", handleResize);\r\n\t\t};\r\n\t}, [sizeName]);\r\n\r\n\treturn { ref, size };\r\n};\r\nexport const useFirstChildSize = (sizeName: string) => {\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\tconst [sizes, setSizes] = useState<Array<number>>();\r\n\tuseEffect(() => {\r\n\t\tif (!ref.current || !ref.current.children[0]) return;\r\n\t\tif (!sizes || sizes.length === 0) {\r\n\t\t\tsetSizes([\r\n\t\t\t\tref.current.getBoundingClientRect()[\r\n\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t] as number,\r\n\t\t\t\tref.current.children[0].getBoundingClientRect()[\r\n\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t] as number,\r\n\t\t\t]);\r\n\t\t}\r\n\t}, []);\r\n\tuseEffect(() => {\r\n\t\tif (!ref.current || !ref.current.children[0]) return;\r\n\t\tconst childrenChangeObserver = new MutationObserver(\r\n\t\t\t(mutationList, observer) => {\r\n\t\t\t\tmutationList.forEach((mutation) => {\r\n\t\t\t\t\tif (!ref.current || !sizes || !ref.current.children[0])\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\tconst newSize = ref.current.getBoundingClientRect()[\r\n\t\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t\t] as number;\r\n\t\t\t\t\t//if (newSize === sizes[0]) return;\r\n\t\t\t\t\tsetSizes([\r\n\t\t\t\t\t\tnewSize,\r\n\t\t\t\t\t\tref.current.children[0].getBoundingClientRect()[\r\n\t\t\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t\t\t] as number,\r\n\t\t\t\t\t]);\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t);\r\n\t\tchildrenChangeObserver.observe(ref.current, {\r\n\t\t\tchildList: true,\r\n\t\t\tsubtree: true,\r\n\t\t});\r\n\t\tlet isFocus = false;\r\n\r\n\t\tconst windowResizeSubscribe = fromEvent<UIEvent>(window, \"resize\")\r\n\t\t\t.pipe(\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t\tfilter(\r\n\t\t\t\t\t() =>\r\n\t\t\t\t\t\tdocument.activeElement?.tagName !== \"INPUT\" && !isFocus,\r\n\t\t\t\t),\r\n\t\t\t)\r\n\t\t\t.subscribe((ev) => {\r\n\t\t\t\tif (!ref.current || !ref.current.children[0]) return;\r\n\t\t\t\tsetSizes([\r\n\t\t\t\t\tref.current.getBoundingClientRect()[\r\n\t\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t\t] as number,\r\n\t\t\t\t\tref.current.children[0].getBoundingClientRect()[\r\n\t\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t\t] as number,\r\n\t\t\t\t]);\r\n\t\t\t});\r\n\r\n\t\tconst documentFocusoutSubscribe = fromEvent<FocusEvent>(\r\n\t\t\tdocument,\r\n\t\t\t\"focusout\",\r\n\t\t)\r\n\t\t\t.pipe(\r\n\t\t\t\tauditTime(1000),\r\n\t\t\t\tfilter((ev) => document.activeElement?.tagName !== \"INPUT\"),\r\n\t\t\t)\r\n\t\t\t.subscribe({\r\n\t\t\t\tnext: () => {\r\n\t\t\t\t\tif (isFocus) isFocus = false;\r\n\t\t\t\t},\r\n\t\t\t});\r\n\r\n\t\tconst documentFocusinSubscribe = fromEvent<FocusEvent>(\r\n\t\t\tdocument,\r\n\t\t\t\"focusin\",\r\n\t\t).subscribe({\r\n\t\t\tnext: (ev) =>\r\n\t\t\t\t(isFocus = (ev.target as Element).tagName === \"INPUT\"),\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\twindowResizeSubscribe.unsubscribe();\r\n\t\t\tdocumentFocusoutSubscribe.unsubscribe();\r\n\t\t\tdocumentFocusinSubscribe.unsubscribe();\r\n\t\t\tchildrenChangeObserver.disconnect();\r\n\t\t};\r\n\t}, [sizeName, sizes]);\r\n\treturn { ref, sizes };\r\n};\r\n"]}

package/dist/flex-layout/hooks/useSizes.js

@@ -0,0 +1,101 @@
+import { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { fromEvent, distinctUntilChanged, filter, auditTime } from 'rxjs';
+
+const useSize = (sizeName) => {
+  const ref = useRef(null);
+  const [size, setSize] = useState(void 0);
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+    const handleResize = () => {
+      if (ref.current) {
+        const newSize = ref.current.getBoundingClientRect()[sizeName];
+        setSize(newSize);
+      }
+    };
+    handleResize();
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+    resizeObserver.observe(ref.current);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [sizeName]);
+  return { ref, size };
+};
+const useFirstChildSize = (sizeName) => {
+  const ref = useRef(null);
+  const [sizes, setSizes] = useState();
+  useEffect(() => {
+    if (!ref.current || !ref.current.children[0]) return;
+    if (!sizes || sizes.length === 0) {
+      setSizes([
+        ref.current.getBoundingClientRect()[sizeName],
+        ref.current.children[0].getBoundingClientRect()[sizeName]
+      ]);
+    }
+  }, []);
+  useEffect(() => {
+    if (!ref.current || !ref.current.children[0]) return;
+    const childrenChangeObserver = new MutationObserver(
+      (mutationList, observer) => {
+        mutationList.forEach((mutation) => {
+          if (!ref.current || !sizes || !ref.current.children[0])
+            return;
+          const newSize = ref.current.getBoundingClientRect()[sizeName];
+          setSizes([
+            newSize,
+            ref.current.children[0].getBoundingClientRect()[sizeName]
+          ]);
+        });
+      }
+    );
+    childrenChangeObserver.observe(ref.current, {
+      childList: true,
+      subtree: true
+    });
+    let isFocus = false;
+    const windowResizeSubscribe = fromEvent(window, "resize").pipe(
+      distinctUntilChanged(),
+      filter(
+        () => document.activeElement?.tagName !== "INPUT" && !isFocus
+      )
+    ).subscribe((ev) => {
+      if (!ref.current || !ref.current.children[0]) return;
+      setSizes([
+        ref.current.getBoundingClientRect()[sizeName],
+        ref.current.children[0].getBoundingClientRect()[sizeName]
+      ]);
+    });
+    const documentFocusoutSubscribe = fromEvent(
+      document,
+      "focusout"
+    ).pipe(
+      auditTime(1e3),
+      filter((ev) => document.activeElement?.tagName !== "INPUT")
+    ).subscribe({
+      next: () => {
+        if (isFocus) isFocus = false;
+      }
+    });
+    const documentFocusinSubscribe = fromEvent(
+      document,
+      "focusin"
+    ).subscribe({
+      next: (ev) => isFocus = ev.target.tagName === "INPUT"
+    });
+    return () => {
+      windowResizeSubscribe.unsubscribe();
+      documentFocusoutSubscribe.unsubscribe();
+      documentFocusinSubscribe.unsubscribe();
+      childrenChangeObserver.disconnect();
+    };
+  }, [sizeName, sizes]);
+  return { ref, sizes };
+};
+
+export { useFirstChildSize, useSize };
+//# sourceMappingURL=useSizes.js.map
+//# sourceMappingURL=useSizes.js.map

package/dist/flex-layout/hooks/useSizes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useSizes.ts"],"names":[],"mappings":";;;AAGO,MAAM,OAAA,GAAU,CAAC,QAAA,KAAiC;AACxD,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,MAAS,CAAA;AAE9D,EAAA,eAAA,CAAgB,MAAM;AACrB,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAElB,IAAA,MAAM,eAAe,MAAM;AAC1B,MAAA,IAAI,IAAI,OAAA,EAAS;AAChB,QAAA,MAAM,OAAA,GAAU,GAAA,CAAI,OAAA,CAAQ,qBAAA,GAC3B,QACD,CAAA;AACA,QAAA,OAAA,CAAQ,OAAO,CAAA;AAAA,MAChB;AAAA,IACD,CAAA;AAGA,IAAA,YAAA,EAAa;AAGb,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,MAAM;AAC/C,MAAA,YAAA,EAAa;AAAA,IACd,CAAC,CAAA;AACD,IAAA,cAAA,CAAe,OAAA,CAAQ,IAAI,OAAO,CAAA;AAGlC,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAG9C,IAAA,OAAO,MAAM;AACZ,MAAA,cAAA,CAAe,UAAA,EAAW;AAC1B,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,IAClD,CAAA;AAAA,EACD,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,OAAO,EAAE,KAAK,IAAA,EAAK;AACpB;AACO,MAAM,iBAAA,GAAoB,CAAC,QAAA,KAAqB;AACtD,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAA,EAAwB;AAClD,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,CAAC,IAAI,OAAA,IAAW,CAAC,IAAI,OAAA,CAAQ,QAAA,CAAS,CAAC,CAAA,EAAG;AAC9C,IAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG;AACjC,MAAA,QAAA,CAAS;AAAA,QACR,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAsB,CACjC,QACD,CAAA;AAAA,QACA,IAAI,OAAA,CAAQ,QAAA,CAAS,CAAC,CAAA,CAAE,qBAAA,GACvB,QACD;AAAA,OACA,CAAA;AAAA,IACF;AAAA,EACD,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,CAAC,IAAI,OAAA,IAAW,CAAC,IAAI,OAAA,CAAQ,QAAA,CAAS,CAAC,CAAA,EAAG;AAC9C,IAAA,MAAM,yBAAyB,IAAI,gBAAA;AAAA,MAClC,CAAC,cAAc,QAAA,KAAa;AAC3B,QAAA,YAAA,CAAa,OAAA,CAAQ,CAAC,QAAA,KAAa;AAClC,UAAA,IAAI,CAAC,IAAI,OAAA,IAAW,CAAC,SAAS,CAAC,GAAA,CAAI,OAAA,CAAQ,QAAA,CAAS,CAAC,CAAA;AACpD,YAAA;AACD,UAAA,MAAM,OAAA,GAAU,GAAA,CAAI,OAAA,CAAQ,qBAAA,GAC3B,QACD,CAAA;AAEA,UAAA,QAAA,CAAS;AAAA,YACR,OAAA;AAAA,YACA,IAAI,OAAA,CAAQ,QAAA,CAAS,CAAC,CAAA,CAAE,qBAAA,GACvB,QACD;AAAA,WACA,CAAA;AAAA,QACF,CAAC,CAAA;AAAA,MACF;AAAA,KACD;AACA,IAAA,sBAAA,CAAuB,OAAA,CAAQ,IAAI,OAAA,EAAS;AAAA,MAC3C,SAAA,EAAW,IAAA;AAAA,MACX,OAAA,EAAS;AAAA,KACT,CAAA;AACD,IAAA,IAAI,OAAA,GAAU,KAAA;AAEd,IAAA,MAAM,qBAAA,GAAwB,SAAA,CAAmB,MAAA,EAAQ,QAAQ,CAAA,CAC/D,IAAA;AAAA,MACA,oBAAA,EAAqB;AAAA,MACrB,MAAA;AAAA,QACC,MACC,QAAA,CAAS,aAAA,EAAe,OAAA,KAAY,WAAW,CAAC;AAAA;AAClD,KACD,CACC,SAAA,CAAU,CAAC,EAAA,KAAO;AAClB,MAAA,IAAI,CAAC,IAAI,OAAA,IAAW,CAAC,IAAI,OAAA,CAAQ,QAAA,CAAS,CAAC,CAAA,EAAG;AAC9C,MAAA,QAAA,CAAS;AAAA,QACR,GAAA,CAAI,OAAA,CAAQ,qBAAA,EAAsB,CACjC,QACD,CAAA;AAAA,QACA,IAAI,OAAA,CAAQ,QAAA,CAAS,CAAC,CAAA,CAAE,qBAAA,GACvB,QACD;AAAA,OACA,CAAA;AAAA,IACF,CAAC,CAAA;AAEF,IAAA,MAAM,yBAAA,GAA4B,SAAA;AAAA,MACjC,QAAA;AAAA,MACA;AAAA,KACD,CACE,IAAA;AAAA,MACA,UAAU,GAAI,CAAA;AAAA,MACd,OAAO,CAAC,EAAA,KAAO,QAAA,CAAS,aAAA,EAAe,YAAY,OAAO;AAAA,MAE1D,SAAA,CAAU;AAAA,MACV,MAAM,MAAM;AACX,QAAA,IAAI,SAAS,OAAA,GAAU,KAAA;AAAA,MACxB;AAAA,KACA,CAAA;AAEF,IAAA,MAAM,wBAAA,GAA2B,SAAA;AAAA,MAChC,QAAA;AAAA,MACA;AAAA,MACC,SAAA,CAAU;AAAA,MACX,MAAM,CAAC,EAAA,KACL,OAAA,GAAW,EAAA,CAAG,OAAmB,OAAA,KAAY;AAAA,KAC/C,CAAA;AAED,IAAA,OAAO,MAAM;AACZ,MAAA,qBAAA,CAAsB,WAAA,EAAY;AAClC,MAAA,yBAAA,CAA0B,WAAA,EAAY;AACtC,MAAA,wBAAA,CAAyB,WAAA,EAAY;AACrC,MAAA,sBAAA,CAAuB,UAAA,EAAW;AAAA,IACnC,CAAA;AAAA,EACD,CAAA,EAAG,CAAC,QAAA,EAAU,KAAK,CAAC,CAAA;AACpB,EAAA,OAAO,EAAE,KAAK,KAAA,EAAM;AACrB","file":"useSizes.js","sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\r\nimport { auditTime, distinctUntilChanged, filter, fromEvent } from \"rxjs\";\r\n\r\nexport const useSize = (sizeName: \"height\" | \"width\") => {\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\tconst [size, setSize] = useState<number | undefined>(undefined);\r\n\r\n\tuseLayoutEffect(() => {\r\n\t\tif (!ref.current) return;\r\n\r\n\t\tconst handleResize = () => {\r\n\t\t\tif (ref.current) {\r\n\t\t\t\tconst newSize = ref.current.getBoundingClientRect()[\r\n\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t] as number;\r\n\t\t\t\tsetSize(newSize);\r\n\t\t\t}\r\n\t\t};\r\n\r\n\t\t// 초기 측정\r\n\t\thandleResize();\r\n\r\n\t\t// ResizeObserver 설정\r\n\t\tconst resizeObserver = new ResizeObserver(() => {\r\n\t\t\thandleResize();\r\n\t\t});\r\n\t\tresizeObserver.observe(ref.current);\r\n\r\n\t\t// 윈도우 리사이즈 이벤트도 청취\r\n\t\twindow.addEventListener(\"resize\", handleResize);\r\n\r\n\t\t// 클린업\r\n\t\treturn () => {\r\n\t\t\tresizeObserver.disconnect();\r\n\t\t\twindow.removeEventListener(\"resize\", handleResize);\r\n\t\t};\r\n\t}, [sizeName]);\r\n\r\n\treturn { ref, size };\r\n};\r\nexport const useFirstChildSize = (sizeName: string) => {\r\n\tconst ref = useRef<HTMLDivElement>(null);\r\n\tconst [sizes, setSizes] = useState<Array<number>>();\r\n\tuseEffect(() => {\r\n\t\tif (!ref.current || !ref.current.children[0]) return;\r\n\t\tif (!sizes || sizes.length === 0) {\r\n\t\t\tsetSizes([\r\n\t\t\t\tref.current.getBoundingClientRect()[\r\n\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t] as number,\r\n\t\t\t\tref.current.children[0].getBoundingClientRect()[\r\n\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t] as number,\r\n\t\t\t]);\r\n\t\t}\r\n\t}, []);\r\n\tuseEffect(() => {\r\n\t\tif (!ref.current || !ref.current.children[0]) return;\r\n\t\tconst childrenChangeObserver = new MutationObserver(\r\n\t\t\t(mutationList, observer) => {\r\n\t\t\t\tmutationList.forEach((mutation) => {\r\n\t\t\t\t\tif (!ref.current || !sizes || !ref.current.children[0])\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\tconst newSize = ref.current.getBoundingClientRect()[\r\n\t\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t\t] as number;\r\n\t\t\t\t\t//if (newSize === sizes[0]) return;\r\n\t\t\t\t\tsetSizes([\r\n\t\t\t\t\t\tnewSize,\r\n\t\t\t\t\t\tref.current.children[0].getBoundingClientRect()[\r\n\t\t\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t\t\t] as number,\r\n\t\t\t\t\t]);\r\n\t\t\t\t});\r\n\t\t\t},\r\n\t\t);\r\n\t\tchildrenChangeObserver.observe(ref.current, {\r\n\t\t\tchildList: true,\r\n\t\t\tsubtree: true,\r\n\t\t});\r\n\t\tlet isFocus = false;\r\n\r\n\t\tconst windowResizeSubscribe = fromEvent<UIEvent>(window, \"resize\")\r\n\t\t\t.pipe(\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t\tfilter(\r\n\t\t\t\t\t() =>\r\n\t\t\t\t\t\tdocument.activeElement?.tagName !== \"INPUT\" && !isFocus,\r\n\t\t\t\t),\r\n\t\t\t)\r\n\t\t\t.subscribe((ev) => {\r\n\t\t\t\tif (!ref.current || !ref.current.children[0]) return;\r\n\t\t\t\tsetSizes([\r\n\t\t\t\t\tref.current.getBoundingClientRect()[\r\n\t\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t\t] as number,\r\n\t\t\t\t\tref.current.children[0].getBoundingClientRect()[\r\n\t\t\t\t\t\tsizeName as keyof DOMRect\r\n\t\t\t\t\t] as number,\r\n\t\t\t\t]);\r\n\t\t\t});\r\n\r\n\t\tconst documentFocusoutSubscribe = fromEvent<FocusEvent>(\r\n\t\t\tdocument,\r\n\t\t\t\"focusout\",\r\n\t\t)\r\n\t\t\t.pipe(\r\n\t\t\t\tauditTime(1000),\r\n\t\t\t\tfilter((ev) => document.activeElement?.tagName !== \"INPUT\"),\r\n\t\t\t)\r\n\t\t\t.subscribe({\r\n\t\t\t\tnext: () => {\r\n\t\t\t\t\tif (isFocus) isFocus = false;\r\n\t\t\t\t},\r\n\t\t\t});\r\n\r\n\t\tconst documentFocusinSubscribe = fromEvent<FocusEvent>(\r\n\t\t\tdocument,\r\n\t\t\t\"focusin\",\r\n\t\t).subscribe({\r\n\t\t\tnext: (ev) =>\r\n\t\t\t\t(isFocus = (ev.target as Element).tagName === \"INPUT\"),\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\twindowResizeSubscribe.unsubscribe();\r\n\t\t\tdocumentFocusoutSubscribe.unsubscribe();\r\n\t\t\tdocumentFocusinSubscribe.unsubscribe();\r\n\t\t\tchildrenChangeObserver.disconnect();\r\n\t\t};\r\n\t}, [sizeName, sizes]);\r\n\treturn { ref, sizes };\r\n};\r\n"]}