@modern-kit/react
Version:
1 lines • 7.17 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useStep/index.ts"],"sourcesContent":["import { SetStateAction, useCallback, useState } from 'react';\nimport { isFunction } from '@modern-kit/utils';\n\ntype StepType = 'nextStep' | 'prevStep';\n\nexport type StepAction = ({\n prev,\n next,\n}: {\n prev: number;\n next: number;\n}) => void;\n\nexport interface UseStepProps {\n maxStep: number;\n initialStep?: number;\n infinite?: boolean;\n}\n\ninterface UseStepReturnType {\n currentStep: number;\n hasNextStep: boolean;\n hasPrevStep: boolean;\n goToNextStep: (action?: StepAction) => void;\n goToPrevStep: (action?: StepAction) => void;\n setStep: (step: SetStateAction<number>, action?: StepAction) => void;\n resetStep: (action?: StepAction) => void;\n}\n\n/**\n * @description 단계별로 이동할 수 있는 기능을 제공하며, 초기 단계 설정, 다음 단계로의 이동, 이전 단계로의 이동, 특정 단계로의 설정 등의 기능을 포함합니다.\n * 스텝 설정 함수 호출 시 `action` 함수를 인자로 넣어 원하는 action을 실행 시킬 수 있습니다.\n *\n * @param {Object} props - 훅에 전달되는 매개변수 객체\n * @property {number} props.maxStep - 가능한 최대 단계. 이 값은 필수이며, 최종 단계의 번호를 정의합니다.\n * @property {number} [props.initialStep=0] - 초기 단계. 기본값은 0이며, 이 값으로 훅을 처음 사용할 때 설정될 단계가 결정됩니다.\n * @property {boolean} [props.infinite=false] - 무한 반복 여부. true일 경우, 마지막 단계에서 'nextStep'을 호출하면 첫 단계로 돌아가며, 첫 단계에서 'prevStep'을 호출하면 마지막 단계로 이동합니다. 기본값은 false입니다.\n *\n * @returns {UseStepReturnType} 단계 관리 기능을 제공하는 여러 함수 및 값들을 반환합니다.\n * - `currentStep`: 현재 단계. 현재 진행 중인 단계를 나타냅니다.\n * - `hasNextStep`: 다음 단계가 있는지 여부를 반환합니다.\n * - `hasPrevStep`: 이전 단계가 있는지 여부를 반환합니다.\n * - `goToNextStep`: 다음 단계로 이동하는 함수입니다.\n * - `goToPrevStep`: 이전 단계로 이동하는 함수입니다.\n * - `setStep`: 특정 단계로 이동하는 함수입니다.\n * - `resetStep`: 초기 단계로 리셋하는 함수입니다.\n *\n * @example\n * const {\n * currentStep,\n * goToNextStep,\n * goToPrevStep,\n * setStep,\n * resetStep,\n * } = useStep({ maxStep: 5 });\n *\n * currentStep; // 0, 초기값\n *\n * goToNextStep(); // 다음 단계로 이동\n * currentStep; // 1\n *\n * goToPrevStep(); // 이전 단계로 이동\n * currentStep; // 0\n *\n * setStep(3); // 3단계로 이동\n * currentStep // 3;\n *\n * resetStep(); // 초기 단계로 리셋\n * currentStep; // 0\n */\nexport function useStep({\n maxStep,\n initialStep = 0,\n infinite = false,\n}: UseStepProps): UseStepReturnType {\n const [currentStep, setCurrentStep] = useState(initialStep);\n const hasNextStep = currentStep < maxStep;\n const hasPrevStep = currentStep > 0;\n\n const getNextStep = useCallback(\n (type: StepType, isOverflow: boolean) => {\n const isNextStepType = type === 'nextStep';\n\n if (isOverflow) {\n return isNextStepType ? 0 : maxStep;\n }\n return isNextStepType ? currentStep + 1 : currentStep - 1;\n },\n [maxStep, currentStep]\n );\n\n const handleStep = useCallback(\n (type: StepType, isOverflow: boolean, action?: StepAction) => {\n if (isOverflow && !infinite) return;\n\n const nextStep = getNextStep(type, isOverflow);\n\n if (action) {\n action({ prev: currentStep, next: nextStep });\n }\n setCurrentStep(nextStep);\n },\n [infinite, currentStep, getNextStep]\n );\n\n const goToNextStep = useCallback(\n (action?: StepAction) => {\n handleStep('nextStep', !hasNextStep, action);\n },\n [hasNextStep, handleStep]\n );\n\n const goToPrevStep = useCallback(\n (action?: StepAction) => {\n handleStep('prevStep', !hasPrevStep, action);\n },\n [hasPrevStep, handleStep]\n );\n\n const setStep = useCallback(\n (step: SetStateAction<number>, action?: StepAction) => {\n const nextStep = isFunction(step) ? step(currentStep) : step;\n const isValidNextStep = nextStep >= 0 && nextStep <= maxStep;\n\n if (isValidNextStep) {\n if (action) {\n action({ prev: currentStep, next: nextStep });\n }\n setCurrentStep(step);\n return;\n }\n throw new Error('Step not valid');\n },\n [currentStep, maxStep]\n );\n\n const resetStep = useCallback(\n (action?: StepAction) => {\n if (action) {\n action({ prev: currentStep, next: initialStep });\n }\n setCurrentStep(initialStep);\n },\n [currentStep, initialStep]\n );\n\n return {\n currentStep,\n hasNextStep,\n hasPrevStep,\n goToNextStep,\n goToPrevStep,\n setStep,\n resetStep,\n };\n}\n"],"names":[],"mappings":"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"}