@modern-kit/react
Version:
1 lines • 1.84 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/components/SwitchCase/index.tsx"],"sourcesContent":["import { isNil } from '@modern-kit/utils';\nimport React from 'react';\n\ninterface SwitchCaseProps<Case extends PropertyKey> {\n value: Case | null | undefined;\n caseBy: Record<Case, React.ReactNode>;\n defaultComponent?: React.ReactNode;\n}\n\n/**\n * @description value 값에 따라 다른 컴포넌트를 `Switch` 형태로 조건부 렌더링하는 컴포넌트입니다.\n *\n * @param {SwitchCaseProps<Case>} props - `SwitchCase` 컴포넌트의 속성\n * @param {Case | null | undefined} props.value - 렌더링할 케이스를 결정하는 값\n * @param {Record<Case, React.ReactNode>} props.caseBy - `value` 값에 대응하는 컴포넌트들을 담은 객체\n * @param {React.ReactNode} props.defaultComponent - `value`가 `null`이거나 `caseBy`에 해당하는 컴포넌트가 없을 때 렌더링할 기본 컴포넌트\n *\n * @returns {JSX.Element} - 조건부로 렌더링된 컴포넌트\n *\n * @example\n * ```tsx\n * <SwitchCase\n * value={status}\n * caseBy={{ success: <SuccessView />, error: <ErrorView /> }}\n * defaultComponent={<DefaultView />}\n * />\n * ```\n */\nexport const SwitchCase = <Case extends PropertyKey>({\n caseBy,\n value,\n defaultComponent = null,\n}: SwitchCaseProps<Case>): JSX.Element => {\n if (isNil(value)) {\n return <>{defaultComponent}</>;\n }\n\n return <>{caseBy[value] ?? defaultComponent}</>;\n};\n"],"names":["isNil","jsx","Fragment"],"mappings":";;;;;AA4BO,MAAM,aAAa,CAA2B;AAAA,EACnD,MAAA;AAAA,EACA,KAAA;AAAA,EACA,gBAAA,GAAmB;AACrB,CAAA,KAA0C;AACxC,EAAA,IAAIA,WAAA,CAAM,KAAK,CAAA,EAAG;AAChB,IAAA,6DAAU,QAAA,EAAA,gBAAA,EAAiB,CAAA;AAAA,EAC7B;AAEA,EAAA,uBAAOC,cAAA,CAAAC,mBAAA,EAAA,EAAG,QAAA,EAAA,MAAA,CAAO,KAAK,CAAA,IAAK,gBAAA,EAAiB,CAAA;AAC9C;;;;"}