twreporter-react-index-page/lib/components/editor-picks.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 _editorPicksMobile = require('./editor-picks-mobile');

var _editorPicksMobile2 = _interopRequireDefault(_editorPicksMobile);

var _fadeinFadeout = require('./animations/fadein-fadeout');

var _fadeinFadeout2 = _interopRequireDefault(_fadeinFadeout);

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

var _get2 = _interopRequireDefault(_get);

var _imgWrapper = require('./common-utils/img-wrapper');

var _imgWrapper2 = _interopRequireDefault(_imgWrapper);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _imageProcessor = require('../utils/image-processor');

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 CarouselContainer = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks__CarouselContainer',
  componentId: 's15v7bzw-0'
})(['height: auto;position: relative;@media (max-width: 720px) {display: none;}']);

var FlexContainer = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks__FlexContainer',
  componentId: 's15v7bzw-1'
})(['position: relative;display: flex;height: 702px;align-items: center;']);

// FlexItem is for moving Title
var FlexItem = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks__FlexItem',
  componentId: 's15v7bzw-2'
})(['flex: 0 0 20%;margin-right: 20%;margin-top: ', ';transform: ', ';transition: 500ms all linear;position: relative;cursor: pointer;'], function (props) {
  return props.middle ? '-530px' : '16px';
}, function (props) {
  return props.selected !== 0 ? 'translateX(-' + (props.selected - 1) * 200 + '%)' : 'translateX(200%)';
});

var ImgFrame = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks__ImgFrame',
  componentId: 's15v7bzw-3'
})(['position: absolute;width: 608px;height: 391px;left: 50%;top: 32%;transform: translateX(-50%);@media (max-width: 970px) {width: 459.2px;height: 295px;}']);

var Category = (0, _styledComponents2.default)(_categoryName2.default).withConfig({
  displayName: 'editor-picks__Category',
  componentId: 's15v7bzw-4'
})(['text-align: center;height: 16px;line-height: 16px;position: absolute;top: ', ';left: ', ';width: auto;transform: translateX(-50%);text-align: center;width: 161px;height: 16px;'], function (props) {
  return props.top ? props.top : '0';
}, function (props) {
  return props.left ? props.left : '0';
});
var Title = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks__Title',
  componentId: 's15v7bzw-5'
})(['font-size: ', ';font-weight: ', ';color: ', ';width: ', ';position: absolute;text-align: center;line-height: ', ';max-height: ', ';top: 20%;left: 50%;transform: translateX(-50%);overflow: hidden;@media (max-width: 970px) {width: ', ';}'], function (props) {
  return props.middle ? '' + _commonVariables.fonts.size.title.large : '' + _commonVariables.fonts.size.medium;
}, _commonVariables.fonts.weight.semiBold, _commonVariables.colors.textGrey, function (props) {
  return props.middle ? '450px' : '150px';
}, function (props) {
  return props.middle ? '1.25em' : '1.5em';
}, function (props) {
  return props.middle ? '2.5em' : '7.5em';
}, function (props) {
  return props.middle ? '450px' : '100px';
});
var Description = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks__Description',
  componentId: 's15v7bzw-6'
})(['font-size: ', ';width: 450px;top: ', ';left: ', ';color: ', ';transform: translateX(-50%);overflow: hidden;', ';'], _commonVariables.fonts.size.base, function (props) {
  return props.top ? props.top : '0';
}, function (props) {
  return props.left ? props.left : '0';
}, _commonVariables.colors.textGrey, (0, _styleUtils.truncate)('absolute', 1.43, 2, 'white'));

// this is a container

var EditorPicks = function (_React$Component) {
  _inherits(EditorPicks, _React$Component);

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

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

    _this.state = {
      selected: 1
    };
    _this.onShiftToLeft = _this._onShiftToLeft.bind(_this);
    _this.onShiftToRight = _this._onShiftToRight.bind(_this);
    // this.redirectToPage = this._redirectToPage.bind(this)
    return _this;
  }

  _createClass(EditorPicks, [{
    key: '_onShiftToLeft',
    value: function _onShiftToLeft() {
      if (this.state.selected + 1 < this.props.data.length) {
        this.setState({
          selected: this.state.selected + 1
        });
      }
    }
  }, {
    key: '_onShiftToRight',
    value: function _onShiftToRight() {
      if (this.state.selected > 0) {
        this.setState({
          selected: this.state.selected - 1
        });
      }
    }

    /*
    _redirectToPage() {
    }
    */

  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var data = this.props.data;

      var getTruncate = function getTruncate(title) {
        if (title.length > 28) {
          return title.slice(0, 26) + '...';
        }
        return title;
      };
      var FlexItems = function () {
        return data.map(function (obj, i) {
          var propsMap = {
            middle: false,
            onClick: function onClick() {},
            arrow: 'pre'
          };
          if (i === _this2.state.selected - 1) {
            propsMap.onClick = _this2.onShiftToRight;
          } else if (i === _this2.state.selected) {
            propsMap.middle = true;
            // propsMap.onClick = this.redirectToPage
            propsMap.onClick = function () {};
          } else if (i === _this2.state.selected + 1) {
            propsMap.onClick = _this2.onShiftToLeft;
            propsMap.arrow = 'nex';
          }
          return React.createElement(
            FlexItem,
            {
              middle: propsMap.middle,
              selected: _this2.state.selected,
              onClick: propsMap.onClick,
              key: 'key_' + obj.title
            },
            React.createElement(
              Title,
              { middle: propsMap.middle },
              React.createElement(
                'div',
                null,
                propsMap.middle ? getTruncate(obj.title) : obj.title
              )
            )
          );
        });
      }();

      var Types = function () {
        // type: left, middle, right. description: middle
        var propList = [{
          position: 'left',
          component: Category,
          propsForComponent: { top: '338px', left: '10%' },
          dataPath: 'categories[0].name'
        }, {
          position: 'middle',
          component: Category,
          propsForComponent: { top: '60px', left: '50%' },
          dataPath: 'categories[0].name'
        }, {
          position: 'right',
          middle: false,
          component: Category,
          propsForComponent: { top: '338px', left: '90%' },
          dataPath: 'categories[0].name'
        }, {
          position: 'middle',
          component: Description,
          propsForComponent: { top: '174px', left: '50%' },
          dataPath: 'og_description'
        }];

        return propList.map(function (theProp) {
          return data.map(function (post, index) {
            var currentData = _.get(post, theProp.dataPath, '');
            var selectDataToShow = {
              left: _this2.state.selected - 1,
              middle: _this2.state.selected,
              right: _this2.state.selected + 1
            };
            return React.createElement(
              _fadeinFadeout2.default,
              {
                key: _.get(post, 'id'),
                isSelected: index === selectDataToShow[theProp.position]
              },
              React.createElement(
                theProp.component,
                {
                  top: theProp.propsForComponent.top,
                  left: theProp.propsForComponent.left
                },
                currentData
              )
            );
          });
        });
      }();

      var Images = data.map(function (post, index) {
        var hero_image = post.hero_image;

        return React.createElement(
          _fadeinFadeout2.default,
          {
            key: _.get(post, 'hero_image.id'),
            isSelected: index === _this2.state.selected
          },
          React.createElement(
            ImgFrame,
            null,
            React.createElement(_imgWrapper2.default, {
              alt: _.get(hero_image, 'description'),
              src: _.get(hero_image, 'resized_targets.tablet.url'),
              srcSet: (0, _imageProcessor.getImageSrcSet)(hero_image)
            })
          )
        );
      });

      return React.createElement(
        'div',
        null,
        React.createElement(
          CarouselContainer,
          null,
          Types,
          React.createElement(
            FlexContainer,
            null,
            Images,
            FlexItems
          )
        ),
        React.createElement(_editorPicksMobile2.default, { data: this.props.data })
      );
    }
  }]);

  return EditorPicks;
}(React.Component);

EditorPicks.defaultProps = {
  data: []
};

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

exports.default = EditorPicks;