@modern-kit/react
Version:
1 lines • 3.68 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/components/InfiniteScroll/index.tsx"],"sourcesContent":["import {\n UseIntersectionObserverProps,\n useIntersectionObserver,\n} from '../../hooks/useIntersectionObserver';\nimport React, { PropsWithChildren } from 'react';\n\nexport interface InfiniteScrollProps\n extends Omit<\n UseIntersectionObserverProps,\n 'onIntersectStart' | 'onIntersectEnd' | 'calledOnce'\n > {\n children: React.ReactNode;\n onScrollAction: (entry: IntersectionObserverEntry) => void;\n triggerPosition?: 'before' | 'after';\n}\n\n/**\n * @description 무한 스크롤 기능을 선언적으로 활용 할 수 있는 컴포넌트입니다.\n *\n * `@modern-kit/react`의 `useIntersectionObserver` 훅을 사용하여 구현되었습니다.\n *\n * @see https://modern-agile-team.github.io/modern-kit/docs/react/hooks/useIntersectionObserver\n *\n * @param {InfiniteScrollProps} props\n * @param {React.ReactNode} props.children - 래핑할 자식 컴포넌트\n * @param {'before' | 'after'} props.triggerPosition - 스크롤 트리거 요소의 위치 ('before' | 'after', 기본값: 'after')\n * @param {(entry: IntersectionObserverEntry) => void} props.onScrollAction - 트리거 요소가 뷰포트와 교차할 때 실행될 콜백 함수\n * @param {number | number[]} props.threshold - 관찰을 시작할 viewport의 가시성 비율입니다.\n * @param {Element | Document | null} props.root - 교차할 때 기준이 되는 root 요소입니다. 기본값은 `null`이며 이는 viewport를 의미합니다.\n * @param {string} [props.rootMargin='150px 0px'] - 루트 요소에 대한 마진을 지정합니다. 이는 뷰포트 또는 루트 요소의 경계를 확장하거나 축소하는데 사용됩니다. (기본값: '150px 0px')\n * @param {boolean} props.enabled - Observer를 활성화할지 여부를 나타냅니다. `false`일 경우 Observer가 작동하지 않습니다.\n *\n * @returns {JSX.Element} 자식 컴포넌트와 Intersection Observer 트리거 요소를 포함한 컴포넌트입니다.\n *\n * @example\n * ```tsx\n * <div style={{ display: 'flex', gap: '10px', flexDirection: 'column' }}>\n * <InfiniteScroll\n * onScrollAction={loadMoreData}\n * triggerPosition=\"after\"\n * rootMargin=\"200px 0px\"\n * >\n * <div>box1</div>\n * <div>box2</div>\n * <div>box3</div>\n * ...\n * <div>box99</div>\n * <div>box100</div>\n * </InfiniteScroll>\n * </div>\n * ```\n */\nexport const InfiniteScroll = ({\n onScrollAction,\n children,\n root,\n threshold,\n enabled,\n triggerPosition = 'after',\n rootMargin = '150px 0px',\n}: PropsWithChildren<InfiniteScrollProps>): JSX.Element => {\n const { ref: observedRef } = useIntersectionObserver({\n onIntersectStart: onScrollAction,\n root,\n threshold,\n enabled,\n rootMargin,\n });\n\n return (\n <>\n {triggerPosition === 'before' && <div ref={observedRef} />}\n {children}\n {triggerPosition === 'after' && <div ref={observedRef} />}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;AAoDO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,cAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,eAAA,GAAkB,OAAA;AAAA,EAClB,UAAA,GAAa;AACf,CAAA,KAA2D;AACzD,EAAA,MAAM,EAAE,GAAA,EAAK,WAAA,EAAY,GAAI,uBAAA,CAAwB;AAAA,IACnD,gBAAA,EAAkB,cAAA;AAAA,IAClB,IAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,eAAA,KAAoB,QAAA,oBAAY,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,WAAA,EAAa,CAAA;AAAA,IACvD,QAAA;AAAA,IACA,eAAA,KAAoB,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAK,WAAA,EAAa;AAAA,GAAA,EACzD,CAAA;AAEJ;;;;"}