@quintype/components 3.8.7 → 3.8.8-only-react-v19.1
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 +1090 -2039
- package/dist/es/components/access-type.js +574 -822
- package/dist/es/components/adbutler-ad.js +10 -14
- package/dist/es/components/api-client.js +4 -6
- package/dist/es/components/breaking-news-item.js +2 -3
- package/dist/es/components/breaking-news.js +7 -23
- package/dist/es/components/client-side-only.js +6 -19
- package/dist/es/components/collection.js +5 -5
- package/dist/es/components/dfp-ad.js +23 -30
- package/dist/es/components/eager-load-images.js +7 -17
- package/dist/es/components/hamburger-button.js +2 -5
- package/dist/es/components/image-gallery.js +10 -13
- package/dist/es/components/impl/collection-impl.js +2 -8
- package/dist/es/components/impl/gumlet-image.js +10 -19
- package/dist/es/components/impl/image-utils.js +3 -4
- package/dist/es/components/impl/load-more-stories-manager.js +6 -19
- package/dist/es/components/impl/thumbor-image.js +10 -32
- package/dist/es/components/infinite-scroll.js +29 -85
- package/dist/es/components/infinite-story-base.js +7 -24
- package/dist/es/components/lazy-collection.js +8 -8
- package/dist/es/components/lazy-load-images.js +10 -43
- package/dist/es/components/link-base.js +11 -19
- package/dist/es/components/link.js +1 -4
- package/dist/es/components/load-more-collection-stories.js +7 -18
- package/dist/es/components/load-more-stories-base.js +6 -20
- package/dist/es/components/loading-indicator.js +1 -5
- package/dist/es/components/menu-item.js +6 -10
- package/dist/es/components/menu.js +6 -9
- package/dist/es/components/responsive-hero-image.js +1 -3
- package/dist/es/components/responsive-image.js +0 -5
- package/dist/es/components/responsive-source.js +1 -1
- package/dist/es/components/review-rating/review-rating.js +21 -27
- package/dist/es/components/review-rating/star-icon.js +3 -5
- package/dist/es/components/search-box.js +7 -23
- package/dist/es/components/search-page-base.js +7 -18
- package/dist/es/components/social-logins/with-facebook-login.js +10 -20
- package/dist/es/components/social-logins/with-google-login.js +8 -18
- package/dist/es/components/social-logins/with-linkedin-login.js +7 -12
- package/dist/es/components/social-logins/with-social-login.js +7 -21
- package/dist/es/components/social-logins/with-twitter-login.js +7 -7
- package/dist/es/components/social-share.js +8 -24
- package/dist/es/components/story-element.js +43 -88
- package/dist/es/components/story-elements/brightcove.js +54 -94
- package/dist/es/components/story-elements/dailymotion-embed-script.js +13 -39
- package/dist/es/components/story-elements/dailymotion.js +19 -61
- package/dist/es/components/story-elements/jsembed.js +10 -30
- package/dist/es/components/story-elements/jwPlayer.js +9 -24
- package/dist/es/components/story-elements/polltype.js +6 -20
- package/dist/es/components/story-elements/table.js +16 -34
- package/dist/es/components/story-elements/youtube.js +24 -73
- package/dist/es/components/update-on-interval.js +31 -52
- package/dist/es/components/with-client-side-only.js +3 -4
- package/dist/es/components/with-error.js +7 -20
- package/dist/es/components/with-host-url.js +4 -9
- package/dist/es/components/with-lazy.js +7 -21
- package/dist/es/components/with-member.js +14 -33
- package/dist/es/components/with-preview.js +7 -20
- package/dist/es/components/wrap-collection-layout.js +4 -16
- package/dist/es/store/reducers.js +1 -45
- package/dist/es/utils.js +7 -12
- package/package.json +9 -6
|
@@ -1,26 +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";
|
|
4
3
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
4
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
-
|
|
7
|
-
function
|
|
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
|
-
|
|
5
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
7
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
11
8
|
import React from 'react';
|
|
12
9
|
import { removeDuplicateStories } from '../../utils';
|
|
13
10
|
export var LoadMoreStoriesManager = /*#__PURE__*/function (_React$Component) {
|
|
14
|
-
_inherits(LoadMoreStoriesManager, _React$Component);
|
|
15
|
-
|
|
16
|
-
var _super = /*#__PURE__*/_createSuper(LoadMoreStoriesManager);
|
|
17
|
-
|
|
18
11
|
function LoadMoreStoriesManager(props) {
|
|
19
12
|
var _this;
|
|
20
|
-
|
|
21
13
|
_classCallCheck(this, LoadMoreStoriesManager);
|
|
22
|
-
|
|
23
|
-
_this = _super.call(this, props);
|
|
14
|
+
_this = _callSuper(this, LoadMoreStoriesManager, [props]);
|
|
24
15
|
_this.state = {
|
|
25
16
|
loading: false,
|
|
26
17
|
pageNumber: 1,
|
|
@@ -29,8 +20,8 @@ export var LoadMoreStoriesManager = /*#__PURE__*/function (_React$Component) {
|
|
|
29
20
|
};
|
|
30
21
|
return _this;
|
|
31
22
|
}
|
|
32
|
-
|
|
33
|
-
_createClass(LoadMoreStoriesManager, [{
|
|
23
|
+
_inherits(LoadMoreStoriesManager, _React$Component);
|
|
24
|
+
return _createClass(LoadMoreStoriesManager, [{
|
|
34
25
|
key: "stories",
|
|
35
26
|
value: function stories() {
|
|
36
27
|
return this.props.stories.concat(this.state.moreStories);
|
|
@@ -39,7 +30,6 @@ export var LoadMoreStoriesManager = /*#__PURE__*/function (_React$Component) {
|
|
|
39
30
|
key: "loadMore",
|
|
40
31
|
value: function loadMore(e) {
|
|
41
32
|
var _this2 = this;
|
|
42
|
-
|
|
43
33
|
e.preventDefault();
|
|
44
34
|
if (this.state.loading) return;
|
|
45
35
|
var pageNumber = this.state.pageNumber;
|
|
@@ -60,7 +50,6 @@ export var LoadMoreStoriesManager = /*#__PURE__*/function (_React$Component) {
|
|
|
60
50
|
key: "render",
|
|
61
51
|
value: function render() {
|
|
62
52
|
var _this3 = this;
|
|
63
|
-
|
|
64
53
|
return this.props.template(Object.assign({}, this.props, {
|
|
65
54
|
stories: this.stories(),
|
|
66
55
|
onLoadMore: function onLoadMore(e) {
|
|
@@ -71,6 +60,4 @@ export var LoadMoreStoriesManager = /*#__PURE__*/function (_React$Component) {
|
|
|
71
60
|
}));
|
|
72
61
|
}
|
|
73
62
|
}]);
|
|
74
|
-
|
|
75
|
-
return LoadMoreStoriesManager;
|
|
76
63
|
}(React.Component);
|
|
@@ -1,18 +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";
|
|
4
3
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
4
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
5
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
6
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
7
|
-
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
15
|
-
|
|
7
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
8
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
9
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
10
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
11
|
import omit from '@babel/runtime/helpers/objectWithoutProperties';
|
|
17
12
|
import emptyWebGif from 'empty-web-gif';
|
|
18
13
|
import { func } from 'prop-types';
|
|
@@ -23,18 +18,15 @@ import { USED_PARAMS, hashString } from './image-utils';
|
|
|
23
18
|
export function responsiveProps(props) {
|
|
24
19
|
var image = new FocusedImage(props.slug, props.metadata);
|
|
25
20
|
var _props$priority = props.priority,
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
priority = _props$priority === void 0 ? false : _props$priority;
|
|
28
22
|
function generatePath(size) {
|
|
29
23
|
return '//' + props.imageCDN + '/' + image.path(props.aspectRatio, Object.assign({
|
|
30
24
|
w: size
|
|
31
25
|
}, props.imgParams));
|
|
32
26
|
}
|
|
33
|
-
|
|
34
27
|
var resolvePath = function resolvePath(size) {
|
|
35
28
|
return props.shouldDecodeImage ? decodeURIComponent(generatePath(size)) : generatePath(size);
|
|
36
29
|
};
|
|
37
|
-
|
|
38
30
|
var imageProps = {
|
|
39
31
|
src: resolvePath(props.defaultWidth),
|
|
40
32
|
srcSet: props.widths ? props.widths.map(function (size) {
|
|
@@ -43,55 +35,43 @@ export function responsiveProps(props) {
|
|
|
43
35
|
key: hashString(props.slug),
|
|
44
36
|
sizes: props === null || props === void 0 ? void 0 : props.sizes
|
|
45
37
|
};
|
|
46
|
-
|
|
47
38
|
if (priority) {
|
|
48
39
|
return _objectSpread(_objectSpread({}, imageProps), {}, {
|
|
49
40
|
fetchPriority: 'high'
|
|
50
41
|
});
|
|
51
42
|
}
|
|
52
|
-
|
|
53
43
|
return _objectSpread({}, imageProps);
|
|
54
44
|
}
|
|
55
45
|
export var ThumborImage = /*#__PURE__*/function (_React$Component) {
|
|
56
|
-
_inherits(ThumborImage, _React$Component);
|
|
57
|
-
|
|
58
|
-
var _super = /*#__PURE__*/_createSuper(ThumborImage);
|
|
59
|
-
|
|
60
46
|
function ThumborImage(props, context) {
|
|
61
47
|
var _this;
|
|
62
|
-
|
|
63
48
|
_classCallCheck(this, ThumborImage);
|
|
64
|
-
|
|
65
|
-
_this = _super.call(this, props, context);
|
|
49
|
+
_this = _callSuper(this, ThumborImage, [props, context]);
|
|
66
50
|
_this.state = {
|
|
67
51
|
showImage: !_this.shouldLazyLoad()
|
|
68
52
|
};
|
|
69
53
|
return _this;
|
|
70
54
|
}
|
|
71
|
-
|
|
72
|
-
_createClass(ThumborImage, [{
|
|
55
|
+
_inherits(ThumborImage, _React$Component);
|
|
56
|
+
return _createClass(ThumborImage, [{
|
|
73
57
|
key: "shouldLazyLoad",
|
|
74
58
|
value: function shouldLazyLoad() {
|
|
75
59
|
if (this.props.eager === true) {
|
|
76
60
|
return false;
|
|
77
61
|
}
|
|
78
|
-
|
|
79
62
|
if (this.context.lazyLoadEagerPredicate && this.context.lazyLoadEagerPredicate(this.props.eager)) {
|
|
80
63
|
return false;
|
|
81
64
|
}
|
|
82
|
-
|
|
83
65
|
if (this.context.lazyLoadObserveImage && this.context.lazyLoadUnobserveImage) {
|
|
84
66
|
return true;
|
|
85
67
|
}
|
|
86
|
-
|
|
87
68
|
return false;
|
|
88
69
|
}
|
|
89
70
|
}, {
|
|
90
71
|
key: "render",
|
|
91
72
|
value: function render() {
|
|
92
73
|
var _this$props,
|
|
93
|
-
|
|
94
|
-
|
|
74
|
+
_this2 = this;
|
|
95
75
|
var imageProps = this.state.showImage ? responsiveProps(this.props) : {
|
|
96
76
|
src: emptyWebGif
|
|
97
77
|
};
|
|
@@ -125,8 +105,6 @@ export var ThumborImage = /*#__PURE__*/function (_React$Component) {
|
|
|
125
105
|
});
|
|
126
106
|
}
|
|
127
107
|
}]);
|
|
128
|
-
|
|
129
|
-
return ThumborImage;
|
|
130
108
|
}(React.Component);
|
|
131
109
|
ThumborImage.contextTypes = {
|
|
132
110
|
lazyLoadObserveImage: func,
|
|
@@ -2,38 +2,29 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
4
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
|
-
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
5
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
7
6
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
9
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
10
|
+
import React from "react";
|
|
8
11
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
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; } }
|
|
12
|
-
|
|
13
|
-
import React from "react"; // An item in the infinite scroll
|
|
14
|
-
|
|
12
|
+
// An item in the infinite scroll
|
|
15
13
|
var ScrollItem = /*#__PURE__*/function (_React$Component) {
|
|
16
|
-
_inherits(ScrollItem, _React$Component);
|
|
17
|
-
|
|
18
|
-
var _super = /*#__PURE__*/_createSuper(ScrollItem);
|
|
19
|
-
|
|
20
14
|
function ScrollItem(props) {
|
|
21
15
|
var _this;
|
|
22
|
-
|
|
23
16
|
_classCallCheck(this, ScrollItem);
|
|
24
|
-
|
|
25
|
-
_this = _super.call(this, props);
|
|
17
|
+
_this = _callSuper(this, ScrollItem, [props]);
|
|
26
18
|
_this.state = {
|
|
27
19
|
minHeight: props.minHeight
|
|
28
20
|
};
|
|
29
21
|
return _this;
|
|
30
22
|
}
|
|
31
|
-
|
|
32
|
-
_createClass(ScrollItem, [{
|
|
23
|
+
_inherits(ScrollItem, _React$Component);
|
|
24
|
+
return _createClass(ScrollItem, [{
|
|
33
25
|
key: "render",
|
|
34
26
|
value: function render() {
|
|
35
27
|
var _this2 = this;
|
|
36
|
-
|
|
37
28
|
return /*#__PURE__*/React.createElement("div", {
|
|
38
29
|
ref: function ref(node) {
|
|
39
30
|
return _this2.node = node;
|
|
@@ -63,7 +54,6 @@ var ScrollItem = /*#__PURE__*/function (_React$Component) {
|
|
|
63
54
|
key: "componentDidMount",
|
|
64
55
|
value: function componentDidMount() {
|
|
65
56
|
var _this3 = this;
|
|
66
|
-
|
|
67
57
|
this.props.observers.forEach(function (observer) {
|
|
68
58
|
return observer && observer.observe(_this3.node);
|
|
69
59
|
});
|
|
@@ -72,33 +62,22 @@ var ScrollItem = /*#__PURE__*/function (_React$Component) {
|
|
|
72
62
|
key: "componentWillUnmount",
|
|
73
63
|
value: function componentWillUnmount() {
|
|
74
64
|
var _this4 = this;
|
|
75
|
-
|
|
76
65
|
this.props.observers.forEach(function (observer) {
|
|
77
66
|
return observer && observer.unobserve(_this4.node);
|
|
78
67
|
});
|
|
79
68
|
}
|
|
80
69
|
}]);
|
|
81
|
-
|
|
82
|
-
return ScrollItem;
|
|
83
70
|
}(React.Component); // When this becomes visible, we call loadMore()
|
|
84
|
-
|
|
85
|
-
|
|
86
71
|
var ScrollLoadMore = /*#__PURE__*/function (_React$Component2) {
|
|
87
|
-
_inherits(ScrollLoadMore, _React$Component2);
|
|
88
|
-
|
|
89
|
-
var _super2 = /*#__PURE__*/_createSuper(ScrollLoadMore);
|
|
90
|
-
|
|
91
72
|
function ScrollLoadMore() {
|
|
92
73
|
_classCallCheck(this, ScrollLoadMore);
|
|
93
|
-
|
|
94
|
-
return _super2.apply(this, arguments);
|
|
74
|
+
return _callSuper(this, ScrollLoadMore, arguments);
|
|
95
75
|
}
|
|
96
|
-
|
|
97
|
-
_createClass(ScrollLoadMore, [{
|
|
76
|
+
_inherits(ScrollLoadMore, _React$Component2);
|
|
77
|
+
return _createClass(ScrollLoadMore, [{
|
|
98
78
|
key: "render",
|
|
99
79
|
value: function render() {
|
|
100
80
|
var _this5 = this;
|
|
101
|
-
|
|
102
81
|
return /*#__PURE__*/React.createElement("div", {
|
|
103
82
|
ref: function ref(node) {
|
|
104
83
|
return _this5.node = node;
|
|
@@ -110,7 +89,6 @@ var ScrollLoadMore = /*#__PURE__*/function (_React$Component2) {
|
|
|
110
89
|
key: "componentDidMount",
|
|
111
90
|
value: function componentDidMount() {
|
|
112
91
|
var _this6 = this;
|
|
113
|
-
|
|
114
92
|
this.props.observers.forEach(function (observer) {
|
|
115
93
|
return observer && observer.observe(_this6.node);
|
|
116
94
|
});
|
|
@@ -119,28 +97,17 @@ var ScrollLoadMore = /*#__PURE__*/function (_React$Component2) {
|
|
|
119
97
|
key: "componentWillUnmount",
|
|
120
98
|
value: function componentWillUnmount() {
|
|
121
99
|
var _this7 = this;
|
|
122
|
-
|
|
123
100
|
this.props.observers.forEach(function (observer) {
|
|
124
101
|
return observer && observer.unobserve(_this7.node);
|
|
125
102
|
});
|
|
126
103
|
}
|
|
127
104
|
}]);
|
|
128
|
-
|
|
129
|
-
return ScrollLoadMore;
|
|
130
105
|
}(React.Component); // Basic Infinite Scroll, toggles showing items
|
|
131
|
-
|
|
132
|
-
|
|
133
106
|
var InfiniteScrollBase = /*#__PURE__*/function (_React$Component3) {
|
|
134
|
-
_inherits(InfiniteScrollBase, _React$Component3);
|
|
135
|
-
|
|
136
|
-
var _super3 = /*#__PURE__*/_createSuper(InfiniteScrollBase);
|
|
137
|
-
|
|
138
107
|
function InfiniteScrollBase(props) {
|
|
139
108
|
var _this8;
|
|
140
|
-
|
|
141
109
|
_classCallCheck(this, InfiniteScrollBase);
|
|
142
|
-
|
|
143
|
-
_this8 = _super3.call(this, props);
|
|
110
|
+
_this8 = _callSuper(this, InfiniteScrollBase, [props]);
|
|
144
111
|
var initiallyShow = props.initiallyShow || 1;
|
|
145
112
|
_this8.state = {
|
|
146
113
|
visibleComponents: _toConsumableArray(Array(initiallyShow).keys()).reduce(function (arr, i) {
|
|
@@ -148,7 +115,6 @@ var InfiniteScrollBase = /*#__PURE__*/function (_React$Component3) {
|
|
|
148
115
|
return arr;
|
|
149
116
|
}, {})
|
|
150
117
|
};
|
|
151
|
-
|
|
152
118
|
if (global.IntersectionObserver) {
|
|
153
119
|
_this8.loadObserver = new IntersectionObserver(function (x) {
|
|
154
120
|
return _this8.intersectionCallback(x);
|
|
@@ -156,11 +122,10 @@ var InfiniteScrollBase = /*#__PURE__*/function (_React$Component3) {
|
|
|
156
122
|
rootMargin: props.loadMargin || "200px 0px 500px"
|
|
157
123
|
});
|
|
158
124
|
}
|
|
159
|
-
|
|
160
125
|
return _this8;
|
|
161
126
|
}
|
|
162
|
-
|
|
163
|
-
_createClass(InfiniteScrollBase, [{
|
|
127
|
+
_inherits(InfiniteScrollBase, _React$Component3);
|
|
128
|
+
return _createClass(InfiniteScrollBase, [{
|
|
164
129
|
key: "componentWillUnmount",
|
|
165
130
|
value: function componentWillUnmount() {
|
|
166
131
|
this.loadObserver && this.loadObserver.disconnect();
|
|
@@ -169,7 +134,6 @@ var InfiniteScrollBase = /*#__PURE__*/function (_React$Component3) {
|
|
|
169
134
|
key: "intersectionCallback",
|
|
170
135
|
value: function intersectionCallback(entries) {
|
|
171
136
|
var _this9 = this;
|
|
172
|
-
|
|
173
137
|
var visibleComponents = this.state.visibleComponents;
|
|
174
138
|
entries.forEach(function (entry) {
|
|
175
139
|
// Stupid browsers like UC and Mi don't correctly support the spec
|
|
@@ -180,9 +144,7 @@ var InfiniteScrollBase = /*#__PURE__*/function (_React$Component3) {
|
|
|
180
144
|
return;
|
|
181
145
|
}
|
|
182
146
|
}
|
|
183
|
-
|
|
184
147
|
var item = entry.target.getAttribute("data-infinite-scroll");
|
|
185
|
-
|
|
186
148
|
if (item == 'load-more' && entry.isIntersecting) {
|
|
187
149
|
_this9.props.loadNext();
|
|
188
150
|
} else {
|
|
@@ -197,53 +159,40 @@ var InfiniteScrollBase = /*#__PURE__*/function (_React$Component3) {
|
|
|
197
159
|
}, {
|
|
198
160
|
key: "render",
|
|
199
161
|
value: function render() {
|
|
200
|
-
var
|
|
201
|
-
|
|
162
|
+
var _this0 = this;
|
|
202
163
|
return /*#__PURE__*/React.createElement("div", null, this.props.items.map(function (data, index) {
|
|
203
164
|
return /*#__PURE__*/React.createElement(ScrollItem, {
|
|
204
|
-
observers:
|
|
165
|
+
observers: _this0.props.observers.concat([_this0.loadObserver]),
|
|
205
166
|
key: index,
|
|
206
167
|
index: index,
|
|
207
|
-
show:
|
|
208
|
-
render:
|
|
168
|
+
show: _this0.state.visibleComponents[index],
|
|
169
|
+
render: _this0.props.render,
|
|
209
170
|
data: data,
|
|
210
|
-
minHeight:
|
|
171
|
+
minHeight: _this0.props.minHeight || 50
|
|
211
172
|
});
|
|
212
173
|
}), /*#__PURE__*/React.createElement(ScrollLoadMore, {
|
|
213
174
|
observers: [this.loadObserver]
|
|
214
175
|
}));
|
|
215
176
|
}
|
|
216
177
|
}]);
|
|
217
|
-
|
|
218
|
-
return InfiniteScrollBase;
|
|
219
178
|
}(React.Component); // Calls a callback when an item covers bottom 20% of the screen (to change URL)
|
|
220
|
-
|
|
221
|
-
|
|
222
179
|
function withFocusObserver(Component) {
|
|
223
180
|
return /*#__PURE__*/function (_React$Component4) {
|
|
224
|
-
_inherits(WithFocusObserver, _React$Component4);
|
|
225
|
-
|
|
226
|
-
var _super4 = _createSuper(WithFocusObserver);
|
|
227
|
-
|
|
228
181
|
function WithFocusObserver(props) {
|
|
229
|
-
var
|
|
230
|
-
|
|
182
|
+
var _this1;
|
|
231
183
|
_classCallCheck(this, WithFocusObserver);
|
|
232
|
-
|
|
233
|
-
_this11 = _super4.call(this, props);
|
|
234
|
-
|
|
184
|
+
_this1 = _callSuper(this, WithFocusObserver, [props]);
|
|
235
185
|
if (global.IntersectionObserver) {
|
|
236
|
-
|
|
237
|
-
return
|
|
186
|
+
_this1.focusObserver = new IntersectionObserver(function (x) {
|
|
187
|
+
return _this1.focusCallback(x);
|
|
238
188
|
}, {
|
|
239
189
|
rootMargin: "-".concat(100 - props.focusCallbackAt, "% 0px -").concat(props.focusCallbackAt, "%")
|
|
240
190
|
});
|
|
241
191
|
}
|
|
242
|
-
|
|
243
|
-
return _this11;
|
|
192
|
+
return _this1;
|
|
244
193
|
}
|
|
245
|
-
|
|
246
|
-
_createClass(WithFocusObserver, [{
|
|
194
|
+
_inherits(WithFocusObserver, _React$Component4);
|
|
195
|
+
return _createClass(WithFocusObserver, [{
|
|
247
196
|
key: "componentWillUnmount",
|
|
248
197
|
value: function componentWillUnmount() {
|
|
249
198
|
this.focusObserver && this.focusObserver.disconnect();
|
|
@@ -251,13 +200,11 @@ function withFocusObserver(Component) {
|
|
|
251
200
|
}, {
|
|
252
201
|
key: "focusCallback",
|
|
253
202
|
value: function focusCallback(entries) {
|
|
254
|
-
var
|
|
255
|
-
|
|
203
|
+
var _this10 = this;
|
|
256
204
|
entries.forEach(function (entry) {
|
|
257
205
|
var item = entry.target.getAttribute("data-infinite-scroll");
|
|
258
|
-
|
|
259
206
|
if (entry.isIntersecting) {
|
|
260
|
-
|
|
207
|
+
_this10.props.onFocus(item);
|
|
261
208
|
}
|
|
262
209
|
});
|
|
263
210
|
}
|
|
@@ -269,16 +216,13 @@ function withFocusObserver(Component) {
|
|
|
269
216
|
}));
|
|
270
217
|
}
|
|
271
218
|
}]);
|
|
272
|
-
|
|
273
|
-
return WithFocusObserver;
|
|
274
219
|
}(React.Component);
|
|
275
220
|
}
|
|
221
|
+
|
|
276
222
|
/**
|
|
277
223
|
* This component can be used to implement InfiniteScroll. This is an internal component.
|
|
278
224
|
* @private
|
|
279
225
|
* @category Other
|
|
280
226
|
* @component
|
|
281
227
|
*/
|
|
282
|
-
|
|
283
|
-
|
|
284
228
|
export var InfiniteScroll = /*#__PURE__*/withFocusObserver(InfiniteScrollBase);
|
|
@@ -1,17 +1,15 @@
|
|
|
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";
|
|
4
3
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
4
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
-
|
|
7
|
-
function
|
|
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
|
-
|
|
5
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
6
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
7
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
11
8
|
import React from "react";
|
|
12
9
|
import get from "lodash/get";
|
|
13
10
|
import { InfiniteScroll } from "./infinite-scroll.js";
|
|
14
11
|
import { removeDuplicateStories } from '../utils';
|
|
12
|
+
|
|
15
13
|
/**
|
|
16
14
|
* This component can be used to implement InfiniteScroll on the story page. You will need to specify the function which renders the story (which will recieve props.index and props.story), and functions for triggering analytics.
|
|
17
15
|
*
|
|
@@ -74,18 +72,11 @@ import { removeDuplicateStories } from '../utils';
|
|
|
74
72
|
* @component
|
|
75
73
|
* @category Story Page
|
|
76
74
|
*/
|
|
77
|
-
|
|
78
75
|
export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
|
|
79
|
-
_inherits(InfiniteStoryBase, _React$Component);
|
|
80
|
-
|
|
81
|
-
var _super = /*#__PURE__*/_createSuper(InfiniteStoryBase);
|
|
82
|
-
|
|
83
76
|
function InfiniteStoryBase(props) {
|
|
84
77
|
var _this;
|
|
85
|
-
|
|
86
78
|
_classCallCheck(this, InfiniteStoryBase);
|
|
87
|
-
|
|
88
|
-
_this = _super.call(this, props);
|
|
79
|
+
_this = _callSuper(this, InfiniteStoryBase, [props]);
|
|
89
80
|
_this.state = {
|
|
90
81
|
moreItems: [],
|
|
91
82
|
loading: false,
|
|
@@ -94,8 +85,8 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
|
|
|
94
85
|
};
|
|
95
86
|
return _this;
|
|
96
87
|
}
|
|
97
|
-
|
|
98
|
-
_createClass(InfiniteStoryBase, [{
|
|
88
|
+
_inherits(InfiniteStoryBase, _React$Component);
|
|
89
|
+
return _createClass(InfiniteStoryBase, [{
|
|
99
90
|
key: "allItems",
|
|
100
91
|
value: function allItems() {
|
|
101
92
|
return [this.props.data].concat(this.state.moreItems);
|
|
@@ -104,9 +95,7 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
|
|
|
104
95
|
key: "onFocus",
|
|
105
96
|
value: function onFocus(index) {
|
|
106
97
|
var _this2 = this;
|
|
107
|
-
|
|
108
98
|
var item = this.allItems()[index];
|
|
109
|
-
|
|
110
99
|
if (!this.props.doNotChangeUrl) {
|
|
111
100
|
var storyPath = item.story.url ? new URL(item.story.url).pathname : "/" + item.story.slug;
|
|
112
101
|
var metaTitle = get(item, ['story', 'seo', 'meta-title'], item.story.headline);
|
|
@@ -114,9 +103,7 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
|
|
|
114
103
|
var path = this.props.changeUrlTo ? this.props.changeUrlTo(item) : storyPath;
|
|
115
104
|
global.app.maybeSetUrl(path, title);
|
|
116
105
|
}
|
|
117
|
-
|
|
118
106
|
this.props.onItemFocus && this.props.onItemFocus(item, index);
|
|
119
|
-
|
|
120
107
|
if (!this.state.seenStoryIds.includes(item.story.id)) {
|
|
121
108
|
this.setState({
|
|
122
109
|
seenStoryIds: this.state.seenStoryIds.concat([item.story.id])
|
|
@@ -129,7 +116,6 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
|
|
|
129
116
|
key: "loadMore",
|
|
130
117
|
value: function loadMore() {
|
|
131
118
|
var _this3 = this;
|
|
132
|
-
|
|
133
119
|
if (this.state.loading) return;
|
|
134
120
|
var pageNumber = this.state.pageNumber;
|
|
135
121
|
var story = get(this.props.data, ['story'], {});
|
|
@@ -151,7 +137,6 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
|
|
|
151
137
|
key: "render",
|
|
152
138
|
value: function render() {
|
|
153
139
|
var _this4 = this;
|
|
154
|
-
|
|
155
140
|
return /*#__PURE__*/React.createElement(InfiniteScroll, {
|
|
156
141
|
render: this.props.render,
|
|
157
142
|
items: this.allItems(),
|
|
@@ -167,6 +152,4 @@ export var InfiniteStoryBase = /*#__PURE__*/function (_React$Component) {
|
|
|
167
152
|
});
|
|
168
153
|
}
|
|
169
154
|
}]);
|
|
170
|
-
|
|
171
|
-
return InfiniteStoryBase;
|
|
172
155
|
}(React.Component);
|
|
@@ -4,6 +4,7 @@ import React from 'react';
|
|
|
4
4
|
import { InfiniteScroll } from './infinite-scroll';
|
|
5
5
|
import { string, object, func } from 'prop-types';
|
|
6
6
|
import { StoryNotImplemented, CollectionNotImplemented, renderCollectionItem } from './impl/collection-impl';
|
|
7
|
+
|
|
7
8
|
/**
|
|
8
9
|
* This component can be used to render a collection, but with the components being lazy. This takes all the same options as Collection, but with a `lazyAfter` prop.
|
|
9
10
|
* This Component also accepts extra props, which will be passed down to collection templates.
|
|
@@ -27,15 +28,13 @@ import { StoryNotImplemented, CollectionNotImplemented, renderCollectionItem } f
|
|
|
27
28
|
* @category Collection Page
|
|
28
29
|
* @component
|
|
29
30
|
*/
|
|
30
|
-
|
|
31
31
|
export function LazyCollection(_ref) {
|
|
32
32
|
var className = _ref.className,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
collection = _ref.collection,
|
|
34
|
+
collectionTemplates = _ref.collectionTemplates,
|
|
35
|
+
storyTemplates = _ref.storyTemplates,
|
|
36
|
+
lazyAfter = _ref.lazyAfter,
|
|
37
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
39
38
|
return /*#__PURE__*/React.createElement("div", {
|
|
40
39
|
className: className
|
|
41
40
|
}, /*#__PURE__*/React.createElement(InfiniteScroll, {
|
|
@@ -49,7 +48,8 @@ export function LazyCollection(_ref) {
|
|
|
49
48
|
},
|
|
50
49
|
initiallyShow: lazyAfter,
|
|
51
50
|
neverHideItem: true,
|
|
52
|
-
showAllOnLegacyBrowser: true
|
|
51
|
+
showAllOnLegacyBrowser: true
|
|
52
|
+
// No Op
|
|
53
53
|
,
|
|
54
54
|
focusCallbackAt: 20,
|
|
55
55
|
onFocus: function onFocus() {}
|