@modern-kit/react
Version:
1 lines • 1.76 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../src/components/IfElse/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype Condition = boolean | (() => boolean);\n\ninterface IfElseProps {\n condition: Condition;\n truthyComponent: React.ReactNode;\n falsyComponent: React.ReactNode;\n}\n\nconst getConditionResult = (condition: Condition) => {\n return typeof condition === 'function' ? condition() : condition;\n};\n\n/**\n * @description If-Else 조건부 렌더링을 사용하기 위한 컴포넌트입니다.\n *\n * @param {IfElseProps} props\n * @param {Condition} props.condition - 렌더링 조건 (boolean 또는 boolean을 반환하는 함수)\n * @param {React.ReactNode} props.truthyComponent - condition이 true일 때 렌더링될 컴포넌트\n * @param {React.ReactNode} props.falsyComponent - condition이 false일 때 렌더링될 컴포넌트\n * @returns {JSX.Element} 조건에 따라 trueComponent 또는 falseComponent를 렌더링\n *\n * @example\n * <IfElse\n * condition={condition}\n * truthyComponent={<TruthyComponent />}\n * falsyComponent={<FalsyComponent />}\n * />\n */\nexport const IfElse = ({\n condition,\n truthyComponent,\n falsyComponent,\n}: IfElseProps): JSX.Element => {\n const conditionResult = getConditionResult(condition);\n return <>{conditionResult ? truthyComponent : falsyComponent}</>;\n};\n"],"names":["jsx","Fragment"],"mappings":";;;;AAUA,MAAM,kBAAA,GAAqB,CAAC,SAAA,KAAyB;AACnD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAA,GAAa,SAAA,EAAU,GAAI,SAAA;AACzD,CAAA;AAkBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAA,KAAgC;AAC9B,EAAA,MAAM,eAAA,GAAkB,mBAAmB,SAAS,CAAA;AACpD,EAAA,uBAAOA,cAAA,CAAAC,mBAAA,EAAA,EAAG,QAAA,EAAA,eAAA,GAAkB,eAAA,GAAkB,cAAA,EAAe,CAAA;AAC/D;;;;"}