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