@modern-kit/react
Version:
1 lines • 2.62 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/components/Iterator/index.tsx"],"sourcesContent":["import { isPlainObject } from '@modern-kit/utils';\nimport React, { useCallback } from 'react';\n\nexport interface IteratorProps<T> {\n items: T[] | readonly T[];\n itemKey?: T extends Record<PropertyKey, any> ? keyof T : string;\n renderItem: (item: T, index: number) => JSX.Element;\n}\n\n/**\n * @description 주어진 배열을 반복하면서, 각 아이템을 렌더링하는 컴포넌트입니다.\n *\n * `itemKey`로 문자열을 넘겨주면, 각 요소에서 해당 프로퍼티 key의 값을 각 요소의 `unique key`로 설정합니다.\n *\n * 문자열/숫자 배열의 경우 itemKey를 넘기지 않아도 자동으로 `${item}_${index}`형태로 지정됩니다.\n *\n * @template T - 반복할 아이템의 타입\n * @param {IteratorProps<T>} props - Iterator 컴포넌트 props\n * @param {T[] | readonly T[]} props.items - 반복할 아이템의 배열\n * @param {string} [props.itemKey] - 아이템의 고유 키\n * @param {(item: T, index: number) => JSX.Element} props.renderItem - 각 아이템을 렌더링할 함수\n *\n * @example\n * ```tsx\n * // 문자열 배열 사용 예시\n * <Iterator\n * items={['가', '나', '다']}\n * renderItem={(item) => <div>{item}</div>}\n * />\n *\n * @example\n * ```tsx\n * // 객체 배열 사용 예시\n * <Iterator\n * items={[{ id: 1, name: '홍길동' }, { id: 2, name: '김철수' }]}\n * itemKey=\"id\"\n * renderItem={(item) => <div>{item.name}</div>}\n * />\n * ```\n */\nexport const Iterator = <T,>({\n items,\n itemKey,\n renderItem,\n}: IteratorProps<T>) => {\n const getKey = useCallback(\n (item: T, index: number) => {\n return isPlainObject(item)\n ? item?.[itemKey as keyof T] || index\n : `${item}_${index}`;\n },\n [itemKey]\n );\n return (\n <>\n {items.map((item, index) => (\n <React.Fragment key={getKey(item, index)}>\n {renderItem(item, index)}\n </React.Fragment>\n ))}\n </>\n );\n};\n"],"names":[],"mappings":";;;;AAwCO,MAAM,WAAW,CAAK;AAAA,EAC3B,KAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAAwB;AACtB,EAAA,MAAM,MAAA,GAAS,WAAA;AAAA,IACb,CAAC,MAAS,KAAA,KAAkB;AAC1B,MAAA,OAAO,aAAA,CAAc,IAAI,CAAA,GACrB,IAAA,GAAO,OAAkB,KAAK,KAAA,GAC9B,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AACA,EAAA,uCAEK,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,yBACf,KAAA,CAAM,QAAA,EAAN,EACE,QAAA,EAAA,UAAA,CAAW,IAAA,EAAM,KAAK,CAAA,EAAA,EADJ,MAAA,CAAO,MAAM,KAAK,CAEvC,CACD,CAAA,EACH,CAAA;AAEJ;;;;"}