@onepercentio/one-ui 0.20.2 → 0.20.4
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/.babelrc +0 -5
- package/.prod.babelrc +2 -8
- package/dist/components/AdaptiveButton/AdaptiveButton.js +2 -2
- package/dist/components/AdaptiveContainer/AdaptiveContainer.js +26 -26
- package/dist/components/AdaptiveDialog/AdaptiveDialog.js +9 -9
- package/dist/components/AdaptiveSidebar/AdaptiveSidebar.js +14 -14
- package/dist/components/AnchoredTooltip/AnchoredTooltip.js +30 -30
- package/dist/components/AnimatedEntrance/AnimatedEntrance.js +40 -27
- package/dist/components/AsyncWrapper/AsyncWrapper.js +2 -2
- package/dist/components/Avatar/Avatar.js +4 -4
- package/dist/components/BucketFill/BucketFill.js +9 -9
- package/dist/components/Button/Button.js +4 -4
- package/dist/components/Card/Card.js +1 -1
- package/dist/components/Chart/Chart.view.js +35 -34
- package/dist/components/CheckBox/CheckBox.js +3 -3
- package/dist/components/Collapsable/Collapsable.js +18 -18
- package/dist/components/Countdown/Countdown.js +16 -16
- package/dist/components/Divider/Divider.js +1 -1
- package/dist/components/EmailInput/EmailInput.js +4 -4
- package/dist/components/FadeIn/FadeIn.js +9 -9
- package/dist/components/FileInput/FileInput.js +6 -6
- package/dist/components/FileInput/View/BigFactory/BigFactory.js +1 -1
- package/dist/components/FileInput/View/Compact/Compact.js +6 -6
- package/dist/components/FlowController/FlowController.js +4 -4
- package/dist/components/Form/Form.js +29 -18
- package/dist/components/Freeze/Freeze.js +1 -1
- package/dist/components/HSForms/HSForms.js +7 -7
- package/dist/components/Header/Header.js +8 -8
- package/dist/components/HeaderCloseBtn/HeaderCloseBtn.js +1 -1
- package/dist/components/InfinityScroll/InfinityScroll.js +25 -25
- package/dist/components/Input/Input.js +13 -13
- package/dist/components/InstantCounter/InstantCounter.js +9 -9
- package/dist/components/LavaLamp/LavaLamp.data.js +25 -25
- package/dist/components/LavaLamp/LavaLamp.js +12 -5
- package/dist/components/LavaLamp/v2/LavaLamp.js +45 -29
- package/dist/components/LinkToId/LinkToId.js +7 -7
- package/dist/components/Loader/Loader.js +2 -2
- package/dist/components/LoaderDotsIndicator/LoaderDotsIndicator.js +6 -6
- package/dist/components/LoopableVideo/LoopableVideo.js +4 -4
- package/dist/components/MainGrid/MainGrid.js +2 -2
- package/dist/components/MutableHamburgerButton/MutableHamburgerButton.js +2 -2
- package/dist/components/Notification/Notification.js +1 -1
- package/dist/components/OrderableList/OrderableList.js +141 -112
- package/dist/components/PaginationIndicator/PaginationIndicator.js +50 -50
- package/dist/components/Parallax/Parallax.js +39 -39
- package/dist/components/Parallax/math/helpers.js +19 -18
- package/dist/components/PasswordInput/PasswordInput.js +10 -10
- package/dist/components/PingPongText/PingPongText.js +15 -15
- package/dist/components/PixelatedScan/PixelatedScan.js +20 -19
- package/dist/components/Portal/Portal.js +10 -10
- package/dist/components/ProgressBar/ProgressBar.js +6 -6
- package/dist/components/ProgressTexts/ProgressTexts.js +3 -3
- package/dist/components/Radio/Radio.js +3 -3
- package/dist/components/SectionContainer/SectionContainer.js +1 -1
- package/dist/components/Select/Select.js +13 -13
- package/dist/components/Skeleton/Skeleton.js +1 -1
- package/dist/components/Spacing/Spacing.js +1 -1
- package/dist/components/StaticScroller/StaticScroller.js +12 -12
- package/dist/components/Switch/Switch.js +2 -2
- package/dist/components/Table/Table.js +11 -11
- package/dist/components/Tabs/Tabs.js +3 -3
- package/dist/components/Text/Text.js +5 -5
- package/dist/components/Transition/MasksFactory/DiagonalReveal.js +5 -5
- package/dist/components/Transition/MasksFactory/DiagonalSquareToBalls.js +17 -17
- package/dist/components/Transition/MasksFactory/PhysicsSquares.js +13 -13
- package/dist/components/Transition/MasksFactory/SquareToBalls.js +9 -9
- package/dist/components/Transition/MasksFactory/utils.js +8 -8
- package/dist/components/Transition/Transition.js +49 -49
- package/dist/components/UncontrolledTransition/UncontrolledTransition.js +7 -7
- package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.js +82 -44
- package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.js +6 -6
- package/dist/context/AsyncProcess.js +42 -19
- package/dist/context/CustomBrowserRouter.js +6 -6
- package/dist/context/OneUIProvider.js +15 -15
- package/dist/hooks/logs/useDependencyChangeDetection.js +5 -2
- package/dist/hooks/persistence/useLocalStorage.js +7 -6
- package/dist/hooks/shims/ObjectWatchShim.js +15 -1
- package/dist/hooks/ui/useAdaptiveImage.js +6 -6
- package/dist/hooks/ui/useBreakpoint.js +5 -5
- package/dist/hooks/ui/useCustomScrollbar.js +2 -2
- package/dist/hooks/ui/useMouseHover.js +4 -4
- package/dist/hooks/ui/usePaginationControls.d.ts +2 -1
- package/dist/hooks/ui/usePaginationControls.js +42 -40
- package/dist/hooks/ui/useSnapToViewport.js +3 -3
- package/dist/hooks/ui/useTilt.js +38 -38
- package/dist/hooks/ui/useZoomable.js +46 -38
- package/dist/hooks/ui/useZoomable.module.scss +2 -2
- package/dist/hooks/useAsyncControl.js +39 -22
- package/dist/hooks/useContainedRepositioning.js +22 -22
- package/dist/hooks/useCustomHistory.js +2 -2
- package/dist/hooks/useElementFit.js +6 -6
- package/dist/hooks/useFirestoreWatch.js +39 -26
- package/dist/hooks/useForm.js +8 -8
- package/dist/hooks/useFreeze.js +1 -1
- package/dist/hooks/useHero.d.ts +2 -2
- package/dist/hooks/useHero.js +96 -74
- package/dist/hooks/useIntersection.js +4 -4
- package/dist/hooks/useMergeRefs.js +7 -3
- package/dist/hooks/useObserve.js +8 -4
- package/dist/hooks/usePagination.js +59 -39
- package/dist/hooks/usePooledOperation.js +22 -8
- package/dist/hooks/usePooling.js +33 -17
- package/dist/hooks/useRebound.js +5 -5
- package/dist/hooks/useShortIntl.js +13 -13
- package/dist/hooks/utility/useEvents.js +5 -5
- package/dist/hooks/utility/useModule.js +3 -3
- package/dist/hooks/utility/useQuery.js +1 -1
- package/dist/models/DebugLogger.js +2 -2
- package/dist/models/GenericContract.js +1 -1
- package/dist/storybookUtils/index.js +1 -1
- package/dist/utility.d.js +6 -6
- package/dist/utils/blockchain.js +105 -32
- package/dist/utils/flatten.js +3 -3
- package/dist/utils/html.utils.js +1 -1
- package/package.json +2 -1
- package/dist/hooks/ui/usePaginationControls.e2e.d.ts +0 -4
package/dist/hooks/useHero.js
CHANGED
|
@@ -15,60 +15,61 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
15
15
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
16
16
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
17
17
|
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
18
|
+
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
18
19
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
19
20
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
20
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
21
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
21
22
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
22
23
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
23
24
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
24
25
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
25
26
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
26
27
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
27
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
28
|
-
|
|
28
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
29
|
+
var ID = function ID(id) {
|
|
29
30
|
return "".concat(id, "-hero");
|
|
30
31
|
};
|
|
31
|
-
|
|
32
|
+
var viewport = window.visualViewport;
|
|
32
33
|
|
|
33
34
|
/**
|
|
34
35
|
* This hook implements the logic for a hero animation between 2 elements
|
|
35
36
|
*/
|
|
36
37
|
function useHero(id) {
|
|
37
|
-
|
|
38
|
+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
|
38
39
|
propsToTransition: []
|
|
39
40
|
};
|
|
40
|
-
|
|
41
|
-
|
|
41
|
+
var events = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
42
|
+
var _options$propsToTrans = options.propsToTransition,
|
|
42
43
|
propsToTransition = _options$propsToTrans === void 0 ? [] : _options$propsToTrans,
|
|
43
44
|
dataPreffix = options["data-preffix"],
|
|
44
45
|
repeatable = options.repeatable;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
var _dataPreffix = dataPreffix ? "-".concat(dataPreffix) : "";
|
|
47
|
+
var dataProperty = "data".concat(_dataPreffix, "-hero");
|
|
48
|
+
var heroRef = (0, _react.useRef)(null);
|
|
48
49
|
(0, _react.useLayoutEffect)(function () {
|
|
49
50
|
heroRef.current.setAttribute(dataProperty, id);
|
|
50
51
|
}, [id]);
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
var getHerosOnScreen = (0, _react.useCallback)(function () {
|
|
53
|
+
var otherElements = Array.from(document.querySelectorAll("[".concat(dataProperty, "=\"").concat(id, "\"]"))).filter(function (el) {
|
|
53
54
|
return el !== heroRef.current;
|
|
54
55
|
});
|
|
55
56
|
return otherElements;
|
|
56
57
|
}, [id]);
|
|
57
58
|
function triggerHeroAnimation() {
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
var allPropsToTransition = ["width", "height", "top", "left"].concat(_toConsumableArray(propsToTransition));
|
|
60
|
+
var shouldHeroFn = events.onHeroDetect || function () {
|
|
60
61
|
return true;
|
|
61
62
|
};
|
|
62
|
-
|
|
63
|
+
var otherElements = getHerosOnScreen().filter(function (el) {
|
|
63
64
|
return shouldHeroFn(el, heroRef.current);
|
|
64
65
|
});
|
|
65
|
-
|
|
66
|
+
var currentElCoordinates = heroRef.current.getBoundingClientRect();
|
|
66
67
|
if (process.env.NODE_ENV === "development" && otherElements.length > 2) console.warn("There are too many elements to transition to, I will transition to the first I find", otherElements);
|
|
67
|
-
|
|
68
|
+
var otherElement = otherElements.find(function (el) {
|
|
68
69
|
return el !== heroRef.current;
|
|
69
70
|
});
|
|
70
71
|
if (otherElement) {
|
|
71
|
-
|
|
72
|
+
var willTheHeroMove = function willTheHeroMove(origin, target) {
|
|
72
73
|
return !(origin.top === target.top && origin.left === target.left && origin.width === target.width && origin.height === target.height);
|
|
73
74
|
};
|
|
74
75
|
/**
|
|
@@ -76,22 +77,22 @@ function useHero(id) {
|
|
|
76
77
|
* @param el
|
|
77
78
|
* @returns Returns if it will move
|
|
78
79
|
*/
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
80
|
+
var setCloneToCoordinatesOf = function setCloneToCoordinatesOf(el) {
|
|
81
|
+
var coordinates = el.getBoundingClientRect();
|
|
82
|
+
var currentCoordinates = _clone.getBoundingClientRect();
|
|
83
|
+
var willMove = willTheHeroMove(coordinates, currentCoordinates);
|
|
84
|
+
_clone.style.position = "fixed";
|
|
85
|
+
_clone.style.top = "".concat(coordinates.top, "px");
|
|
86
|
+
_clone.style.left = "".concat(coordinates.left, "px");
|
|
87
|
+
_clone.style.width = "".concat(coordinates.width, "px");
|
|
88
|
+
_clone.style.height = "".concat(coordinates.height, "px");
|
|
88
89
|
return willMove;
|
|
89
90
|
};
|
|
90
|
-
|
|
91
|
+
var _ref = events.onBeforeTransition ? events.onBeforeTransition(otherElement, heroRef.current) : [viewport, viewport],
|
|
91
92
|
_ref2 = _slicedToArray(_ref, 2),
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
93
|
+
_originContainer = _ref2[0],
|
|
94
|
+
_targetContainer = _ref2[1];
|
|
95
|
+
var shouldSkip = isElementOutsideContainer(_targetContainer, currentElCoordinates) || isElementOutsideContainer(_originContainer, otherElement.getBoundingClientRect()) ? (events.onHeroSkip || function () {
|
|
95
96
|
return true;
|
|
96
97
|
})(otherElement, heroRef.current) : false;
|
|
97
98
|
if (shouldSkip) {
|
|
@@ -99,14 +100,14 @@ function useHero(id) {
|
|
|
99
100
|
(_events$onHeroSkipped = events.onHeroSkipped) === null || _events$onHeroSkipped === void 0 ? void 0 : _events$onHeroSkipped.call(events);
|
|
100
101
|
return;
|
|
101
102
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
if (events.onHeroCloned && !oldClone) events.onHeroCloned(
|
|
103
|
+
var oldClone = document.querySelector("[".concat(dataProperty, "-clone=\"").concat(ID(id), "\"]"));
|
|
104
|
+
var _clone = oldClone || otherElement.cloneNode(true);
|
|
105
|
+
if (events.onHeroCloned && !oldClone) events.onHeroCloned(_clone);
|
|
105
106
|
|
|
106
107
|
// Clean up thos properties that can cause confusion since it's a clone
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
108
|
+
_clone.style.visibility = "";
|
|
109
|
+
_clone.removeAttribute(dataProperty);
|
|
110
|
+
_clone.setAttribute("".concat(dataProperty, "-clone"), ID(id));
|
|
110
111
|
|
|
111
112
|
/**
|
|
112
113
|
* If it's repeatable, we should keep the flag that indicates the hero existance
|
|
@@ -114,51 +115,72 @@ function useHero(id) {
|
|
|
114
115
|
if (!repeatable)
|
|
115
116
|
// Since a transition is now triggering from the old element, he cannot be considered for other transitions
|
|
116
117
|
otherElement.removeAttribute(dataProperty);
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
118
|
+
var coordinates = otherElement.getBoundingClientRect();
|
|
119
|
+
var currentCoordinates = heroRef.current.getBoundingClientRect();
|
|
120
|
+
var itWontMove = !willTheHeroMove(coordinates, currentCoordinates);
|
|
120
121
|
if (itWontMove) return;
|
|
121
122
|
if (!oldClone) {
|
|
122
123
|
/** Set the clone over the starting element */
|
|
123
124
|
setCloneToCoordinatesOf(otherElement);
|
|
124
|
-
document.body.appendChild(
|
|
125
|
+
document.body.appendChild(_clone);
|
|
125
126
|
}
|
|
126
127
|
heroRef.current.style.visibility = "hidden";
|
|
127
128
|
otherElement.style.visibility = "hidden";
|
|
128
|
-
|
|
129
|
+
_clone.style.transition = "".concat(allPropsToTransition.map(function (prop) {
|
|
129
130
|
return "".concat(prop, " var(--animation--speed-fast, 250ms) ease-out");
|
|
130
131
|
}).join(", "));
|
|
131
132
|
setTimeout(function () {
|
|
132
|
-
|
|
133
|
-
|
|
133
|
+
var el = heroRef.current;
|
|
134
|
+
var cleanup = function cleanup() {
|
|
134
135
|
if (events.onHeroEnd) events.onHeroEnd();
|
|
135
|
-
|
|
136
|
+
_clone.remove();
|
|
136
137
|
if (el) {
|
|
137
138
|
if (repeatable) el.setAttribute(dataProperty, id);
|
|
138
139
|
el.style.visibility = "";
|
|
139
140
|
}
|
|
140
141
|
};
|
|
141
|
-
if (events.onHeroStart) events.onHeroStart(
|
|
142
|
+
if (events.onHeroStart) events.onHeroStart(_clone, otherElement, heroRef.current);
|
|
142
143
|
if (!el) {
|
|
143
144
|
cleanup();
|
|
144
145
|
return;
|
|
145
146
|
}
|
|
146
147
|
/** Set the clone over the new position */
|
|
147
|
-
|
|
148
|
+
var willMove = setCloneToCoordinatesOf(el);
|
|
148
149
|
if (!willMove) cleanup();else {
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
150
|
+
var _iterator = _createForOfIteratorHelper(propsToTransition),
|
|
151
|
+
_step;
|
|
152
|
+
try {
|
|
153
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
154
|
+
var propToTransition = _step.value;
|
|
155
|
+
_clone.style[propToTransition] = window.getComputedStyle(el)[propToTransition];
|
|
156
|
+
}
|
|
157
|
+
} catch (err) {
|
|
158
|
+
_iterator.e(err);
|
|
159
|
+
} finally {
|
|
160
|
+
_iterator.f();
|
|
161
|
+
}
|
|
162
|
+
var initialOffset;
|
|
163
|
+
var s = function s(_ref3) {
|
|
164
|
+
var target = _ref3.target;
|
|
165
|
+
var d = target;
|
|
166
|
+
if (d.contains(el)) {
|
|
167
|
+
if (initialOffset === undefined) initialOffset = d.scrollTop;else _clone.style.marginTop = "".concat(-(d.scrollTop - initialOffset), "px");
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
var transitionEndCb = (0, _ownEvent.default)(function (_ref4) {
|
|
171
|
+
var target = _ref4.target,
|
|
172
|
+
currentTarget = _ref4.currentTarget;
|
|
153
173
|
if (target === currentTarget) cleanup();
|
|
174
|
+
document.removeEventListener("scroll", s, true);
|
|
154
175
|
});
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
176
|
+
document.addEventListener("scroll", s, true);
|
|
177
|
+
_clone.addEventListener("transitionend", transitionEndCb);
|
|
178
|
+
_clone.addEventListener("transitionstart", function () {
|
|
179
|
+
var onCancelCb = (0, _ownEvent.default)(function (e) {
|
|
180
|
+
_clone.removeEventListener("transitionend", transitionEndCb);
|
|
181
|
+
_clone.removeEventListener("transitioncancel", onCancelCb);
|
|
160
182
|
});
|
|
161
|
-
|
|
183
|
+
_clone.addEventListener("transitioncancel", onCancelCb);
|
|
162
184
|
});
|
|
163
185
|
}
|
|
164
186
|
}, 0);
|
|
@@ -174,43 +196,43 @@ function useHero(id) {
|
|
|
174
196
|
};
|
|
175
197
|
}
|
|
176
198
|
function isElementOutsideViewport(coordinates) {
|
|
177
|
-
|
|
178
|
-
|
|
199
|
+
var elementOverflowsViewport = coordinates.left >= viewport.width || coordinates.top >= viewport.height;
|
|
200
|
+
var elementUnderflowsViewport = coordinates.left <= -coordinates.width || coordinates.top <= -coordinates.height;
|
|
179
201
|
return elementOverflowsViewport || elementUnderflowsViewport;
|
|
180
202
|
}
|
|
181
203
|
function isElementOutsideContainer(container, coordinates) {
|
|
182
204
|
if (container instanceof VisualViewport) {
|
|
183
205
|
return isElementOutsideViewport(coordinates);
|
|
184
206
|
} else {
|
|
185
|
-
|
|
186
|
-
|
|
207
|
+
var containerBounds = container.getBoundingClientRect();
|
|
208
|
+
var isContainerOutsideViewport = isElementOutsideViewport(containerBounds);
|
|
187
209
|
if (isContainerOutsideViewport) return true;
|
|
188
|
-
|
|
189
|
-
|
|
210
|
+
var elementOverflowsViewport = coordinates.left >= containerBounds.left + containerBounds.width || coordinates.top >= containerBounds.top + containerBounds.height;
|
|
211
|
+
var elementUnderflowsViewport = containerBounds.left - coordinates.left >= coordinates.width || containerBounds.top - coordinates.top >= coordinates.height;
|
|
190
212
|
return elementUnderflowsViewport || elementOverflowsViewport;
|
|
191
213
|
}
|
|
192
214
|
}
|
|
193
215
|
function centerPoint(rect) {
|
|
194
216
|
return [rect.left + rect.width / 2, rect.top + rect.height / 2];
|
|
195
217
|
}
|
|
196
|
-
|
|
218
|
+
var angle = function angle(pointA, pointB) {
|
|
197
219
|
return Number((Math.atan2(pointA[1] - pointB[1], pointA[0] - pointB[0]) * (179.08 / Math.PI)).toFixed(5));
|
|
198
220
|
};
|
|
199
|
-
|
|
221
|
+
var TRANSITION_FACTORY = {
|
|
200
222
|
ACCELERATION: function ACCELERATION(events) {
|
|
201
223
|
return _objectSpread(_objectSpread({}, events), {}, {
|
|
202
224
|
onHeroStart: function onHeroStart(clone, origin, target) {
|
|
203
225
|
if (events !== null && events !== void 0 && events.onHeroStart) events.onHeroStart(clone, origin, target);
|
|
204
226
|
clone.classList.add(_useHeroModule.default.acceleration);
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
227
|
+
var centerPointOrigin = centerPoint(origin.getBoundingClientRect());
|
|
228
|
+
var centerPointDestination = centerPoint(target.getBoundingClientRect());
|
|
229
|
+
var angleBetweenElements = angle(centerPointOrigin, centerPointDestination);
|
|
230
|
+
var vectorX = Math.sin(angleBetweenElements);
|
|
231
|
+
var vectorY = Math.cos(angleBetweenElements);
|
|
232
|
+
var rotateY = (10 * vectorY).toFixed(0);
|
|
233
|
+
var originX = (vectorY + 1) * 50;
|
|
234
|
+
var rotateX = -(10 * vectorX).toFixed(0);
|
|
235
|
+
var originY = (vectorX + 1) * 50;
|
|
214
236
|
clone.style.setProperty("--stage-1", "rotateY(".concat(rotateY, "deg) rotateX(").concat(-rotateX, "deg)"));
|
|
215
237
|
clone.style.setProperty("--stage-2", "rotateY(".concat(-rotateY * 0.3, "deg) rotateX(").concat(rotateX * 0.3, "deg)"));
|
|
216
238
|
clone.style.setProperty("--origin-1", "".concat(originX, "% ").concat(originY, "%"));
|
|
@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = useIntersection;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
function useIntersection() {
|
|
9
|
-
|
|
9
|
+
var _useRef = (0, _react.useRef)([]),
|
|
10
10
|
targetMap = _useRef.current;
|
|
11
|
-
|
|
12
|
-
els.forEach(function (e) {
|
|
13
|
-
|
|
11
|
+
var _useRef2 = (0, _react.useRef)("IntersectionObserver" in window ? new IntersectionObserver(function (els) {
|
|
12
|
+
els.forEach(function (e, i) {
|
|
13
|
+
var result = targetMap.find(function (el) {
|
|
14
14
|
return el[0] === e.target;
|
|
15
15
|
});
|
|
16
16
|
if (result && e.isIntersecting) {
|
|
@@ -14,7 +14,10 @@ function useMergeRefs(mainRef) {
|
|
|
14
14
|
otherRefs[_key - 1] = arguments[_key];
|
|
15
15
|
}
|
|
16
16
|
(0, _react.useLayoutEffect)(function () {
|
|
17
|
-
for (
|
|
17
|
+
for (var _i = 0, _otherRefs = otherRefs; _i < _otherRefs.length; _i++) {
|
|
18
|
+
var _ref = _otherRefs[_i];
|
|
19
|
+
_ref.current = mainRef.current;
|
|
20
|
+
}
|
|
18
21
|
}, []);
|
|
19
22
|
return mainRef;
|
|
20
23
|
}
|
|
@@ -27,8 +30,9 @@ function useMergeRefsFunc(mainRef) {
|
|
|
27
30
|
otherRefs[_key2 - 1] = arguments[_key2];
|
|
28
31
|
}
|
|
29
32
|
return function (providedRef) {
|
|
30
|
-
if (providedRef) for (
|
|
31
|
-
|
|
33
|
+
if (providedRef) for (var _i2 = 0, _arr = [mainRef].concat(otherRefs); _i2 < _arr.length; _i2++) {
|
|
34
|
+
var _ref2 = _arr[_i2];
|
|
35
|
+
if (typeof _ref2 === "function") _ref2(providedRef);else _ref2.current = providedRef;
|
|
32
36
|
}
|
|
33
37
|
};
|
|
34
38
|
}
|
package/dist/hooks/useObserve.js
CHANGED
|
@@ -9,13 +9,17 @@ require("./shims/ObjectWatchShim.js");
|
|
|
9
9
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
10
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
11
11
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
12
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
13
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
12
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
13
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
14
14
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
15
15
|
function useObserve(toObserve, keysToObserve) {
|
|
16
|
+
var _useState = (0, _react.useState)(0),
|
|
17
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
18
|
+
_ = _useState2[0],
|
|
19
|
+
ss = _useState2[1];
|
|
16
20
|
(0, _react.useLayoutEffect)(function () {
|
|
17
|
-
|
|
18
|
-
|
|
21
|
+
var arr = Array.isArray(toObserve) ? toObserve : [toObserve];
|
|
22
|
+
var unwatchers = arr.map(function (object) {
|
|
19
23
|
return object.watch(keysToObserve, function () {
|
|
20
24
|
ss(function (p) {
|
|
21
25
|
return p + 1;
|
|
@@ -10,7 +10,7 @@ exports.useLocalPagination = useLocalPagination;
|
|
|
10
10
|
var _react = require("react");
|
|
11
11
|
var _useAsyncControl2 = _interopRequireDefault(require("./useAsyncControl"));
|
|
12
12
|
var _throttle = _interopRequireDefault(require("lodash/throttle"));
|
|
13
|
-
|
|
13
|
+
var _excluded = ["process"];
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
16
16
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -21,6 +21,7 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableTo
|
|
|
21
21
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
22
22
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
23
23
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
24
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
|
24
25
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
25
26
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
26
27
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
@@ -28,23 +29,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
28
29
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
29
30
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
30
31
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
31
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
32
|
-
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
32
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
33
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
33
34
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
34
35
|
function usePagination(request) {
|
|
35
|
-
|
|
36
|
+
var paginationId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
|
|
36
37
|
return "default";
|
|
37
38
|
};
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
var startingItems = arguments.length > 2 ? arguments[2] : undefined;
|
|
40
|
+
var paginationDataRef = (0, _react.useRef)({});
|
|
41
|
+
var paginationData = paginationDataRef.current;
|
|
42
|
+
var _useState = (0, _react.useState)(function () {
|
|
42
43
|
if (startingItems) return [paginationId(), startingItems, 0];else return undefined;
|
|
43
44
|
}),
|
|
44
45
|
_useState2 = _slicedToArray(_useState, 2),
|
|
45
46
|
items = _useState2[0],
|
|
46
47
|
setItems = _useState2[1];
|
|
47
|
-
|
|
48
|
+
var _useAsyncControl = (0, _useAsyncControl2.default)(),
|
|
48
49
|
process = _useAsyncControl.process,
|
|
49
50
|
control = _objectWithoutProperties(_useAsyncControl, _excluded);
|
|
50
51
|
function updateItems(cb) {
|
|
@@ -52,24 +53,43 @@ function usePagination(request) {
|
|
|
52
53
|
return [prev[0], cb(), prev[2]];
|
|
53
54
|
});
|
|
54
55
|
}
|
|
55
|
-
|
|
56
|
+
var _requestPage = (0, _react.useCallback)(function (page) {
|
|
56
57
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
57
58
|
args[_key - 1] = arguments[_key];
|
|
58
59
|
}
|
|
59
|
-
|
|
60
|
-
process( /*#__PURE__*/_asyncToGenerator(function
|
|
60
|
+
var id = paginationId.apply(void 0, args);
|
|
61
|
+
process( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
61
62
|
var _paginationData$id;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
63
|
+
var result;
|
|
64
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
65
|
+
while (1) {
|
|
66
|
+
switch (_context.prev = _context.next) {
|
|
67
|
+
case 0:
|
|
68
|
+
if (!((_paginationData$id = paginationData[id]) !== null && _paginationData$id !== void 0 && _paginationData$id.finished)) {
|
|
69
|
+
_context.next = 2;
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
72
|
+
return _context.abrupt("return");
|
|
73
|
+
case 2:
|
|
74
|
+
_context.next = 4;
|
|
75
|
+
return request.apply(void 0, [page, (items === null || items === void 0 ? void 0 : items[0]) === id && page !== 0 ? items === null || items === void 0 ? void 0 : items[1] : undefined].concat(args));
|
|
76
|
+
case 4:
|
|
77
|
+
result = _context.sent;
|
|
78
|
+
paginationData[id] = {
|
|
79
|
+
finished: result.finished,
|
|
80
|
+
totalItems: result.totalItems
|
|
81
|
+
};
|
|
82
|
+
setItems(function (prev) {
|
|
83
|
+
if (page === 0) return [id, result.items, page];else if (!prev || id === prev[0]) return [id, result.items, page];
|
|
84
|
+
return prev;
|
|
85
|
+
});
|
|
86
|
+
case 7:
|
|
87
|
+
case "end":
|
|
88
|
+
return _context.stop();
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}, _callee);
|
|
92
|
+
})));
|
|
73
93
|
}, [items, request]);
|
|
74
94
|
return {
|
|
75
95
|
updateItems: updateItems,
|
|
@@ -94,21 +114,21 @@ function usePagination(request) {
|
|
|
94
114
|
* This returns a ref to be bound to an elements so it can be able to detect when a pagination whould occur
|
|
95
115
|
*/
|
|
96
116
|
function useContainerPagination(cb) {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
117
|
+
var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "v";
|
|
118
|
+
var scrollableRef = (0, _react.useRef)(null);
|
|
119
|
+
var customOptionsRef = (0, _react.useRef)();
|
|
100
120
|
(0, _react.useEffect)(function () {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
121
|
+
var el = scrollableRef.current;
|
|
122
|
+
var scrollElement = el.scrollingElement || el;
|
|
123
|
+
var calculateIfReachedLimit = (0, _throttle.default)(function () {
|
|
104
124
|
var _customOptionsRef$cur;
|
|
105
|
-
|
|
125
|
+
var _ref2 = ((_customOptionsRef$cur = customOptionsRef.current) === null || _customOptionsRef$cur === void 0 ? void 0 : _customOptionsRef$cur.call(customOptionsRef)) || {},
|
|
106
126
|
_ref2$offsetBottom = _ref2.offsetBottom,
|
|
107
127
|
offsetBottom = _ref2$offsetBottom === void 0 ? 0 : _ref2$offsetBottom,
|
|
108
128
|
_ref2$offsetLeft = _ref2.offsetLeft,
|
|
109
129
|
offsetLeft = _ref2$offsetLeft === void 0 ? 0 : _ref2$offsetLeft;
|
|
110
|
-
|
|
111
|
-
|
|
130
|
+
var offsetLimit = direction === "v" ? scrollElement.scrollHeight - offsetBottom - scrollElement.clientHeight * 0.6 : scrollElement.scrollWidth - offsetLeft - scrollElement.clientWidth * 0.6;
|
|
131
|
+
var offset = direction === "v" ? scrollElement.clientHeight + scrollElement.scrollTop : scrollElement.clientWidth + scrollElement.scrollLeft;
|
|
112
132
|
if (offset >= offsetLimit) {
|
|
113
133
|
cb();
|
|
114
134
|
}
|
|
@@ -133,28 +153,28 @@ function useContainerPagination(cb) {
|
|
|
133
153
|
* This function receives an amount of local instances and paginates it
|
|
134
154
|
*/
|
|
135
155
|
function useLocalPagination(items, pageSize) {
|
|
136
|
-
|
|
156
|
+
var instanceID = (0, _react.useMemo)(function () {
|
|
137
157
|
return Date.now();
|
|
138
158
|
}, [items]);
|
|
139
|
-
|
|
140
|
-
|
|
159
|
+
var cb = (0, _react.useCallback)(function (page) {
|
|
160
|
+
var currItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
141
161
|
if (!items) return Promise.resolve({
|
|
142
162
|
finished: false,
|
|
143
163
|
totalItems: 0,
|
|
144
164
|
items: []
|
|
145
165
|
});
|
|
146
|
-
|
|
147
|
-
|
|
166
|
+
var from = pageSize * page;
|
|
167
|
+
var newArray = [].concat(_toConsumableArray(currItems), _toConsumableArray(items.slice(from, from + pageSize)));
|
|
148
168
|
return Promise.resolve({
|
|
149
169
|
finished: newArray.length === items.length,
|
|
150
170
|
totalItems: items.length,
|
|
151
171
|
items: newArray
|
|
152
172
|
});
|
|
153
173
|
}, [pageSize, items]);
|
|
154
|
-
|
|
174
|
+
var pagination = usePagination(cb, function () {
|
|
155
175
|
return "".concat(instanceID);
|
|
156
176
|
}, items === null || items === void 0 ? void 0 : items.slice(0, pageSize));
|
|
157
|
-
|
|
177
|
+
var pagSrc = (0, _react.useMemo)(function () {
|
|
158
178
|
return items;
|
|
159
179
|
}, [pagination.items]);
|
|
160
180
|
return _objectSpread(_objectSpread({}, pagination), {}, {
|