@onepercentio/one-ui 0.20.4 → 0.20.5
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 +6 -0
- package/.prod.babelrc +8 -2
- 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 +27 -40
- 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 +34 -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 +17 -28
- package/dist/components/Freeze/Freeze.js +1 -1
- package/dist/components/HSForms/HSForms.js +9 -11
- package/dist/components/Header/Header.js +7 -7
- 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 +7 -7
- package/dist/components/LavaLamp/v2/LavaLamp.js +29 -45
- 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 +113 -138
- package/dist/components/PaginationIndicator/PaginationIndicator.js +50 -50
- package/dist/components/Parallax/Parallax.js +39 -39
- package/dist/components/Parallax/math/helpers.js +18 -19
- package/dist/components/PasswordInput/PasswordInput.js +10 -10
- package/dist/components/PingPongText/PingPongText.js +15 -15
- package/dist/components/PixelatedScan/PixelatedScan.js +19 -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 +44 -82
- package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.js +6 -6
- package/dist/context/AsyncProcess.js +19 -42
- package/dist/context/CustomBrowserRouter.js +6 -6
- package/dist/context/OneUIProvider.js +15 -15
- package/dist/hooks/logs/useDependencyChangeDetection.js +2 -5
- package/dist/hooks/persistence/useLocalStorage.js +7 -7
- package/dist/hooks/shims/ObjectWatchShim.js +1 -15
- 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.js +34 -34
- package/dist/hooks/ui/useSnapToViewport.js +3 -3
- package/dist/hooks/ui/useTilt.js +38 -38
- package/dist/hooks/ui/useZoomable.js +20 -20
- package/dist/hooks/useAsyncControl.js +21 -38
- 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 +26 -39
- package/dist/hooks/useForm.js +8 -8
- package/dist/hooks/useFreeze.js +1 -1
- package/dist/hooks/useHero.js +82 -90
- package/dist/hooks/useIntersection.js +3 -3
- package/dist/hooks/useMergeRefs.js +3 -7
- package/dist/hooks/useObserve.js +5 -5
- package/dist/hooks/usePagination.js +39 -59
- package/dist/hooks/usePooledOperation.js +8 -22
- package/dist/hooks/usePooling.js +17 -33
- 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 +3 -3
- package/dist/utils/blockchain.js +29 -102
- package/dist/utils/flatten.js +3 -3
- package/dist/utils/html.utils.js +1 -1
- package/package.json +1 -1
|
@@ -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++)
|
|
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
|
+
let 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
|
+
const height = el.clientHeight;
|
|
26
|
+
const width = el.clientWidth;
|
|
27
|
+
const _ballsize = height / amountOfVerticalSquares;
|
|
28
|
+
const maximumBalls = width / _ballsize;
|
|
29
|
+
const amountOfBalls = Math.floor(maximumBalls);
|
|
30
|
+
const gridData = (0, _utils.default)(amountOfVerticalSquares, amountOfBalls, _ballsize);
|
|
31
|
+
const _time = getComputedStyle(el).getPropertyValue("--animation-speed-transition");
|
|
32
|
+
const time = _time.endsWith("ms") ? Number(_time.replace("ms", "")) : Number(_time.replace("s", "")) * 1000;
|
|
33
|
+
const 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
|
+
const 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
|
+
const 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
|
+
let amountOfVerticalSquares = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
|
|
20
20
|
return function (el) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
const height = el.clientHeight;
|
|
22
|
+
const width = el.clientWidth;
|
|
23
|
+
const _ballsize = height / amountOfVerticalSquares;
|
|
24
|
+
const maximumBalls = width / _ballsize;
|
|
25
|
+
const amountOfBalls = Math.floor(maximumBalls);
|
|
26
|
+
const time = (0, _utils.getTime)(el);
|
|
27
|
+
const 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
|
+
let 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
|
+
const modX = Math.floor(i / howManyHorizontalSquare);
|
|
11
|
+
const modY = i - modX * howManyHorizontalSquare;
|
|
12
|
+
const ballsize = ballSize * 1.1;
|
|
13
|
+
const padding = (ballsize - ballSize) / 2;
|
|
14
|
+
const x = modY * ballSize - padding;
|
|
15
|
+
const 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
|
+
const _time = getComputedStyle(el.firstElementChild).getPropertyValue("--animation-speed-transition") || "250ms";
|
|
27
|
+
const __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
|
+
const _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++)
|
|
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)
|
|
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
|
+
let 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
|
+
const containerRef = (0, _react.useMemo)(function () {
|
|
117
117
|
return _containerRef || /*#__PURE__*/(0, _react.createRef)();
|
|
118
118
|
}, [_containerRef]);
|
|
119
|
-
|
|
119
|
+
const preTransitionDetails = (0, _react.useRef)({
|
|
120
120
|
transformOrigin: "initial"
|
|
121
121
|
});
|
|
122
|
-
|
|
122
|
+
const _useState = (0, _react.useState)(function () {
|
|
123
123
|
var _children$step;
|
|
124
|
-
|
|
124
|
+
const 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
|
+
const func = ChildrenWrapperFactory(function (_ref2) {
|
|
130
|
+
let 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
|
+
const prevStep = (0, _react.useRef)(step);
|
|
139
|
+
const 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
|
+
const 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
|
+
const 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
|
+
const 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
|
+
const stepToRemove = prevStep.current;
|
|
164
|
+
const prevKeyToRemove = ((_prevChild$current2 = prevChild.current) === null || _prevChild$current2 === void 0 ? void 0 : _prevChild$current2.key) || stepToRemove;
|
|
165
165
|
setChildrenWrappers(function (screensBeforeChangingStep) {
|
|
166
|
-
|
|
167
|
-
|
|
166
|
+
const enteringScreenRef = /*#__PURE__*/(0, _react.createRef)();
|
|
167
|
+
const _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
|
+
const 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
|
+
const 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
|
+
const 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
|
+
const newWrapper = ChildrenWrapperFactory(function (_ref3) {
|
|
209
|
+
let 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
|
+
const stepToDelete = prevStep.current;
|
|
219
|
+
const 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
|
+
const lastIndex = screensBeforeChangingStep.length - 1;
|
|
222
|
+
const lastWrapper = screensBeforeChangingStep[lastIndex];
|
|
223
|
+
const 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
|
+
const nextState = screensAfterTheCurrentStepEntered.filter(function (s) {
|
|
237
|
+
const 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
|
+
const 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
|
+
const newWrapper = ChildrenWrapperFactory(function (_ref4) {
|
|
252
|
+
let 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
|
+
const element = document.querySelector("#".concat(props.elementId));
|
|
271
271
|
if (element) {
|
|
272
|
-
|
|
272
|
+
const _ref5 = containerRef.current,
|
|
273
273
|
clientWidth = _ref5.clientWidth,
|
|
274
274
|
clientHeight = _ref5.clientHeight;
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
275
|
+
const offsetX = element.clientLeft + element.offsetLeft + element.clientWidth / 2;
|
|
276
|
+
const offsetY = element.clientTop + element.offsetTop + element.clientHeight / 2;
|
|
277
|
+
const percentX = offsetX * 100 / clientWidth;
|
|
278
|
+
const 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
|
+
const 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
|
+
const _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
|
+
const offsetX = clientX - offsetLeft;
|
|
304
|
+
const offsetY = clientY - offsetTop;
|
|
305
|
+
const percentX = offsetX * 100 / clientWidth;
|
|
306
|
+
const 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
|
+
const 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
|
+
let 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
|
+
const _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++)
|
|
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)
|
|
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
|
+
let _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
|
+
const sectionRef = (0, _react.useRef)(null);
|
|
51
|
+
const _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
|
+
const orientation = (0, _react.useRef)("forward");
|
|
61
61
|
function setOrientation(a) {
|
|
62
62
|
orientation.current = a;
|
|
63
63
|
}
|