@modern-kit/react
Version:
1 lines • 7.87 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useArrayState/index.ts"],"sourcesContent":["import { Dispatch, SetStateAction, useMemo, useState } from 'react';\n\ninterface ArrayStateSetters<T> extends Dispatch<SetStateAction<T[]>> {\n push: (...items: T[]) => void;\n unshift: (...items: T[]) => void;\n shift: () => void;\n pop: () => void;\n splice: (start: number, deleteCount: number, ...items: T[]) => void;\n remove: (...indexes: number[]) => void;\n removeAt: (index: number) => void;\n removeBy: (predicate: (item: T, index: number) => boolean) => void;\n updateAt: (index: number, item: T) => void;\n updateBy: (iteratee: (item: T, index: number) => T) => void;\n insertAt: (index: number, item: T) => void;\n clear: () => void;\n}\n\n/**\n * @description 불변성을 유지하면서 배열 상태를 편리하게 관리하기 위한 커스텀 훅입니다.\n *\n * @template T - 배열 요소의 타입\n * @param {T[] | (() => T[])} initialValue - 초기 배열 값 또는 초기값을 반환하는 함수\n * @returns {UseArrayStateReturn<T>} 배열 상태와 업데이트 메서드들을 포함한 객체\n * @returns {T[]} array - 현재 배열 상태\n * @returns {ArrayStateSetters<T>} setArray - 배열 상태를 업데이트하는 함수이며, 배열 상태를 업데이트하는 메서드를 함께 제공합니다.\n * @returns {(...items: T[]) => void} setArray.push - 배열의 끝에 항목들을 추가하는 함수\n * @returns {(...items: T[]) => void} setArray.unshift - 배열의 시작에 항목들을 추가하는 함수\n * @returns {() => void} setArray.shift - 배열의 첫 번째 항목을 제거하는 함수\n * @returns {() => void} setArray.pop - 배열의 마지막 항목을 제거하는 함수\n * @returns {(start: number, deleteCount: number, ...items: T[]) => void} setArray.splice - 배열의 특정 위치에서 항목을 제거하고 새 항목을 추가하는 함수\n * @returns {(indexes: number[]) => void} setArray.remove - 주어진 인덱스들의 항목을 제거하는 함수\n * @returns {(index: number) => void} setArray.removeAt - 주어진 인덱스의 항목을 제거하는 함수\n * @returns {(predicate: (item: T, index: number) => boolean) => void} setArray.removeBy - predicate 함수 반환값이 true인 항목들을 제거하는 함수\n * @returns {(index: number, item: T) => void} setArray.updateAt - 주어진 인덱스의 항목을 업데이트하는 함수\n * @returns {(iteratee: (item: T, index: number) => T) => void} setArray.updateBy - iteratee 함수를 통해 배열의 각 항목을 업데이트하는 함수\n * @returns {(index: number, item: T) => void} setArray.insertAt - 주어진 인덱스에 항목을 삽입하는 함수\n * @returns {() => void} setArray.clear - 배열을 비우는 함수\n *\n * @example\n * // setArray 직접 호출을 통해 배열을 직접 설정할 수 있습니다.\n * const { array, setArray } = useArrayState([1, 2, 3]);\n * setArray([1, 4, 2, 3]);\n * console.log(array); // [1, 4, 2, 3]\n *\n * @example\n * // setArray 메서드를 통해 배열을 업데이트할 수 있습니다. 이때, 불변성을 유지합니다.\n * const { array, setArray } = useArrayState([1, 2, 3]);\n * setArray.insertAt(1, 4);\n * console.log(array); // [1, 4, 2, 3]\n */\nexport const useArrayState = <T>(\n initialValue: T[] | (() => T[])\n): [T[], ArrayStateSetters<T>] => {\n const [value, setValue] = useState<T[]>(\n typeof initialValue === 'function' ? initialValue() : initialValue\n );\n\n const setArray = useMemo(() => {\n const setState: ArrayStateSetters<T> = (v: SetStateAction<T[]>) =>\n setValue(v);\n\n setState.push = (...items: T[]) => {\n setValue((prev) => [...prev, ...items]);\n };\n\n setState.unshift = (...items: T[]) => {\n setValue((prev) => [...items, ...prev]);\n };\n\n setState.shift = () => {\n setValue((prev) => prev.slice(1));\n };\n\n setState.pop = () => {\n setValue((prev) => prev.slice(0, -1));\n };\n\n setState.splice = (start: number, deleteCount: number, ...items: T[]) => {\n setValue((prev) => {\n const newArray = [...prev];\n newArray.splice(start, deleteCount, ...items);\n return newArray;\n });\n };\n\n setState.insertAt = (index: number, item: T) => {\n setValue((prev) => {\n const newArray = [...prev];\n newArray.splice(index, 0, item);\n return newArray;\n });\n };\n\n setState.remove = (...indexes: number[]) => {\n setValue((prev) => prev.filter((_, i) => !indexes.includes(i)));\n };\n\n setState.removeAt = (index: number) => {\n setValue((prev) => prev.filter((_, i) => i !== index));\n };\n\n setState.removeBy = (predicate: (item: T, index: number) => boolean) => {\n setValue((prev) => prev.filter((item, index) => !predicate(item, index)));\n };\n\n setState.updateAt = (index: number, item: T) => {\n setValue((prev) => {\n const newArray = [...prev];\n newArray[index] = item;\n return newArray;\n });\n };\n\n setState.updateBy = (iteratee: (item: T, index: number) => T) => {\n setValue((prev) => prev.map((item, index) => iteratee(item, index)));\n };\n\n setState.clear = () => {\n setValue([]);\n };\n\n return setState;\n }, []);\n\n return [value, setArray];\n};\n"],"names":[],"mappings":"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"}