@wix/design-system/dist/cjs/Proportion/Proportion.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ProportionSt = require("./Proportion.st.css.js");
var _ratios = require("./ratios");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Proportion/Proportion.js";
class Proportion extends _react.default.PureComponent {
  render() {
    var {
      dataHook,
      className,
      aspectRatio
    } = this.props;
    var aspectRatioHolder = this._getAspectRatioHolder();
    var disabled = aspectRatio === _ratios.PREDEFINED_RATIOS.none ? true : false;
    var content = this._getContent(disabled);
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _ProportionSt.st)(_ProportionSt.classes.root, className),
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 40,
        columnNumber: 7
      }
    }, !disabled && aspectRatioHolder, content);
  }
  _getContent(disabled) {
    var {
      children
    } = this.props;
    return disabled ? children : /*#__PURE__*/_react.default.createElement("div", {
      className: _ProportionSt.classes.contentWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 52,
        columnNumber: 7
      }
    }, children);
  }

  /**
   * 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
   * */
  _getAspectRatioHolder() {
    var {
      width,
      height
    } = this._getRatio();
    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: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 69,
        columnNumber: 7
      }
    });
  }
  _getRatio() {
    var {
      aspectRatio
    } = this.props;
    return {
      width: aspectRatio ? Math.round(aspectRatio * 100) : 100,
      height: 100
    };
  }
}
Proportion.PREDEFINED_RATIOS = _ratios.PREDEFINED_RATIOS;
Proportion.displayName = 'Proportion';
Proportion.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** Children to render. */
  children: _propTypes.default.node.isRequired,
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */

  className: _propTypes.default.string,
  /** Condition for wrapping content with Proportion or return original  */
  /** Predefined Proportion.square (1), Proportion.portrait (3/4), Proportion.cinema (16/9), Proportion.landscape (4/3), or a custom number (width / height) or 'none' for original size */
  aspectRatio: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
};
Proportion.defaultProps = {
  aspectRatio: 1
};
var _default = exports.default = Proportion;
//# sourceMappingURL=Proportion.js.map