@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 2.21 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/responsive-wrapper/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper({\n naturalWidth,\n naturalHeight,\n children,\n isInline = false\n}) {\n if (Children.count(children) !== 1) {\n return null;\n }\n const TagName = isInline ? 'span' : 'div';\n let aspectRatio;\n if (naturalWidth && naturalHeight) {\n aspectRatio = `${naturalWidth} / ${naturalHeight}`;\n }\n return /*#__PURE__*/_jsx(TagName, {\n className: \"components-responsive-wrapper\",\n children: /*#__PURE__*/_jsx(\"div\", {\n children: cloneElement(children, {\n className: clsx('components-responsive-wrapper__content', children.props.className),\n style: {\n ...children.props.style,\n aspectRatio\n }\n })\n })\n });\n}\nexport default ResponsiveWrapper;"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAuC;AAKvC,yBAA4B;AAiB5B,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAG;AACD,MAAI,wBAAS,MAAM,QAAQ,MAAM,GAAG;AAClC,WAAO;AAAA,EACT;AACA,QAAM,UAAU,WAAW,SAAS;AACpC,MAAI;AACJ,MAAI,gBAAgB,eAAe;AACjC,kBAAc,GAAG,YAAY,MAAM,aAAa;AAAA,EAClD;AACA,SAAoB,uCAAAA,KAAK,SAAS;AAAA,IAChC,WAAW;AAAA,IACX,UAAuB,uCAAAA,KAAK,OAAO;AAAA,MACjC,cAAU,6BAAa,UAAU;AAAA,QAC/B,eAAW,YAAAC,SAAK,0CAA0C,SAAS,MAAM,SAAS;AAAA,QAClF,OAAO;AAAA,UACL,GAAG,SAAS,MAAM;AAAA,UAClB;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AACA,IAAO,6BAAQ;",
"names": ["_jsx", "clsx"]
}