twreporter-react-index-page/lib/components/reviews.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  background-color: white;\n  width: 100%;\n'], ['\n  background-color: white;\n  width: 100%;\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n  line-height: 1.33;\n  @media(max-width: ', ') {\n    margin-top: 9px;\n  }\n'], ['\n  line-height: 1.33;\n  @media(max-width: ', ') {\n    margin-top: 9px;\n  }\n']);

var _bottomLink = require('./common-utils/bottom-link');

var _bottomLink2 = _interopRequireDefault(_bottomLink);

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

var _categoryName2 = _interopRequireDefault(_categoryName);

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 _mobileList = require('./common-utils/mobile-list');

var _mobileList2 = _interopRequireDefault(_mobileList);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _sectionName2 = _interopRequireDefault(_sectionName);

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

var _sectionStrings2 = _interopRequireDefault(_sectionStrings);

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

var _section2 = _interopRequireDefault(_section);

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

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


var _ = {
  get: _get2.default

  // 4 columns: tabletMaxWidth, tabletMidWidth
  // 3 columns: tabletMinWidth
};var tabletMaxWidth = '1023px';
var tabletMidWidth = '890px';
var tabletMinWidth = '758px';
var mobileWidth = '730px';
var maxSwipableItems = 3;
var moreText = '更多觀點文章';

var Container = _section2.default.extend(_templateObject);

var FlexBox = _styledComponents2.default.div.withConfig({
  displayName: 'reviews__FlexBox',
  componentId: 'psan5j-0'
})(['display: flex;padding: 0 47px;justify-content: space-between;@media(max-width: ', ') {padding: 0 35px;}@media(max-width: ', ') {display: none;}'], tabletMaxWidth, mobileWidth);

var FlexItem = _styledComponents2.default.div.withConfig({
  displayName: 'reviews__FlexItem',
  componentId: 'psan5j-1'
})(['width: 210px;&:nth-child(3) {margin-left: 30px;}&:nth-child(even) {margin-left: 30px;}&:nth-child(4) {@media(max-width: ', ') {display: none;}@media(max-width: ', ') {display: inline;}}@media(max-width: ', ') {width: 189px;&:nth-child(3) {margin-left: 10px;}&:nth-child(even) {margin-left: 10px;}}@media(max-width: ', ') {width: 159px;}@media(max-width: ', ') {width: 189px;}@media(max-width: ', ') {width: 100%;}'], tabletMinWidth, mobileWidth, tabletMaxWidth, tabletMidWidth, tabletMinWidth, mobileWidth);

var ImgFrame = _styledComponents2.default.div.withConfig({
  displayName: 'reviews__ImgFrame',
  componentId: 'psan5j-2'
})(['width: 100%;height: 136px;@media(max-width: ', ') {height: 110px;}@media(max-width: ', ') {height: 102px;}@media(max-width: ', ') {height: 110px;}@media(max-width: ', ') {height: 198px;}'], tabletMaxWidth, tabletMidWidth, tabletMinWidth, mobileWidth);

var TextFrame = _styledComponents2.default.div.withConfig({
  displayName: 'reviews__TextFrame',
  componentId: 'psan5j-3'
})(['margin: 13px auto 0 auto;width: 92%;']);

var Category = _categoryName2.default.extend(_templateObject2, mobileWidth);

var Title = _styledComponents2.default.div.withConfig({
  displayName: 'reviews__Title',
  componentId: 'psan5j-4'
})(['margin-top: 4px;font-size: ', ';font-weight: ', ';line-height: 1.5;color: ', ';'], _commonVariables.fonts.size.medium, _commonVariables.fonts.weight.semiBold, _commonVariables.colors.textGrey);

var Description = _styledComponents2.default.div.withConfig({
  displayName: 'reviews__Description',
  componentId: 'psan5j-5'
})(['margin-top: 8px;font-size: ', ';color: ', ';', ''], _commonVariables.fonts.size.base, _commonVariables.colors.textGrey, (0, _styleUtils.truncate)('relative', 1.43, 3, 'white', 'left'));

var More = _styledComponents2.default.div.withConfig({
  displayName: 'reviews__More',
  componentId: 'psan5j-6'
})(['width: 98px;margin: 60px auto 0 auto;']);

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

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

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

  _createClass(Reviews, [{
    key: 'render',
    value: function render() {
      var data = this.props.data;

      var ReviewsItem = data.map(function (post) {
        return React.createElement(
          FlexItem,
          {
            key: _.get(post, 'id')
          },
          React.createElement(
            ImgFrame,
            null,
            React.createElement(_imgWrapper2.default, {
              alt: _.get(post, 'hero_image.description'),
              src: _.get(post, 'hero_image.resized_targets.mobile.url'),
              srcSet: (0, _imageProcessor.getImageSrcSet)(_.get(post, 'hero_image'))
            })
          ),
          React.createElement(
            TextFrame,
            null,
            React.createElement(
              Category,
              null,
              _.get(post, 'subtitle', '')
            ),
            React.createElement(
              Title,
              null,
              _.get(post, 'title', '')
            ),
            React.createElement(
              Description,
              null,
              _.get(post, 'og_description', '')
            )
          )
        );
      });

      return React.createElement(
        Container,
        {
          mobileWidth: mobileWidth
        },
        React.createElement(
          _sectionName2.default,
          {
            mobileWidth: mobileWidth
          },
          React.createElement(
            'span',
            null,
            _sectionStrings2.default.review
          )
        ),
        React.createElement(
          FlexBox,
          null,
          ReviewsItem
        ),
        React.createElement(
          _mobileList2.default,
          {
            maxWidth: mobileWidth
          },
          React.createElement(
            _mobileFlexSwipeable2.default.SwipableFlexItems,
            {
              mobileWidth: mobileWidth,
              maxSwipableItems: maxSwipableItems
            },
            ReviewsItem
          )
        ),
        React.createElement(
          More,
          null,
          React.createElement(_bottomLink2.default, { text: moreText, isDarkBg: true })
        )
      );
    }
  }]);

  return Reviews;
}(React.Component);

Reviews.defaultProps = {
  data: []
};

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

exports.default = Reviews;