kitten-components/dist/javascripts/kitten/components/cards/triptych.js

Front-end components library

'use strict';

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

var _firstItem, _secondItem, _thirdItem;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _grid = require('kitten/components/grid/grid');

var _marger = require('kitten/components/layout/marger');

var _verticalStroke2 = require('kitten/components/layout/vertical-stroke');

var _screenConfig = require('kitten/constants/screen-config');

var _mediaQueries = require('kitten/hoc/media-queries');

var _debounce = require('kitten/helpers/utils/debounce');

var _gridConfig = require('kitten/constants/grid-config');

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 Marger = (0, _radium2.default)(_marger.Marger);
var GridCol = (0, _radium2.default)(_grid.GridCol);
var VerticalStroke = (0, _radium2.default)(_verticalStroke2.VerticalStroke);

var TriptychBase = function (_Component) {
  _inherits(TriptychBase, _Component);

  function TriptychBase(props) {
    _classCallCheck(this, TriptychBase);

    var _this = _possibleConstructorReturn(this, (TriptychBase.__proto__ || Object.getPrototypeOf(TriptychBase)).call(this, props));

    _initialiseProps.call(_this);

    _this.state = { secondCardComputedTopMargin: null };
    return _this;
  }

  _createClass(TriptychBase, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.debounceUpdateMargin();

      window.addEventListener('resize', this.debounceUpdateMargin);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      window.removeEventListener('resize', this.debounceUpdateMargin);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          viewportIsMOrLess = _props.viewportIsMOrLess,
          title = _props.title,
          item1 = _props.item1,
          item2 = _props.item2,
          item3 = _props.item3;


      return _react2.default.createElement(
        _radium.StyleRoot,
        null,
        _react2.default.createElement(
          _grid.Grid,
          { className: 'k-u-align-center' },
          _react2.default.createElement(
            GridCol,
            { 'col-l': '6', 'offset-l': '3', 'col-m': '6', 'offset-m': '0' },
            _react2.default.createElement(
              'div',
              { ref: this.setRef('title') },
              _react2.default.createElement(
                Marger,
                { bottom: '2' },
                title
              ),
              _react2.default.createElement(
                Marger,
                { bottom: '2' },
                _react2.default.createElement(VerticalStroke, { size: 'huge', style: styles.verticalStroke })
              )
            )
          ),
          _react2.default.createElement(
            GridCol,
            { 'col-l': '4', 'col-m': '6', style: styles.oddMargin },
            _react2.default.createElement(
              Marger,
              { style: styles.gutter.firstItem },
              _react2.default.createElement(
                'div',
                { ref: this.setRef('firstCard') },
                _react2.default.createElement(
                  Marger,
                  { bottom: viewportIsMOrLess ? 5 : 0 },
                  item1
                )
              )
            )
          ),
          _react2.default.createElement(
            GridCol,
            { 'col-l': '4', 'col-m': '6' },
            _react2.default.createElement(
              Marger,
              {
                style: _extends({}, styles.secondCard, styles.gutter.secondItem),
                top: this.state.secondCardComputedTopMargin / 10,
                bottom: viewportIsMOrLess ? 5 : 0
              },
              item2
            )
          ),
          _react2.default.createElement(
            GridCol,
            { 'col-l': '4', 'col-m': '6', style: styles.oddMargin },
            _react2.default.createElement(
              Marger,
              { style: styles.gutter.thirdItem },
              item3
            )
          )
        )
      );
    }
  }]);

  return TriptychBase;
}(_react.Component);

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.updateSecondCardMargin = function () {
    _this2.setState(function (_state, props) {
      var viewportIsMOrLess = props.viewportIsMOrLess,
          viewportIsSOrLess = props.viewportIsSOrLess;

      var isTablet = viewportIsMOrLess && !viewportIsSOrLess;

      if (!isTablet) return { secondCardComputedTopMargin: null };

      var titleHeight = _this2.title.clientHeight;
      var cardHeight = _this2.firstCard.clientHeight;

      return { secondCardComputedTopMargin: -(cardHeight - titleHeight) };
    });
  };

  this.debounceUpdateMargin = (0, _debounce.debounce)(this.updateSecondCardMargin, 250);

  this.setRef = function (name) {
    return function (node) {
      _this2[name] = node;
    };
  };
};

TriptychBase.propTypes = {
  title: _propTypes2.default.node.isRequired,
  item1: _propTypes2.default.node.isRequired,
  item2: _propTypes2.default.node.isRequired,
  item3: _propTypes2.default.node.isRequired
};

var strokeHeight = 80;
var marginStroke = 2;
var tabletGutter = 50 / 2 - _gridConfig.GUTTER / 2;
var desktopGutter = 40 / 2 - _gridConfig.GUTTER / 2;

var styles = {
  verticalStroke: _defineProperty({
    height: strokeHeight,
    margin: '0 auto'

  }, '@media (max-width: ' + _screenConfig.ScreenConfig.S.max + 'px)', {
    height: 50
  }),

  oddMargin: _defineProperty({}, '@media (min-width: ' + _screenConfig.ScreenConfig.L.min + 'px)', {
    marginTop: -(strokeHeight * 2 / 3 + marginStroke * 10)
  }),

  gutter: {
    firstItem: (_firstItem = {
      marginRight: desktopGutter

    }, _defineProperty(_firstItem, '@media (max-width: ' + _screenConfig.ScreenConfig.M.max + 'px)', {
      marginRight: 'inherit',
      marginLeft: tabletGutter
    }), _defineProperty(_firstItem, '@media (max-width: ' + _screenConfig.ScreenConfig.S.max + 'px)', {
      marginRight: 'inherit',
      marginLeft: 'inherit'
    }), _firstItem),
    secondItem: (_secondItem = {
      marginRight: desktopGutter,
      marginLeft: desktopGutter

    }, _defineProperty(_secondItem, '@media (max-width: ' + _screenConfig.ScreenConfig.M.max + 'px)', {
      marginRight: tabletGutter,
      marginLeft: 'inherit'
    }), _defineProperty(_secondItem, '@media (max-width: ' + _screenConfig.ScreenConfig.S.max + 'px)', {
      marginRight: 'inherit',
      marginLeft: 'inherit'
    }), _secondItem),
    thirdItem: (_thirdItem = {
      marginLeft: desktopGutter

    }, _defineProperty(_thirdItem, '@media (max-width: ' + _screenConfig.ScreenConfig.M.max + 'px)', {
      marginLeft: tabletGutter
    }), _defineProperty(_thirdItem, '@media (max-width: ' + _screenConfig.ScreenConfig.S.max + 'px)', {
      marginLeft: 'inherit'
    }), _thirdItem)
  },

  secondCard: { transition: 'margin 500ms' }
};

var Triptych = exports.Triptych = (0, _mediaQueries.withMediaQueries)({
  viewportIsSOrLess: true,
  viewportIsMOrLess: true
})(TriptychBase);