twreporter-react-index-page/lib/components/latest.js

twreporter index page version 2

'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 _categoryName = require('./common-utils/category-name');

var _categoryName2 = _interopRequireDefault(_categoryName);

var _get = require('lodash/get');

var _get2 = _interopRequireDefault(_get);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactRedux = require('react-redux');

var _commonVariables = require('../styles/common-variables');

var _styleUtils = require('../utils/style-utils');

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; } /* global React */


var _ = {
  get: _get2.default
};

var tabletMaxWidth = '1023px';
var tabletMidWidth = '916px';
var tabletMinWidth = '761px';
var mobileMaxWidth = '600px';
var mobileMidWidth = '550px';
var mobileMinWidth = '414px';

var LatestContainer = _styledComponents2.default.div.withConfig({
  displayName: 'latest__LatestContainer',
  componentId: 'mfjpgv-0'
})(['background-color: #f2f2f2;display: flex;padding: 30px 47px;overflow-x: hidden;justify-content: space-between;@media (max-width: ', ') {padding: 30px 34px;}@media (max-width: 480px) {padding: 30px 16px;}'], tabletMidWidth);
var ItemFrame = _styledComponents2.default.div.withConfig({
  displayName: 'latest__ItemFrame',
  componentId: 'mfjpgv-1'
})(['width: 130px;height: auto;padding: 0;margin-left: 30px;&:first-child {margin: 0;}@media (max-width: ', ') {width: 159px;margin-left: 20px;&:nth-child(6) {display: none;}}@media (max-width: ', ') {width: 189px;&:nth-child(5) {display: none;}}@media (max-width: ', ') {&:nth-child(4) {display: none;}}@media (max-width: ', ') {width: 150px;}@media (max-width: ', ') {width: 200px;&:nth-child(3) {display: none;}}'], tabletMaxWidth, tabletMidWidth, tabletMinWidth, mobileMaxWidth, mobileMidWidth);

var Image = _styledComponents2.default.div.withConfig({
  displayName: 'latest__Image',
  componentId: 'mfjpgv-2'
})(['width: 100%;height: 90px;background: ', ';background-size: cover;background-position: center;display: block;@media (max-width: ', ') {height: 100px;}@media (max-width: ', ') {height: 110px;}@media (max-width: ', ') {height: 100px;}@media (max-width: ', ') {height: 130px;}@media (max-width: ', ') {height: 110px;}'], function (props) {
  return props.background ? 'url(' + props.background + ')' : 'backgroun-image';
}, tabletMaxWidth, tabletMidWidth, mobileMaxWidth, mobileMidWidth, mobileMinWidth);

var ContentFrame = _styledComponents2.default.div.withConfig({
  displayName: 'latest__ContentFrame',
  componentId: 'mfjpgv-3'
})(['width: 128px;margin: 0 auto;overflow: hidden;']);

var Category = (0, _styledComponents2.default)(_categoryName2.default).withConfig({
  displayName: 'latest__Category',
  componentId: 'mfjpgv-4'
})(['height: 16px;line-height: 1.33;margin-top: 13px;margin-bottom: 3px;']);
var Title = _styledComponents2.default.div.withConfig({
  displayName: 'latest__Title',
  componentId: 'mfjpgv-5'
})(['width: 128px;height: auto;font-size: ', ';font-weight: ', ';color: #4a4949;', ''], _commonVariables.fonts.size.medium, _commonVariables.fonts.weight.semiBold, (0, _styleUtils.truncate)('relative', 1.5, 4, '#f1f1f1', 'left'));

var Latest = function (_React$PureComponent) {
  _inherits(Latest, _React$PureComponent);

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

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

  _createClass(Latest, [{
    key: 'render',
    value: function render() {
      var latestItems = this.props.data.map(function (item) {
        return React.createElement(
          ItemFrame,
          {
            key: _.get(item, 'id')
          },
          React.createElement(Image, { background: _.get(item, 'hero_image.resized_targets.mobile.url', '') }),
          React.createElement(
            ContentFrame,
            null,
            React.createElement(
              Category,
              null,
              _.get(item, 'categories[0].name', '')
            ),
            React.createElement(
              Title,
              null,
              _.get(item, 'title', '')
            )
          )
        );
      });

      return React.createElement(
        LatestContainer,
        null,
        latestItems
      );
    }
  }]);

  return Latest;
}(React.PureComponent);

Latest.defaultProps = {
  data: []
};

Latest.propTypes = {
  data: _propTypes2.default.array
};

exports.default = (0, _reactRedux.connect)()(Latest);