@quintype/components 3.8.8-only-react-v19.1 → 3.8.8
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/dist/cjs/index.js +2041 -1091
- package/dist/es/components/access-type.js +822 -574
- package/dist/es/components/adbutler-ad.js +14 -10
- package/dist/es/components/api-client.js +6 -4
- package/dist/es/components/breaking-news-item.js +3 -2
- package/dist/es/components/breaking-news.js +23 -7
- package/dist/es/components/client-side-only.js +19 -6
- package/dist/es/components/collection.js +5 -5
- package/dist/es/components/dfp-ad.js +30 -23
- package/dist/es/components/eager-load-images.js +17 -7
- package/dist/es/components/hamburger-button.js +5 -2
- package/dist/es/components/image-gallery.js +13 -10
- package/dist/es/components/impl/collection-impl.js +10 -3
- package/dist/es/components/impl/gumlet-image.js +19 -10
- package/dist/es/components/impl/image-utils.js +4 -3
- package/dist/es/components/impl/load-more-stories-manager.js +19 -6
- package/dist/es/components/impl/thumbor-image.js +32 -10
- package/dist/es/components/infinite-scroll.js +85 -29
- package/dist/es/components/infinite-story-base.js +24 -7
- package/dist/es/components/lazy-collection.js +8 -8
- package/dist/es/components/lazy-load-images.js +43 -10
- package/dist/es/components/link-base.js +19 -11
- package/dist/es/components/link.js +4 -1
- package/dist/es/components/load-more-collection-stories.js +18 -7
- package/dist/es/components/load-more-stories-base.js +20 -6
- package/dist/es/components/loading-indicator.js +5 -1
- package/dist/es/components/menu-item.js +10 -6
- package/dist/es/components/menu.js +9 -6
- package/dist/es/components/responsive-hero-image.js +3 -1
- package/dist/es/components/responsive-image.js +5 -0
- package/dist/es/components/responsive-source.js +1 -1
- package/dist/es/components/review-rating/review-rating.js +27 -21
- package/dist/es/components/review-rating/star-icon.js +5 -3
- package/dist/es/components/search-box.js +23 -7
- package/dist/es/components/search-page-base.js +18 -7
- package/dist/es/components/social-logins/with-facebook-login.js +20 -10
- package/dist/es/components/social-logins/with-google-login.js +18 -8
- package/dist/es/components/social-logins/with-linkedin-login.js +12 -7
- package/dist/es/components/social-logins/with-social-login.js +21 -7
- package/dist/es/components/social-logins/with-twitter-login.js +7 -7
- package/dist/es/components/social-share.js +24 -8
- package/dist/es/components/story-element.js +88 -43
- package/dist/es/components/story-elements/brightcove.js +94 -54
- package/dist/es/components/story-elements/dailymotion-embed-script.js +39 -13
- package/dist/es/components/story-elements/dailymotion.js +61 -19
- package/dist/es/components/story-elements/jsembed.js +30 -10
- package/dist/es/components/story-elements/jwPlayer.js +24 -9
- package/dist/es/components/story-elements/polltype.js +20 -6
- package/dist/es/components/story-elements/table.js +34 -16
- package/dist/es/components/story-elements/youtube.js +73 -24
- package/dist/es/components/update-on-interval.js +52 -31
- package/dist/es/components/with-client-side-only.js +4 -3
- package/dist/es/components/with-error.js +20 -7
- package/dist/es/components/with-host-url.js +9 -4
- package/dist/es/components/with-lazy.js +21 -7
- package/dist/es/components/with-member.js +33 -14
- package/dist/es/components/with-preview.js +20 -7
- package/dist/es/components/wrap-collection-layout.js +16 -4
- package/dist/es/store/reducers.js +45 -1
- package/dist/es/utils.js +12 -7
- package/package.json +6 -9
|
@@ -1,23 +1,30 @@
|
|
|
1
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
1
2
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
2
3
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
3
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
5
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
6
6
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
7
|
-
|
|
8
|
-
function
|
|
7
|
+
|
|
8
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
9
|
+
|
|
10
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
11
|
+
|
|
9
12
|
import { func, string } from 'prop-types';
|
|
10
13
|
import React from "react";
|
|
14
|
+
|
|
11
15
|
var IntersectionObserverWrapper = /*#__PURE__*/function () {
|
|
12
16
|
function IntersectionObserverWrapper(callback) {
|
|
13
17
|
_classCallCheck(this, IntersectionObserverWrapper);
|
|
18
|
+
|
|
14
19
|
this.observedItems = [];
|
|
15
20
|
this.callback = callback;
|
|
16
21
|
}
|
|
17
|
-
|
|
22
|
+
|
|
23
|
+
_createClass(IntersectionObserverWrapper, [{
|
|
18
24
|
key: "start",
|
|
19
25
|
value: function start(margin) {
|
|
20
26
|
var _this = this;
|
|
27
|
+
|
|
21
28
|
this.observer = new global.IntersectionObserver(function (entries) {
|
|
22
29
|
return _this.onObservation(entries);
|
|
23
30
|
}, {
|
|
@@ -26,8 +33,9 @@ var IntersectionObserverWrapper = /*#__PURE__*/function () {
|
|
|
26
33
|
});
|
|
27
34
|
this.observedItems.forEach(function (_ref) {
|
|
28
35
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
29
|
-
|
|
30
|
-
|
|
36
|
+
dom = _ref2[0],
|
|
37
|
+
component = _ref2[1];
|
|
38
|
+
|
|
31
39
|
return _this.observer.observe(dom);
|
|
32
40
|
});
|
|
33
41
|
}
|
|
@@ -35,6 +43,7 @@ var IntersectionObserverWrapper = /*#__PURE__*/function () {
|
|
|
35
43
|
key: "onObservation",
|
|
36
44
|
value: function onObservation(entries) {
|
|
37
45
|
var _this2 = this;
|
|
46
|
+
|
|
38
47
|
entries.filter(function (entry) {
|
|
39
48
|
return entry.isIntersecting === undefined || entry.isIntersecting;
|
|
40
49
|
}).map(function (entry) {
|
|
@@ -43,9 +52,12 @@ var IntersectionObserverWrapper = /*#__PURE__*/function () {
|
|
|
43
52
|
var index = _this2.observedItems.findIndex(function (x) {
|
|
44
53
|
return x[0] === dom;
|
|
45
54
|
});
|
|
55
|
+
|
|
46
56
|
if (index > -1) {
|
|
47
57
|
var component = _this2.observedItems[index][1];
|
|
58
|
+
|
|
48
59
|
_this2.callback(component);
|
|
60
|
+
|
|
49
61
|
_this2.unregister(dom, component);
|
|
50
62
|
}
|
|
51
63
|
});
|
|
@@ -62,6 +74,7 @@ var IntersectionObserverWrapper = /*#__PURE__*/function () {
|
|
|
62
74
|
var index = this.observedItems.findIndex(function (x) {
|
|
63
75
|
return x[0] === dom;
|
|
64
76
|
});
|
|
77
|
+
|
|
65
78
|
if (index > -1) {
|
|
66
79
|
this.observedItems.splice(index, 1);
|
|
67
80
|
this.observer && this.observer.unobserve(dom);
|
|
@@ -73,13 +86,18 @@ var IntersectionObserverWrapper = /*#__PURE__*/function () {
|
|
|
73
86
|
this.observer.disconnect();
|
|
74
87
|
}
|
|
75
88
|
}]);
|
|
89
|
+
|
|
90
|
+
return IntersectionObserverWrapper;
|
|
76
91
|
}();
|
|
92
|
+
|
|
77
93
|
var StubObserverWrapper = /*#__PURE__*/function () {
|
|
78
94
|
function StubObserverWrapper(callback) {
|
|
79
95
|
_classCallCheck(this, StubObserverWrapper);
|
|
96
|
+
|
|
80
97
|
this.callback = callback;
|
|
81
98
|
}
|
|
82
|
-
|
|
99
|
+
|
|
100
|
+
_createClass(StubObserverWrapper, [{
|
|
83
101
|
key: "register",
|
|
84
102
|
value: function register(dom, component) {
|
|
85
103
|
this.callback(component);
|
|
@@ -94,6 +112,8 @@ var StubObserverWrapper = /*#__PURE__*/function () {
|
|
|
94
112
|
key: "disconnect",
|
|
95
113
|
value: function disconnect() {}
|
|
96
114
|
}]);
|
|
115
|
+
|
|
116
|
+
return StubObserverWrapper;
|
|
97
117
|
}();
|
|
98
118
|
/**
|
|
99
119
|
* This component will ensure all {@link ResponsiveImages} that are in its descendent path will be loaded async. By default, the image is loaded with an empty gif, and the image becomes visible when the image scrolls 250 from the edge of the screen.
|
|
@@ -129,19 +149,29 @@ var StubObserverWrapper = /*#__PURE__*/function () {
|
|
|
129
149
|
* @component
|
|
130
150
|
* @category Images
|
|
131
151
|
*/
|
|
152
|
+
|
|
153
|
+
|
|
132
154
|
export var LazyLoadImages = /*#__PURE__*/function (_React$Component) {
|
|
155
|
+
_inherits(LazyLoadImages, _React$Component);
|
|
156
|
+
|
|
157
|
+
var _super = /*#__PURE__*/_createSuper(LazyLoadImages);
|
|
158
|
+
|
|
133
159
|
function LazyLoadImages(props) {
|
|
134
160
|
var _this3;
|
|
161
|
+
|
|
135
162
|
_classCallCheck(this, LazyLoadImages);
|
|
136
|
-
|
|
163
|
+
|
|
164
|
+
_this3 = _super.call(this, props);
|
|
165
|
+
|
|
137
166
|
var callback = function callback(component) {
|
|
138
167
|
return component.showImage();
|
|
139
168
|
};
|
|
169
|
+
|
|
140
170
|
_this3.observerWrapper = global.IntersectionObserver ? new IntersectionObserverWrapper(callback) : new StubObserverWrapper(callback);
|
|
141
171
|
return _this3;
|
|
142
172
|
}
|
|
143
|
-
|
|
144
|
-
|
|
173
|
+
|
|
174
|
+
_createClass(LazyLoadImages, [{
|
|
145
175
|
key: "componentDidMount",
|
|
146
176
|
value: function componentDidMount() {
|
|
147
177
|
this.observerWrapper.start(this.props.margin || "500px");
|
|
@@ -155,6 +185,7 @@ export var LazyLoadImages = /*#__PURE__*/function (_React$Component) {
|
|
|
155
185
|
key: "getChildContext",
|
|
156
186
|
value: function getChildContext() {
|
|
157
187
|
var _this4 = this;
|
|
188
|
+
|
|
158
189
|
return {
|
|
159
190
|
lazyLoadObserveImage: function lazyLoadObserveImage(dom, component) {
|
|
160
191
|
return dom && _this4.observerWrapper.register(dom, component);
|
|
@@ -170,6 +201,8 @@ export var LazyLoadImages = /*#__PURE__*/function (_React$Component) {
|
|
|
170
201
|
return this.props.children;
|
|
171
202
|
}
|
|
172
203
|
}]);
|
|
204
|
+
|
|
205
|
+
return LazyLoadImages;
|
|
173
206
|
}(React.Component);
|
|
174
207
|
LazyLoadImages.childContextTypes = {
|
|
175
208
|
lazyLoadObserveImage: func,
|
|
@@ -2,11 +2,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
2
2
|
var _excluded = ["navigateToImpl", "externalLink", "callback", "href", "currentHostUrl", "navigateTo", "preventDefault", "disableAjaxLinks"];
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { string, func, bool } from "prop-types";
|
|
5
|
+
|
|
5
6
|
var preventDefaultImpl = function preventDefaultImpl(e) {
|
|
6
7
|
e.preventDefault();
|
|
7
8
|
e.stopPropagation();
|
|
8
9
|
};
|
|
9
|
-
|
|
10
10
|
/**
|
|
11
11
|
* This component generates an anchor tag. Instead of doing a browser page load, it will go to the next page via AJAX. Analytics scripts will be fired correctly (and if not, it's a bug)
|
|
12
12
|
* LinkBase is not connected to the store or plugged to context, this is used as an alternative for usecases such as partial hydration where context is lost.
|
|
@@ -18,18 +18,21 @@ var preventDefaultImpl = function preventDefaultImpl(e) {
|
|
|
18
18
|
* @category Other
|
|
19
19
|
* @component
|
|
20
20
|
*/
|
|
21
|
+
|
|
22
|
+
|
|
21
23
|
export var LinkBase = function LinkBase(_ref) {
|
|
22
24
|
var navigateToImpl = _ref.navigateToImpl,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
externalLink = _ref.externalLink,
|
|
26
|
+
callback = _ref.callback,
|
|
27
|
+
href = _ref.href,
|
|
28
|
+
currentHostUrl = _ref.currentHostUrl,
|
|
29
|
+
navigateTo = _ref.navigateTo,
|
|
30
|
+
_ref$preventDefault = _ref.preventDefault,
|
|
31
|
+
preventDefault = _ref$preventDefault === void 0 ? preventDefaultImpl : _ref$preventDefault,
|
|
32
|
+
_ref$disableAjaxLinks = _ref.disableAjaxLinks,
|
|
33
|
+
disableAjaxLinks = _ref$disableAjaxLinks === void 0 ? global.disableAjaxLinks || global.disableAjaxNavigation : _ref$disableAjaxLinks,
|
|
34
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
35
|
+
|
|
33
36
|
navigateTo = navigateTo || navigateToImpl;
|
|
34
37
|
return /*#__PURE__*/React.createElement("a", Object.assign(otherProps, {
|
|
35
38
|
href: href,
|
|
@@ -37,16 +40,21 @@ export var LinkBase = function LinkBase(_ref) {
|
|
|
37
40
|
if (disableAjaxLinks || e.ctrlKey || e.metaKey || e.shiftKey) {
|
|
38
41
|
return;
|
|
39
42
|
}
|
|
43
|
+
|
|
40
44
|
var relativeLink = href.startsWith(currentHostUrl) ? href.replace(currentHostUrl, "") : href;
|
|
45
|
+
|
|
41
46
|
if (!relativeLink.startsWith("/")) {
|
|
42
47
|
return;
|
|
43
48
|
}
|
|
49
|
+
|
|
44
50
|
preventDefault(e);
|
|
51
|
+
|
|
45
52
|
if (externalLink) {
|
|
46
53
|
global.open(externalLink, "_blank");
|
|
47
54
|
} else {
|
|
48
55
|
navigateTo(relativeLink);
|
|
49
56
|
}
|
|
57
|
+
|
|
50
58
|
typeof callback === "function" && callback(e);
|
|
51
59
|
}
|
|
52
60
|
}));
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { connect } from "react-redux";
|
|
2
2
|
import { LinkBase } from "./link-base";
|
|
3
|
+
|
|
3
4
|
var mapStateToProps = function mapStateToProps(state) {
|
|
4
5
|
return {
|
|
5
6
|
currentHostUrl: state.qt && state.qt.currentHostUrl
|
|
6
7
|
};
|
|
7
8
|
};
|
|
9
|
+
|
|
8
10
|
var mapDispatchToProps = function mapDispatchToProps(dispatch) {
|
|
9
11
|
return {
|
|
10
12
|
navigateToImpl: function navigateToImpl(url) {
|
|
@@ -12,7 +14,6 @@ var mapDispatchToProps = function mapDispatchToProps(dispatch) {
|
|
|
12
14
|
}
|
|
13
15
|
};
|
|
14
16
|
};
|
|
15
|
-
|
|
16
17
|
/**
|
|
17
18
|
* This component generates an anchor tag. Instead of doing a browser page load, it will go to the next page via AJAX. Analytics scripts will be fired correctly (and if not, it's a bug)
|
|
18
19
|
*
|
|
@@ -23,4 +24,6 @@ var mapDispatchToProps = function mapDispatchToProps(dispatch) {
|
|
|
23
24
|
* @category Other
|
|
24
25
|
* @component
|
|
25
26
|
*/
|
|
27
|
+
|
|
28
|
+
|
|
26
29
|
export var Link = /*#__PURE__*/connect(mapStateToProps, mapDispatchToProps)(LinkBase);
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
3
4
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
4
5
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
5
|
-
|
|
6
|
-
function
|
|
7
|
-
|
|
6
|
+
|
|
7
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
8
|
+
|
|
9
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
10
|
+
|
|
8
11
|
import React from 'react';
|
|
9
12
|
import get from "lodash/get";
|
|
10
13
|
import { getRequest } from './api-client';
|
|
11
14
|
import { LoadMoreStoriesManager } from './impl/load-more-stories-manager';
|
|
12
|
-
|
|
13
15
|
/**
|
|
14
16
|
* This component is very similar to the {@link LoadMoreBase} component but fetches the stories from a `collection`. The api call `/api/v1/collections/{collectionSlug}` is made with the passed collection slug value. The component accepts the `params` prop and a requires a Collection Slug from which to fetch the stories and returns a set of stories only.
|
|
15
17
|
*
|
|
@@ -45,13 +47,19 @@ import { LoadMoreStoriesManager } from './impl/load-more-stories-manager';
|
|
|
45
47
|
* @component
|
|
46
48
|
* @category Collection Page
|
|
47
49
|
*/
|
|
50
|
+
|
|
48
51
|
export var LoadMoreCollectionStories = /*#__PURE__*/function (_React$Component) {
|
|
52
|
+
_inherits(LoadMoreCollectionStories, _React$Component);
|
|
53
|
+
|
|
54
|
+
var _super = /*#__PURE__*/_createSuper(LoadMoreCollectionStories);
|
|
55
|
+
|
|
49
56
|
function LoadMoreCollectionStories() {
|
|
50
57
|
_classCallCheck(this, LoadMoreCollectionStories);
|
|
51
|
-
|
|
58
|
+
|
|
59
|
+
return _super.apply(this, arguments);
|
|
52
60
|
}
|
|
53
|
-
|
|
54
|
-
|
|
61
|
+
|
|
62
|
+
_createClass(LoadMoreCollectionStories, [{
|
|
55
63
|
key: "loadMoreStories",
|
|
56
64
|
value: function loadMoreStories(pageNumber) {
|
|
57
65
|
var stories = get(this.props, ['data', 'stories'], []);
|
|
@@ -70,6 +78,7 @@ export var LoadMoreCollectionStories = /*#__PURE__*/function (_React$Component)
|
|
|
70
78
|
key: "render",
|
|
71
79
|
value: function render() {
|
|
72
80
|
var _this = this;
|
|
81
|
+
|
|
73
82
|
return /*#__PURE__*/React.createElement(LoadMoreStoriesManager, Object.assign({}, this.props.data, {
|
|
74
83
|
template: this.props.template,
|
|
75
84
|
loadStories: function loadStories(pageNumber) {
|
|
@@ -80,4 +89,6 @@ export var LoadMoreCollectionStories = /*#__PURE__*/function (_React$Component)
|
|
|
80
89
|
}));
|
|
81
90
|
}
|
|
82
91
|
}]);
|
|
92
|
+
|
|
93
|
+
return LoadMoreCollectionStories;
|
|
83
94
|
}(React.Component);
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
3
4
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
4
5
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
5
|
-
|
|
6
|
-
function
|
|
7
|
-
|
|
6
|
+
|
|
7
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
8
|
+
|
|
9
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
10
|
+
|
|
8
11
|
import React from 'react';
|
|
9
12
|
import get from "lodash/get";
|
|
10
13
|
import { getRequest } from './api-client';
|
|
@@ -36,16 +39,23 @@ import { LoadMoreStoriesManager } from './impl/load-more-stories-manager';
|
|
|
36
39
|
* @component
|
|
37
40
|
* @category Collection Page
|
|
38
41
|
*/
|
|
42
|
+
|
|
39
43
|
export var LoadMoreStoriesBase = /*#__PURE__*/function (_React$Component) {
|
|
44
|
+
_inherits(LoadMoreStoriesBase, _React$Component);
|
|
45
|
+
|
|
46
|
+
var _super = /*#__PURE__*/_createSuper(LoadMoreStoriesBase);
|
|
47
|
+
|
|
40
48
|
function LoadMoreStoriesBase() {
|
|
41
49
|
_classCallCheck(this, LoadMoreStoriesBase);
|
|
42
|
-
|
|
50
|
+
|
|
51
|
+
return _super.apply(this, arguments);
|
|
43
52
|
}
|
|
44
|
-
|
|
45
|
-
|
|
53
|
+
|
|
54
|
+
_createClass(LoadMoreStoriesBase, [{
|
|
46
55
|
key: "loadMoreStories",
|
|
47
56
|
value: function loadMoreStories(pageNumber) {
|
|
48
57
|
var _this = this;
|
|
58
|
+
|
|
49
59
|
var stories = get(this.props, ['data', 'stories'], []);
|
|
50
60
|
return getRequest(this.props.api || '/api/v1/stories', Object.assign({}, this.props.params, {
|
|
51
61
|
offset: this.props.numStoriesToLoad * (pageNumber - 1) + stories.length,
|
|
@@ -55,6 +65,7 @@ export var LoadMoreStoriesBase = /*#__PURE__*/function (_React$Component) {
|
|
|
55
65
|
if (_this.props.apiResponseTransformer) {
|
|
56
66
|
return _this.props.apiResponseTransformer(response);
|
|
57
67
|
}
|
|
68
|
+
|
|
58
69
|
return response.stories || get(response, ['results', 'stories'], []);
|
|
59
70
|
});
|
|
60
71
|
}
|
|
@@ -62,6 +73,7 @@ export var LoadMoreStoriesBase = /*#__PURE__*/function (_React$Component) {
|
|
|
62
73
|
key: "render",
|
|
63
74
|
value: function render() {
|
|
64
75
|
var _this2 = this;
|
|
76
|
+
|
|
65
77
|
return /*#__PURE__*/React.createElement(LoadMoreStoriesManager, Object.assign({}, this.props.data, {
|
|
66
78
|
template: this.props.template,
|
|
67
79
|
loadStories: function loadStories(pageNumber) {
|
|
@@ -72,4 +84,6 @@ export var LoadMoreStoriesBase = /*#__PURE__*/function (_React$Component) {
|
|
|
72
84
|
}));
|
|
73
85
|
}
|
|
74
86
|
}]);
|
|
87
|
+
|
|
88
|
+
return LoadMoreStoriesBase;
|
|
75
89
|
}(React.Component);
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { connect } from "react-redux";
|
|
3
|
+
|
|
3
4
|
function LoadingIndicatorBase(props) {
|
|
4
5
|
return /*#__PURE__*/React.createElement("div", {
|
|
5
6
|
className: "loading-indicator ".concat(props.loading ? "loading-indicator-loading" : "")
|
|
6
7
|
}, props.loading && props.children);
|
|
7
8
|
}
|
|
9
|
+
|
|
8
10
|
function mapStateToProps(state) {
|
|
9
11
|
return {
|
|
10
12
|
loading: state.pageLoading
|
|
11
13
|
};
|
|
12
14
|
}
|
|
15
|
+
|
|
13
16
|
function mapDispatchToProps() {
|
|
14
17
|
return {};
|
|
15
18
|
}
|
|
16
|
-
|
|
17
19
|
/**
|
|
18
20
|
* This component renders it's children when the app is moving between pages. It can be used to show a spinner. It always has the class "loading-indicator", and also "loading-indicator-loading" when loading.
|
|
19
21
|
*
|
|
@@ -28,4 +30,6 @@ function mapDispatchToProps() {
|
|
|
28
30
|
* @component
|
|
29
31
|
* @category Other
|
|
30
32
|
*/
|
|
33
|
+
|
|
34
|
+
|
|
31
35
|
export var LoadingIndicator = /*#__PURE__*/connect(mapStateToProps, mapDispatchToProps)(LoadingIndicatorBase);
|
|
@@ -1,26 +1,29 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Link } from "./link";
|
|
3
|
-
|
|
4
3
|
/**
|
|
5
4
|
* @see {@link Menu}
|
|
6
5
|
* @deprecated
|
|
7
6
|
* @component
|
|
8
7
|
* @category Header
|
|
9
8
|
*/
|
|
9
|
+
|
|
10
10
|
export function MenuItem(_ref) {
|
|
11
11
|
var item = _ref.item,
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
className = _ref.className,
|
|
13
|
+
currentUrl = _ref.currentUrl;
|
|
14
14
|
var url = getRelativeUrl(item.url);
|
|
15
15
|
return /*#__PURE__*/React.createElement("li", null, getMenuItemBody(item, "".concat(className).concat(currentUrl == url ? " active" : ""), url));
|
|
16
16
|
}
|
|
17
|
+
|
|
17
18
|
function getRelativeUrl(url) {
|
|
18
19
|
var _URL = new URL(url),
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
pathname = _URL.pathname,
|
|
21
|
+
search = _URL.search,
|
|
22
|
+
hash = _URL.hash;
|
|
23
|
+
|
|
22
24
|
return "".concat(pathname).concat(search || "").concat(hash || "");
|
|
23
25
|
}
|
|
26
|
+
|
|
24
27
|
function getMenuItemBody(item, className, url, currentUrl) {
|
|
25
28
|
switch (item['item-type']) {
|
|
26
29
|
case 'section':
|
|
@@ -28,6 +31,7 @@ function getMenuItemBody(item, className, url, currentUrl) {
|
|
|
28
31
|
href: url,
|
|
29
32
|
className: className
|
|
30
33
|
}, item.title);
|
|
34
|
+
|
|
31
35
|
default:
|
|
32
36
|
return /*#__PURE__*/React.createElement("a", {
|
|
33
37
|
href: item.url,
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { connect } from "react-redux";
|
|
3
|
+
|
|
3
4
|
function MenuBase(_ref) {
|
|
4
5
|
var children = _ref.children,
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
className = _ref.className,
|
|
7
|
+
itemClassName = _ref.itemClassName,
|
|
8
|
+
items = _ref.items,
|
|
9
|
+
currentUrl = _ref.currentUrl,
|
|
10
|
+
slice = _ref.slice;
|
|
10
11
|
items = items.slice.apply(items, slice);
|
|
11
12
|
return /*#__PURE__*/React.createElement("ul", {
|
|
12
13
|
className: className
|
|
@@ -19,13 +20,13 @@ function MenuBase(_ref) {
|
|
|
19
20
|
});
|
|
20
21
|
}));
|
|
21
22
|
}
|
|
23
|
+
|
|
22
24
|
function mapStateToProps(state) {
|
|
23
25
|
return {
|
|
24
26
|
items: state.qt.config.layout.menu,
|
|
25
27
|
currentUrl: state.qt.currentPath
|
|
26
28
|
};
|
|
27
29
|
}
|
|
28
|
-
|
|
29
30
|
/**
|
|
30
31
|
* This component can be used to render a menu from the menuItems in the editor. An extra class called active is applied if the menu item is the current url. By default, links will resolve via AJAX.
|
|
31
32
|
*
|
|
@@ -47,6 +48,8 @@ function mapStateToProps(state) {
|
|
|
47
48
|
* @component
|
|
48
49
|
* @category Header
|
|
49
50
|
*/
|
|
51
|
+
|
|
52
|
+
|
|
50
53
|
export var Menu = /*#__PURE__*/connect(mapStateToProps, function () {
|
|
51
54
|
return {};
|
|
52
55
|
})(MenuBase);
|
|
@@ -2,7 +2,6 @@ import omit from "@babel/runtime/helpers/objectWithoutProperties";
|
|
|
2
2
|
import get from "lodash/get";
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { ResponsiveImage } from "./responsive-image";
|
|
5
|
-
|
|
6
5
|
/**
|
|
7
6
|
* This component is a wrapper over {@link ResponsiveImages}. It accepts story as a prop and renders story's hero image.
|
|
8
7
|
* If hero-image-s3-key is present, it takes that as slug and the story headline as image alt text.
|
|
@@ -21,11 +20,13 @@ import { ResponsiveImage } from "./responsive-image";
|
|
|
21
20
|
* @component
|
|
22
21
|
* @category Images
|
|
23
22
|
*/
|
|
23
|
+
|
|
24
24
|
export function ResponsiveHeroImage(props) {
|
|
25
25
|
var metadata, slug, alternateText;
|
|
26
26
|
var heroImageS3Key = get(props, ["story", "hero-image-s3-key"], "");
|
|
27
27
|
var storyAlternateData = get(props, ["story", "alternative", "home", "default"], {}) || {};
|
|
28
28
|
var alternateHeroImageS3Key = get(storyAlternateData, ["hero-image", "hero-image-s3-key"], "");
|
|
29
|
+
|
|
29
30
|
if (heroImageS3Key) {
|
|
30
31
|
slug = heroImageS3Key;
|
|
31
32
|
metadata = get(props, ["story", "hero-image-metadata"], {});
|
|
@@ -35,6 +36,7 @@ export function ResponsiveHeroImage(props) {
|
|
|
35
36
|
metadata = get(storyAlternateData, ["hero-image", "hero-image-metadata"], {});
|
|
36
37
|
alternateText = get(storyAlternateData, ["headline"], "");
|
|
37
38
|
} else return null;
|
|
39
|
+
|
|
38
40
|
return /*#__PURE__*/React.createElement(ResponsiveImage, Object.assign({
|
|
39
41
|
slug: slug,
|
|
40
42
|
metadata: metadata,
|
|
@@ -3,21 +3,26 @@ import React from 'react';
|
|
|
3
3
|
import { connect } from 'react-redux';
|
|
4
4
|
import { GumletImage } from './impl/gumlet-image';
|
|
5
5
|
import { ThumborImage } from './impl/thumbor-image';
|
|
6
|
+
|
|
6
7
|
function mapStateToProps(state) {
|
|
7
8
|
return {
|
|
8
9
|
imageCDN: state.qt.config['cdn-image'],
|
|
9
10
|
imageCDNFormat: state.qt.config['image-cdn-format'] || 'thumbor'
|
|
10
11
|
};
|
|
11
12
|
}
|
|
13
|
+
|
|
12
14
|
function ResponsiveImageBase(props) {
|
|
13
15
|
if (process.env.NODE_ENV == 'development' && !props.alt && !props.reactTag) {
|
|
14
16
|
global.console && global.console.warn("Image Found without an alt attribute: ".concat(props.slug));
|
|
15
17
|
}
|
|
18
|
+
|
|
16
19
|
if (props.imageCDNFormat === 'gumlet') {
|
|
17
20
|
return /*#__PURE__*/React.createElement(GumletImage, props);
|
|
18
21
|
}
|
|
22
|
+
|
|
19
23
|
return /*#__PURE__*/React.createElement(ThumborImage, props);
|
|
20
24
|
}
|
|
25
|
+
|
|
21
26
|
/**
|
|
22
27
|
* This component takes an image, and resizes it to the correct aspect ratio using imgix or thumbor.
|
|
23
28
|
*
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ResponsiveImage } from './responsive-image';
|
|
3
|
-
|
|
4
3
|
/**
|
|
5
4
|
* This component is to be used if the aspect of an images changes significantly between different devices.
|
|
6
5
|
*
|
|
@@ -33,6 +32,7 @@ import { ResponsiveImage } from './responsive-image';
|
|
|
33
32
|
* @component
|
|
34
33
|
* @category Images
|
|
35
34
|
*/
|
|
35
|
+
|
|
36
36
|
export var ResponsiveSource = function ResponsiveSource(props) {
|
|
37
37
|
return /*#__PURE__*/React.createElement(ResponsiveImage, Object.assign({
|
|
38
38
|
reactTag: 'source',
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { bool, element, number, string } from "prop-types";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { StarIcon } from "./star-icon";
|
|
4
|
-
|
|
5
4
|
/**
|
|
6
5
|
* This component takes in the value for rating and renders star for the value passed in. This comopent is generally used for story review type.
|
|
7
6
|
*
|
|
@@ -15,29 +14,31 @@ import { StarIcon } from "./star-icon";
|
|
|
15
14
|
* @component
|
|
16
15
|
* @category Story Page
|
|
17
16
|
*/
|
|
17
|
+
|
|
18
18
|
export function ReviewRating(_ref) {
|
|
19
19
|
var value = _ref.value,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
20
|
+
_ref$canShowEmptyRati = _ref.canShowEmptyRating,
|
|
21
|
+
canShowEmptyRating = _ref$canShowEmptyRati === void 0 ? false : _ref$canShowEmptyRati,
|
|
22
|
+
_ref$size = _ref.size,
|
|
23
|
+
size = _ref$size === void 0 ? 20 : _ref$size,
|
|
24
|
+
_ref$activeColor = _ref.activeColor,
|
|
25
|
+
activeColor = _ref$activeColor === void 0 ? "gold" : _ref$activeColor,
|
|
26
|
+
_ref$inActiveColor = _ref.inActiveColor,
|
|
27
|
+
inActiveColor = _ref$inActiveColor === void 0 ? "gray" : _ref$inActiveColor,
|
|
28
|
+
_ref$count = _ref.count,
|
|
29
|
+
count = _ref$count === void 0 ? 5 : _ref$count,
|
|
30
|
+
_ref$showHalfStar = _ref.showHalfStar,
|
|
31
|
+
showHalfStar = _ref$showHalfStar === void 0 ? true : _ref$showHalfStar,
|
|
32
|
+
_ref$className = _ref.className,
|
|
33
|
+
className = _ref$className === void 0 ? "review-rating" : _ref$className,
|
|
34
|
+
_ref$activeSymbol = _ref.activeSymbol,
|
|
35
|
+
activeSymbol = _ref$activeSymbol === void 0 ? null : _ref$activeSymbol,
|
|
36
|
+
_ref$inActiveSymbol = _ref.inActiveSymbol,
|
|
37
|
+
inActiveSymbol = _ref$inActiveSymbol === void 0 ? null : _ref$inActiveSymbol,
|
|
38
|
+
_ref$halfActiveSymbol = _ref.halfActiveSymbol,
|
|
39
|
+
halfActiveSymbol = _ref$halfActiveSymbol === void 0 ? null : _ref$halfActiveSymbol;
|
|
40
40
|
if (!canShowEmptyRating && value < 0.1) return null;
|
|
41
|
+
|
|
41
42
|
var activeComponent = function activeComponent(index) {
|
|
42
43
|
return activeSymbol ? /*#__PURE__*/React.cloneElement(activeSymbol, {
|
|
43
44
|
size: size,
|
|
@@ -54,6 +55,7 @@ export function ReviewRating(_ref) {
|
|
|
54
55
|
"data-test-id": "star-icon"
|
|
55
56
|
});
|
|
56
57
|
};
|
|
58
|
+
|
|
57
59
|
var inActiveComponent = function inActiveComponent(index) {
|
|
58
60
|
return inActiveSymbol ? /*#__PURE__*/React.cloneElement(inActiveSymbol, {
|
|
59
61
|
size: size,
|
|
@@ -69,6 +71,7 @@ export function ReviewRating(_ref) {
|
|
|
69
71
|
key: "review-".concat(index)
|
|
70
72
|
});
|
|
71
73
|
};
|
|
74
|
+
|
|
72
75
|
var halfActiveComponent = function halfActiveComponent(index) {
|
|
73
76
|
return halfActiveSymbol ? /*#__PURE__*/React.cloneElement(halfActiveSymbol, {
|
|
74
77
|
size: size,
|
|
@@ -84,7 +87,9 @@ export function ReviewRating(_ref) {
|
|
|
84
87
|
key: "review-".concat(index)
|
|
85
88
|
});
|
|
86
89
|
};
|
|
90
|
+
|
|
87
91
|
var children = [];
|
|
92
|
+
|
|
88
93
|
for (var i = 1; i <= count; i++) {
|
|
89
94
|
if (i <= Math.floor(value)) {
|
|
90
95
|
children.push(activeComponent(i));
|
|
@@ -94,6 +99,7 @@ export function ReviewRating(_ref) {
|
|
|
94
99
|
children.push(inActiveComponent(i));
|
|
95
100
|
}
|
|
96
101
|
}
|
|
102
|
+
|
|
97
103
|
return /*#__PURE__*/React.createElement("div", {
|
|
98
104
|
className: className
|
|
99
105
|
}, children);
|