wix-style-react/dist/src/Proportion/Proportion.js

wix-style-react

"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");
var _ratios = require("./ratios");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/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: 37,
        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: 49,
        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
   * */
  _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", {
      "data-hook": "proportion-aspect",
      className: _ProportionSt.classes.ratioHolder,
      src: "data:image/svg+xml,".concat(encodeURIComponent(svg)),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 64,
        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,
  /** A css class to be applied to the component's root element */
  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