"use strict";

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