twreporter-react-index-page
Version:
twreporter index page version 2
304 lines (231 loc) • 11.1 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 max-width: 280px;\n\n &:nth-child(odd) {\n margin-right: 20px;\n }'], ['\n max-width: 280px;\n\n &:nth-child(odd) {\n margin-right: 20px;\n }']),
_templateObject2 = _taggedTemplateLiteral(['\n text-align: center;\n'], ['\n text-align: center;\n']),
_templateObject3 = _taggedTemplateLiteral(['\n width: 280px;\n height: 186px;\n '], ['\n width: 280px;\n height: 186px;\n ']),
_templateObject4 = _taggedTemplateLiteral(['\n max-width: 240px;\n '], ['\n max-width: 240px;\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 _truncatText = require('./truncat-text');
var _truncatText2 = _interopRequireDefault(_truncatText);
var _reduxStateFields = require('../constants/redux-state-fields');
var _reduxStateFields2 = _interopRequireDefault(_reduxStateFields);
var _strings = require('../constants/strings');
var _strings2 = _interopRequireDefault(_strings);
var _sectionStrings = require('../constants/section-strings');
var _sectionStrings2 = _interopRequireDefault(_sectionStrings);
var _get = require('lodash/get');
var _get2 = _interopRequireDefault(_get);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _reactRedux = require('react-redux');
var _topics = require('../actions/topics');
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.
};var oneColumnWidth = '600px';
var List = _styledComponents2.default.div.withConfig({
displayName: 'topics-section__List',
componentId: 's0gyy1-0'
})(['list-style-type: none;padding: 0px;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-end;@media (max-width: ', ') {display: none;}'], oneColumnWidth);
var Item = _styledComponents2.default.div.withConfig({
displayName: 'topics-section__Item',
componentId: 's0gyy1-1'
})(['padding-bottom: 60px;max-width: 369px;&:nth-child(odd) {margin-right: 32px;}&:nth-child(even) {margin-right: 0px;}', '@media (max-width: ', ') {max-width: 100%;&:nth-child(odd) {margin-right: 0px;}}'], _styleUtils.media.tablet(_templateObject), oneColumnWidth);
var TopicName = _categoryName2.default.extend(_templateObject2);
var Title = _styledComponents2.default.div.withConfig({
displayName: 'topics-section__Title',
componentId: 's0gyy1-2'
})(['cursor: pointer;line-height: 1.25;text-align: center;color: #4a4a4a;font-weight: 600;font-size: ', ';margin-bottom: 15px;margin-top: 4px;@media (max-width: ', ') {font-size: ', ';}'], _commonVariables.fonts.size.title.large, oneColumnWidth, _commonVariables.fonts.size.title.medium);
var Img = _styledComponents2.default.div.withConfig({
displayName: 'topics-section__Img',
componentId: 's0gyy1-3'
})(['cursor: pointer;width: 369px;height: 247px;margin: 0 auto;', '@media (max-width: ', ') {width: 100%;}'], _styleUtils.media.tablet(_templateObject3), oneColumnWidth);
var Desc = _styledComponents2.default.div.withConfig({
displayName: 'topics-section__Desc',
componentId: 's0gyy1-4'
})(['cursor: pointer;margin: 15px auto 0 auto;max-width: 323px;height: 140px;font-size: ', ';p {margin: 0;text-align: justify;}', '@media (max-width: ', ') {max-width: 100%;height: 208px;font-size: ', ';}'], _commonVariables.fonts.size.medium, _styleUtils.media.tablet(_templateObject4), oneColumnWidth, _commonVariables.fonts.size.large);
var More = _styledComponents2.default.div.withConfig({
displayName: 'topics-section__More',
componentId: 's0gyy1-5'
})(['text-align: center;']);
var Topic = function (_React$PureComponent) {
_inherits(Topic, _React$PureComponent);
function Topic() {
_classCallCheck(this, Topic);
return _possibleConstructorReturn(this, (Topic.__proto__ || Object.getPrototypeOf(Topic)).apply(this, arguments));
}
_createClass(Topic, [{
key: 'render',
value: function render() {
var _props = this.props,
title = _props.title,
topicName = _props.topicName,
desc = _props.desc,
imgObj = _props.imgObj;
return React.createElement(
Item,
null,
React.createElement(
TopicName,
null,
'' + _strings2.default.topic + _strings2.default.fullShapeDot + topicName
),
React.createElement(
Title,
null,
title
),
React.createElement(
Img,
null,
React.createElement(_imgWrapper2.default, {
src: _.get(imgObj, 'resized_targets.mobile.url'),
alt: _.get(imgObj, 'description'),
srcSet: (0, _imageProcessor.getImageSrcSet)(imgObj)
})
),
React.createElement(
Desc,
null,
React.createElement(_truncatText2.default, {
backgroundColor: '#f2f2f2',
lines: 7,
lineHeight: 1.43,
dangerouslySetInnerHTML: { __html: desc }
})
)
);
}
}]);
return Topic;
}(React.PureComponent);
Topic.defaultProps = {
title: '',
topicName: '',
desc: '',
imgObj: {}
};
Topic.propTypes = {
title: _propTypes2.default.string,
topicName: _propTypes2.default.string,
desc: _propTypes2.default.string,
imgObj: _propTypes2.default.object
};
var TopicsSection = function (_React$PureComponent2) {
_inherits(TopicsSection, _React$PureComponent2);
function TopicsSection() {
_classCallCheck(this, TopicsSection);
return _possibleConstructorReturn(this, (TopicsSection.__proto__ || Object.getPrototypeOf(TopicsSection)).apply(this, arguments));
}
_createClass(TopicsSection, [{
key: 'componentWillMount',
value: function componentWillMount() {
this.props.fetchTopicsOnIndexPage();
}
}, {
key: 'render',
value: function render() {
var totalTopics = 4;
var items = this.props.items;
var topicComps = items.map(function (item) {
var desc = _.get(item, 'og_description');
var imgObj = _.get(item, 'hero_image') || _.get(item, 'og_image');
return React.createElement(Topic, {
key: _.get(item, 'id'),
title: _.get(item, 'title'),
topicName: _.get(item, 'topic_name'),
desc: desc,
imgObj: imgObj
});
});
return React.createElement(
_section2.default,
{
mobileWidth: oneColumnWidth
},
React.createElement(
_sectionName2.default,
{
mobileWidth: oneColumnWidth
},
React.createElement(
'span',
null,
_sectionStrings2.default.topic
)
),
React.createElement(
List,
null,
topicComps
),
React.createElement(
_mobileList2.default,
{
maxWidth: oneColumnWidth
},
React.createElement(
_mobileFlexSwipeable2.default.SwipableFlexItems,
{
mobileWidth: oneColumnWidth,
maxSwipableItems: totalTopics - 1
},
topicComps
)
),
React.createElement(
More,
null,
React.createElement(_bottomLink2.default, { text: '\u66F4\u591A\u5831\u5C0E\u8005\u5C08\u984C' })
)
);
}
}]);
return TopicsSection;
}(React.PureComponent);
TopicsSection.defaultProps = {
items: [],
fetchTopicsOnIndexPage: function fetchTopicsOnIndexPage() {}
};
TopicsSection.propTypes = {
items: _propTypes2.default.array,
fetchTopicsOnIndexPage: _propTypes2.default.func
};
function mapStateToProps(state) {
var topicSlugs = _.get(state, _reduxStateFields2.default.indexPage + '.' + _reduxStateFields2.default.topics, []);
var entities = _.get(state, 'entities.' + _reduxStateFields2.default.topics, {});
topicSlugs = topicSlugs.map(function (slug) {
return entities[slug];
});
return {
items: topicSlugs
};
}
exports.default = (0, _reactRedux.connect)(mapStateToProps, { fetchTopicsOnIndexPage: _topics.fetchTopicsOnIndexPage })(TopicsSection);