@onepercentio/one-ui 0.8.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/hooks/usePagination.d.ts +1 -0
  2. package/dist/hooks/usePagination.js +2 -2
  3. package/dist/hooks/usePagination.js.map +1 -1
  4. package/package.json +1 -1
  5. package/dist/assets/img/svg/checkbox.svg +0 -3
  6. package/dist/assets/styles/index.scss +0 -2
  7. package/dist/assets/styles/mixins.scss +0 -12
  8. package/dist/assets/styles/variables.scss +0 -51
  9. package/dist/components/AdaptiveButton/AdaptiveButton.module.scss +0 -51
  10. package/dist/components/AdaptiveContainer/AdaptiveContainer.module.scss +0 -51
  11. package/dist/components/AdaptiveDialog/AdaptiveDialog.module.scss +0 -145
  12. package/dist/components/AdaptiveSidebar/AdaptiveSidebar.module.scss +0 -52
  13. package/dist/components/AnchoredTooltip/AnchoredTooltip.module.scss +0 -62
  14. package/dist/components/AnimatedEntrance/AnimatedEntrance.module.scss +0 -107
  15. package/dist/components/Avatar/Avatar.module.scss +0 -22
  16. package/dist/components/Background/Background.d.ts +0 -7
  17. package/dist/components/Background/Background.js +0 -58
  18. package/dist/components/Background/Background.js.map +0 -1
  19. package/dist/components/Background/Background.module.scss +0 -106
  20. package/dist/components/Background/Background.stories.d.ts +0 -7
  21. package/dist/components/Background/Background.stories.js +0 -30
  22. package/dist/components/Background/Background.stories.js.map +0 -1
  23. package/dist/components/Background/ground-tile.svg +0 -9
  24. package/dist/components/Background/index.d.ts +0 -1
  25. package/dist/components/Background/index.js +0 -9
  26. package/dist/components/Background/index.js.map +0 -1
  27. package/dist/components/BucketFill/BucketFill.module.scss +0 -36
  28. package/dist/components/BucketFill/BucketFill.stories.module.scss +0 -3
  29. package/dist/components/Button/Button.module.scss +0 -42
  30. package/dist/components/Card/Card.module.scss +0 -12
  31. package/dist/components/CheckBox/CheckBox.module.scss +0 -25
  32. package/dist/components/Collapsable/Collapsable.module.scss +0 -34
  33. package/dist/components/Divider/Divider.module.scss +0 -7
  34. package/dist/components/EmailInput/EmailInput.module.scss +0 -0
  35. package/dist/components/FadeIn/FadeIn.module.scss +0 -18
  36. package/dist/components/FileInput/FileInput.module.scss +0 -27
  37. package/dist/components/FlowController/FlowController.module.scss +0 -47
  38. package/dist/components/Header/Header.module.scss +0 -119
  39. package/dist/components/HeaderCloseBtn/HeaderCloseBtn.module.scss +0 -44
  40. package/dist/components/InfinityScroll/InfinityScroll.module.scss +0 -30
  41. package/dist/components/Input/Input.module.scss +0 -69
  42. package/dist/components/LinkToId/LinkToId.module.scss +0 -4
  43. package/dist/components/Loader/Loader.module.scss +0 -40
  44. package/dist/components/MainGrid/MainGrid.module.scss +0 -28
  45. package/dist/components/MutableHamburgerButton/MutableHamburgerButton.module.scss +0 -179
  46. package/dist/components/Notification/Notification.module.scss +0 -25
  47. package/dist/components/Parallax/Parallax.module.scss +0 -28
  48. package/dist/components/PasswordInput/PasswordInput.module.scss +0 -11
  49. package/dist/components/PixelatedScan/PixelatedScan.module.scss +0 -86
  50. package/dist/components/Portal/Portal.module.scss +0 -3
  51. package/dist/components/ProgressBar/ProgressBar.module.scss +0 -32
  52. package/dist/components/ProgressTexts/ProgressTexts.module.scss +0 -37
  53. package/dist/components/SectionContainer/SectionContainer.module.scss +0 -30
  54. package/dist/components/Select/Select.module.scss +0 -46
  55. package/dist/components/Spacing/Spacing.module.scss +0 -13
  56. package/dist/components/Table/Table.module.scss +0 -76
  57. package/dist/components/Tabs/Tabs.module.scss +0 -22
  58. package/dist/components/Text/Text.module.scss +0 -77
  59. package/dist/components/Transition/Transition.module.scss +0 -188
  60. package/dist/components/Transition/TransitionContainer/TransitionContainer.d.ts +0 -4
  61. package/dist/components/Transition/TransitionContainer/TransitionContainer.js +0 -14
  62. package/dist/components/Transition/TransitionContainer/TransitionContainer.js.map +0 -1
  63. package/dist/components/Transition/TransitionContainer/index.d.ts +0 -1
  64. package/dist/components/Transition/TransitionContainer/index.js +0 -9
  65. package/dist/components/Transition/TransitionContainer/index.js.map +0 -1
  66. package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.module.scss +0 -66
  67. package/dist/components/utilitary/ScrollAndFocusLock/ScrollAndFocusLock.module.scss +0 -5
  68. package/dist/context/AsyncProcessQueue.d.ts +0 -37
  69. package/dist/context/AsyncProcessQueue.js +0 -160
  70. package/dist/context/AsyncProcessQueue.js.map +0 -1
  71. package/dist/context/OneUIProvider.test.d.ts +0 -1
  72. package/dist/context/OneUIProvider.test.js +0 -45
  73. package/dist/context/OneUIProvider.test.js.map +0 -1
  74. package/dist/types.d.ts +0 -85
@@ -1,76 +0,0 @@
1
- @import "../../assets/styles/index.scss";
2
-
3
- .transitionContainer {
4
- min-height: auto;
5
- max-width: 100vw;
6
- overflow: auto;
7
- }
8
-
9
- .container {
10
- font-family: $mainFontFamily;
11
- padding: 0px 4px;
12
- width: 100%;
13
- position: relative;
14
- border-spacing: 0px;
15
- th {
16
- font-family: 14px;
17
- line-height: 28px;
18
- text-align: start;
19
- font-weight: normal;
20
- }
21
- td,
22
- th {
23
- padding: 20px;
24
- }
25
- tbody tr {
26
- background-color: $tableRowBgColor;
27
- &:first-child td {
28
- &:first-child {
29
- border-top-left-radius: 8px;
30
- }
31
- &:last-child {
32
- border-top-right-radius: 8px;
33
- }
34
- border-top: 1px solid $tableRowBorderColor;
35
- }
36
- &:last-child td {
37
- &:first-child {
38
- border-bottom-left-radius: 8px;
39
- }
40
- &:last-child {
41
- border-bottom-right-radius: 8px;
42
- }
43
- }
44
- td {
45
- border-bottom: 1px solid $tableRowBorderColor;
46
- &:first-child {
47
- border-left: 1px solid $tableRowBorderColor;
48
- }
49
- &:last-child {
50
- border-right: 1px solid $tableRowBorderColor;
51
- }
52
- }
53
- }
54
- }
55
- .footer {
56
- padding: 0px 4px;
57
- display: flex;
58
- align-items: center;
59
- justify-content: flex-end;
60
- --button-min-width: auto;
61
- --button-min-height: auto;
62
-
63
- .paging {
64
- font-family: $mainFontFamily;
65
- color: $digitalBlue;
66
- margin: 0px 12px;
67
- font-size: 18px;
68
- }
69
- }
70
-
71
- .iterable {
72
- @include iteractibleElement;
73
- &:first-child {
74
- margin-left: auto;
75
- }
76
- }
@@ -1,22 +0,0 @@
1
- @import "../../assets/styles/index.scss";
2
-
3
- .container {
4
- overflow-x: auto;
5
- display: flex;
6
- position: relative;
7
- align-items: flex-start;
8
- p {
9
- cursor: pointer;
10
- margin: 1em 2em;
11
- &.selected {
12
- font-weight: bold;
13
- }
14
- }
15
- }
16
-
17
- .guide {
18
- height: 0.1em;
19
- background-color: $digitalBlue;
20
- position: absolute;
21
- transition: left $fast, width $fast, top $fast;
22
- }
@@ -1,77 +0,0 @@
1
- @import "../../assets/styles/index.scss";
2
-
3
- .title {
4
- font-weight: 300;
5
- font-size: 22px;
6
- line-height: 33px;
7
- }
8
- .boldTitle {
9
- font-family: $secondaryFontFamily;
10
- font-size: 24px;
11
- font-weight: bolder;
12
- line-height: 26px;
13
- }
14
- .boldTitleBig {
15
- font-family: $secondaryFontFamily;
16
- font-size: 28px;
17
- font-weight: bolder;
18
- line-height: 33.8px;
19
- }
20
- .content {
21
- font-size: 16px;
22
- line-height: 24px;
23
- font-family: $mainFontFamily;
24
- }
25
- .icon.description {
26
- font-size: 14px;
27
- line-height: 21px;
28
- color: $darkestGray;
29
- }
30
- .text.error,
31
- .text.caption {
32
- font-size: 12px;
33
- line-height: 18px;
34
- }
35
- .text.error {
36
- color: $warningRed;
37
- }
38
- .text {
39
- margin: 0px;
40
- font-family: $mainFontFamily;
41
- white-space: pre-wrap;
42
- color: $textDefaultColor;
43
- }
44
- .highlightTitle {
45
- font-family: $secondaryFontFamily;
46
- font-size: 24px;
47
- font-weight: bolder;
48
- line-height: 29px;
49
- color: $sunsetPink;
50
- }
51
- .subtitle {
52
- font-family: $secondaryFontFamily;
53
- font-size: 20px;
54
- font-weight: 800;
55
- line-height: 22px;
56
- color: var(--text-default-color, $gray);
57
- }
58
- .link {
59
- font-family: $mainFontFamily;
60
- font-size: 12px;
61
- font-weight: 400;
62
- line-height: 18px;
63
- }
64
- .iteractible {
65
- cursor: pointer;
66
- &:hover {
67
- text-decoration: underline;
68
- }
69
- }
70
-
71
- .highlight {
72
- font-family: $secondaryFontFamily;
73
- font-size: 14px;
74
- font-weight: 500;
75
- line-height: 20px;
76
- color: $sunsetPink;
77
- }
@@ -1,188 +0,0 @@
1
- @import "../../assets/styles/index.scss";
2
-
3
- .section {
4
- * {
5
- box-sizing: border-box;
6
- }
7
- position: relative;
8
- min-height: 250px;
9
- display: flex;
10
- align-items: center;
11
- > div {
12
- display: flex;
13
- flex-direction: column;
14
- min-height: inherit;
15
- min-width: 100%;
16
- animation-duration: var(--animation-speed-transition, $fast);
17
- animation-timing-function: var(--animation-timing-transition, initial);
18
- animation-fill-mode: forwards;
19
- transform-origin: inherit;
20
- }
21
- }
22
-
23
- div.entranceLeft {
24
- animation-name: entranceLeft;
25
- }
26
- div.exitLeft {
27
- animation-name: exitLeft;
28
- }
29
-
30
- @keyframes entranceLeft {
31
- 0% {
32
- margin-left: -100%;
33
- }
34
- 100% {
35
- margin-left: 0%;
36
- }
37
- }
38
- @keyframes exitLeft {
39
- 0% {
40
- margin-left: 0%;
41
- }
42
- 100% {
43
- margin-left: -100%;
44
- }
45
- }
46
-
47
- div.fadeOut {
48
- animation-name: fadeOut;
49
- position: absolute;
50
- }
51
-
52
- @keyframes fadeOut {
53
- 0% {
54
- opacity: 1;
55
- }
56
- 100% {
57
- opacity: 0;
58
- }
59
- }
60
-
61
- div.scaleIn {
62
- animation-fill-mode: forwards;
63
- animation-name: scaleIn;
64
- }
65
-
66
- @keyframes scaleIn {
67
- 0% {
68
- transform: scale(0);
69
- }
70
- 100% {
71
- transform: scale(1);
72
- }
73
- }
74
-
75
- div.scaleOut {
76
- animation-fill-mode: initial;
77
- animation-name: scaleOut;
78
- }
79
-
80
- @keyframes scaleOut {
81
- 0% {
82
- position: absolute;
83
- transform: scale(1);
84
- }
85
- 100% {
86
- position: absolute;
87
- transform: scale(0);
88
- }
89
- }
90
-
91
- div.fadeIn {
92
- animation-name: fadeIn;
93
- }
94
-
95
- @keyframes fadeIn {
96
- 0% {
97
- opacity: 0;
98
- }
99
- 100% {
100
- opacity: 1;
101
- }
102
- }
103
-
104
- @keyframes fadeInDelayed {
105
- 0% {
106
- opacity: 0;
107
- }
108
- 50% {
109
- opacity: 0.1;
110
- }
111
- 100% {
112
- opacity: 1;
113
- }
114
- }
115
- @keyframes fadeOutDelayed {
116
- 0% {
117
- opacity: 1;
118
- }
119
- 50% {
120
- opacity: 0.1;
121
- }
122
- 100% {
123
- opacity: 0;
124
- }
125
- }
126
-
127
- .fadeInDelayed {
128
- animation-name: fadeInDelayed;
129
- }
130
-
131
- .fadeOutAbsolute {
132
- position: absolute;
133
- animation-name: fadeOutDelayed;
134
- }
135
-
136
- @keyframes flip {
137
- 0% {
138
- transform: rotateX(0deg);
139
- }
140
-
141
- 25% {
142
- transform: rotateX(36deg);
143
- }
144
-
145
- 50% {
146
- transform: rotateX(90deg);
147
- }
148
-
149
- 75% {
150
- transform: rotateX(90deg);
151
- }
152
-
153
- 100% {
154
- transform: rotateX(90deg);
155
- }
156
- }
157
- @keyframes flipIn {
158
- 0% {
159
- transform: rotateX(90deg);
160
- }
161
-
162
- 25% {
163
- transform: rotateX(90deg);
164
- }
165
-
166
- 50% {
167
- transform: rotateX(90deg);
168
- }
169
-
170
- 75% {
171
- transform: rotateX(36deg);
172
- }
173
-
174
- 100% {
175
- transform: rotateX(0deg);
176
- }
177
- }
178
- .flipBottomUpOut {
179
- transform-origin: 50% 50% !important;
180
- position: absolute !important;
181
- animation-name: flip;
182
- animation-timing-function: linear !important;
183
- }
184
- .flipBottomUpIn {
185
- transform-origin: 50% 50% !important;
186
- animation-name: flipIn;
187
- animation-timing-function: linear !important;
188
- }
@@ -1,4 +0,0 @@
1
- /**
2
- * This holds the logic for switching transition modes inside the content container
3
- **/
4
- export default function TransitionContainer(): JSX.Element;
@@ -1,14 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const react_1 = __importDefault(require("react"));
7
- /**
8
- * This holds the logic for switching transition modes inside the content container
9
- **/
10
- function TransitionContainer() {
11
- return react_1.default.createElement(react_1.default.Fragment, null, "TransitionContainer");
12
- }
13
- exports.default = TransitionContainer;
14
- //# sourceMappingURL=TransitionContainer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TransitionContainer.js","sourceRoot":"","sources":["../../../../src/components/Transition/TransitionContainer/TransitionContainer.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAI1B;;IAEI;AACJ,SAAwB,mBAAmB;IAEvC,OAAO,oFAAwB,CAAC;AACpC,CAAC;AAHD,sCAGC"}
@@ -1 +0,0 @@
1
- export { default } from './TransitionContainer';
@@ -1,9 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.default = void 0;
7
- var TransitionContainer_1 = require("./TransitionContainer");
8
- Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TransitionContainer_1).default; } });
9
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Transition/TransitionContainer/index.tsx"],"names":[],"mappings":";;;;;;AAAA,6DAAgD;AAAvC,+HAAA,OAAO,OAAA"}
@@ -1,66 +0,0 @@
1
- .animatedContainer {
2
- position: relative;
3
- animation-name: pingpong;
4
- animation-duration: 5s;
5
- animation-iteration-count: infinite;
6
- animation-timing-function: linear;
7
- }
8
-
9
- .resetHeight {
10
- min-height: initial;
11
- }
12
-
13
- @keyframes pingpong {
14
- 0% {
15
- left: 0%;
16
- }
17
-
18
- 50% {
19
- left: calc(100% - 100px);
20
- }
21
-
22
- 100% {
23
- left: 0%;
24
- }
25
- }
26
- .fadeOut {
27
- animation: fadeOutAnimation;
28
- animation-duration: 2s !important;
29
- animation-timing-function: linear;
30
- position: absolute;
31
- }
32
- .outOfTheWay {
33
- animation: fadeOutAnimation;
34
- animation-duration: 2s !important;
35
- animation-timing-function: linear;
36
- position: absolute;
37
- }
38
- .fadeIn {
39
- animation: fadeIn;
40
- animation-duration: 2s !important;
41
- animation-timing-function: linear;
42
- }
43
-
44
- @keyframes fadeIn {
45
- 0% {
46
- background-color: green;
47
- opacity: 0;
48
- }
49
-
50
- 100% {
51
- background-color: green;
52
- opacity: 1;
53
- }
54
- }
55
-
56
- @keyframes fadeOutAnimation {
57
- 0% {
58
- background-color: red;
59
- opacity: 1;
60
- }
61
-
62
- 100% {
63
- background-color: red;
64
- opacity: 0;
65
- }
66
- }
@@ -1,5 +0,0 @@
1
- .lockClass {
2
- @media screen and (max-width: 639px) {
3
- overflow: hidden;
4
- }
5
- }
@@ -1,37 +0,0 @@
1
- import React, { PropsWithChildren, ReactElement, RefObject } from "react";
2
- declare type ReactElementWithState = ReactElement & {
3
- status: "loading" | "succeded" | "failed";
4
- };
5
- /**
6
- * This propagates the utilitary functions
7
- */
8
- export declare function AsyncProcessQueueProvider({ children }: PropsWithChildren<{}>): JSX.Element;
9
- export declare function useAsyncProcessQueueContext(): {
10
- targetElRef: React.RefObject<HTMLElement>;
11
- pendingTransactions: {
12
- count: number;
13
- setCounter: React.Dispatch<React.SetStateAction<number>>;
14
- increment: () => void;
15
- decrement: () => void;
16
- reset: () => void;
17
- };
18
- UIs: ReactElementWithState[];
19
- setUIs: (func: (prev: ReactElementWithState[]) => ReactElementWithState[]) => void;
20
- };
21
- declare type AsyncProcessStatuses = "loading" | "succeded" | "failed";
22
- export interface UIStateFactory {
23
- (status: AsyncProcessStatuses, error?: Error, dismiss?: () => void, retry?: () => void): ReactElement;
24
- }
25
- /**
26
- * This function wraps other async functions and decides when the ongoing promise should be put on the queue or not
27
- */
28
- export declare function useAsyncProcessQueue<T extends {
29
- [k: string]: (...args: any[]) => Promise<any>;
30
- }>(functionsToQueue: T, UIFactory: (functionName: keyof T) => UIStateFactory): T & {
31
- elToTransitionToQueue: RefObject<HTMLElement>;
32
- /**
33
- * Function that wraps the current running actions and animates to the target queue element
34
- */
35
- wrapQueue: () => void;
36
- };
37
- export {};
@@ -1,160 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.useAsyncProcessQueue = exports.useAsyncProcessQueueContext = exports.AsyncProcessQueueProvider = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const Context = (0, react_1.createContext)(null);
29
- function useCounter() {
30
- const [count, setCounter] = (0, react_1.useState)(0);
31
- return {
32
- count,
33
- setCounter,
34
- increment: () => setCounter((prev) => prev + 1),
35
- decrement: () => setCounter((prev) => prev - 1),
36
- reset: () => setCounter(0),
37
- };
38
- }
39
- /**
40
- * This propagates the utilitary functions
41
- */
42
- function AsyncProcessQueueProvider({ children }) {
43
- const targetRef = (0, react_1.useRef)(null);
44
- const pendingCounter = useCounter();
45
- const [UIs, setUIs] = (0, react_1.useState)([]);
46
- return (react_1.default.createElement(Context.Provider, { value: {
47
- targetElRef: targetRef,
48
- pendingTransactions: pendingCounter,
49
- setUIs,
50
- UIs,
51
- } }, children));
52
- }
53
- exports.AsyncProcessQueueProvider = AsyncProcessQueueProvider;
54
- function useAsyncProcessQueueContext() {
55
- return (0, react_1.useContext)(Context);
56
- }
57
- exports.useAsyncProcessQueueContext = useAsyncProcessQueueContext;
58
- function calculateCenter(el) {
59
- const boundsOnViewport = el.getBoundingClientRect();
60
- return {
61
- x: boundsOnViewport.x + boundsOnViewport.width / 2,
62
- y: boundsOnViewport.y + boundsOnViewport.height / 2,
63
- };
64
- }
65
- /**
66
- * This function wraps other async functions and decides when the ongoing promise should be put on the queue or not
67
- */
68
- function useAsyncProcessQueue(functionsToQueue, UIFactory) {
69
- const loadingRef = (0, react_1.useRef)(null);
70
- const wrapped = (0, react_1.useRef)(false);
71
- const elToTransitionToQueue = (0, react_1.useRef)(null);
72
- const { targetElRef: targetEl, setUIs } = (0, react_1.useContext)(Context);
73
- const initialCenter = (0, react_1.useRef)();
74
- (0, react_1.useEffect)(() => {
75
- initialCenter.current = {
76
- center: calculateCenter(targetEl.current),
77
- dimensions: [
78
- targetEl.current.clientWidth,
79
- targetEl.current.clientHeight,
80
- ],
81
- };
82
- }, []);
83
- const wrapQueue = (0, react_1.useCallback)(() => {
84
- if (wrapped.current || !loadingRef.current)
85
- return;
86
- const wrapUI = loadingRef.current;
87
- wrapped.current = true;
88
- const clone = elToTransitionToQueue.current.cloneNode(true);
89
- const currPositionOnViewport = elToTransitionToQueue.current.getBoundingClientRect();
90
- const currPosCenter = calculateCenter(elToTransitionToQueue.current);
91
- const targetCenter = targetEl.current
92
- ? calculateCenter(targetEl.current)
93
- : initialCenter.current.center;
94
- clone.style.position = "fixed";
95
- clone.style.top = `${currPositionOnViewport.top}px`;
96
- clone.style.left = `${currPositionOnViewport.left}px`;
97
- clone.style.width = `${currPositionOnViewport.width}px`;
98
- clone.style.height = `${currPositionOnViewport.height}px`;
99
- clone.style.transition = `transform 250ms ease-out, opacity 250ms ease-in`;
100
- clone.style.opacity = "1";
101
- clone.ontransitionend = ({ target, currentTarget }) => {
102
- if (target === currentTarget)
103
- wrapUI();
104
- };
105
- const targetHeight = Math.min(targetEl.current
106
- ? targetEl.current.clientHeight
107
- : initialCenter.current.dimensions[1], elToTransitionToQueue.current.clientHeight);
108
- const targetWidth = Math.min(targetHeight, targetEl.current
109
- ? targetEl.current.clientWidth
110
- : initialCenter.current.dimensions[0], elToTransitionToQueue.current.clientWidth);
111
- const targetScaleX = targetWidth / elToTransitionToQueue.current.clientWidth;
112
- const targetScaleY = targetHeight / elToTransitionToQueue.current.clientHeight;
113
- document.body.appendChild(clone);
114
- setTimeout(() => {
115
- clone.style.opacity = "0";
116
- clone.style.transform = `translateX(${targetCenter.x - currPosCenter.x}px) translateY(${targetCenter.y - currPosCenter.y}px) scaleX(${targetScaleX}) scaleY(${targetScaleY})`;
117
- clone.addEventListener("transitionend", ({ target, currentTarget }) => {
118
- if (target === currentTarget)
119
- clone.remove();
120
- });
121
- }, 100);
122
- }, []);
123
- return Object.entries(functionsToQueue).reduce((r, [k, v]) => {
124
- const process = (...args) => {
125
- const promise = v(...args);
126
- loadingRef.current = function () {
127
- // Write the loading UI
128
- const LoadingUIInstance = Object.assign(Object.assign({}, UIFactory(k)("loading")), { status: "loading" });
129
- setUIs((prev) => [
130
- ...prev.filter((a) => a.key !== LoadingUIInstance.key),
131
- LoadingUIInstance,
132
- ]);
133
- promise.then((result) => {
134
- const UIInstance = UIFactory(k)("succeded");
135
- // Write success UI
136
- setUIs((prev) => prev.map((a) => a === LoadingUIInstance
137
- ? Object.assign(Object.assign({}, UIInstance), { status: "succeded" }) : a));
138
- return result;
139
- });
140
- promise.catch((error) => {
141
- const UIInstance = UIFactory(k)("failed", error, () => setUIs((prev) => prev.filter((ui) => ui !== UIInstance)), () => {
142
- process(...args);
143
- loadingRef.current();
144
- });
145
- // Write success UI
146
- setUIs((prev) => prev.map((a) => a === LoadingUIInstance
147
- ? Object.assign(Object.assign({}, UIInstance), { status: "failed" }) : a));
148
- throw error;
149
- });
150
- return promise;
151
- };
152
- promise.finally(() => {
153
- loadingRef.current = null;
154
- });
155
- };
156
- return Object.assign(Object.assign({}, r), { [k]: process });
157
- }, { elToTransitionToQueue, wrapQueue });
158
- }
159
- exports.useAsyncProcessQueue = useAsyncProcessQueue;
160
- //# sourceMappingURL=AsyncProcessQueue.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AsyncProcessQueue.js","sourceRoot":"","sources":["../../src/context/AsyncProcessQueue.tsx"],"names":[],"mappings":"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"}
@@ -1 +0,0 @@
1
- export {};