@modern-kit/react
Version:
1 lines • 5.92 kB
Source Map (JSON)
{"version":3,"file":"index.cjs","sources":["../../../../../.yarn/cache/style-inject-npm-0.3.0-e2042d3aac-3fa6a8410a.zip/node_modules/style-inject/dist/style-inject.es.js","../../../src/components/AspectRatio/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import { CSSProperties } from 'react';\nimport { polymorphicForwardRef } from '../../utils/polymorphicForwardRef';\nimport { Slot } from '../../components/Slot';\nimport styles from './AspectRatio.modules.css';\nimport classNames from 'classnames';\n\ninterface AspectRatioProps {\n children: JSX.Element;\n ratio: number;\n asChild?: boolean;\n style?: CSSProperties;\n className?: string;\n}\n\n/**\n * @description 주어진 aspect-ratio 비율을 맞춰주기 위해 선언적으로 사용하는 유틸 컴포넌트입니다.\n *\n * 미리 영역을 확보하여 `Layout Shift`를 방지하는데 효과적입니다.\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio\n *\n * `as` 속성을 통해 `다형성(polymorphism)`을 지원합니다:\n * - 기본적으로 `div` 태그로 자식 요소를 감싸서 렌더링하며, `as` 속성을 통해 감싸는 Wrapper 요소의 태그를 변경해 렌더링할 수 있습니다. (ex. div -> article)\n * - 이때, 해당 Wrapper 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.\n *\n * `asChild` 속성을 통해 `합성(Composition)`, `렌더링 위임(Rendering Delegation)` 패턴을 지원합니다:\n * - `asChild` 속성이 `true`라면 `Slot`을 통해 자식 요소를 렌더링합니다.\n * - 이때, 자식 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.\n * - `asChild` 속성을 사용 할 경우 아래 링크들을 참고하세요.\n *\n * @see https://modern-agile-team.github.io/modern-kit/docs/react/components/Slot\n *\n * @param {AspectRatioProps} props - 컴포넌트에 전달되는 속성들입니다.\n * @param {number} props.ratio - 자식 요소의 가로 세로 비율을 지정합니다.\n * @param {JSX.Element} props.children - 렌더링 할 자식요소 입니다.\n * @param {CSSProperties} props.style - 추가적인 스타일을 지정합니다.\n * @param {string} props.className - 추가적인 클래스를 지정합니다.\n * @param {string} props.as - 감싸는 요소를 지정합니다. 기본 값은 `div`입니다. 해당 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.\n * @param {boolean} props.asChild - `true`일 경우 `Slot`을 통해 자식 요소를 그대로 렌더링하고, 자식 요소에 `aspect-ratio` 속성을 적용해 영역을 확보합니다.\n * @returns {JSX.Element} 주어진 aspect-ratio 비율에 맞춰 스타일이 적용된 자식 요소를 반환합니다.\n *\n * @example\n * ```tsx\n * // Default\n * <AspectRatio ratio={16 / 9}>\n * <img src={imgUrl} alt=\"image\" />\n * </AspectRatio>\n * ```\n *\n * @example\n * ```tsx\n * // as article\n * <AspectRatio ratio={16 / 9} as=\"article\">\n * <img src={imgUrl} alt=\"image\" />\n * </AspectRatio>\n * ```\n *\n * @example\n * ```tsx\n * // asChild\n * <AspectRatio ratio={16 / 9} asChild>\n * <img src={imgUrl} alt=\"image\" />\n * </AspectRatio>\n * ```\n */\nexport const AspectRatio = polymorphicForwardRef<'div', AspectRatioProps>(\n ({ ratio, style, as = 'div', asChild = false, ...props }, ref) => {\n const AspectRatioWrapper = asChild ? Slot : as;\n\n const slotStyle: CSSProperties = {\n aspectRatio: ratio,\n ...style,\n };\n\n const className = asChild\n ? props.className\n : classNames(styles.aspectRatioWrapper, props.className);\n\n return (\n <AspectRatioWrapper\n ref={ref}\n style={slotStyle}\n className={className}\n {...props}\n />\n );\n }\n);\n"],"names":["polymorphicForwardRef","Slot","jsx"],"mappings":";;;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;ACuCO,MAAM,WAAA,GAAcA,gDAAA;AAAA,EACzB,CAAC,EAAE,KAAA,EAAO,KAAA,EAAO,EAAA,GAAK,KAAA,EAAO,OAAA,GAAU,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAChE,IAAA,MAAM,kBAAA,GAAqB,UAAUC,mBAAA,GAAO,EAAA;AAE5C,IAAA,MAAM,SAAA,GAA2B;AAAA,MAC/B,WAAA,EAAa,KAAA;AAAA,MACb,GAAG;AAAA,KACL;AAEA,IAAA,MAAM,SAAA,GAAY,UACd,KAAA,CAAM,SAAA,GACN,WAAW,MAAA,CAAO,kBAAA,EAAoB,MAAM,SAAS,CAAA;AAEzD,IAAA,uBACEC,cAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EAAO,SAAA;AAAA,QACP,SAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;","x_google_ignoreList":[0]}