twreporter-react-index-page/lib/components/editor-picks-mobile.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 _templateObject = _taggedTemplateLiteral(['\n  padding-top: 0;\n  background: ', ';\n  @media (min-width: ', ') {\n    display: none;\n  }\n'], ['\n  padding-top: 0;\n  background: ', ';\n  @media (min-width: ', ') {\n    display: none;\n  }\n']);

var _categoryName = require('./common-utils/category-name');

var _categoryName2 = _interopRequireDefault(_categoryName);

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 _mobileFlexSwipeable = require('./mobile-flex-swipeable');

var _mobileFlexSwipeable2 = _interopRequireDefault(_mobileFlexSwipeable);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactSwipeable = require('react-swipeable');

var _reactSwipeable2 = _interopRequireDefault(_reactSwipeable);

var _swipableMixin = require('./common-utils/swipable-mixin');

var _swipableMixin2 = _interopRequireDefault(_swipableMixin);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _section = require('./common-utils/section');

var _section2 = _interopRequireDefault(_section);

var _sectionName = require('./common-utils/section-name');

var _sectionName2 = _interopRequireDefault(_sectionName);

var _sectionStrings = require('../constants/section-strings');

var _sectionStrings2 = _interopRequireDefault(_sectionStrings);

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

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

var _mobileMockupSpecification = require('../constants/mobile-mockup-specification');

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; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* global React */


var _ = {
  get: _get2.default
};

var numberOfSwipableItems = 5;
var mobileWidth = '721px';

var CarouselContainer = _section2.default.extend(_templateObject, _commonVariables.colors.sectionWhite, mobileWidth);

var TextFrame = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks-mobile__TextFrame',
  componentId: 's1wfw90g-0'
})(['height: 230px;position: relative;']);

var Category = (0, _styledComponents2.default)(_categoryName2.default).withConfig({
  displayName: 'editor-picks-mobile__Category',
  componentId: 's1wfw90g-1'
})(['position: absolute;top: 30px;left: 50%;transform: translateX(-50%);width: 74px;text-align: center;']);

var Title = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks-mobile__Title',
  componentId: 's1wfw90g-2'
})(['top: 50px;left: 50%;transform: translateX(-50%);width: ', '%;font-size: ', ';font-weight: ', ';line-height: 1.33;color: ', ';', ''], _mobileMockupSpecification.itemWidthPct, _commonVariables.fonts.size.title.medium, _commonVariables.fonts.weight.semiBold, _commonVariables.colors.textGrey, (0, _styleUtils.truncate)('absolute', 1.33, 3, '' + _commonVariables.colors.sectionWhite, 'center'));

var Description = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks-mobile__Description',
  componentId: 's1wfw90g-3'
})(['top: 150px;left: 50%;font-size: ', ';transform: translateX(-50%);width: ', '%;text-align: left;color: ', ';', ''], _commonVariables.fonts.size.base, _mobileMockupSpecification.itemWidthPct, _commonVariables.colors.textGrey, (0, _styleUtils.truncate)('absolute', 1.43, 3, 'white'));

var ImgFrame = _styledComponents2.default.div.withConfig({
  displayName: 'editor-picks-mobile__ImgFrame',
  componentId: 's1wfw90g-4'
})(['height: 186px;']);

var EditorPicksMobile = function (_SwipableMixin) {
  _inherits(EditorPicksMobile, _SwipableMixin);

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

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

  _createClass(EditorPicksMobile, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      this.onSetMaxItems(numberOfSwipableItems);
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var onSwiping = function onSwiping(e, deltaX, deltaY, absX, absY) {
        // In order to avoid slightly vibrating while swiping left and right,
        // we set a threshold to prevent scrolling.
        // 10 is the the threshold value we set after manually testing.
        if (absY < 10) {
          e.preventDefault();
        }
      };

      var ImageComp = function ImageComp(post) {
        var hero_image = post.hero_image;

        return React.createElement(
          ImgFrame,
          null,
          React.createElement(_imgWrapper2.default, {
            alt: _.get(hero_image, 'description'),
            src: _.get(hero_image, 'resized_targets.mobile.url'),
            srcSet: (0, _imageProcessor.getImageSrcSet)(hero_image)
          })
        );
      };

      var data = this.props.data;

      var flexItems = data.map(function (post) {
        return React.createElement(
          _mobileFlexSwipeable2.default.FlexItem,
          {
            key: _.get(post, 'id'),
            mobileWidth: mobileWidth
          },
          ImageComp(post)
        );
      });

      var textFrameContent = data.map(function (post, index) {
        return React.createElement(
          _fadeinFadeout2.default,
          {
            key: _.get(post, 'id'),
            isSelected: index === _this2.state.selected
          },
          React.createElement(
            Category,
            null,
            _.get(post, 'categories[0].name', '')
          ),
          React.createElement(
            Title,
            null,
            _.get(post, 'title', '')
          ),
          React.createElement(
            Description,
            null,
            _.get(post, 'og_description', '')
          )
        );
      });

      return React.createElement(
        CarouselContainer,
        {
          mobileWidth: mobileWidth
        },
        React.createElement(
          _sectionName2.default,
          {
            mobileWidth: mobileWidth
          },
          React.createElement(
            'span',
            null,
            _sectionStrings2.default.editorPick
          )
        ),
        React.createElement(
          TextFrame,
          null,
          textFrameContent
        ),
        React.createElement(
          _reactSwipeable2.default,
          {
            onSwipedRight: this.onSwipedRight,
            onSwipedLeft: this.onSwipedLeft,
            onSwiping: onSwiping
          },
          React.createElement(
            _mobileFlexSwipeable2.default.FlexList,
            {
              selected: this.state.selected,
              mobileWidth: mobileWidth
            },
            flexItems
          )
        )
      );
    }
  }]);

  return EditorPicksMobile;
}(_swipableMixin2.default);

EditorPicksMobile.defaultProps = {
  data: []
};

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

exports.default = EditorPicksMobile;