@onepercentio/one-ui 0.20.3 → 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 -6
- package/.prod.babelrc +2 -9
- 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 +11 -9
- 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.js +90 -78
- 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
|
@@ -12,7 +12,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
|
|
|
12
12
|
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); }
|
|
13
13
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
14
14
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
15
|
-
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; }
|
|
15
|
+
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; }
|
|
16
16
|
/**
|
|
17
17
|
* DO NOT DARE TO USE THIS IF YOU HAVE A MINIMAL RESPECT FOR PERFORMANCE
|
|
18
18
|
*
|
|
@@ -20,17 +20,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
20
20
|
* @param amountOfVerticalSquares The amount of squares vertically to be shown
|
|
21
21
|
*/
|
|
22
22
|
function PhysicsSquares() {
|
|
23
|
-
|
|
23
|
+
var amountOfVerticalSquares = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
|
|
24
24
|
return function (el) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
var height = el.clientHeight;
|
|
26
|
+
var width = el.clientWidth;
|
|
27
|
+
var _ballsize = height / amountOfVerticalSquares;
|
|
28
|
+
var maximumBalls = width / _ballsize;
|
|
29
|
+
var amountOfBalls = Math.floor(maximumBalls);
|
|
30
|
+
var gridData = (0, _utils.default)(amountOfVerticalSquares, amountOfBalls, _ballsize);
|
|
31
|
+
var _time = getComputedStyle(el).getPropertyValue("--animation-speed-transition");
|
|
32
|
+
var time = _time.endsWith("ms") ? Number(_time.replace("ms", "")) : Number(_time.replace("s", "")) * 1000;
|
|
33
|
+
var canvas = document.createElement("canvas");
|
|
34
34
|
canvas.width = el.clientWidth / 10;
|
|
35
35
|
canvas.height = el.clientHeight / 10;
|
|
36
36
|
// module aliases
|
|
@@ -71,7 +71,7 @@ function PhysicsSquares() {
|
|
|
71
71
|
angle: 0.1,
|
|
72
72
|
isStatic: true
|
|
73
73
|
});
|
|
74
|
-
|
|
74
|
+
var gridBodies = gridData.map(function (a) {
|
|
75
75
|
return Bodies.circle(a.x + a.ballSize / 2 + Math.random() * a.ballSize / 2, a.y + a.ballSize / 2 + Math.random() * a.ballSize / 2, a.ballSize / 4 + Math.random() * a.ballSize / 4, {
|
|
76
76
|
density: 0.1,
|
|
77
77
|
render: {
|
|
@@ -91,7 +91,7 @@ function PhysicsSquares() {
|
|
|
91
91
|
|
|
92
92
|
// run the engine
|
|
93
93
|
Runner.run(runner, engine);
|
|
94
|
-
|
|
94
|
+
var i = setInterval(function () {
|
|
95
95
|
el.firstElementChild.style.webkitMaskImage = "url('".concat(canvas.toDataURL("base64"), "')");
|
|
96
96
|
}, 1000 / 60);
|
|
97
97
|
setTimeout(function () {
|
|
@@ -16,19 +16,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
16
16
|
* @param amountOfVerticalSquares The amount of squares vertically to be shown
|
|
17
17
|
*/
|
|
18
18
|
function _default() {
|
|
19
|
-
|
|
19
|
+
var amountOfVerticalSquares = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
|
|
20
20
|
return function (el) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
var height = el.clientHeight;
|
|
22
|
+
var width = el.clientWidth;
|
|
23
|
+
var _ballsize = height / amountOfVerticalSquares;
|
|
24
|
+
var maximumBalls = width / _ballsize;
|
|
25
|
+
var amountOfBalls = Math.floor(maximumBalls);
|
|
26
|
+
var time = (0, _utils.getTime)(el);
|
|
27
|
+
var resultSvg = (0, _server.renderToString)( /*#__PURE__*/_react.default.createElement("svg", {
|
|
28
28
|
xmlns: "http://www.w3.org/2000/svg",
|
|
29
29
|
id: Date.now().toString()
|
|
30
30
|
}, (0, _utils.default)(amountOfVerticalSquares, amountOfBalls, _ballsize).map(function (_ref) {
|
|
31
|
-
|
|
31
|
+
var ballSize = _ref.ballSize,
|
|
32
32
|
x = _ref.x,
|
|
33
33
|
y = _ref.y;
|
|
34
34
|
return /*#__PURE__*/_react.default.createElement("rect", {
|
|
@@ -7,12 +7,12 @@ exports.default = buildGrid;
|
|
|
7
7
|
exports.getTime = getTime;
|
|
8
8
|
function buildGrid(amountOfVerticalSquares, howManyHorizontalSquare, ballSize) {
|
|
9
9
|
return new Array(howManyHorizontalSquare * amountOfVerticalSquares).fill(undefined).map(function (_, i) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
var modX = Math.floor(i / howManyHorizontalSquare);
|
|
11
|
+
var modY = i - modX * howManyHorizontalSquare;
|
|
12
|
+
var ballsize = ballSize * 1.1;
|
|
13
|
+
var padding = (ballsize - ballSize) / 2;
|
|
14
|
+
var x = modY * ballSize - padding;
|
|
15
|
+
var y = modX * ballSize - padding;
|
|
16
16
|
return {
|
|
17
17
|
x: x,
|
|
18
18
|
y: y,
|
|
@@ -23,7 +23,7 @@ function buildGrid(amountOfVerticalSquares, howManyHorizontalSquare, ballSize) {
|
|
|
23
23
|
});
|
|
24
24
|
}
|
|
25
25
|
function getTime(el) {
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
var _time = getComputedStyle(el.firstElementChild).getPropertyValue("--animation-speed-transition") || "250ms";
|
|
27
|
+
var __time = _time.endsWith("ms") ? Number(_time.replace("ms", "")) : Number(_time.replace("s", "")) * 1000;
|
|
28
28
|
return __time + 50;
|
|
29
29
|
}
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.TransitionAnimationTypes = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _TransitionModule = _interopRequireDefault(require("./Transition.module.scss"));
|
|
10
|
-
|
|
10
|
+
var _excluded = ["step", "contentStyle", "contentClassName", "children", "className", "onDiscardStep", "lockTransitionWidth", "lockTransitionHeight"];
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -25,8 +25,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
|
|
|
25
25
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
26
26
|
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."); }
|
|
27
27
|
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); }
|
|
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
|
-
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; } }
|
|
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
|
+
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; } }
|
|
30
30
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
31
31
|
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; }
|
|
32
32
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -101,7 +101,7 @@ function ChildrenWrapperFactory(func, key, externalPropsContainer, toRemoveKeys)
|
|
|
101
101
|
* Handles the transition between multiple children and recycling of elements
|
|
102
102
|
**/
|
|
103
103
|
function Transition(_ref, _containerRef) {
|
|
104
|
-
|
|
104
|
+
var step = _ref.step,
|
|
105
105
|
contentStyle = _ref.contentStyle,
|
|
106
106
|
_ref$contentClassName = _ref.contentClassName,
|
|
107
107
|
contentClassName = _ref$contentClassName === void 0 ? "" : _ref$contentClassName,
|
|
@@ -113,21 +113,21 @@ function Transition(_ref, _containerRef) {
|
|
|
113
113
|
_ref$lockTransitionHe = _ref.lockTransitionHeight,
|
|
114
114
|
lockTransitionHeight = _ref$lockTransitionHe === void 0 ? false : _ref$lockTransitionHe,
|
|
115
115
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
116
|
-
|
|
116
|
+
var containerRef = (0, _react.useMemo)(function () {
|
|
117
117
|
return _containerRef || /*#__PURE__*/(0, _react.createRef)();
|
|
118
118
|
}, [_containerRef]);
|
|
119
|
-
|
|
119
|
+
var preTransitionDetails = (0, _react.useRef)({
|
|
120
120
|
transformOrigin: "initial"
|
|
121
121
|
});
|
|
122
|
-
|
|
122
|
+
var _useState = (0, _react.useState)(function () {
|
|
123
123
|
var _children$step;
|
|
124
|
-
|
|
124
|
+
var externalProps = {
|
|
125
125
|
key: String(((_children$step = children[step]) === null || _children$step === void 0 ? void 0 : _children$step.key) || step),
|
|
126
126
|
style: contentStyle,
|
|
127
127
|
className: contentClassName
|
|
128
128
|
};
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
var func = ChildrenWrapperFactory(function (_ref2) {
|
|
130
|
+
var children = _ref2.children;
|
|
131
131
|
return /*#__PURE__*/_react.default.createElement("div", externalProps, children);
|
|
132
132
|
}, children[step].key || step, externalProps, []);
|
|
133
133
|
return [func];
|
|
@@ -135,8 +135,8 @@ function Transition(_ref, _containerRef) {
|
|
|
135
135
|
_useState2 = _slicedToArray(_useState, 2),
|
|
136
136
|
childrenWrappers = _useState2[0],
|
|
137
137
|
setChildrenWrappers = _useState2[1];
|
|
138
|
-
|
|
139
|
-
|
|
138
|
+
var prevStep = (0, _react.useRef)(step);
|
|
139
|
+
var prevChild = (0, _react.useRef)(children[step]);
|
|
140
140
|
(0, _react.useEffect)(function () {
|
|
141
141
|
return function () {
|
|
142
142
|
prevChild.current = children[step];
|
|
@@ -145,26 +145,26 @@ function Transition(_ref, _containerRef) {
|
|
|
145
145
|
(0, _react.useEffect)(function () {
|
|
146
146
|
var _children$step2, _prevChild$current, _children$step3;
|
|
147
147
|
containerRef.current.style.overflow = "hidden";
|
|
148
|
-
|
|
148
|
+
var transitionClasses = props.transitionType === TransitionAnimationTypes.CUSTOM ? props.config : TransitionClasses(props.transitionType || TransitionAnimationTypes.SLIDE);
|
|
149
149
|
if (prevChild.current !== null && ((_children$step2 = children[step]) === null || _children$step2 === void 0 ? void 0 : _children$step2.key) === ((_prevChild$current = prevChild.current) === null || _prevChild$current === void 0 ? void 0 : _prevChild$current.key) // I'm rendering the same screen
|
|
150
150
|
) {
|
|
151
151
|
return function () {
|
|
152
152
|
prevStep.current = step;
|
|
153
153
|
};
|
|
154
154
|
}
|
|
155
|
-
|
|
155
|
+
var key = ((_children$step3 = children[step]) === null || _children$step3 === void 0 ? void 0 : _children$step3.key) || step;
|
|
156
156
|
if (prevStep.current !== step && lockTransitionWidth) containerRef.current.style.width = "".concat(containerRef.current.clientWidth, "px");
|
|
157
157
|
if (prevStep.current !== step && lockTransitionHeight) containerRef.current.style.height = "".concat(containerRef.current.clientHeight, "px");
|
|
158
|
-
|
|
158
|
+
var transitionMask = props.transitionType === TransitionAnimationTypes.MASK ? props.maskFactory(containerRef.current) : "";
|
|
159
159
|
|
|
160
160
|
/** This runs on backwards */
|
|
161
161
|
if (prevStep.current > step) {
|
|
162
162
|
var _prevChild$current2;
|
|
163
|
-
|
|
164
|
-
|
|
163
|
+
var stepToRemove = prevStep.current;
|
|
164
|
+
var prevKeyToRemove = ((_prevChild$current2 = prevChild.current) === null || _prevChild$current2 === void 0 ? void 0 : _prevChild$current2.key) || stepToRemove;
|
|
165
165
|
setChildrenWrappers(function (screensBeforeChangingStep) {
|
|
166
|
-
|
|
167
|
-
|
|
166
|
+
var enteringScreenRef = /*#__PURE__*/(0, _react.createRef)();
|
|
167
|
+
var _screensBeforeChangin = screensBeforeChangingStep.filter(function (a) {
|
|
168
168
|
return (a === null || a === void 0 ? void 0 : a.associatedKey) !== String(key);
|
|
169
169
|
}),
|
|
170
170
|
_screensBeforeChangin2 = _toArray(_screensBeforeChangin),
|
|
@@ -181,7 +181,7 @@ function Transition(_ref, _containerRef) {
|
|
|
181
181
|
function animationEndListener(event) {
|
|
182
182
|
var _enteringScreenRef$cu, _enteringScreenRef$cu2;
|
|
183
183
|
if (event.target !== event.currentTarget) return;
|
|
184
|
-
|
|
184
|
+
var isAnimationFromExpectedState = (_enteringScreenRef$cu = enteringScreenRef.current) === null || _enteringScreenRef$cu === void 0 ? void 0 : _enteringScreenRef$cu.classList.contains(transitionClasses.backward.elementEntering);
|
|
185
185
|
(_enteringScreenRef$cu2 = enteringScreenRef.current) === null || _enteringScreenRef$cu2 === void 0 ? void 0 : _enteringScreenRef$cu2.classList.remove(transitionClasses.backward.elementEntering);
|
|
186
186
|
setChildrenWrappers(function (screensAfterTheCurrentStepEntered) {
|
|
187
187
|
if (onDiscardStep) {
|
|
@@ -190,7 +190,7 @@ function Transition(_ref, _containerRef) {
|
|
|
190
190
|
}
|
|
191
191
|
return screensAfterTheCurrentStepEntered.filter(function (s) {
|
|
192
192
|
var _FirstNextScreen$toRe;
|
|
193
|
-
|
|
193
|
+
var shouldKeep = (s === null || s === void 0 ? void 0 : s.associatedKey) !== String(prevKeyToRemove) && !(FirstNextScreen !== null && FirstNextScreen !== void 0 && (_FirstNextScreen$toRe = FirstNextScreen.toRemoveKeys) !== null && _FirstNextScreen$toRe !== void 0 && _FirstNextScreen$toRe.some(function (k) {
|
|
194
194
|
return String(k) === String(s === null || s === void 0 ? void 0 : s.associatedKey);
|
|
195
195
|
}));
|
|
196
196
|
return shouldKeep;
|
|
@@ -198,15 +198,15 @@ function Transition(_ref, _containerRef) {
|
|
|
198
198
|
});
|
|
199
199
|
event.currentTarget.removeEventListener("animationend", animationEndListener);
|
|
200
200
|
}
|
|
201
|
-
|
|
201
|
+
var propsContainer = {
|
|
202
202
|
ref: enteringScreenRef,
|
|
203
203
|
key: key,
|
|
204
204
|
className: "".concat(transitionClasses.backward.elementEntering, " ").concat(contentClassName),
|
|
205
205
|
style: _objectSpread({}, contentStyle),
|
|
206
206
|
onAnimationEnd: animationEndListener
|
|
207
207
|
};
|
|
208
|
-
|
|
209
|
-
|
|
208
|
+
var newWrapper = ChildrenWrapperFactory(function (_ref3) {
|
|
209
|
+
var children = _ref3.children;
|
|
210
210
|
return /*#__PURE__*/_react.default.createElement("div", propsContainer, children);
|
|
211
211
|
}, key, propsContainer, [prevKeyToRemove].concat(_toConsumableArray((FirstNextScreen === null || FirstNextScreen === void 0 ? void 0 : FirstNextScreen.toRemoveKeys) || [])));
|
|
212
212
|
if (FirstNextScreen) return [newWrapper, FirstNextScreen || ChildrenWrapperFactory(function () {
|
|
@@ -215,12 +215,12 @@ function Transition(_ref, _containerRef) {
|
|
|
215
215
|
});
|
|
216
216
|
} else if (prevStep.current < step) {
|
|
217
217
|
var _prevChild$current3;
|
|
218
|
-
|
|
219
|
-
|
|
218
|
+
var stepToDelete = prevStep.current;
|
|
219
|
+
var _prevKeyToRemove = String(((_prevChild$current3 = prevChild.current) === null || _prevChild$current3 === void 0 ? void 0 : _prevChild$current3.key) || stepToDelete);
|
|
220
220
|
setChildrenWrappers(function (screensBeforeChangingStep) {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
221
|
+
var lastIndex = screensBeforeChangingStep.length - 1;
|
|
222
|
+
var lastWrapper = screensBeforeChangingStep[lastIndex];
|
|
223
|
+
var nextScreenRef = /*#__PURE__*/(0, _react.createRef)();
|
|
224
224
|
if (lastWrapper) {
|
|
225
225
|
Object.assign(lastWrapper.externalProps, {
|
|
226
226
|
style: _objectSpread(_objectSpread({}, contentStyle), {}, {
|
|
@@ -231,10 +231,10 @@ function Transition(_ref, _containerRef) {
|
|
|
231
231
|
var _nextScreenRef$curren;
|
|
232
232
|
if (e.target !== e.currentTarget) return;
|
|
233
233
|
if (transitionClasses.forward.elementEntering) (_nextScreenRef$curren = nextScreenRef.current) === null || _nextScreenRef$curren === void 0 ? void 0 : _nextScreenRef$curren.classList.remove(transitionClasses.forward.elementEntering);
|
|
234
|
-
if (onDiscardStep) onDiscardStep(
|
|
234
|
+
if (onDiscardStep) onDiscardStep(_prevKeyToRemove);
|
|
235
235
|
setChildrenWrappers(function (screensAfterTheCurrentStepEntered) {
|
|
236
|
-
|
|
237
|
-
|
|
236
|
+
var nextState = screensAfterTheCurrentStepEntered.filter(function (s) {
|
|
237
|
+
var shouldMantain = (s === null || s === void 0 ? void 0 : s.associatedKey) !== String(_prevKeyToRemove);
|
|
238
238
|
return shouldMantain;
|
|
239
239
|
});
|
|
240
240
|
return nextState;
|
|
@@ -242,14 +242,14 @@ function Transition(_ref, _containerRef) {
|
|
|
242
242
|
}
|
|
243
243
|
});
|
|
244
244
|
}
|
|
245
|
-
|
|
245
|
+
var propsContainer = {
|
|
246
246
|
ref: nextScreenRef,
|
|
247
247
|
key: key,
|
|
248
248
|
style: _objectSpread({}, contentStyle),
|
|
249
249
|
className: "".concat(contentClassName, " ").concat(transitionClasses.forward.elementEntering)
|
|
250
250
|
};
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
var newWrapper = ChildrenWrapperFactory(function (_ref4) {
|
|
252
|
+
var children = _ref4.children;
|
|
253
253
|
return /*#__PURE__*/_react.default.createElement("div", propsContainer, children);
|
|
254
254
|
}, key, propsContainer);
|
|
255
255
|
return [].concat(_toConsumableArray(screensBeforeChangingStep.slice(0, lastIndex)), [lastWrapper || ChildrenWrapperFactory(function () {
|
|
@@ -267,15 +267,15 @@ function Transition(_ref, _containerRef) {
|
|
|
267
267
|
}, [childrenWrappers.length !== 1]);
|
|
268
268
|
(0, _react.useEffect)(function () {
|
|
269
269
|
if (props.transitionType === TransitionAnimationTypes.POP_FROM_ELEMENT_ID && "elementId" in props) {
|
|
270
|
-
|
|
270
|
+
var element = document.querySelector("#".concat(props.elementId));
|
|
271
271
|
if (element) {
|
|
272
|
-
|
|
272
|
+
var _ref5 = containerRef.current,
|
|
273
273
|
clientWidth = _ref5.clientWidth,
|
|
274
274
|
clientHeight = _ref5.clientHeight;
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
275
|
+
var offsetX = element.clientLeft + element.offsetLeft + element.clientWidth / 2;
|
|
276
|
+
var offsetY = element.clientTop + element.offsetTop + element.clientHeight / 2;
|
|
277
|
+
var percentX = offsetX * 100 / clientWidth;
|
|
278
|
+
var percentY = offsetY * 100 / clientHeight;
|
|
279
279
|
preTransitionDetails.current.transformOrigin = "".concat(percentX, "% ").concat(percentY, "%");
|
|
280
280
|
Object.assign(containerRef.current.style, {
|
|
281
281
|
transformOrigin: "".concat(percentX, "% ").concat(percentY, "%")
|
|
@@ -288,29 +288,29 @@ function Transition(_ref, _containerRef) {
|
|
|
288
288
|
containerRef.current.style.overflow = "";
|
|
289
289
|
}
|
|
290
290
|
}, [childrenWrappers.length]);
|
|
291
|
-
|
|
291
|
+
var propsToSpread = _objectSpread({}, props);
|
|
292
292
|
delete propsToSpread.transitionType;
|
|
293
293
|
delete propsToSpread.config;
|
|
294
294
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("section", _extends({}, propsToSpread, {
|
|
295
295
|
onClick: function onClick(e) {
|
|
296
|
-
|
|
296
|
+
var _e$currentTarget = e.currentTarget,
|
|
297
297
|
offsetTop = _e$currentTarget.offsetTop,
|
|
298
298
|
offsetLeft = _e$currentTarget.offsetLeft,
|
|
299
299
|
clientWidth = _e$currentTarget.clientWidth,
|
|
300
300
|
clientHeight = _e$currentTarget.clientHeight,
|
|
301
301
|
clientX = e.clientX,
|
|
302
302
|
clientY = e.clientY;
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
303
|
+
var offsetX = clientX - offsetLeft;
|
|
304
|
+
var offsetY = clientY - offsetTop;
|
|
305
|
+
var percentX = offsetX * 100 / clientWidth;
|
|
306
|
+
var percentY = offsetY * 100 / clientHeight;
|
|
307
307
|
if (props.transitionType === TransitionAnimationTypes.POP_FROM_ELEMENT_ID || props.transitionType === TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN) preTransitionDetails.current.transformOrigin = "".concat(percentX, "% ").concat(percentY, "%");
|
|
308
308
|
if (props.onClick) props.onClick(e);
|
|
309
309
|
},
|
|
310
310
|
ref: containerRef,
|
|
311
311
|
className: "".concat(_TransitionModule.default.section, " ").concat(className)
|
|
312
312
|
}), childrenWrappers.map(function (Wrapper) {
|
|
313
|
-
|
|
313
|
+
var childToRender = children.find(function (a, i) {
|
|
314
314
|
return ((a === null || a === void 0 ? void 0 : a.key) || i) === (Wrapper === null || Wrapper === void 0 ? void 0 : Wrapper.associatedKey);
|
|
315
315
|
});
|
|
316
316
|
return /*#__PURE__*/_react.default.createElement(Wrapper, {
|
|
@@ -318,7 +318,7 @@ function Transition(_ref, _containerRef) {
|
|
|
318
318
|
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childToRender));
|
|
319
319
|
})));
|
|
320
320
|
}
|
|
321
|
-
|
|
321
|
+
var TransitionAnimationTypes = /*#__PURE__*/function (TransitionAnimationTypes) {
|
|
322
322
|
TransitionAnimationTypes[TransitionAnimationTypes["SLIDE"] = 0] = "SLIDE";
|
|
323
323
|
TransitionAnimationTypes[TransitionAnimationTypes["POP_FROM_CLICK_ORIGIN"] = 1] = "POP_FROM_CLICK_ORIGIN";
|
|
324
324
|
TransitionAnimationTypes[TransitionAnimationTypes["POP_FROM_ELEMENT_ID"] = 2] = "POP_FROM_ELEMENT_ID";
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _Transition = _interopRequireDefault(require("../Transition"));
|
|
10
|
-
|
|
10
|
+
var _excluded = ["className", "contentClassName", "children", "lockTransitionWidth", "lockTransitionHeight", "contentStyle", "onDiscardStep"];
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -24,8 +24,8 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
|
|
|
24
24
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
25
25
|
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."); }
|
|
26
26
|
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); }
|
|
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
|
-
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; } }
|
|
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
|
+
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; } }
|
|
29
29
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
30
30
|
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; }
|
|
31
31
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -33,7 +33,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
33
33
|
* This component handles when a child changes and transition this child change, allowing the finest experiences
|
|
34
34
|
**/
|
|
35
35
|
function UncontrolledTransition(_ref, ref) {
|
|
36
|
-
|
|
36
|
+
var _ref$className = _ref.className,
|
|
37
37
|
className = _ref$className === void 0 ? "" : _ref$className,
|
|
38
38
|
contentClassName = _ref.contentClassName,
|
|
39
39
|
_ref$children = _ref.children,
|
|
@@ -47,8 +47,8 @@ function UncontrolledTransition(_ref, ref) {
|
|
|
47
47
|
contentStyle = _ref.contentStyle,
|
|
48
48
|
_onDiscardStep = _ref.onDiscardStep,
|
|
49
49
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
var sectionRef = (0, _react.useRef)(null);
|
|
51
|
+
var _useState = (0, _react.useState)({
|
|
52
52
|
childStack: [children],
|
|
53
53
|
offset: 1
|
|
54
54
|
}),
|
|
@@ -57,7 +57,7 @@ function UncontrolledTransition(_ref, ref) {
|
|
|
57
57
|
childStack = _useState2$.childStack,
|
|
58
58
|
offset = _useState2$.offset,
|
|
59
59
|
setChildStack = _useState2[1];
|
|
60
|
-
|
|
60
|
+
var orientation = (0, _react.useRef)("forward");
|
|
61
61
|
function setOrientation(a) {
|
|
62
62
|
orientation.current = a;
|
|
63
63
|
}
|