apeman-react-jumbotron/shim/node/ap_jumbotron.js

apeman react components for jumbotron

/**
 * apeman react components for jumbotron
 * @class ApJumbotron
 */

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _apemanReactImage = require('apeman-react-image');

var _apemanReactMixinLayout = require('apeman-react-mixin-layout');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

/** @lends ApJumbotron */
var ApJumbotron = _react2.default.createClass({
  displayName: 'ApJumbotron',


  // --------------------
  // Specs
  // --------------------

  propTypes: {
    /** Source url of image */
    imgSrc: _react.PropTypes.string,
    /** Alt text for image */
    imgAlt: _react.PropTypes.string,
    /** Image overlay color */
    imgFilter: _react.PropTypes.string
  },

  mixins: [_apemanReactMixinLayout.ApLayoutMixin],

  statics: {},

  getInitialState: function getInitialState() {
    return {
      imgReady: false
    };
  },
  getDefaultProps: function getDefaultProps() {
    return {
      imgSrc: null,
      imgAlt: '',
      imgFilter: null
    };
  },
  render: function render() {
    var s = this;
    var state = s.state;
    var props = s.props;
    var layouts = s.layouts;


    return _react2.default.createElement(
      'div',
      { className: (0, _classnames2.default)('ap-jumbotron', props.className),
        style: Object.assign({}, props.style) },
      _react2.default.createElement(
        'div',
        { className: 'ap-jumbotron-img-container' },
        _react2.default.createElement(_apemanReactImage.ApImage, { src: props.imgSrc,
          alt: props.imgAlt,
          width: layouts.image.width,
          height: layouts.image.height,
          onLoad: s.handleImgLoad,
          onError: s.handleImgError,
          scale: 'fill',
          className: (0, _classnames2.default)('ap-jumbotron-img', {
            'ap-jumbotron-img-ready': state.imgReady
          }) }),
        _react2.default.createElement('div', { className: 'ap-jumbotron-filter',
          style: {
            backgroundColor: props.imgFilter
          } })
      ),
      _react2.default.createElement(
        'div',
        { className: 'ap-jumbotron-inner' },
        props.children
      )
    );
  },


  // --------------------
  // For ApLayoutMixin
  // --------------------

  getInitialLayouts: function getInitialLayouts() {
    return {
      image: {}
    };
  },
  calcLayouts: function calcLayouts() {
    var s = this;
    var node = _reactDom2.default.findDOMNode(s);
    var rect = node.getBoundingClientRect();
    return {
      image: {
        width: rect.width,
        height: rect.height
      }
    };
  },


  // --------------------
  // Custom
  // --------------------

  handleImgLoad: function handleImgLoad() {
    var s = this;
    s.setState({
      imgReady: true
    });
  },
  handleImgError: function handleImgError() {
    var s = this;
    s.setState({
      imgReady: false
    });
  }
});

exports.default = ApJumbotron;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwX2p1bWJvdHJvbi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7O0FBS0E7Ozs7OztBQUVBOzs7O0FBQ0E7Ozs7QUFDQTs7QUFDQTs7QUFDQTs7Ozs7O0FBRUE7QUFDQSxJQUFNLGNBQWMsZ0JBQU0sV0FBTixDQUFrQjtBQUFBOzs7QUFFcEM7QUFDQTtBQUNBOztBQUVBLGFBQVc7QUFDVDtBQUNBLFlBQVEsaUJBQU0sTUFGTDtBQUdUO0FBQ0EsWUFBUSxpQkFBTSxNQUpMO0FBS1Q7QUFDQSxlQUFXLGlCQUFNO0FBTlIsR0FOeUI7O0FBZXBDLFVBQVEsdUNBZjRCOztBQW1CcEMsV0FBUyxFQW5CMkI7O0FBcUJwQyxpQkFyQm9DLDZCQXFCakI7QUFDakIsV0FBTztBQUNMLGdCQUFVO0FBREwsS0FBUDtBQUdELEdBekJtQztBQTJCcEMsaUJBM0JvQyw2QkEyQmpCO0FBQ2pCLFdBQU87QUFDTCxjQUFRLElBREg7QUFFTCxjQUFRLEVBRkg7QUFHTCxpQkFBVztBQUhOLEtBQVA7QUFLRCxHQWpDbUM7QUFtQ3BDLFFBbkNvQyxvQkFtQzFCO0FBQ1IsUUFBTSxJQUFJLElBQVY7QUFEUSxRQUVGLEtBRkUsR0FFd0IsQ0FGeEIsQ0FFRixLQUZFO0FBQUEsUUFFSyxLQUZMLEdBRXdCLENBRnhCLENBRUssS0FGTDtBQUFBLFFBRVksT0FGWixHQUV3QixDQUZ4QixDQUVZLE9BRlo7OztBQUlSLFdBQ0U7QUFBQTtBQUFBLFFBQUssV0FBWSwwQkFBVyxjQUFYLEVBQTJCLE1BQU0sU0FBakMsQ0FBakI7QUFDSyxlQUFRLE9BQU8sTUFBUCxDQUFjLEVBQWQsRUFBa0IsTUFBTSxLQUF4QixDQURiO0FBRUU7QUFBQTtBQUFBLFVBQUssV0FBVSw0QkFBZjtBQUNFLG1FQUFTLEtBQU0sTUFBTSxNQUFyQjtBQUNTLGVBQU0sTUFBTSxNQURyQjtBQUVTLGlCQUFRLFFBQVEsS0FBUixDQUFjLEtBRi9CO0FBR1Msa0JBQVMsUUFBUSxLQUFSLENBQWMsTUFIaEM7QUFJUyxrQkFBUyxFQUFFLGFBSnBCO0FBS1MsbUJBQVUsRUFBRSxjQUxyQjtBQU1TLGlCQUFNLE1BTmY7QUFPUyxxQkFBWSwwQkFBVyxrQkFBWCxFQUErQjtBQUM5QixzQ0FBMEIsTUFBTTtBQURGLFdBQS9CLENBUHJCLEdBREY7QUFXRSwrQ0FBSyxXQUFVLHFCQUFmO0FBQ0ssaUJBQVE7QUFDSyw2QkFBaUIsTUFBTTtBQUQ1QixXQURiO0FBWEYsT0FGRjtBQWtCRTtBQUFBO0FBQUEsVUFBSyxXQUFVLG9CQUFmO0FBQ0ksY0FBTTtBQURWO0FBbEJGLEtBREY7QUF3QkQsR0EvRG1DOzs7QUFpRXBDO0FBQ0E7QUFDQTs7QUFFQSxtQkFyRW9DLCtCQXFFZjtBQUNuQixXQUFPO0FBQ0wsYUFBTztBQURGLEtBQVA7QUFHRCxHQXpFbUM7QUEyRXBDLGFBM0VvQyx5QkEyRXJCO0FBQ2IsUUFBTSxJQUFJLElBQVY7QUFDQSxRQUFJLE9BQU8sbUJBQVMsV0FBVCxDQUFxQixDQUFyQixDQUFYO0FBQ0EsUUFBSSxPQUFPLEtBQUsscUJBQUwsRUFBWDtBQUNBLFdBQU87QUFDTCxhQUFPO0FBQ0wsZUFBTyxLQUFLLEtBRFA7QUFFTCxnQkFBUSxLQUFLO0FBRlI7QUFERixLQUFQO0FBTUQsR0FyRm1DOzs7QUF1RnBDO0FBQ0E7QUFDQTs7QUFFQSxlQTNGb0MsMkJBMkZuQjtBQUNmLFFBQU0sSUFBSSxJQUFWO0FBQ0EsTUFBRSxRQUFGLENBQVc7QUFDVCxnQkFBVTtBQURELEtBQVg7QUFHRCxHQWhHbUM7QUFpR3BDLGdCQWpHb0MsNEJBaUdsQjtBQUNoQixRQUFNLElBQUksSUFBVjtBQUNBLE1BQUUsUUFBRixDQUFXO0FBQ1QsZ0JBQVU7QUFERCxLQUFYO0FBR0Q7QUF0R21DLENBQWxCLENBQXBCOztrQkEwR2UsVyIsImZpbGUiOiJhcF9qdW1ib3Ryb24uanN4Iiwic291cmNlUm9vdCI6ImxpYiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogYXBlbWFuIHJlYWN0IGNvbXBvbmVudHMgZm9yIGp1bWJvdHJvblxuICogQGNsYXNzIEFwSnVtYm90cm9uXG4gKi9cblxuJ3VzZSBzdHJpY3QnXG5cbmltcG9ydCBSZWFjdCwge1Byb3BUeXBlcyBhcyB0eXBlc30gZnJvbSAncmVhY3QnXG5pbXBvcnQgUmVhY3RET00gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHtBcEltYWdlfSBmcm9tICdhcGVtYW4tcmVhY3QtaW1hZ2UnXG5pbXBvcnQge0FwTGF5b3V0TWl4aW59IGZyb20gJ2FwZW1hbi1yZWFjdC1taXhpbi1sYXlvdXQnXG5pbXBvcnQgY2xhc3NuYW1lcyBmcm9tICdjbGFzc25hbWVzJ1xuXG4vKiogQGxlbmRzIEFwSnVtYm90cm9uICovXG5jb25zdCBBcEp1bWJvdHJvbiA9IFJlYWN0LmNyZWF0ZUNsYXNzKHtcblxuICAvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLVxuICAvLyBTcGVjc1xuICAvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4gIHByb3BUeXBlczoge1xuICAgIC8qKiBTb3VyY2UgdXJsIG9mIGltYWdlICovXG4gICAgaW1nU3JjOiB0eXBlcy5zdHJpbmcsXG4gICAgLyoqIEFsdCB0ZXh0IGZvciBpbWFnZSAqL1xuICAgIGltZ0FsdDogdHlwZXMuc3RyaW5nLFxuICAgIC8qKiBJbWFnZSBvdmVybGF5IGNvbG9yICovXG4gICAgaW1nRmlsdGVyOiB0eXBlcy5zdHJpbmdcbiAgfSxcblxuICBtaXhpbnM6IFtcbiAgICBBcExheW91dE1peGluXG4gIF0sXG5cbiAgc3RhdGljczoge30sXG5cbiAgZ2V0SW5pdGlhbFN0YXRlICgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgaW1nUmVhZHk6IGZhbHNlXG4gICAgfVxuICB9LFxuXG4gIGdldERlZmF1bHRQcm9wcyAoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGltZ1NyYzogbnVsbCxcbiAgICAgIGltZ0FsdDogJycsXG4gICAgICBpbWdGaWx0ZXI6IG51bGxcbiAgICB9XG4gIH0sXG5cbiAgcmVuZGVyICgpIHtcbiAgICBjb25zdCBzID0gdGhpc1xuICAgIGxldCB7IHN0YXRlLCBwcm9wcywgbGF5b3V0cyB9ID0gc1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXsgY2xhc3NuYW1lcygnYXAtanVtYm90cm9uJywgcHJvcHMuY2xhc3NOYW1lKSB9XG4gICAgICAgICAgIHN0eWxlPXsgT2JqZWN0LmFzc2lnbih7fSwgcHJvcHMuc3R5bGUpIH0+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYXAtanVtYm90cm9uLWltZy1jb250YWluZXJcIj5cbiAgICAgICAgICA8QXBJbWFnZSBzcmM9eyBwcm9wcy5pbWdTcmMgfVxuICAgICAgICAgICAgICAgICAgIGFsdD17IHByb3BzLmltZ0FsdCB9XG4gICAgICAgICAgICAgICAgICAgd2lkdGg9eyBsYXlvdXRzLmltYWdlLndpZHRoIH1cbiAgICAgICAgICAgICAgICAgICBoZWlnaHQ9eyBsYXlvdXRzLmltYWdlLmhlaWdodCB9XG4gICAgICAgICAgICAgICAgICAgb25Mb2FkPXsgcy5oYW5kbGVJbWdMb2FkIH1cbiAgICAgICAgICAgICAgICAgICBvbkVycm9yPXsgcy5oYW5kbGVJbWdFcnJvciB9XG4gICAgICAgICAgICAgICAgICAgc2NhbGU9XCJmaWxsXCJcbiAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9eyBjbGFzc25hbWVzKCdhcC1qdW1ib3Ryb24taW1nJywge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAnYXAtanVtYm90cm9uLWltZy1yZWFkeSc6IHN0YXRlLmltZ1JlYWR5XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pIH0vPlxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiYXAtanVtYm90cm9uLWZpbHRlclwiXG4gICAgICAgICAgICAgICBzdHlsZT17IHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHByb3BzLmltZ0ZpbHRlclxuICAgICAgICAgICAgICAgICAgICAgICAgfSB9PjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJhcC1qdW1ib3Ryb24taW5uZXJcIj5cbiAgICAgICAgICB7IHByb3BzLmNoaWxkcmVuIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApXG4gIH0sXG5cbiAgLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS1cbiAgLy8gRm9yIEFwTGF5b3V0TWl4aW5cbiAgLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuICBnZXRJbml0aWFsTGF5b3V0cyAoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGltYWdlOiB7fVxuICAgIH1cbiAgfSxcblxuICBjYWxjTGF5b3V0cyAoKSB7XG4gICAgY29uc3QgcyA9IHRoaXNcbiAgICBsZXQgbm9kZSA9IFJlYWN0RE9NLmZpbmRET01Ob2RlKHMpXG4gICAgbGV0IHJlY3QgPSBub2RlLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpXG4gICAgcmV0dXJuIHtcbiAgICAgIGltYWdlOiB7XG4gICAgICAgIHdpZHRoOiByZWN0LndpZHRoLFxuICAgICAgICBoZWlnaHQ6IHJlY3QuaGVpZ2h0XG4gICAgICB9XG4gICAgfVxuICB9LFxuXG4gIC8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tXG4gIC8vIEN1c3RvbVxuICAvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4gIGhhbmRsZUltZ0xvYWQgKCkge1xuICAgIGNvbnN0IHMgPSB0aGlzXG4gICAgcy5zZXRTdGF0ZSh7XG4gICAgICBpbWdSZWFkeTogdHJ1ZVxuICAgIH0pXG4gIH0sXG4gIGhhbmRsZUltZ0Vycm9yICgpIHtcbiAgICBjb25zdCBzID0gdGhpc1xuICAgIHMuc2V0U3RhdGUoe1xuICAgICAgaW1nUmVhZHk6IGZhbHNlXG4gICAgfSlcbiAgfVxuXG59KVxuXG5leHBvcnQgZGVmYXVsdCBBcEp1bWJvdHJvblxuIl19