@wix/design-system
Version:
@wix/design-system
70 lines (68 loc) • 3.13 kB
JavaScript
;
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ProportionSt = require("./Proportion.st.css.js");
var _Proportion = require("./Proportion.constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Proportion/Proportion.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var ProportionComponent = /*#__PURE__*/(0, _react.memo)(_ref => {
var {
dataHook,
className,
aspectRatio = 1,
children
} = _ref;
var disabled = aspectRatio === _Proportion.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
* */
var getAspectRatioHolder = () => {
var width = aspectRatio ? Math.round(Number(aspectRatio) * 100) : 100;
var height = 100;
var svg = "<svg viewBox=\"0 0 ".concat(width, " ").concat(height, "\" xmlns=\"http://www.w3.org/2000/svg\" />");
return /*#__PURE__*/_react.default.createElement("img", {
alt: "",
"data-hook": "proportion-aspect",
className: _ProportionSt.classes.ratioHolder,
src: "data:image/svg+xml,".concat(encodeURIComponent(svg)),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 9
}
});
};
var content = disabled ? children : /*#__PURE__*/_react.default.createElement("div", {
className: _ProportionSt.classes.contentWrapper,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 7
}
}, children);
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _ProportionSt.st)(_ProportionSt.classes.root, className),
"data-hook": dataHook,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 7
}
}, !disabled && getAspectRatioHolder(), content);
});
ProportionComponent.displayName = 'Proportion';
var Proportion = Object.assign(ProportionComponent, {
PREDEFINED_RATIOS: _Proportion.PREDEFINED_RATIOS
});
var _default = exports.default = Proportion;
//# sourceMappingURL=Proportion.js.map