@modern-kit/react
Version:
1 lines • 1.89 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/components/When/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype Condition = boolean | (() => boolean);\n\ninterface WhenProps {\n children: React.ReactNode;\n condition: Condition;\n fallback?: React.ReactNode;\n}\n\nconst getConditionResult = (condition: Condition) => {\n return typeof condition === 'function' ? condition() : condition;\n};\n\n/**\n * @description condition prop이 true일 때 children을 렌더링하고, false일 때는 fallback을 렌더링하는 조건부 렌더링 컴포넌트입니다.\n *\n * @param {WhenProps} props\n * @param {React.ReactNode} props.children - 조건이 참일 때 렌더링될 자식 요소\n * @param {Condition} props.condition - 렌더링 여부를 결정하는 조건. boolean 값이나 boolean을 반환하는 함수\n * @param {React.ReactNode} props.fallback - 조건이 거짓일 때 렌더링될 대체 요소 (선택사항)\n * @returns {JSX.Element} 조건에 따라 children 또는 fallback을 렌더링\n *\n * @example\n * ```tsx\n * <When condition={true}>\n * <UserProfile />\n * </When>\n *\n * <When condition={false} fallback={<div>fallback component</div>}>\n * <MainContent />\n * </When>\n * ```\n */\nexport const When = ({\n children,\n condition,\n fallback,\n}: WhenProps): JSX.Element => {\n const conditionResult = getConditionResult(condition);\n\n if (!conditionResult) return <>{fallback}</>;\n return <>{children}</>;\n};\n"],"names":[],"mappings":";;AAUA,MAAM,kBAAA,GAAqB,CAAC,SAAA,KAAyB;AACnD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAA,GAAa,SAAA,EAAU,GAAI,SAAA;AACzD,CAAA;AAsBO,MAAM,OAAO,CAAC;AAAA,EACnB,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,eAAA,GAAkB,mBAAmB,SAAS,CAAA;AAEpD,EAAA,IAAI,CAAC,eAAA,EAAiB,uBAAO,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,QAAA,EAAS,CAAA;AACzC,EAAA,uCAAU,QAAA,EAAS,CAAA;AACrB;;;;"}