morphing-scroll 2.2.15 → 2.2.16
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/README.md +950 -1052
- package/package.json +1 -1
- package/types/index.d.ts +8 -8
- package/types/intersectionTracker.d.ts +8 -0
- package/types/morphScroll.d.ts +24 -0
- package/types/resizeTracker.d.ts +5 -0
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -4,8 +4,8 @@ import ResizeTrackerT from "./resizeTracker";
|
|
|
4
4
|
import IntersectionTrackerT from "./intersectionTracker";
|
|
5
5
|
import MorphScrollT from "./morphScroll";
|
|
6
6
|
|
|
7
|
-
/**
|
|
8
|
-
* ### ResizeTracker component
|
|
7
|
+
/** ---
|
|
8
|
+
* ###  ResizeTracker component
|
|
9
9
|
*
|
|
10
10
|
* ---
|
|
11
11
|
* ### Props:
|
|
@@ -29,8 +29,8 @@ import MorphScrollT from "./morphScroll";
|
|
|
29
29
|
*/
|
|
30
30
|
declare const ResizeTracker: React.FC<ResizeTrackerT>;
|
|
31
31
|
|
|
32
|
-
/**
|
|
33
|
-
* ### IntersectionTracker component
|
|
32
|
+
/** ---
|
|
33
|
+
* ###  IntersectionTracker component
|
|
34
34
|
*
|
|
35
35
|
* ---
|
|
36
36
|
* ### Props:
|
|
@@ -57,8 +57,8 @@ declare const ResizeTracker: React.FC<ResizeTrackerT>;
|
|
|
57
57
|
*/
|
|
58
58
|
declare const IntersectionTracker: React.FC<IntersectionTrackerT>;
|
|
59
59
|
|
|
60
|
-
/**
|
|
61
|
-
* ### MorphScroll component
|
|
60
|
+
/** ---
|
|
61
|
+
* ###  MorphScroll component
|
|
62
62
|
*
|
|
63
63
|
* ---
|
|
64
64
|
* ### Props:
|
|
@@ -109,8 +109,8 @@ declare const IntersectionTracker: React.FC<IntersectionTrackerT>;
|
|
|
109
109
|
|
|
110
110
|
declare const MorphScroll: React.FC<MorphScrollT>;
|
|
111
111
|
|
|
112
|
-
/**
|
|
113
|
-
* ### Morph - all content of the library
|
|
112
|
+
/** ---
|
|
113
|
+
* ###  Morph - all content of the library
|
|
114
114
|
*/
|
|
115
115
|
declare const Morph: {
|
|
116
116
|
/** See `MorphScroll` */
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
type IntersectionTrackerT = {
|
|
2
2
|
/**---
|
|
3
|
+
* 
|
|
3
4
|
* Custom class name.
|
|
4
5
|
* ___
|
|
5
6
|
* @example
|
|
@@ -13,6 +14,7 @@ type IntersectionTrackerT = {
|
|
|
13
14
|
*/
|
|
14
15
|
className?: string;
|
|
15
16
|
/**---
|
|
17
|
+
* 
|
|
16
18
|
* Custom user content.
|
|
17
19
|
* ___
|
|
18
20
|
* @example
|
|
@@ -24,6 +26,7 @@ type IntersectionTrackerT = {
|
|
|
24
26
|
* */
|
|
25
27
|
children?: React.ReactNode;
|
|
26
28
|
/**---
|
|
29
|
+
* 
|
|
27
30
|
* Custom inline styles.
|
|
28
31
|
* ___
|
|
29
32
|
* @example
|
|
@@ -37,6 +40,7 @@ type IntersectionTrackerT = {
|
|
|
37
40
|
*/
|
|
38
41
|
style?: React.CSSProperties;
|
|
39
42
|
/**---
|
|
43
|
+
* 
|
|
40
44
|
* The root element for `IntersectionObserver`.
|
|
41
45
|
* ___
|
|
42
46
|
* @default document viewport
|
|
@@ -52,6 +56,7 @@ type IntersectionTrackerT = {
|
|
|
52
56
|
*/
|
|
53
57
|
root?: Element | null;
|
|
54
58
|
/**---
|
|
59
|
+
* 
|
|
55
60
|
* The margin for the root element of the `IntersectionObserver`.
|
|
56
61
|
* ___
|
|
57
62
|
* @note
|
|
@@ -68,6 +73,7 @@ type IntersectionTrackerT = {
|
|
|
68
73
|
*/
|
|
69
74
|
rootMargin?: number | number[];
|
|
70
75
|
/**---
|
|
76
|
+
* 
|
|
71
77
|
* Visibility threshold for triggering intersection events.
|
|
72
78
|
* ___
|
|
73
79
|
* @note
|
|
@@ -84,6 +90,7 @@ type IntersectionTrackerT = {
|
|
|
84
90
|
*/
|
|
85
91
|
threshold?: number | number[];
|
|
86
92
|
/**---
|
|
93
|
+
* 
|
|
87
94
|
* Renders children regardless of their visibility in the viewport.
|
|
88
95
|
* ___
|
|
89
96
|
* @default false
|
|
@@ -99,6 +106,7 @@ type IntersectionTrackerT = {
|
|
|
99
106
|
*/
|
|
100
107
|
visibleContent?: boolean;
|
|
101
108
|
/**---
|
|
109
|
+
* 
|
|
102
110
|
* Callback function triggered when `threshold` is met.
|
|
103
111
|
* ___
|
|
104
112
|
*
|
package/types/morphScroll.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
type MorphScrollT = {
|
|
2
2
|
// General Settings
|
|
3
3
|
/**---
|
|
4
|
+
* 
|
|
4
5
|
* Custom class name.
|
|
5
6
|
* ___
|
|
6
7
|
* @example
|
|
@@ -14,6 +15,7 @@ type MorphScrollT = {
|
|
|
14
15
|
* */
|
|
15
16
|
className?: string;
|
|
16
17
|
/**---
|
|
18
|
+
* 
|
|
17
19
|
* Custom user content.
|
|
18
20
|
* ___
|
|
19
21
|
* @example
|
|
@@ -27,6 +29,7 @@ type MorphScrollT = {
|
|
|
27
29
|
|
|
28
30
|
// Scroll Settings
|
|
29
31
|
/**---
|
|
32
|
+
* 
|
|
30
33
|
* Type of progress element.
|
|
31
34
|
* ___
|
|
32
35
|
* @default "scroll"
|
|
@@ -42,6 +45,7 @@ type MorphScrollT = {
|
|
|
42
45
|
*/
|
|
43
46
|
type?: "scroll" | "slider" | "sliderMenu";
|
|
44
47
|
/**---
|
|
48
|
+
* 
|
|
45
49
|
* Scrolling direction.
|
|
46
50
|
* ___
|
|
47
51
|
* @default "y"
|
|
@@ -57,6 +61,7 @@ type MorphScrollT = {
|
|
|
57
61
|
*/
|
|
58
62
|
direction?: "x" | "y" | "hybrid";
|
|
59
63
|
/**---
|
|
64
|
+
* 
|
|
60
65
|
* Scroll position value and additional options.
|
|
61
66
|
* ___
|
|
62
67
|
* @default { duration: 200; updater: false }
|
|
@@ -84,6 +89,7 @@ type MorphScrollT = {
|
|
|
84
89
|
updater?: boolean;
|
|
85
90
|
};
|
|
86
91
|
/**---
|
|
92
|
+
* 
|
|
87
93
|
* Callback for scroll value.
|
|
88
94
|
* ___
|
|
89
95
|
* @description
|
|
@@ -101,6 +107,7 @@ type MorphScrollT = {
|
|
|
101
107
|
*/
|
|
102
108
|
onScrollValue?: (left: number, top: number) => void;
|
|
103
109
|
/**---
|
|
110
|
+
* 
|
|
104
111
|
* Callback for scroll status.
|
|
105
112
|
* ___
|
|
106
113
|
* @example
|
|
@@ -116,6 +123,7 @@ type MorphScrollT = {
|
|
|
116
123
|
|
|
117
124
|
// Visual Settings
|
|
118
125
|
/**---
|
|
126
|
+
* 
|
|
119
127
|
* `[width, height]` dimension of `MorphScroll`.
|
|
120
128
|
*
|
|
121
129
|
* **REQUIRED**
|
|
@@ -135,6 +143,7 @@ type MorphScrollT = {
|
|
|
135
143
|
*/
|
|
136
144
|
size: number | number[] | "auto";
|
|
137
145
|
/**---
|
|
146
|
+
* 
|
|
138
147
|
* [width, height] dimension of cells for each object.
|
|
139
148
|
* ___
|
|
140
149
|
* @default [width, height] from size
|
|
@@ -161,6 +170,7 @@ type MorphScrollT = {
|
|
|
161
170
|
| "none"
|
|
162
171
|
| (number | "size" | "firstChild" | "none")[];
|
|
163
172
|
/**---
|
|
173
|
+
* 
|
|
164
174
|
* Number of cells in each direction.
|
|
165
175
|
*___
|
|
166
176
|
* @example
|
|
@@ -174,6 +184,7 @@ type MorphScrollT = {
|
|
|
174
184
|
*/
|
|
175
185
|
crossCount?: number;
|
|
176
186
|
/**---
|
|
187
|
+
* 
|
|
177
188
|
* Gap between cells.
|
|
178
189
|
* ___
|
|
179
190
|
* @note
|
|
@@ -190,6 +201,7 @@ type MorphScrollT = {
|
|
|
190
201
|
*/
|
|
191
202
|
gap?: number | number[];
|
|
192
203
|
/**---
|
|
204
|
+
* 
|
|
193
205
|
* Margin for the* `.ms-objects-wrapper`.
|
|
194
206
|
* ___
|
|
195
207
|
* @note
|
|
@@ -206,6 +218,7 @@ type MorphScrollT = {
|
|
|
206
218
|
*/
|
|
207
219
|
wrapperMargin?: number | number[];
|
|
208
220
|
/**---
|
|
221
|
+
* 
|
|
209
222
|
* Minimum height or width of the `.ms-objects-wrapper`.
|
|
210
223
|
* ___
|
|
211
224
|
* @description
|
|
@@ -226,6 +239,7 @@ type MorphScrollT = {
|
|
|
226
239
|
*/
|
|
227
240
|
wrapperMinSize?: number | "full" | (number | "full")[];
|
|
228
241
|
/**---
|
|
242
|
+
* 
|
|
229
243
|
* [horizontal, vertical] aligns your content when it is smaller than the `size`.
|
|
230
244
|
*___
|
|
231
245
|
* @note
|
|
@@ -242,6 +256,7 @@ type MorphScrollT = {
|
|
|
242
256
|
*/
|
|
243
257
|
wrapperAlign?: "start" | "center" | "end" | ("start" | "center" | "end")[];
|
|
244
258
|
/**---
|
|
259
|
+
* 
|
|
245
260
|
* Aligns the objects inside `MorphScroll`.
|
|
246
261
|
* ___
|
|
247
262
|
* @example
|
|
@@ -255,6 +270,7 @@ type MorphScrollT = {
|
|
|
255
270
|
*/
|
|
256
271
|
elementsAlign?: "start" | "center" | "end";
|
|
257
272
|
/**---
|
|
273
|
+
* 
|
|
258
274
|
* Direction of the provided elements.
|
|
259
275
|
* ___
|
|
260
276
|
* @default "row"
|
|
@@ -270,6 +286,7 @@ type MorphScrollT = {
|
|
|
270
286
|
*/
|
|
271
287
|
elementsDirection?: "row" | "column";
|
|
272
288
|
/**---
|
|
289
|
+
* 
|
|
273
290
|
* Gradient overlay at the edges of the scroll area.
|
|
274
291
|
* ___
|
|
275
292
|
* @default { size: 40 }
|
|
@@ -287,6 +304,7 @@ type MorphScrollT = {
|
|
|
287
304
|
|
|
288
305
|
// Progress Bar
|
|
289
306
|
/**---
|
|
307
|
+
* 
|
|
290
308
|
* Triggers for the scroll progress.
|
|
291
309
|
* ___
|
|
292
310
|
* @description
|
|
@@ -316,6 +334,7 @@ type MorphScrollT = {
|
|
|
316
334
|
arrows?: boolean | { size?: number; element?: React.ReactNode };
|
|
317
335
|
};
|
|
318
336
|
/**---
|
|
337
|
+
* 
|
|
319
338
|
* Reverse the progress bar position.
|
|
320
339
|
* ___
|
|
321
340
|
* @default false
|
|
@@ -334,6 +353,7 @@ type MorphScrollT = {
|
|
|
334
353
|
*/
|
|
335
354
|
progressReverse?: boolean | boolean[];
|
|
336
355
|
/**---
|
|
356
|
+
* 
|
|
337
357
|
* Hover visibility of the progress bar.
|
|
338
358
|
* ___
|
|
339
359
|
* @default false
|
|
@@ -351,6 +371,7 @@ type MorphScrollT = {
|
|
|
351
371
|
|
|
352
372
|
// Optimization
|
|
353
373
|
/**---
|
|
374
|
+
* 
|
|
354
375
|
* Rendering strategy for performance optimization.
|
|
355
376
|
* ___
|
|
356
377
|
* @description
|
|
@@ -377,6 +398,7 @@ type MorphScrollT = {
|
|
|
377
398
|
stopLoadOnScroll?: boolean;
|
|
378
399
|
};
|
|
379
400
|
/**---
|
|
401
|
+
* 
|
|
380
402
|
* Handling of empty scroll elements.
|
|
381
403
|
* ___
|
|
382
404
|
* @description
|
|
@@ -401,6 +423,7 @@ type MorphScrollT = {
|
|
|
401
423
|
clickTrigger?: { selector: string; delay?: number };
|
|
402
424
|
};
|
|
403
425
|
/**---
|
|
426
|
+
* 
|
|
404
427
|
* Enables React Suspense for children.
|
|
405
428
|
* ___
|
|
406
429
|
* @example
|
|
@@ -414,6 +437,7 @@ type MorphScrollT = {
|
|
|
414
437
|
*/
|
|
415
438
|
suspending?: boolean;
|
|
416
439
|
/**---
|
|
440
|
+
* 
|
|
417
441
|
* Fallback element to display during loading or placeholder.
|
|
418
442
|
* ___
|
|
419
443
|
* @note
|
package/types/resizeTracker.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
type ResizeTrackerT = {
|
|
2
2
|
/**---
|
|
3
|
+
* 
|
|
3
4
|
* Custom class name.
|
|
4
5
|
* ___
|
|
5
6
|
* @example
|
|
@@ -13,6 +14,7 @@ type ResizeTrackerT = {
|
|
|
13
14
|
*/
|
|
14
15
|
className?: string;
|
|
15
16
|
/**---
|
|
17
|
+
* 
|
|
16
18
|
* Custom user content.
|
|
17
19
|
* ___
|
|
18
20
|
* @example
|
|
@@ -24,6 +26,7 @@ type ResizeTrackerT = {
|
|
|
24
26
|
* */
|
|
25
27
|
children: React.ReactNode;
|
|
26
28
|
/**---
|
|
29
|
+
* 
|
|
27
30
|
* Custom inline styles.
|
|
28
31
|
* ___
|
|
29
32
|
* @example
|
|
@@ -37,6 +40,7 @@ type ResizeTrackerT = {
|
|
|
37
40
|
*/
|
|
38
41
|
style?: React.CSSProperties;
|
|
39
42
|
/**---
|
|
43
|
+
* 
|
|
40
44
|
* Defines size measurement behavior.
|
|
41
45
|
* ___
|
|
42
46
|
* @description
|
|
@@ -57,6 +61,7 @@ type ResizeTrackerT = {
|
|
|
57
61
|
*/
|
|
58
62
|
measure?: "inner" | "outer" | "all";
|
|
59
63
|
/**---
|
|
64
|
+
* 
|
|
60
65
|
* Callback on dimension change.
|
|
61
66
|
* ___
|
|
62
67
|
* @description
|