twreporter-react-index-page
Version:
twreporter index page version 2
298 lines (228 loc) • 11.5 kB
JavaScript
'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 align-items: flex-end;\n\n @media (max-width: ', ') and (min-width: ', ') {\n margin-top: -130px;\n margin-bottom: 51px;\n }\n\n @media (min-width: ', ') {\n margin-top: -170px;\n margin-bottom: 59px;\n }\n'], ['\n align-items: flex-end;\n\n @media (max-width: ', ') and (min-width: ', ') {\n margin-top: -130px;\n margin-bottom: 51px;\n }\n\n @media (min-width: ', ') {\n margin-top: -170px;\n margin-bottom: 59px;\n }\n']),
_templateObject2 = _taggedTemplateLiteral(['\n margin-bottom: 39px;\n'], ['\n margin-bottom: 39px;\n']);
var _bottomLink = require('./common-utils/bottom-link');
var _bottomLink2 = _interopRequireDefault(_bottomLink);
var _categoryName = require('./common-utils/category-name');
var _categoryName2 = _interopRequireDefault(_categoryName);
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 _section = require('./common-utils/section');
var _section2 = _interopRequireDefault(_section);
var _sectionName = require('./common-utils/section-name');
var _sectionName2 = _interopRequireDefault(_sectionName);
var _reduxStateFields = require('../constants/redux-state-fields');
var _reduxStateFields2 = _interopRequireDefault(_reduxStateFields);
var _get = require('lodash/get');
var _get2 = _interopRequireDefault(_get);
var _sectionStrings = require('../constants/section-strings');
var _sectionStrings2 = _interopRequireDefault(_sectionStrings);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _reactRedux = require('react-redux');
var _posts = require('../actions/posts');
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
// If window is less than oneColumnWidth,
// there will be only one column. Default is three columns.
};var oneColumnWidth = '700px';
var tabletWidth = '929px';
var UpperList = _styledComponents2.default.div.withConfig({
displayName: 'infographic-section__UpperList',
componentId: 's1199ec0-0'
})(['list-style-type: none;display: flex;flex-wrap: nowrap;justify-content: center;align-items: flex-start;@media (max-width: ', ') {display: none;}'], oneColumnWidth);
var LowerList = UpperList.extend(_templateObject, tabletWidth, oneColumnWidth, tabletWidth);
var MobileList = _mobileList2.default.extend(_templateObject2);
var Item = _styledComponents2.default.div.withConfig({
displayName: 'infographic-section__Item',
componentId: 's1199ec0-1'
})(['max-width: 290px;&:first-child {margin-right: 30px;}&:last-child {margin-left: 30px;}@media (max-width: ', ') {max-width: 220px;&:first-child {margin-right: 20px;}&:last-child {margin-left: 20px;}}@media (max-width: ', ') {max-width: 100%;&:first-child {margin-left: 0;}&:last-child {margin-right: 0;}}'], tabletWidth, oneColumnWidth);
var WordBlock = _styledComponents2.default.div.withConfig({
displayName: 'infographic-section__WordBlock',
componentId: 's1199ec0-2'
})(['background-color: #fff;width: 300px;min-height: 115px;padding: 8px 20px 15px 12px;@media (max-width: ', ') {margin: 0 auto;width: 220px;}@media (max-width: ', ') {width: 100%;height: 100%;}'], tabletWidth, oneColumnWidth);
var Title = _styledComponents2.default.h3.withConfig({
displayName: 'infographic-section__Title',
componentId: 's1199ec0-3'
})(['margin: 0;font-weight: ', ';font-size: ', ';color: #4a4a4a;@media (min-width: ', ') {', ';}@media (max-width: ', ') and (min-width: ', ') {font-size: 16px;', ';}'], _commonVariables.fonts.weight.medium, _commonVariables.fonts.size.title.base, tabletWidth, (0, _styleUtils.truncate)('relative', 1.4, 2, '#fff'), tabletWidth, oneColumnWidth, (0, _styleUtils.truncate)('relative', 1.4, 3, '#fff'));
var ImgFrame = _styledComponents2.default.div.withConfig({
displayName: 'infographic-section__ImgFrame',
componentId: 's1199ec0-4'
})(['position: relative;cursor: pointer;width: 300px;height: ', ';@media (max-width: ', ') {margin: 0 auto;width: 220px;height: ', ';}@media (max-width: ', ') {width: 100%;height: 186px;}'], function (props) {
return props.isPortrait ? '390px' : '190px';
}, tabletWidth, function (props) {
return props.isPortrait ? '290px' : '145px';
}, oneColumnWidth);
var More = _styledComponents2.default.div.withConfig({
displayName: 'infographic-section__More',
componentId: 's1199ec0-5'
})(['text-align: center;']);
var Infographic = function (_React$PureComponent) {
_inherits(Infographic, _React$PureComponent);
function Infographic() {
_classCallCheck(this, Infographic);
return _possibleConstructorReturn(this, (Infographic.__proto__ || Object.getPrototypeOf(Infographic)).apply(this, arguments));
}
_createClass(Infographic, [{
key: 'render',
value: function render() {
var _props = this.props,
title = _props.title,
imgObj = _props.imgObj,
isPortrait = _props.isPortrait;
return React.createElement(
Item,
null,
React.createElement(
ImgFrame,
{
isPortrait: isPortrait
},
React.createElement(_imgWrapper2.default, {
alt: _.get(imgObj, 'description'),
src: _.get(imgObj, 'resized_targets.mobile.url'),
srcSet: (0, _imageProcessor.getImageSrcSet)(imgObj)
})
),
React.createElement(
WordBlock,
null,
React.createElement(
_categoryName2.default,
null,
_sectionStrings2.default.infographic
),
React.createElement(
Title,
null,
title
)
)
);
}
}]);
return Infographic;
}(React.PureComponent);
Infographic.defaultProps = {
title: '',
imgObj: {},
isPortrait: false
};
Infographic.propTypes = {
title: _propTypes2.default.string,
imgObj: _propTypes2.default.object,
isPortrait: _propTypes2.default.bool
};
var InfographicSection = function (_React$Component) {
_inherits(InfographicSection, _React$Component);
function InfographicSection() {
_classCallCheck(this, InfographicSection);
return _possibleConstructorReturn(this, (InfographicSection.__proto__ || Object.getPrototypeOf(InfographicSection)).apply(this, arguments));
}
_createClass(InfographicSection, [{
key: 'componentWillMount',
value: function componentWillMount() {
this.props.fetchInfographicPostsOnIndexPage();
}
}, {
key: 'render',
value: function render() {
var items = this.props.items;
var listNumber = 3;
var postComps = items.slice(0, 6).map(function (item, index) {
return React.createElement(Infographic, {
key: _.get(item, 'id'),
category: _.get(item, 'categories.[0].name'),
imgObj: _.get(item, 'hero_image'),
title: _.get(item, 'title'),
isPortrait: index === 0 || index === 4 || index === 5
});
});
return React.createElement(
_section2.default,
{
mobileWidth: oneColumnWidth
},
React.createElement(
_sectionName2.default,
{
mobileWidth: oneColumnWidth
},
React.createElement(
'span',
null,
_sectionStrings2.default.infographic
)
),
React.createElement(
UpperList,
null,
postComps.slice(0, listNumber)
),
React.createElement(
LowerList,
null,
postComps.slice(listNumber, listNumber * 2)
),
React.createElement(
MobileList,
{
maxWidth: oneColumnWidth
},
React.createElement(
_mobileFlexSwipeable2.default.SwipableFlexItems,
{
mobileWidth: oneColumnWidth,
maxSwipableItems: 5,
alignItems: 'flex-start'
},
postComps
)
),
React.createElement(
More,
null,
React.createElement(_bottomLink2.default, { text: '\u66F4\u591A\u591A\u5A92\u9AD4\u65B0\u805E', isDarkBg: true })
)
);
}
}]);
return InfographicSection;
}(React.Component);
InfographicSection.defaultProps = {
items: [],
fetchInfographicPostsOnIndexPage: function fetchInfographicPostsOnIndexPage() {}
};
InfographicSection.propTypes = {
items: _propTypes2.default.array,
fetchInfographicPostsOnIndexPage: _propTypes2.default.func
};
function mapStateToProps(state) {
var postSlugs = _.get(state, _reduxStateFields2.default.indexPage + '.' + _reduxStateFields2.default.infographics, []);
var entities = _.get(state, _reduxStateFields2.default.entities + '.' + _reduxStateFields2.default.posts, {});
postSlugs = postSlugs.map(function (slug) {
return entities[slug];
});
return {
items: postSlugs
};
}
exports.default = (0, _reactRedux.connect)(mapStateToProps, { fetchInfographicPostsOnIndexPage: _posts.fetchInfographicPostsOnIndexPage })(InfographicSection);