@wix/design-system
Version:
@wix/design-system
31 lines • 1.69 kB
JavaScript
import React, { memo } from 'react';
import { st, classes } from './Proportion.st.css.js';
import { PREDEFINED_RATIOS } from './Proportion.constants';
const ProportionComponent = memo(({ dataHook, className, aspectRatio = 1, children }) => {
const disabled = aspectRatio === PREDEFINED_RATIOS.none;
/**
* This is based on Noam Rosenthal's (noamr@wix.com) solution
* which can be found here: https://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b
*
* The solution uses the fact that SVGs can maintain aspect ratio's natively.
* In addition we use an img element for this solution to work correctly in IE
*
* TODO: use aspect-ratio instead once Safari 14 is no longer supported
* */
const getAspectRatioHolder = () => {
const width = aspectRatio ? Math.round(Number(aspectRatio) * 100) : 100;
const height = 100;
const svg = `<svg viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg" />`;
return (React.createElement("img", { alt: "", "data-hook": "proportion-aspect", className: classes.ratioHolder, src: `data:image/svg+xml,${encodeURIComponent(svg)}` }));
};
const content = disabled ? (children) : (React.createElement("div", { className: classes.contentWrapper }, children));
return (React.createElement("div", { className: st(classes.root, className), "data-hook": dataHook },
!disabled && getAspectRatioHolder(),
content));
});
ProportionComponent.displayName = 'Proportion';
const Proportion = Object.assign(ProportionComponent, {
PREDEFINED_RATIOS,
});
export default Proportion;
//# sourceMappingURL=Proportion.js.map