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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Proportion = require('./Proportion.scss');

var _Proportion2 = _interopRequireDefault(_Proportion);

var _ratios = require('./ratios');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Proportion = (_temp = _class = function (_React$PureComponent) {
  _inherits(Proportion, _React$PureComponent);

  function Proportion() {
    _classCallCheck(this, Proportion);

    return _possibleConstructorReturn(this, (Proportion.__proto__ || Object.getPrototypeOf(Proportion)).apply(this, arguments));
  }

  _createClass(Proportion, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          dataHook = _props.dataHook,
          className = _props.className;

      var wrapperClass = (0, _classnames2.default)(_Proportion2.default.root, className);
      var aspectRatioHolder = this._getAspectRatioHolder();
      var content = this._getContent();

      return _react2.default.createElement(
        'div',
        { className: wrapperClass, 'data-hook': dataHook },
        aspectRatioHolder,
        content
      );
    }
  }, {
    key: '_getContent',
    value: function _getContent() {
      var children = this.props.children;

      return _react2.default.createElement(
        'div',
        { className: _Proportion2.default.contentWrapper },
        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 svg's can maintain aspect ratio's natively.
     * In addition we use an img element for this solution to work correctly in IE
     * */

  }, {
    key: '_getAspectRatioHolder',
    value: function _getAspectRatioHolder() {
      var _getRatio2 = this._getRatio(),
          width = _getRatio2.width,
          height = _getRatio2.height;

      var svg = '<svg viewBox="0 0 ' + width + ' ' + height + '" xmlns="http://www.w3.org/2000/svg" />';
      return _react2.default.createElement('img', {
        className: _Proportion2.default.ratioHolder,
        src: 'data:image/svg+xml,' + encodeURIComponent(svg)
      });
    }
  }, {
    key: '_getRatio',
    value: function _getRatio() {
      var aspectRatio = this.props.aspectRatio;


      return {
        width: aspectRatio ? Math.round(aspectRatio * 100) : 100,
        height: 100
      };
    }
  }]);

  return Proportion;
}(_react2.default.PureComponent), _class.PREDEFINED_RATIOS = _ratios.PREDEFINED_RATIOS, _class.displayName = 'Proportion', _class.propTypes = {
  children: _propTypes2.default.node.isRequired,
  dataHook: _propTypes2.default.string,
  className: _propTypes2.default.string,

  /** predefined Proportion.square (1), Proportion.portrait (3/4), Proportion.cinema (16/9), Proportion.landscape (4/3), or a custom number (width / height) */
  aspectRatio: _propTypes2.default.number
}, _class.defaultProps = {
  aspectRatio: 1
}, _temp);
exports.default = Proportion;