@quintype/arrow 3.15.1-perf.2 → 3.15.1-perf.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/index.js +14589 -0
- package/package.json +1 -1
- package/atoms/Author/index.js +0 -2250
- package/atoms/Author/styles.arrow.css +0 -1
- package/atoms/AuthorWithTime/index.js +0 -2954
- package/atoms/AuthorWithTime/styles.arrow.css +0 -1
- package/atoms/CollectionName/index.js +0 -2334
- package/atoms/CollectionName/styles.arrow.css +0 -1
- package/atoms/ExtendedLoadMore/index-0519e570.js +0 -243
- package/atoms/ExtendedLoadMore/index-1256e453.js +0 -175
- package/atoms/ExtendedLoadMore/index-1e444d20.js +0 -990
- package/atoms/ExtendedLoadMore/index-4356ce04.js +0 -282
- package/atoms/ExtendedLoadMore/index-81eb3978.js +0 -86
- package/atoms/ExtendedLoadMore/index-aba6b278.js +0 -166
- package/atoms/ExtendedLoadMore/index-ad3c83c3.js +0 -3023
- package/atoms/ExtendedLoadMore/index-beed3a68.js +0 -240
- package/atoms/ExtendedLoadMore/index-c2f73d18.js +0 -199
- package/atoms/ExtendedLoadMore/index-c61a16dc.js +0 -350
- package/atoms/ExtendedLoadMore/index-d0f6c865.js +0 -181
- package/atoms/ExtendedLoadMore/index-e4cf9cb7.js +0 -223
- package/atoms/ExtendedLoadMore/index-fd651f70.js +0 -175
- package/atoms/ExtendedLoadMore/index.js +0 -5
- package/atoms/ExtendedLoadMore/styles.arrow.css +0 -1
- package/atoms/Headline/index.js +0 -2459
- package/atoms/Headline/styles.arrow.css +0 -1
- package/atoms/HeroImage/index.js +0 -2475
- package/atoms/HeroImage/styles.arrow.css +0 -1
- package/atoms/LoadmoreButton/index.js +0 -2268
- package/atoms/LoadmoreButton/styles.arrow.css +0 -1
- package/atoms/ScrollSnap/index.js +0 -2531
- package/atoms/ScrollSnap/styles.arrow.css +0 -1
- package/atoms/SectionTag/index.js +0 -2220
- package/atoms/SectionTag/styles.arrow.css +0 -1
- package/atoms/Subheadline/index.js +0 -2200
- package/atoms/Subheadline/styles.arrow.css +0 -1
- package/atoms/TimeStamp/index.js +0 -2661
- package/atoms/TimeStamp/styles.arrow.css +0 -1
- package/molecules/KeyEvents/index.js +0 -2968
- package/molecules/KeyEvents/styles.arrow.css +0 -1
- package/molecules/PageIntroductionCard/index.js +0 -2676
- package/molecules/PageIntroductionCard/styles.arrow.css +0 -1
- package/molecules/SocialShareTemplate/index.js +0 -3093
- package/molecules/SocialShareTemplate/styles.arrow.css +0 -1
- package/molecules/StoryCard/index.js +0 -3938
- package/molecules/StoryCard/styles.arrow.css +0 -1
- package/molecules/StoryElementCard/index.js +0 -5832
- package/molecules/StoryElementCard/styles.arrow.css +0 -1
- package/molecules/StorycardContent/index.js +0 -3416
- package/molecules/StorycardContent/styles.arrow.css +0 -1
- package/rows/AlternateCollectionFilter/index.js +0 -4744
- package/rows/AlternateCollectionFilter/styles.arrow.css +0 -1
- package/rows/AsideCollection/index.js +0 -4690
- package/rows/AsideCollection/styles.arrow.css +0 -1
- package/rows/AstrologyCollection/index.js +0 -4661
- package/rows/AstrologyCollection/styles.arrow.css +0 -1
- package/rows/AuthorIntroductionCard/index.js +0 -3520
- package/rows/AuthorIntroductionCard/styles.arrow.css +0 -1
- package/rows/AuthorsList/index.js +0 -3715
- package/rows/AuthorsList/styles.arrow.css +0 -1
- package/rows/CollectionFilter/index.js +0 -4834
- package/rows/CollectionFilter/styles.arrow.css +0 -1
- package/rows/ElevenStories/index.js +0 -4638
- package/rows/ElevenStories/styles.arrow.css +0 -1
- package/rows/FourColFiveStories/index.js +0 -4359
- package/rows/FourColFiveStories/styles.arrow.css +0 -1
- package/rows/FourColGrid/index.js +0 -4584
- package/rows/FourColGrid/styles.arrow.css +0 -1
- package/rows/FourColPortraitStories/index.js +0 -4617
- package/rows/FourColPortraitStories/styles.arrow.css +0 -1
- package/rows/FourColSixteenStories/index.js +0 -4375
- package/rows/FourColSixteenStories/styles.arrow.css +0 -1
- package/rows/FourColTwelveStories/index.js +0 -4335
- package/rows/FourColTwelveStories/styles.arrow.css +0 -1
- package/rows/FourStorySlider/index.js +0 -4743
- package/rows/FourStorySlider/styles.arrow.css +0 -1
- package/rows/FourStorySliderPortrait/index.js +0 -4746
- package/rows/FourStorySliderPortrait/styles.arrow.css +0 -1
- package/rows/FourTabbedBigStorySlider/index.js +0 -4505
- package/rows/FourTabbedBigStorySlider/styles.arrow.css +0 -1
- package/rows/FullScreenSlider/index.js +0 -4661
- package/rows/FullScreenSlider/styles.arrow.css +0 -1
- package/rows/HalfScreenSlider/index.js +0 -4514
- package/rows/HalfScreenSlider/styles.arrow.css +0 -1
- package/rows/ListComponent/index.js +0 -4462
- package/rows/ListComponent/styles.arrow.css +0 -1
- package/rows/Listicles/index.js +0 -3131
- package/rows/Listicles/styles.arrow.css +0 -1
- package/rows/MagazineEditions/index.js +0 -3142
- package/rows/MagazineEditions/styles.arrow.css +0 -1
- package/rows/MagazineHeaderCard/index.js +0 -3136
- package/rows/MagazineHeaderCard/styles.arrow.css +0 -1
- package/rows/MagazineWidget/index.js +0 -4514
- package/rows/MagazineWidget/styles.arrow.css +0 -1
- package/rows/OneColStoryList/index.js +0 -4670
- package/rows/OneColStoryList/styles.arrow.css +0 -1
- package/rows/OpinionCollection/index.js +0 -4037
- package/rows/OpinionCollection/styles.arrow.css +0 -1
- package/rows/SixColSixStories/index.js +0 -4515
- package/rows/SixColSixStories/styles.arrow.css +0 -1
- package/rows/StoryCollection/index.js +0 -4690
- package/rows/StoryCollection/styles.arrow.css +0 -1
- package/rows/TagIntroductionCard/index.js +0 -1901
- package/rows/TagIntroductionCard/styles.arrow.css +0 -1
- package/rows/ThreeColFlexStories/index.js +0 -4575
- package/rows/ThreeColFlexStories/styles.arrow.css +0 -1
- package/rows/ThreeColFourteenStories/index.js +0 -4283
- package/rows/ThreeColFourteenStories/styles.arrow.css +0 -1
- package/rows/ThreeColGrid/index.js +0 -4605
- package/rows/ThreeColGrid/styles.arrow.css +0 -1
- package/rows/ThreeColSevenStory/index.js +0 -4502
- package/rows/ThreeColSevenStory/styles.arrow.css +0 -1
- package/rows/ThreeColSixStories/index.js +0 -4485
- package/rows/ThreeColSixStories/styles.arrow.css +0 -1
- package/rows/ThreeColTwelveStories/index.js +0 -4380
- package/rows/ThreeColTwelveStories/styles.arrow.css +0 -1
- package/rows/TwoColFourStories/index.js +0 -4463
- package/rows/TwoColFourStories/styles.arrow.css +0 -1
- package/rows/TwoColFourStoryHighlight/index.js +0 -4456
- package/rows/TwoColFourStoryHighlight/styles.arrow.css +0 -1
- package/rows/TwoColSevenStories/index.js +0 -4490
- package/rows/TwoColSevenStories/styles.arrow.css +0 -1
- package/rows/TwoColSixStories/index.js +0 -4489
- package/rows/TwoColSixStories/styles.arrow.css +0 -1
- package/rows/TwoColTenStoriesSidebar/index.js +0 -4549
- package/rows/TwoColTenStoriesSidebar/styles.arrow.css +0 -1
- package/rows/TwoColThreeStories/index.js +0 -4436
- package/rows/TwoColThreeStories/styles.arrow.css +0 -1
- package/story-elements/AlsoRead/index.js +0 -2457
- package/story-elements/AlsoRead/styles.arrow.css +0 -1
- package/story-elements/Attachment/index.js +0 -2013
- package/story-elements/Attachment/styles.arrow.css +0 -1
- package/story-elements/BigFact/index.js +0 -1983
- package/story-elements/BigFact/styles.arrow.css +0 -1
- package/story-elements/BlockQuote/index.js +0 -2431
- package/story-elements/BlockQuote/styles.arrow.css +0 -1
- package/story-elements/Blurb/index.js +0 -2094
- package/story-elements/Blurb/styles.arrow.css +0 -1
- package/story-elements/Image/index.js +0 -2711
- package/story-elements/Image/styles.arrow.css +0 -1
- package/story-elements/ImageGallery/index.js +0 -2644
- package/story-elements/ImageGallery/styles.arrow.css +0 -1
- package/story-elements/ImageSlideshow/index.js +0 -2955
- package/story-elements/ImageSlideshow/styles.arrow.css +0 -1
- package/story-elements/QuestionAnswer/index.js +0 -2395
- package/story-elements/QuestionAnswer/styles.arrow.css +0 -1
- package/story-elements/Quote/index.js +0 -2012
- package/story-elements/Quote/styles.arrow.css +0 -1
- package/story-elements/Reference/index.js +0 -2006
- package/story-elements/Reference/styles.arrow.css +0 -1
- package/story-elements/StoryElement/index.js +0 -1779
- package/story-elements/Summary/index.js +0 -2036
- package/story-elements/Summary/styles.arrow.css +0 -1
- package/story-elements/Text/index.js +0 -2293
- package/story-elements/Text/styles.arrow.css +0 -1
- package/story-elements/Video/index.js +0 -1785
- package/story-elements/Video/styles.arrow.css +0 -1
- package/story-templates/ListicleStoryTemplate/index.js +0 -8442
- package/story-templates/ListicleStoryTemplate/styles.arrow.css +0 -1
- package/story-templates/LiveBlogStoryTemplate/index.js +0 -8618
- package/story-templates/LiveBlogStoryTemplate/styles.arrow.css +0 -1
- package/story-templates/PhotoStoryTemplate/index.js +0 -8420
- package/story-templates/PhotoStoryTemplate/styles.arrow.css +0 -1
- package/story-templates/TextStoryTemplate/index.js +0 -8493
- package/story-templates/TextStoryTemplate/styles.arrow.css +0 -1
- package/story-templates/VideoStoryTemplate/index.js +0 -8352
- package/story-templates/VideoStoryTemplate/styles.arrow.css +0 -1
|
@@ -1,282 +0,0 @@
|
|
|
1
|
-
import { C as CollectionName, b as Author, H as Headline, A as AuthorWithTime, S as StateProvider, _ as _defineProperty, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-1e444d20.js';
|
|
2
|
-
import { _ as _getClassName, a as get_1, g as getTextColor, l as getSlot, b as generateNavigateSlug, n as navigateTo } from './index-ad3c83c3.js';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useDispatch, useSelector } from 'react-redux';
|
|
5
|
-
import PropTypes from 'prop-types';
|
|
6
|
-
import { Link, ResponsiveImage, collectionToStories } from '@quintype/components';
|
|
7
|
-
import 'react-dom';
|
|
8
|
-
import 'react-timeago';
|
|
9
|
-
import 'date-fns-tz';
|
|
10
|
-
|
|
11
|
-
var UserFallbackIcon = function UserFallbackIcon(_ref) {
|
|
12
|
-
var _ref$width = _ref.width,
|
|
13
|
-
width = _ref$width === void 0 ? 120 : _ref$width,
|
|
14
|
-
_ref$height = _ref.height,
|
|
15
|
-
height = _ref$height === void 0 ? 120 : _ref$height;
|
|
16
|
-
return /*#__PURE__*/React.createElement("svg", {
|
|
17
|
-
width: width,
|
|
18
|
-
height: height,
|
|
19
|
-
viewBox: "0 0 120 120",
|
|
20
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
21
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
22
|
-
d: "M93.28 108.98c-1.055-17.675-15.47-31.678-33.098-31.678-17.708 0-32.173 14.129-33.11 31.916 9.415 6.311 20.741 9.993 32.927 9.993 12.338 0 23.795-3.774 33.28-10.23l.001-.001zM58.584 73.283c9.928 0 17.977-8.275 17.977-18.483 0-10.209-8.049-18.484-17.977-18.484-9.929 0-17.977 8.275-17.977 18.484 0 10.208 8.048 18.483 17.977 18.483zM60 120C26.863 120 0 93.137 0 60S26.863 0 60 0s60 26.863 60 60-26.863 60-60 60z",
|
|
23
|
-
fill: "#DADADA",
|
|
24
|
-
fillRule: "nonzero"
|
|
25
|
-
}));
|
|
26
|
-
};
|
|
27
|
-
UserFallbackIcon.propTypes = {
|
|
28
|
-
width: PropTypes.object,
|
|
29
|
-
height: PropTypes.object
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
var _styleModuleImportMap$1 = {
|
|
33
|
-
"./author-image.m.css": {
|
|
34
|
-
"viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
|
|
35
|
-
"mobile": "768px",
|
|
36
|
-
"tablet": "992px",
|
|
37
|
-
"image-container": "author-image-m_image-container__19WNd",
|
|
38
|
-
"author-image": "author-image-m_author-image__D8GMB",
|
|
39
|
-
"square": "author-image-m_square__bjK7M",
|
|
40
|
-
"small-circle": "author-image-m_small-circle__DbQMN",
|
|
41
|
-
"smaller-circle": "author-image-m_smaller-circle__2yMOZ"
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
var authorWithImage = function authorWithImage(author, templateStyle) {
|
|
46
|
-
var avatarUrl = author["avatar-url"],
|
|
47
|
-
avatarS3Key = author["avatar-s3-key"],
|
|
48
|
-
name = author.name;
|
|
49
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
50
|
-
"data-test-id": "author-image",
|
|
51
|
-
className: "arr--author-image " + _getClassName("author-image ".concat(templateStyle), _styleModuleImportMap$1)
|
|
52
|
-
}, /*#__PURE__*/React.createElement("figure", {
|
|
53
|
-
className: "author-image-m_image-container__19WNd"
|
|
54
|
-
}, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
|
|
55
|
-
slug: avatarS3Key,
|
|
56
|
-
alt: name,
|
|
57
|
-
defaultWidth: 250,
|
|
58
|
-
widths: [250, 480],
|
|
59
|
-
aspectRatio: [[1, 1], [1, 1]],
|
|
60
|
-
sizes: "98vw",
|
|
61
|
-
imgParams: {
|
|
62
|
-
auto: ["format", "compress"]
|
|
63
|
-
}
|
|
64
|
-
}) : avatarUrl ? /*#__PURE__*/React.createElement("img", {
|
|
65
|
-
src: avatarUrl
|
|
66
|
-
}) : /*#__PURE__*/React.createElement(UserFallbackIcon, null)));
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
var AuthorImage = function AuthorImage(_ref) {
|
|
70
|
-
var _ref$author = _ref.author,
|
|
71
|
-
author = _ref$author === void 0 ? {} : _ref$author,
|
|
72
|
-
_ref$template = _ref.template,
|
|
73
|
-
template = _ref$template === void 0 ? "" : _ref$template,
|
|
74
|
-
_ref$config = _ref.config,
|
|
75
|
-
config = _ref$config === void 0 ? {} : _ref$config;
|
|
76
|
-
var slug = author.slug;
|
|
77
|
-
var mountAt = config.mountAt || "";
|
|
78
|
-
var templateStyle = "";
|
|
79
|
-
if (template === "smallerCircle") templateStyle = "smaller-circle";else if (template === "smallCircle") templateStyle = "small-circle";else if (template === "square") templateStyle = "square";
|
|
80
|
-
if (slug) return /*#__PURE__*/React.createElement(Link, {
|
|
81
|
-
href: "".concat(mountAt, "/author/") + slug
|
|
82
|
-
}, authorWithImage(author, templateStyle));else return authorWithImage(author, templateStyle);
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
AuthorImage.propTypes = {
|
|
86
|
-
author: PropTypes.shape({
|
|
87
|
-
"avatar-url": PropTypes.string,
|
|
88
|
-
"avatar-s3-key": PropTypes.string,
|
|
89
|
-
name: PropTypes.string,
|
|
90
|
-
slug: PropTypes.string
|
|
91
|
-
}),
|
|
92
|
-
template: PropTypes.string
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
var _styleModuleImportMap = {
|
|
96
|
-
"./opinion-collection.m.css": {
|
|
97
|
-
"viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
|
|
98
|
-
"mobile": "768px",
|
|
99
|
-
"desktop": "1025px",
|
|
100
|
-
"opinion-collection": "opinion-collection-m_opinion-collection__1Bc7h",
|
|
101
|
-
"content-wrapper": "opinion-collection-m_content-wrapper__y32PE",
|
|
102
|
-
"custom-grid": "opinion-collection-m_custom-grid__33uRh",
|
|
103
|
-
"wrapper-with-ads": "opinion-collection-m_wrapper-with-ads__2daVe",
|
|
104
|
-
"ad-slot": "opinion-collection-m_ad-slot__2ZpaC",
|
|
105
|
-
"headline-author": "opinion-collection-m_headline-author__2H6Tv",
|
|
106
|
-
"border": "opinion-collection-m_border__38tun",
|
|
107
|
-
"light": "opinion-collection-m_light__2Hent",
|
|
108
|
-
"dark": "opinion-collection-m_dark__WMRNF",
|
|
109
|
-
"count-3": "opinion-collection-m_count-3__3cQUB",
|
|
110
|
-
"count-2": "opinion-collection-m_count-2__2e7g_"
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
115
|
-
|
|
116
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
117
|
-
|
|
118
|
-
var loadMore = function loadMore(_ref) {
|
|
119
|
-
var isLoading = _ref.isLoading,
|
|
120
|
-
renderStories = _ref.renderStories,
|
|
121
|
-
getMoreStories = _ref.getMoreStories,
|
|
122
|
-
_ref$subsequentLoadCo = _ref.subsequentLoadCount,
|
|
123
|
-
subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 3 : _ref$subsequentLoadCo;
|
|
124
|
-
if (isLoading) return;
|
|
125
|
-
var limit = subsequentLoadCount;
|
|
126
|
-
var offset = renderStories.length;
|
|
127
|
-
getMoreStories(offset, limit);
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
var OpinionCollectionBase = function OpinionCollectionBase(_ref2) {
|
|
131
|
-
var collection = _ref2.collection,
|
|
132
|
-
config = _ref2.config,
|
|
133
|
-
getMoreStories = _ref2.getMoreStories,
|
|
134
|
-
isLoadMoreVisible = _ref2.isLoadMoreVisible,
|
|
135
|
-
isLoading = _ref2.isLoading,
|
|
136
|
-
isolatedLoadMore = _ref2.isolatedLoadMore;
|
|
137
|
-
var stories = collectionToStories(collection);
|
|
138
|
-
var _config$theme = config.theme,
|
|
139
|
-
theme = _config$theme === void 0 ? "" : _config$theme,
|
|
140
|
-
_config$footerButton = config.footerButton,
|
|
141
|
-
footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
|
|
142
|
-
_config$border = config.border,
|
|
143
|
-
border = _config$border === void 0 ? "fullBorder" : _config$border,
|
|
144
|
-
_config$collectionNam = config.collectionNameBorderColor,
|
|
145
|
-
collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
|
|
146
|
-
_config$collectionNam2 = config.collectionNameTemplate,
|
|
147
|
-
collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
|
|
148
|
-
_config$slotConfig = config.slotConfig,
|
|
149
|
-
slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
|
|
150
|
-
_config$subsequentLoa = config.subsequentLoadCount,
|
|
151
|
-
subsequentLoadCount = _config$subsequentLoa === void 0 ? 3 : _config$subsequentLoa;
|
|
152
|
-
|
|
153
|
-
var _get = get_1(slotConfig, [0], {}),
|
|
154
|
-
_get$type = _get.type,
|
|
155
|
-
type = _get$type === void 0 ? "story" : _get$type,
|
|
156
|
-
_get$component = _get.component,
|
|
157
|
-
component = _get$component === void 0 ? null : _get$component;
|
|
158
|
-
|
|
159
|
-
var dispatch = useDispatch();
|
|
160
|
-
var qtConfig = useSelector(function (state) {
|
|
161
|
-
return get_1(state, ["qt", "config"], {});
|
|
162
|
-
});
|
|
163
|
-
if (!stories.length) return null;
|
|
164
|
-
var textColor = getTextColor(theme);
|
|
165
|
-
var borderStyle = border === "fullBorder" ? "border" : "";
|
|
166
|
-
var slot = type === "ad" ? getSlot(type, component) : null;
|
|
167
|
-
var adStyle = slot ? "custom-grid" : "";
|
|
168
|
-
|
|
169
|
-
var getLoadMore = function getLoadMore(opts) {
|
|
170
|
-
if (!isLoadMoreVisible) return null;
|
|
171
|
-
|
|
172
|
-
if (isolatedLoadMore) {
|
|
173
|
-
return /*#__PURE__*/React.createElement(LoadMoreTarget, {
|
|
174
|
-
collection: collection,
|
|
175
|
-
componentName: "OpinionCollection",
|
|
176
|
-
offset: stories.length,
|
|
177
|
-
limit: subsequentLoadCount
|
|
178
|
-
});
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
var url = generateNavigateSlug(collection, qtConfig);
|
|
182
|
-
return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
|
|
183
|
-
config: config,
|
|
184
|
-
collection: collection,
|
|
185
|
-
template: footerButton,
|
|
186
|
-
onClick: function onClick() {
|
|
187
|
-
return loadMore(opts);
|
|
188
|
-
},
|
|
189
|
-
navigate: function navigate() {
|
|
190
|
-
return navigateTo(dispatch, url);
|
|
191
|
-
},
|
|
192
|
-
qtConfig: qtConfig
|
|
193
|
-
}));
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
var getAuthorCard = function getAuthorCard(story) {
|
|
197
|
-
var authorData = get_1(story, ["authors", "0"]);
|
|
198
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
199
|
-
"data-test-id": "story-card"
|
|
200
|
-
}, /*#__PURE__*/React.createElement(Author, {
|
|
201
|
-
story: story,
|
|
202
|
-
hideAuthorImage: true
|
|
203
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
204
|
-
className: "opinion-collection-m_headline-author__2H6Tv"
|
|
205
|
-
}, /*#__PURE__*/React.createElement(Headline, {
|
|
206
|
-
story: story
|
|
207
|
-
}), /*#__PURE__*/React.createElement(AuthorImage, {
|
|
208
|
-
author: authorData,
|
|
209
|
-
template: "smallerCircle",
|
|
210
|
-
config: config
|
|
211
|
-
})), /*#__PURE__*/React.createElement(AuthorWithTime, {
|
|
212
|
-
story: story,
|
|
213
|
-
config: _objectSpread(_objectSpread({}, config), {}, {
|
|
214
|
-
disableMeridiem: true,
|
|
215
|
-
showAuthor: false
|
|
216
|
-
})
|
|
217
|
-
}));
|
|
218
|
-
};
|
|
219
|
-
|
|
220
|
-
var countStyleName = stories.length === 2 || stories.length === 3 ? "count-".concat(stories.length) : "";
|
|
221
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
222
|
-
className: "full-width-with-padding arrow-component",
|
|
223
|
-
"data-test-id": "opinion-collection",
|
|
224
|
-
style: {
|
|
225
|
-
backgroundColor: theme,
|
|
226
|
-
color: textColor
|
|
227
|
-
}
|
|
228
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
229
|
-
className: "opinion-collection-m_opinion-collection__1Bc7h",
|
|
230
|
-
style: {
|
|
231
|
-
backgroundColor: theme,
|
|
232
|
-
color: textColor
|
|
233
|
-
}
|
|
234
|
-
}, /*#__PURE__*/React.createElement(CollectionName, {
|
|
235
|
-
collection: collection,
|
|
236
|
-
collectionNameTemplate: collectionNameTemplate,
|
|
237
|
-
collectionNameBorderColor: collectionNameBorderColor,
|
|
238
|
-
headerLevel: 2
|
|
239
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
240
|
-
className: ("content-wrapper ".concat(borderStyle, " ").concat(textColor) ? "content-wrapper ".concat(borderStyle, " ").concat(textColor) + " " : "") + _getClassName("content-wrapper ".concat(borderStyle, " ").concat(textColor, " ").concat(adStyle), _styleModuleImportMap)
|
|
241
|
-
}, slot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
242
|
-
className: "wrapper-with-ads " + _getClassName("wrapper-with-ads ".concat(countStyleName), _styleModuleImportMap)
|
|
243
|
-
}, stories.slice(0, 4).map(function (story) {
|
|
244
|
-
return getAuthorCard(story);
|
|
245
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
246
|
-
className: "opinion-collection-m_ad-slot__2ZpaC"
|
|
247
|
-
}, slot)) : stories.map(function (story) {
|
|
248
|
-
return getAuthorCard(story);
|
|
249
|
-
})), getLoadMore({
|
|
250
|
-
isLoading: isLoading,
|
|
251
|
-
stories: stories,
|
|
252
|
-
getMoreStories: getMoreStories,
|
|
253
|
-
subsequentLoadCount: subsequentLoadCount
|
|
254
|
-
})));
|
|
255
|
-
};
|
|
256
|
-
OpinionCollectionBase.propTypes = {
|
|
257
|
-
collection: PropTypes.object,
|
|
258
|
-
config: PropTypes.shape({
|
|
259
|
-
collectionNameBorderColor: PropTypes.string,
|
|
260
|
-
theme: PropTypes.string,
|
|
261
|
-
collectionNameTemplate: PropTypes.string,
|
|
262
|
-
footerButton: PropTypes.string,
|
|
263
|
-
border: PropTypes.string,
|
|
264
|
-
slotConfig: PropTypes.array,
|
|
265
|
-
subsequentLoadCount: PropTypes.number
|
|
266
|
-
}),
|
|
267
|
-
getMoreStories: PropTypes.func,
|
|
268
|
-
isLoading: PropTypes.bool,
|
|
269
|
-
isLoadMoreVisible: PropTypes.bool,
|
|
270
|
-
isolatedLoadMore: PropTypes.bool
|
|
271
|
-
};
|
|
272
|
-
OpinionCollectionBase.defaultProps = {
|
|
273
|
-
getMoreStories: function getMoreStories() {},
|
|
274
|
-
isLoadMoreVisible: true,
|
|
275
|
-
isLoading: false,
|
|
276
|
-
collection: {},
|
|
277
|
-
config: {},
|
|
278
|
-
hideFirstCard: false
|
|
279
|
-
};
|
|
280
|
-
var OpinionCollection = StateProvider(OpinionCollectionBase);
|
|
281
|
-
|
|
282
|
-
export { OpinionCollection, OpinionCollectionBase };
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import { g as getTextColor, r as rgbToHex, _ as _getClassName } from './index-ad3c83c3.js';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { H as Headline, A as AuthorWithTime } from './index-1e444d20.js';
|
|
4
|
-
import { S as SectionTag } from './index-c61a16dc.js';
|
|
5
|
-
import PropTypes from 'prop-types';
|
|
6
|
-
|
|
7
|
-
var _styleModuleImportMap = {
|
|
8
|
-
"./storycardContent.m.css": {
|
|
9
|
-
"wrapper": "storycardContent-m_wrapper__TEmfA",
|
|
10
|
-
"horizontal-content-wrapper": "storycardContent-m_horizontal-content-wrapper__NgpuC",
|
|
11
|
-
"border-full": "storycardContent-m_border-full__2km37"
|
|
12
|
-
}
|
|
13
|
-
};
|
|
14
|
-
var StorycardContent = function StorycardContent(_ref) {
|
|
15
|
-
var story = _ref.story,
|
|
16
|
-
children = _ref.children,
|
|
17
|
-
theme = _ref.theme,
|
|
18
|
-
border = _ref.border,
|
|
19
|
-
isHorizontalMobile = _ref.isHorizontalMobile,
|
|
20
|
-
headerLevel = _ref.headerLevel,
|
|
21
|
-
borderColor = _ref.borderColor,
|
|
22
|
-
config = _ref.config;
|
|
23
|
-
var textColor = getTextColor(theme);
|
|
24
|
-
var borderOptions = ["full"];
|
|
25
|
-
var SectionTagborderColor = rgbToHex(borderColor);
|
|
26
|
-
var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : "";
|
|
27
|
-
var horizontalCard = isHorizontalMobile ? "horizontal-content-wrapper" : "";
|
|
28
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
29
|
-
"data-test-id": "story-card-content",
|
|
30
|
-
style: {
|
|
31
|
-
backgroundColor: theme,
|
|
32
|
-
color: textColor
|
|
33
|
-
},
|
|
34
|
-
className: "arr--content-wrapper " + _getClassName("wrapper ".concat(borderTemplate, " ").concat(horizontalCard), _styleModuleImportMap)
|
|
35
|
-
}, children || /*#__PURE__*/React.createElement(DefaultStoryCardContent, {
|
|
36
|
-
story: story,
|
|
37
|
-
headerLevel: headerLevel,
|
|
38
|
-
isHorizontalMobile: isHorizontalMobile,
|
|
39
|
-
borderColor: SectionTagborderColor,
|
|
40
|
-
config: config
|
|
41
|
-
}));
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
var DefaultStoryCardContent = function DefaultStoryCardContent(_ref2) {
|
|
45
|
-
var story = _ref2.story,
|
|
46
|
-
headerLevel = _ref2.headerLevel,
|
|
47
|
-
borderColor = _ref2.borderColor,
|
|
48
|
-
_ref2$config = _ref2.config,
|
|
49
|
-
config = _ref2$config === void 0 ? {} : _ref2$config;
|
|
50
|
-
var SectionTagborderColor = rgbToHex(borderColor);
|
|
51
|
-
var _config$localizationC = config.localizationConfig,
|
|
52
|
-
localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
|
|
53
|
-
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTag, {
|
|
54
|
-
story: story,
|
|
55
|
-
borderColor: SectionTagborderColor
|
|
56
|
-
}), /*#__PURE__*/React.createElement(Headline, {
|
|
57
|
-
story: story,
|
|
58
|
-
headerLevel: headerLevel,
|
|
59
|
-
premiumStoryIconConfig: config
|
|
60
|
-
}), /*#__PURE__*/React.createElement(AuthorWithTime, {
|
|
61
|
-
config: localizationConfig,
|
|
62
|
-
story: story
|
|
63
|
-
}));
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
DefaultStoryCardContent.propTypes = {
|
|
67
|
-
story: PropTypes.object.isRequired,
|
|
68
|
-
border: PropTypes.string,
|
|
69
|
-
theme: PropTypes.string,
|
|
70
|
-
isHorizontalMobile: PropTypes.bool,
|
|
71
|
-
headerLevel: PropTypes.string,
|
|
72
|
-
borderColor: PropTypes.string,
|
|
73
|
-
config: PropTypes.object
|
|
74
|
-
};
|
|
75
|
-
StorycardContent.propTypes = {
|
|
76
|
-
story: PropTypes.object.isRequired,
|
|
77
|
-
children: PropTypes.node,
|
|
78
|
-
theme: PropTypes.string,
|
|
79
|
-
border: PropTypes.string,
|
|
80
|
-
isHorizontalMobile: PropTypes.bool,
|
|
81
|
-
headerLevel: PropTypes.string,
|
|
82
|
-
borderColor: PropTypes.string,
|
|
83
|
-
config: PropTypes.object
|
|
84
|
-
};
|
|
85
|
-
|
|
86
|
-
export { StorycardContent as S };
|
|
@@ -1,166 +0,0 @@
|
|
|
1
|
-
import React, { Fragment } from 'react';
|
|
2
|
-
import { S as StoryCard } from './index-0519e570.js';
|
|
3
|
-
import { S as StorycardContent } from './index-81eb3978.js';
|
|
4
|
-
import { H as HeroImage } from './index-c61a16dc.js';
|
|
5
|
-
import { g as getTextColor, a as get_1, b as generateNavigateSlug, n as navigateTo } from './index-ad3c83c3.js';
|
|
6
|
-
import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-1e444d20.js';
|
|
7
|
-
import { collectionToStories } from '@quintype/components';
|
|
8
|
-
import PropTypes from 'prop-types';
|
|
9
|
-
import { useDispatch, useSelector } from 'react-redux';
|
|
10
|
-
import 'react-timeago';
|
|
11
|
-
import 'date-fns-tz';
|
|
12
|
-
import 'react-dom';
|
|
13
|
-
|
|
14
|
-
var loadMore = function loadMore(_ref) {
|
|
15
|
-
var isLoading = _ref.isLoading,
|
|
16
|
-
storyItems = _ref.storyItems,
|
|
17
|
-
getMoreStories = _ref.getMoreStories,
|
|
18
|
-
_ref$subsequentLoadCo = _ref.subsequentLoadCount,
|
|
19
|
-
subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 4 : _ref$subsequentLoadCo;
|
|
20
|
-
if (isLoading) return; // prevent multiple clicks/calls
|
|
21
|
-
|
|
22
|
-
var limit = subsequentLoadCount;
|
|
23
|
-
var offset = storyItems.length;
|
|
24
|
-
getMoreStories(offset, limit);
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
var FourColGridBase = function FourColGridBase(_ref2) {
|
|
28
|
-
var collection = _ref2.collection,
|
|
29
|
-
_ref2$config = _ref2.config,
|
|
30
|
-
config = _ref2$config === void 0 ? {} : _ref2$config,
|
|
31
|
-
getMoreStories = _ref2.getMoreStories,
|
|
32
|
-
isLoadMoreVisible = _ref2.isLoadMoreVisible,
|
|
33
|
-
isLoading = _ref2.isLoading,
|
|
34
|
-
isolatedLoadMore = _ref2.isolatedLoadMore;
|
|
35
|
-
var _config$collectionNam = config.collectionNameBorderColor,
|
|
36
|
-
collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
|
|
37
|
-
_config$borderColor = config.borderColor,
|
|
38
|
-
borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
|
|
39
|
-
_config$theme = config.theme,
|
|
40
|
-
theme = _config$theme === void 0 ? "" : _config$theme,
|
|
41
|
-
_config$border = config.border,
|
|
42
|
-
border = _config$border === void 0 ? "" : _config$border,
|
|
43
|
-
_config$collectionNam2 = config.collectionNameTemplate,
|
|
44
|
-
collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
|
|
45
|
-
_config$footerSlotCon = config.footerSlotConfig,
|
|
46
|
-
footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
|
|
47
|
-
_config$footerButton = config.footerButton,
|
|
48
|
-
footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
|
|
49
|
-
customCollectionName = config.customCollectionName,
|
|
50
|
-
_config$navigate = config.navigate,
|
|
51
|
-
navigate = _config$navigate === void 0 ? true : _config$navigate,
|
|
52
|
-
_config$subsequentLoa = config.subsequentLoadCount,
|
|
53
|
-
subsequentLoadCount = _config$subsequentLoa === void 0 ? 4 : _config$subsequentLoa;
|
|
54
|
-
var storyItems = collectionToStories(collection);
|
|
55
|
-
if (!storyItems.length) return null;
|
|
56
|
-
var footerSlot = footerSlotConfig.footerSlot;
|
|
57
|
-
var footerSlotComp = footerSlot ? footerSlot() : null;
|
|
58
|
-
var textColor = getTextColor(theme);
|
|
59
|
-
var dispatch = useDispatch();
|
|
60
|
-
var qtConfig = useSelector(function (state) {
|
|
61
|
-
return get_1(state, ["qt", "config"], {});
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
var getLoadMore = function getLoadMore(opts) {
|
|
65
|
-
if (!isLoadMoreVisible) return null;
|
|
66
|
-
|
|
67
|
-
if (isolatedLoadMore) {
|
|
68
|
-
return /*#__PURE__*/React.createElement(LoadMoreTarget, {
|
|
69
|
-
collection: collection,
|
|
70
|
-
componentName: "FourColGrid",
|
|
71
|
-
offset: storyItems.length,
|
|
72
|
-
limit: subsequentLoadCount
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
var url = generateNavigateSlug(collection, qtConfig);
|
|
77
|
-
return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
|
|
78
|
-
config: config,
|
|
79
|
-
collection: collection,
|
|
80
|
-
template: footerButton,
|
|
81
|
-
onClick: function onClick() {
|
|
82
|
-
return loadMore(opts);
|
|
83
|
-
},
|
|
84
|
-
navigate: function navigate() {
|
|
85
|
-
return navigateTo(dispatch, url);
|
|
86
|
-
},
|
|
87
|
-
qtConfig: qtConfig
|
|
88
|
-
}));
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
92
|
-
className: "full-width-with-padding arrow-component",
|
|
93
|
-
"data-test-id": "four-col-grid",
|
|
94
|
-
style: {
|
|
95
|
-
backgroundColor: theme,
|
|
96
|
-
color: textColor
|
|
97
|
-
}
|
|
98
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
99
|
-
className: "four-col-m_four-col-grid__1EiO7"
|
|
100
|
-
}, /*#__PURE__*/React.createElement(CollectionName, {
|
|
101
|
-
collection: collection,
|
|
102
|
-
collectionNameTemplate: collectionNameTemplate,
|
|
103
|
-
collectionNameBorderColor: collectionNameBorderColor,
|
|
104
|
-
customCollectionName: customCollectionName,
|
|
105
|
-
navigate: navigate
|
|
106
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
107
|
-
className: "four-col-m_wrapper__1vOV7"
|
|
108
|
-
}, storyItems.map(function (story, index) {
|
|
109
|
-
return /*#__PURE__*/React.createElement(Fragment, {
|
|
110
|
-
key: "story-4col-".concat(index, "-").concat(get_1(story, ["id"], "0"))
|
|
111
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
112
|
-
className: "four-col-m_story-card-wrapper__1e8p0",
|
|
113
|
-
key: "default-".concat(index)
|
|
114
|
-
}, /*#__PURE__*/React.createElement(StoryCard, {
|
|
115
|
-
story: story,
|
|
116
|
-
border: border,
|
|
117
|
-
theme: theme,
|
|
118
|
-
isHorizontalMobile: true,
|
|
119
|
-
config: config
|
|
120
|
-
}, /*#__PURE__*/React.createElement(HeroImage, {
|
|
121
|
-
aspectRatio: [[16, 9]],
|
|
122
|
-
story: story,
|
|
123
|
-
isHorizontalMobile: true
|
|
124
|
-
}), /*#__PURE__*/React.createElement(StorycardContent, {
|
|
125
|
-
theme: theme,
|
|
126
|
-
border: border,
|
|
127
|
-
borderColor: borderColor,
|
|
128
|
-
story: story,
|
|
129
|
-
isHorizontalMobile: true,
|
|
130
|
-
config: config
|
|
131
|
-
}))));
|
|
132
|
-
})), getLoadMore({
|
|
133
|
-
isLoading: isLoading,
|
|
134
|
-
storyItems: storyItems,
|
|
135
|
-
getMoreStories: getMoreStories,
|
|
136
|
-
subsequentLoadCount: subsequentLoadCount
|
|
137
|
-
}), footerSlotComp));
|
|
138
|
-
};
|
|
139
|
-
FourColGridBase.propTypes = {
|
|
140
|
-
/** collection is the array of objects which is returning by API */
|
|
141
|
-
collection: PropTypes.object.isRequired,
|
|
142
|
-
|
|
143
|
-
/** The config for the Row */
|
|
144
|
-
config: PropTypes.shape({
|
|
145
|
-
borderColor: PropTypes.string,
|
|
146
|
-
theme: PropTypes.string,
|
|
147
|
-
border: PropTypes.bool,
|
|
148
|
-
slotConfig: PropTypes.array,
|
|
149
|
-
collectionNameTemplate: PropTypes.string,
|
|
150
|
-
footerButton: PropTypes.string,
|
|
151
|
-
collectionNameBorderColor: PropTypes.string,
|
|
152
|
-
subsequentLoadCount: PropTypes.number
|
|
153
|
-
}),
|
|
154
|
-
getMoreStories: PropTypes.func,
|
|
155
|
-
isLoadMoreVisible: PropTypes.bool,
|
|
156
|
-
isLoading: PropTypes.bool,
|
|
157
|
-
isolatedLoadMore: PropTypes.bool
|
|
158
|
-
};
|
|
159
|
-
FourColGridBase.defaultProps = {
|
|
160
|
-
getMoreStories: function getMoreStories() {},
|
|
161
|
-
isLoadMoreVisible: true,
|
|
162
|
-
isLoading: false
|
|
163
|
-
};
|
|
164
|
-
var FourColGrid = StateProvider(FourColGridBase);
|
|
165
|
-
|
|
166
|
-
export { FourColGrid, FourColGridBase };
|