ugly-app 0.1.73 → 0.1.75
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/dist/cli/version.d.ts +1 -1
- package/dist/cli/version.js +1 -1
- package/dist/client/animation/animatedValue.d.ts +5 -0
- package/dist/client/animation/animatedValue.d.ts.map +1 -1
- package/dist/client/animation/animatedValue.js +19 -1
- package/dist/client/animation/animatedValue.js.map +1 -1
- package/dist/client/animation/useAnimatedTransition.d.ts +92 -0
- package/dist/client/animation/useAnimatedTransition.d.ts.map +1 -0
- package/dist/client/animation/useAnimatedTransition.js +235 -0
- package/dist/client/animation/useAnimatedTransition.js.map +1 -0
- package/dist/client/animation/useScrollAnimation.d.ts +32 -0
- package/dist/client/animation/useScrollAnimation.d.ts.map +1 -0
- package/dist/client/animation/useScrollAnimation.js +82 -0
- package/dist/client/animation/useScrollAnimation.js.map +1 -0
- package/dist/client/components/Alert.d.ts +9 -0
- package/dist/client/components/Alert.d.ts.map +1 -0
- package/dist/client/components/Alert.js +60 -0
- package/dist/client/components/Alert.js.map +1 -0
- package/dist/client/components/AnimatedInput.d.ts +129 -0
- package/dist/client/components/AnimatedInput.d.ts.map +1 -0
- package/dist/client/components/AnimatedInput.js +264 -0
- package/dist/client/components/AnimatedInput.js.map +1 -0
- package/dist/client/components/AnimatedList.d.ts +32 -0
- package/dist/client/components/AnimatedList.d.ts.map +1 -0
- package/dist/client/components/AnimatedList.js +140 -0
- package/dist/client/components/AnimatedList.js.map +1 -0
- package/dist/client/components/AppScrollViewProvider.d.ts +35 -0
- package/dist/client/components/AppScrollViewProvider.d.ts.map +1 -0
- package/dist/client/components/AppScrollViewProvider.js +36 -0
- package/dist/client/components/AppScrollViewProvider.js.map +1 -0
- package/dist/client/components/CardStack.d.ts +48 -0
- package/dist/client/components/CardStack.d.ts.map +1 -0
- package/dist/client/components/CardStack.js +717 -0
- package/dist/client/components/CardStack.js.map +1 -0
- package/dist/client/components/CelebrationOverlay.d.ts +9 -0
- package/dist/client/components/CelebrationOverlay.d.ts.map +1 -0
- package/dist/client/components/CelebrationOverlay.js +91 -0
- package/dist/client/components/CelebrationOverlay.js.map +1 -0
- package/dist/client/components/Confetti.d.ts +11 -0
- package/dist/client/components/Confetti.d.ts.map +1 -0
- package/dist/client/components/Confetti.js +181 -0
- package/dist/client/components/Confetti.js.map +1 -0
- package/dist/client/components/DatePicker.d.ts +8 -0
- package/dist/client/components/DatePicker.d.ts.map +1 -0
- package/dist/client/components/DatePicker.js +26 -0
- package/dist/client/components/DatePicker.js.map +1 -0
- package/dist/client/components/DateRangePicker.d.ts +23 -0
- package/dist/client/components/DateRangePicker.d.ts.map +1 -0
- package/dist/client/components/DateRangePicker.js +217 -0
- package/dist/client/components/DateRangePicker.js.map +1 -0
- package/dist/client/components/DateTimePicker.d.ts +8 -0
- package/dist/client/components/DateTimePicker.d.ts.map +1 -0
- package/dist/client/components/DateTimePicker.js +36 -0
- package/dist/client/components/DateTimePicker.js.map +1 -0
- package/dist/client/components/DrawingCanvas.d.ts +16 -0
- package/dist/client/components/DrawingCanvas.d.ts.map +1 -0
- package/dist/client/components/DrawingCanvas.js +308 -0
- package/dist/client/components/DrawingCanvas.js.map +1 -0
- package/dist/client/components/FlatList.d.ts +46 -0
- package/dist/client/components/FlatList.d.ts.map +1 -0
- package/dist/client/components/FlatList.js +203 -0
- package/dist/client/components/FlatList.js.map +1 -0
- package/dist/client/components/LayoutSize.d.ts +25 -0
- package/dist/client/components/LayoutSize.d.ts.map +1 -0
- package/dist/client/components/LayoutSize.js +107 -0
- package/dist/client/components/LayoutSize.js.map +1 -0
- package/dist/client/components/Loading.d.ts +10 -0
- package/dist/client/components/Loading.d.ts.map +1 -0
- package/dist/client/components/Loading.js +58 -0
- package/dist/client/components/Loading.js.map +1 -0
- package/dist/client/components/Pager.d.ts +17 -0
- package/dist/client/components/Pager.d.ts.map +1 -0
- package/dist/client/components/Pager.js +250 -0
- package/dist/client/components/Pager.js.map +1 -0
- package/dist/client/components/ResponsiveGrid.d.ts +15 -0
- package/dist/client/components/ResponsiveGrid.d.ts.map +1 -0
- package/dist/client/components/ResponsiveGrid.js +38 -0
- package/dist/client/components/ResponsiveGrid.js.map +1 -0
- package/dist/client/components/ScrollAnimatedView.d.ts +17 -0
- package/dist/client/components/ScrollAnimatedView.d.ts.map +1 -0
- package/dist/client/components/ScrollAnimatedView.js +26 -0
- package/dist/client/components/ScrollAnimatedView.js.map +1 -0
- package/dist/client/components/ScrollDownArrow.d.ts +4 -0
- package/dist/client/components/ScrollDownArrow.d.ts.map +1 -0
- package/dist/client/components/ScrollDownArrow.js +43 -0
- package/dist/client/components/ScrollDownArrow.js.map +1 -0
- package/dist/client/components/ScrollIndicator.d.ts +2 -0
- package/dist/client/components/ScrollIndicator.d.ts.map +1 -0
- package/dist/client/components/ScrollIndicator.js +69 -0
- package/dist/client/components/ScrollIndicator.js.map +1 -0
- package/dist/client/components/ScrollView.d.ts +18 -5
- package/dist/client/components/ScrollView.d.ts.map +1 -1
- package/dist/client/components/ScrollView.js +167 -5
- package/dist/client/components/ScrollView.js.map +1 -1
- package/dist/client/components/SelectView.d.ts +37 -0
- package/dist/client/components/SelectView.d.ts.map +1 -0
- package/dist/client/components/SelectView.js +170 -0
- package/dist/client/components/SelectView.js.map +1 -0
- package/dist/client/components/SimpleScrollView.d.ts +15 -0
- package/dist/client/components/SimpleScrollView.d.ts.map +1 -0
- package/dist/client/components/SimpleScrollView.js +66 -0
- package/dist/client/components/SimpleScrollView.js.map +1 -0
- package/dist/client/components/TabPicker.d.ts +41 -0
- package/dist/client/components/TabPicker.d.ts.map +1 -0
- package/dist/client/components/TabPicker.js +185 -0
- package/dist/client/components/TabPicker.js.map +1 -0
- package/dist/client/components/ValidatedTextInput.d.ts +40 -0
- package/dist/client/components/ValidatedTextInput.d.ts.map +1 -0
- package/dist/client/components/ValidatedTextInput.js +335 -0
- package/dist/client/components/ValidatedTextInput.js.map +1 -0
- package/dist/client/components/View.d.ts +3 -2
- package/dist/client/components/View.d.ts.map +1 -1
- package/dist/client/components/View.js +2 -2
- package/dist/client/components/View.js.map +1 -1
- package/dist/client/components/WheelPicker.d.ts +10 -0
- package/dist/client/components/WheelPicker.d.ts.map +1 -0
- package/dist/client/components/WheelPicker.js +124 -0
- package/dist/client/components/WheelPicker.js.map +1 -0
- package/dist/client/components/WizardView.d.ts +51 -0
- package/dist/client/components/WizardView.d.ts.map +1 -0
- package/dist/client/components/WizardView.js +171 -0
- package/dist/client/components/WizardView.js.map +1 -0
- package/dist/client/components/ZoomPanPinch.d.ts +26 -0
- package/dist/client/components/ZoomPanPinch.d.ts.map +1 -0
- package/dist/client/components/ZoomPanPinch.js +290 -0
- package/dist/client/components/ZoomPanPinch.js.map +1 -0
- package/dist/client/components/index.d.ts +43 -0
- package/dist/client/components/index.d.ts.map +1 -1
- package/dist/client/components/index.js +26 -0
- package/dist/client/components/index.js.map +1 -1
- package/dist/client/index.d.ts +5 -1
- package/dist/client/index.d.ts.map +1 -1
- package/dist/client/index.js +3 -1
- package/dist/client/index.js.map +1 -1
- package/package.json +6 -1
- package/templates/gitignore +1 -0
package/dist/cli/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const CLI_VERSION = "0.1.
|
|
1
|
+
export declare const CLI_VERSION = "0.1.74";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
package/dist/cli/version.js
CHANGED
|
@@ -38,4 +38,9 @@ export interface AnimatedValueRef {
|
|
|
38
38
|
}
|
|
39
39
|
export declare function createAnimatedValue(initial: number): AnimatedValueRef;
|
|
40
40
|
export declare function useAnimatedValue(initial: number): AnimatedValueRef;
|
|
41
|
+
/**
|
|
42
|
+
* Hook to track an animated value and trigger re-renders.
|
|
43
|
+
* Use this when you need React to re-render on animation updates.
|
|
44
|
+
*/
|
|
45
|
+
export declare function useAnimatedValueTracker(animatedValue: AnimatedValueRef): number;
|
|
41
46
|
//# sourceMappingURL=animatedValue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animatedValue.d.ts","sourceRoot":"","sources":["../../../src/client/animation/animatedValue.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;AAEnD,eAAO,MAAM,eAAe;yBACd,MAAM;0BACL,MAAM;yBACP,MAAM;4BACH,MAAM;+BAEH,MAAM;+BAEN,MAAM;+BAEN,MAAM;uBAEd,MAAM;CACiC,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;IACxD,2DAA2D;IAC3D,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,kDAAkD;IAClD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mCAAmC;IACnC,IAAI,IAAI,IAAI,CAAC;IACb,yDAAyD;IACzD,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC1D;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,CA6GrE;AAID,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,CAWlE"}
|
|
1
|
+
{"version":3,"file":"animatedValue.d.ts","sourceRoot":"","sources":["../../../src/client/animation/animatedValue.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;AAEnD,eAAO,MAAM,eAAe;yBACd,MAAM;0BACL,MAAM;yBACP,MAAM;4BACH,MAAM;+BAEH,MAAM;+BAEN,MAAM;+BAEN,MAAM;uBAEd,MAAM;CACiC,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,MAAM,WAAW,gBAAgB,CAAC,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC;IAC9B,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;IACxD,2DAA2D;IAC3D,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,kDAAkD;IAClD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mCAAmC;IACnC,IAAI,IAAI,IAAI,CAAC;IACb,yDAAyD;IACzD,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CAC1D;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,CA6GrE;AAID,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,CAWlE;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,aAAa,EAAE,gBAAgB,GAAG,MAAM,CAe/E"}
|
|
@@ -107,7 +107,7 @@ export function createAnimatedValue(initial) {
|
|
|
107
107
|
};
|
|
108
108
|
return ref;
|
|
109
109
|
}
|
|
110
|
-
import { useEffect, useRef } from 'react';
|
|
110
|
+
import { useEffect, useRef, useState } from 'react';
|
|
111
111
|
export function useAnimatedValue(initial) {
|
|
112
112
|
const ref = useRef(null);
|
|
113
113
|
if (!ref.current) {
|
|
@@ -120,4 +120,22 @@ export function useAnimatedValue(initial) {
|
|
|
120
120
|
}, []);
|
|
121
121
|
return ref.current;
|
|
122
122
|
}
|
|
123
|
+
/**
|
|
124
|
+
* Hook to track an animated value and trigger re-renders.
|
|
125
|
+
* Use this when you need React to re-render on animation updates.
|
|
126
|
+
*/
|
|
127
|
+
export function useAnimatedValueTracker(animatedValue) {
|
|
128
|
+
const [, forceUpdate] = useState({});
|
|
129
|
+
const valueRef = useRef(animatedValue.current);
|
|
130
|
+
useEffect(() => {
|
|
131
|
+
const unsubscribe = animatedValue.subscribe((value) => {
|
|
132
|
+
if (value !== valueRef.current) {
|
|
133
|
+
valueRef.current = value;
|
|
134
|
+
forceUpdate({});
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
return unsubscribe;
|
|
138
|
+
}, [animatedValue]);
|
|
139
|
+
return valueRef.current;
|
|
140
|
+
}
|
|
123
141
|
//# sourceMappingURL=animatedValue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animatedValue.js","sourceRoot":"","sources":["../../../src/client/animation/animatedValue.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"animatedValue.js","sourceRoot":"","sources":["../../../src/client/animation/animatedValue.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { AnimatedValueRef, AnimConfig } from './animatedValue.js';
|
|
2
|
+
export type TransitionPhase = 'enter' | 'update' | 'leave';
|
|
3
|
+
export interface TransitionItem<T> {
|
|
4
|
+
/** The original item */
|
|
5
|
+
item: T;
|
|
6
|
+
/** Unique key for this item */
|
|
7
|
+
key: string | number;
|
|
8
|
+
/** Current animation phase */
|
|
9
|
+
phase: TransitionPhase;
|
|
10
|
+
/** Animated value (0 = exited, 1 = entered) */
|
|
11
|
+
value: AnimatedValueRef;
|
|
12
|
+
}
|
|
13
|
+
export interface TransitionConfig extends AnimConfig {
|
|
14
|
+
/** Delay before starting enter animation (ms) */
|
|
15
|
+
enterDelay?: number;
|
|
16
|
+
/** Delay before starting leave animation (ms) */
|
|
17
|
+
leaveDelay?: number;
|
|
18
|
+
/** Initial value for entering items (default: 0) */
|
|
19
|
+
from?: number;
|
|
20
|
+
/** Target value for entered items (default: 1) */
|
|
21
|
+
to?: number;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Hook for animating items as they enter and leave.
|
|
25
|
+
* Similar to react-spring's useTransition but simplified.
|
|
26
|
+
*
|
|
27
|
+
* @param items - Array of items to animate
|
|
28
|
+
* @param keyExtractor - Function to get unique key for each item
|
|
29
|
+
* @param config - Animation configuration
|
|
30
|
+
* @returns Array of TransitionItems with animation state
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```tsx
|
|
34
|
+
* const items = ['a', 'b', 'c'];
|
|
35
|
+
* const transitions = useAnimatedTransition(
|
|
36
|
+
* items,
|
|
37
|
+
* item => item,
|
|
38
|
+
* { duration: 300 }
|
|
39
|
+
* );
|
|
40
|
+
*
|
|
41
|
+
* return (
|
|
42
|
+
* <>
|
|
43
|
+
* {transitions.map(({ item, key, value }) => (
|
|
44
|
+
* <Animated.div
|
|
45
|
+
* key={key}
|
|
46
|
+
* style={{
|
|
47
|
+
* opacity: value,
|
|
48
|
+
* transform: value.to(v => `translateY(${(1 - v) * 20}px)`),
|
|
49
|
+
* }}
|
|
50
|
+
* >
|
|
51
|
+
* {item}
|
|
52
|
+
* </Animated.div>
|
|
53
|
+
* ))}
|
|
54
|
+
* </>
|
|
55
|
+
* );
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
export declare function useAnimatedTransition<T>(items: T[], keyExtractor: (item: T) => string | number, config?: TransitionConfig): TransitionItem<T>[];
|
|
59
|
+
/**
|
|
60
|
+
* Wrapper component for a single animated transition item.
|
|
61
|
+
* This component owns the animated value for proper React lifecycle.
|
|
62
|
+
*/
|
|
63
|
+
export declare function TransitionItemWrapper<T>({ item, phase, config, children, }: {
|
|
64
|
+
item: T;
|
|
65
|
+
phase: TransitionPhase;
|
|
66
|
+
config?: TransitionConfig;
|
|
67
|
+
children: (value: AnimatedValueRef, item: T, phase: TransitionPhase) => React.ReactNode;
|
|
68
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
/**
|
|
70
|
+
* Simplified hook for single item mount/unmount animation.
|
|
71
|
+
* Use this when you just need to animate a single element in/out.
|
|
72
|
+
*
|
|
73
|
+
* @param show - Whether the item should be visible
|
|
74
|
+
* @param config - Animation configuration
|
|
75
|
+
* @returns Object with `visible` (whether to render), `value` (animated 0-1)
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* ```tsx
|
|
79
|
+
* const { visible, value } = useAnimatedPresence(isOpen, { duration: 200 });
|
|
80
|
+
*
|
|
81
|
+
* return visible ? (
|
|
82
|
+
* <Animated.div style={{ opacity: value }}>
|
|
83
|
+
* Content
|
|
84
|
+
* </Animated.div>
|
|
85
|
+
* ) : null;
|
|
86
|
+
* ```
|
|
87
|
+
*/
|
|
88
|
+
export declare function useAnimatedPresence(show: boolean, config?: TransitionConfig): {
|
|
89
|
+
visible: boolean;
|
|
90
|
+
value: AnimatedValueRef;
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=useAnimatedTransition.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAnimatedTransition.d.ts","sourceRoot":"","sources":["../../../src/client/animation/useAnimatedTransition.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAChB,UAAU,EAGX,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,wBAAwB;IACxB,IAAI,EAAE,CAAC,CAAC;IACR,+BAA+B;IAC/B,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,8BAA8B;IAC9B,KAAK,EAAE,eAAe,CAAC;IACvB,+CAA+C;IAC/C,KAAK,EAAE,gBAAgB,CAAC;CACzB;AAED,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,KAAK,EAAE,CAAC,EAAE,EACV,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EAC1C,MAAM,CAAC,EAAE,gBAAgB,GACxB,cAAc,CAAC,CAAC,CAAC,EAAE,CAqIrB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,EACvC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,CACR,KAAK,EAAE,gBAAgB,EACvB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,eAAe,KACnB,KAAK,CAAC,SAAS,CAAC;CACtB,2CAsBA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,OAAO,EACb,MAAM,CAAC,EAAE,gBAAgB,GACxB;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,gBAAgB,CAAA;CAAE,CAmC/C"}
|
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
|
+
import { easingFunctions, useAnimatedValue, } from './animatedValue.js';
|
|
4
|
+
/**
|
|
5
|
+
* Hook for animating items as they enter and leave.
|
|
6
|
+
* Similar to react-spring's useTransition but simplified.
|
|
7
|
+
*
|
|
8
|
+
* @param items - Array of items to animate
|
|
9
|
+
* @param keyExtractor - Function to get unique key for each item
|
|
10
|
+
* @param config - Animation configuration
|
|
11
|
+
* @returns Array of TransitionItems with animation state
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* const items = ['a', 'b', 'c'];
|
|
16
|
+
* const transitions = useAnimatedTransition(
|
|
17
|
+
* items,
|
|
18
|
+
* item => item,
|
|
19
|
+
* { duration: 300 }
|
|
20
|
+
* );
|
|
21
|
+
*
|
|
22
|
+
* return (
|
|
23
|
+
* <>
|
|
24
|
+
* {transitions.map(({ item, key, value }) => (
|
|
25
|
+
* <Animated.div
|
|
26
|
+
* key={key}
|
|
27
|
+
* style={{
|
|
28
|
+
* opacity: value,
|
|
29
|
+
* transform: value.to(v => `translateY(${(1 - v) * 20}px)`),
|
|
30
|
+
* }}
|
|
31
|
+
* >
|
|
32
|
+
* {item}
|
|
33
|
+
* </Animated.div>
|
|
34
|
+
* ))}
|
|
35
|
+
* </>
|
|
36
|
+
* );
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
export function useAnimatedTransition(items, keyExtractor, config) {
|
|
40
|
+
const duration = config?.duration ?? 300;
|
|
41
|
+
const easing = config?.easing ?? easingFunctions.springGentle;
|
|
42
|
+
const enterDelay = config?.enterDelay ?? 0;
|
|
43
|
+
const leaveDelay = config?.leaveDelay ?? 0;
|
|
44
|
+
const fromValue = config?.from ?? 0;
|
|
45
|
+
const toValue = config?.to ?? 1;
|
|
46
|
+
// Track all active transition items
|
|
47
|
+
const transitionsRef = useRef(new Map());
|
|
48
|
+
const [, forceUpdate] = useState({});
|
|
49
|
+
// Track previous items for comparison
|
|
50
|
+
const prevItemsRef = useRef([]);
|
|
51
|
+
// Handle entering, updating, and leaving items
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
const prevItems = prevItemsRef.current;
|
|
54
|
+
const prevKeys = new Set(prevItems.map(keyExtractor));
|
|
55
|
+
const currentKeys = new Set(items.map(keyExtractor));
|
|
56
|
+
// Find entering items (in current but not in previous)
|
|
57
|
+
const enteringKeys = items
|
|
58
|
+
.map(keyExtractor)
|
|
59
|
+
.filter((key) => !prevKeys.has(key));
|
|
60
|
+
// Find leaving items (in previous but not in current)
|
|
61
|
+
const leavingKeys = prevItems
|
|
62
|
+
.map(keyExtractor)
|
|
63
|
+
.filter((key) => !currentKeys.has(key));
|
|
64
|
+
// Handle entering items
|
|
65
|
+
enteringKeys.forEach((key, index) => {
|
|
66
|
+
const item = items.find((i) => keyExtractor(i) === key);
|
|
67
|
+
const existing = transitionsRef.current.get(key);
|
|
68
|
+
if (existing) {
|
|
69
|
+
// Item was leaving but came back - update it
|
|
70
|
+
existing.item = item;
|
|
71
|
+
existing.phase = 'enter';
|
|
72
|
+
setTimeout(() => {
|
|
73
|
+
void existing.value.start(toValue, { duration, easing });
|
|
74
|
+
}, enterDelay + index * 50); // Stagger entering items
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
// New item
|
|
78
|
+
const transitionItem = {
|
|
79
|
+
item,
|
|
80
|
+
key,
|
|
81
|
+
phase: 'enter',
|
|
82
|
+
value: null, // Will be set below
|
|
83
|
+
};
|
|
84
|
+
transitionsRef.current.set(key, transitionItem);
|
|
85
|
+
forceUpdate({});
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
// Handle leaving items
|
|
89
|
+
leavingKeys.forEach((key) => {
|
|
90
|
+
const existing = transitionsRef.current.get(key);
|
|
91
|
+
if (existing && existing.phase !== 'leave') {
|
|
92
|
+
existing.phase = 'leave';
|
|
93
|
+
setTimeout(() => {
|
|
94
|
+
void existing.value
|
|
95
|
+
.start(fromValue, { duration, easing })
|
|
96
|
+
.then(() => {
|
|
97
|
+
// Remove from transitions after leave animation completes
|
|
98
|
+
transitionsRef.current.delete(key);
|
|
99
|
+
forceUpdate({});
|
|
100
|
+
});
|
|
101
|
+
}, leaveDelay);
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
// Update items that stayed
|
|
105
|
+
items.forEach((item) => {
|
|
106
|
+
const key = keyExtractor(item);
|
|
107
|
+
const existing = transitionsRef.current.get(key);
|
|
108
|
+
if (existing?.phase === 'update') {
|
|
109
|
+
existing.item = item;
|
|
110
|
+
}
|
|
111
|
+
else if (existing?.phase === 'enter') {
|
|
112
|
+
// Still entering
|
|
113
|
+
existing.item = item;
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
prevItemsRef.current = items;
|
|
117
|
+
}, [
|
|
118
|
+
items,
|
|
119
|
+
keyExtractor,
|
|
120
|
+
duration,
|
|
121
|
+
easing,
|
|
122
|
+
enterDelay,
|
|
123
|
+
leaveDelay,
|
|
124
|
+
fromValue,
|
|
125
|
+
toValue,
|
|
126
|
+
]);
|
|
127
|
+
// Build the result array with proper ordering
|
|
128
|
+
// Items maintain their order, leaving items go at the end
|
|
129
|
+
const result = [];
|
|
130
|
+
// First, add current items in order
|
|
131
|
+
items.forEach((item) => {
|
|
132
|
+
const key = keyExtractor(item);
|
|
133
|
+
let transition = transitionsRef.current.get(key);
|
|
134
|
+
if (!transition) {
|
|
135
|
+
// Create new transition item - this is needed on first render
|
|
136
|
+
transition = {
|
|
137
|
+
item,
|
|
138
|
+
key,
|
|
139
|
+
phase: 'enter',
|
|
140
|
+
value: null,
|
|
141
|
+
};
|
|
142
|
+
transitionsRef.current.set(key, transition);
|
|
143
|
+
}
|
|
144
|
+
else {
|
|
145
|
+
// Update the item reference
|
|
146
|
+
transition.item = item;
|
|
147
|
+
}
|
|
148
|
+
result.push(transition);
|
|
149
|
+
});
|
|
150
|
+
// Then add leaving items at the end
|
|
151
|
+
transitionsRef.current.forEach((transition) => {
|
|
152
|
+
if (transition.phase === 'leave') {
|
|
153
|
+
result.push(transition);
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
return result;
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* Wrapper component for a single animated transition item.
|
|
160
|
+
* This component owns the animated value for proper React lifecycle.
|
|
161
|
+
*/
|
|
162
|
+
export function TransitionItemWrapper({ item, phase, config, children, }) {
|
|
163
|
+
const duration = config?.duration ?? 300;
|
|
164
|
+
const easing = config?.easing ?? easingFunctions.springGentle;
|
|
165
|
+
const fromValue = config?.from ?? 0;
|
|
166
|
+
const toValue = config?.to ?? 1;
|
|
167
|
+
const enterDelay = config?.enterDelay ?? 0;
|
|
168
|
+
const value = useAnimatedValue(phase === 'enter' ? fromValue : toValue);
|
|
169
|
+
const hasAnimatedRef = useRef(false);
|
|
170
|
+
useEffect(() => {
|
|
171
|
+
if (phase === 'enter' && !hasAnimatedRef.current) {
|
|
172
|
+
hasAnimatedRef.current = true;
|
|
173
|
+
setTimeout(() => {
|
|
174
|
+
void value.start(toValue, { duration, easing });
|
|
175
|
+
}, enterDelay);
|
|
176
|
+
}
|
|
177
|
+
else if (phase === 'leave') {
|
|
178
|
+
void value.start(fromValue, { duration, easing });
|
|
179
|
+
}
|
|
180
|
+
}, [phase, duration, easing, fromValue, toValue, enterDelay, value]);
|
|
181
|
+
return _jsx(_Fragment, { children: children(value, item, phase) });
|
|
182
|
+
}
|
|
183
|
+
/**
|
|
184
|
+
* Simplified hook for single item mount/unmount animation.
|
|
185
|
+
* Use this when you just need to animate a single element in/out.
|
|
186
|
+
*
|
|
187
|
+
* @param show - Whether the item should be visible
|
|
188
|
+
* @param config - Animation configuration
|
|
189
|
+
* @returns Object with `visible` (whether to render), `value` (animated 0-1)
|
|
190
|
+
*
|
|
191
|
+
* @example
|
|
192
|
+
* ```tsx
|
|
193
|
+
* const { visible, value } = useAnimatedPresence(isOpen, { duration: 200 });
|
|
194
|
+
*
|
|
195
|
+
* return visible ? (
|
|
196
|
+
* <Animated.div style={{ opacity: value }}>
|
|
197
|
+
* Content
|
|
198
|
+
* </Animated.div>
|
|
199
|
+
* ) : null;
|
|
200
|
+
* ```
|
|
201
|
+
*/
|
|
202
|
+
export function useAnimatedPresence(show, config) {
|
|
203
|
+
const duration = config?.duration ?? 300;
|
|
204
|
+
const easing = config?.easing ?? easingFunctions.springGentle;
|
|
205
|
+
const fromValue = config?.from ?? 0;
|
|
206
|
+
const toValue = config?.to ?? 1;
|
|
207
|
+
const value = useAnimatedValue(show ? toValue : fromValue);
|
|
208
|
+
const [visible, setVisible] = useState(show);
|
|
209
|
+
const onRestCallback = useCallback(() => {
|
|
210
|
+
if (!show) {
|
|
211
|
+
setVisible(false);
|
|
212
|
+
}
|
|
213
|
+
config?.onRest?.();
|
|
214
|
+
}, [show, config?.onRest]);
|
|
215
|
+
useEffect(() => {
|
|
216
|
+
if (show) {
|
|
217
|
+
setVisible(true);
|
|
218
|
+
void value.start(toValue, { duration, easing });
|
|
219
|
+
}
|
|
220
|
+
else if (visible) {
|
|
221
|
+
void value.start(fromValue, { duration, easing, onRest: onRestCallback });
|
|
222
|
+
}
|
|
223
|
+
}, [
|
|
224
|
+
show,
|
|
225
|
+
duration,
|
|
226
|
+
easing,
|
|
227
|
+
fromValue,
|
|
228
|
+
toValue,
|
|
229
|
+
onRestCallback,
|
|
230
|
+
value,
|
|
231
|
+
visible,
|
|
232
|
+
]);
|
|
233
|
+
return { visible, value };
|
|
234
|
+
}
|
|
235
|
+
//# sourceMappingURL=useAnimatedTransition.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAnimatedTransition.js","sourceRoot":"","sources":["../../../src/client/animation/useAnimatedTransition.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export type ScrollAnimationType = 'fadeIn' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'scale' | 'none';
|
|
2
|
+
export interface ScrollAnimationConfig {
|
|
3
|
+
/** Animation type to apply */
|
|
4
|
+
animation?: ScrollAnimationType;
|
|
5
|
+
/** Delay before animation starts in ms (default: 0) */
|
|
6
|
+
delay?: number;
|
|
7
|
+
/** Animation duration in ms (default: 600) */
|
|
8
|
+
duration?: number;
|
|
9
|
+
/** Viewport threshold to trigger animation (0-1, default: 0.2) */
|
|
10
|
+
threshold?: number;
|
|
11
|
+
/** Only animate once (default: true) */
|
|
12
|
+
once?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export interface ScrollAnimationStyle {
|
|
15
|
+
opacity: number;
|
|
16
|
+
transform: string;
|
|
17
|
+
transition?: string;
|
|
18
|
+
}
|
|
19
|
+
export declare function useScrollAnimation<T extends HTMLElement = HTMLDivElement>(config?: ScrollAnimationConfig): {
|
|
20
|
+
ref: import("react").RefObject<T | null>;
|
|
21
|
+
style: ScrollAnimationStyle;
|
|
22
|
+
isVisible: boolean;
|
|
23
|
+
progress: number;
|
|
24
|
+
};
|
|
25
|
+
export declare function useStaggerAnimation(config: {
|
|
26
|
+
baseDelay?: number;
|
|
27
|
+
startDelay?: number;
|
|
28
|
+
animation?: ScrollAnimationType;
|
|
29
|
+
duration?: number;
|
|
30
|
+
threshold?: number;
|
|
31
|
+
}): (index: number) => ScrollAnimationConfig;
|
|
32
|
+
//# sourceMappingURL=useScrollAnimation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollAnimation.d.ts","sourceRoot":"","sources":["../../../src/client/animation/useScrollAnimation.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,SAAS,GACT,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,MAAM,CAAC;AAEX,MAAM,WAAW,qBAAqB;IACpC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EACvE,MAAM,GAAE,qBAA0B;;;;;EAiFnC;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,WAUW,MAAM,KAAG,qBAAqB,CAQzC"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
|
|
2
|
+
import { easingFunctions, useAnimatedValue, useAnimatedValueTracker, } from './animatedValue.js';
|
|
3
|
+
export function useScrollAnimation(config = {}) {
|
|
4
|
+
const { animation = 'fadeIn', delay = 0, duration, threshold = 0.2, once = true, } = config;
|
|
5
|
+
const ref = useRef(null);
|
|
6
|
+
const [isVisible, setIsVisible] = useState(true);
|
|
7
|
+
const hasAnimated = useRef(false);
|
|
8
|
+
const animatedValue = useAnimatedValue(1);
|
|
9
|
+
const progress = useAnimatedValueTracker(animatedValue);
|
|
10
|
+
useLayoutEffect(() => {
|
|
11
|
+
const element = ref.current;
|
|
12
|
+
if (!element)
|
|
13
|
+
return;
|
|
14
|
+
const rect = element.getBoundingClientRect();
|
|
15
|
+
if (rect.top >= window.innerHeight) {
|
|
16
|
+
animatedValue.set(0);
|
|
17
|
+
setIsVisible(false);
|
|
18
|
+
hasAnimated.current = false;
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
hasAnimated.current = true;
|
|
22
|
+
}
|
|
23
|
+
}, [animatedValue]);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
const element = ref.current;
|
|
26
|
+
if (!element)
|
|
27
|
+
return;
|
|
28
|
+
const observer = new IntersectionObserver((entries) => {
|
|
29
|
+
entries.forEach((entry) => {
|
|
30
|
+
if (entry.isIntersecting) {
|
|
31
|
+
if (once && hasAnimated.current)
|
|
32
|
+
return;
|
|
33
|
+
hasAnimated.current = true;
|
|
34
|
+
setIsVisible(true);
|
|
35
|
+
setTimeout(() => {
|
|
36
|
+
void animatedValue.start(1, {
|
|
37
|
+
duration,
|
|
38
|
+
easing: easingFunctions.springBouncy,
|
|
39
|
+
});
|
|
40
|
+
}, delay);
|
|
41
|
+
}
|
|
42
|
+
else if (!once) {
|
|
43
|
+
setIsVisible(false);
|
|
44
|
+
animatedValue.set(0);
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
}, { threshold });
|
|
48
|
+
observer.observe(element);
|
|
49
|
+
return () => observer.disconnect();
|
|
50
|
+
}, [animatedValue, delay, duration, once, threshold]);
|
|
51
|
+
const getStyle = useCallback(() => {
|
|
52
|
+
const p = progress;
|
|
53
|
+
switch (animation) {
|
|
54
|
+
case 'fadeIn':
|
|
55
|
+
return { opacity: p, transform: 'none' };
|
|
56
|
+
case 'slideUp':
|
|
57
|
+
return { opacity: p, transform: `translateY(${40 * (1 - p)}px)` };
|
|
58
|
+
case 'slideDown':
|
|
59
|
+
return { opacity: p, transform: `translateY(${-40 * (1 - p)}px)` };
|
|
60
|
+
case 'slideLeft':
|
|
61
|
+
return { opacity: p, transform: `translateX(${40 * (1 - p)}px)` };
|
|
62
|
+
case 'slideRight':
|
|
63
|
+
return { opacity: p, transform: `translateX(${-40 * (1 - p)}px)` };
|
|
64
|
+
case 'scale':
|
|
65
|
+
return { opacity: p, transform: `scale(${0.9 + 0.1 * p})` };
|
|
66
|
+
case 'none':
|
|
67
|
+
default:
|
|
68
|
+
return { opacity: 1, transform: 'none' };
|
|
69
|
+
}
|
|
70
|
+
}, [animation, progress]);
|
|
71
|
+
return { ref, style: getStyle(), isVisible, progress };
|
|
72
|
+
}
|
|
73
|
+
export function useStaggerAnimation(config) {
|
|
74
|
+
const { baseDelay = 100, startDelay = 0, animation = 'slideUp', duration = 600, threshold = 0.2, } = config;
|
|
75
|
+
return useCallback((index) => ({
|
|
76
|
+
animation,
|
|
77
|
+
delay: startDelay + index * baseDelay,
|
|
78
|
+
duration,
|
|
79
|
+
threshold,
|
|
80
|
+
}), [animation, baseDelay, duration, startDelay, threshold]);
|
|
81
|
+
}
|
|
82
|
+
//# sourceMappingURL=useScrollAnimation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollAnimation.js","sourceRoot":"","sources":["../../../src/client/animation/useScrollAnimation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,oBAAoB,CAAC;AA8B5B,MAAM,UAAU,kBAAkB,CAChC,SAAgC,EAAE;IAElC,MAAM,EACJ,SAAS,GAAG,QAAQ,EACpB,KAAK,GAAG,CAAC,EACT,QAAQ,EACR,SAAS,GAAG,GAAG,EACf,IAAI,GAAG,IAAI,GACZ,GAAG,MAAM,CAAC;IAEX,MAAM,GAAG,GAAG,MAAM,CAAI,IAAI,CAAC,CAAC;IAC5B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,aAAa,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC1C,MAAM,QAAQ,GAAG,uBAAuB,CAAC,aAAa,CAAC,CAAC;IAExD,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAC7C,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC;YACnC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACrB,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,EAAE;YACV,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACxB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;oBACzB,IAAI,IAAI,IAAI,WAAW,CAAC,OAAO;wBAAE,OAAO;oBACxC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC3B,YAAY,CAAC,IAAI,CAAC,CAAC;oBACnB,UAAU,CAAC,GAAG,EAAE;wBACd,KAAK,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE;4BAC1B,QAAQ;4BACR,MAAM,EAAE,eAAe,CAAC,YAAY;yBACrC,CAAC,CAAC;oBACL,CAAC,EAAE,KAAK,CAAC,CAAC;gBACZ,CAAC;qBAAM,IAAI,CAAC,IAAI,EAAE,CAAC;oBACjB,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,EACD,EAAE,SAAS,EAAE,CACd,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtD,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAyB,EAAE;QACtD,MAAM,CAAC,GAAG,QAAQ,CAAC;QACnB,QAAQ,SAAS,EAAE,CAAC;YAClB,KAAK,QAAQ;gBACX,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;YAC3C,KAAK,SAAS;gBACZ,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;YACpE,KAAK,WAAW;gBACd,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;YACrE,KAAK,WAAW;gBACd,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;YACpE,KAAK,YAAY;gBACf,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;YACrE,KAAK,OAAO;gBACV,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;YAC9D,KAAK,MAAM,CAAC;YACZ;gBACE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;QAC7C,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,MAMnC;IACC,MAAM,EACJ,SAAS,GAAG,GAAG,EACf,UAAU,GAAG,CAAC,EACd,SAAS,GAAG,SAAS,EACrB,QAAQ,GAAG,GAAG,EACd,SAAS,GAAG,GAAG,GAChB,GAAG,MAAM,CAAC;IAEX,OAAO,WAAW,CAChB,CAAC,KAAa,EAAyB,EAAE,CAAC,CAAC;QACzC,SAAS;QACT,KAAK,EAAE,UAAU,GAAG,KAAK,GAAG,SAAS;QACrC,QAAQ;QACR,SAAS;KACV,CAAC,EACF,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC,CACxD,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare function AlertPopup(props: {
|
|
2
|
+
message: string;
|
|
3
|
+
color?: string;
|
|
4
|
+
timeout?: number;
|
|
5
|
+
onDismiss?: () => void;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function alertShowError(message: string): void;
|
|
8
|
+
export declare function alertShowMessage(message: string, color?: string): void;
|
|
9
|
+
//# sourceMappingURL=Alert.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/client/components/Alert.tsx"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,2CAiDA;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAGpD;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAuBtE"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
|
+
import ReactDOM from 'react-dom/client';
|
|
4
|
+
export function AlertPopup(props) {
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
const timeout = props.timeout ?? 3000;
|
|
7
|
+
const onDismiss = props.onDismiss;
|
|
8
|
+
const timer = setTimeout(() => {
|
|
9
|
+
onDismiss?.();
|
|
10
|
+
}, timeout);
|
|
11
|
+
return () => clearTimeout(timer);
|
|
12
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13
|
+
}, []);
|
|
14
|
+
return (_jsx("div", { style: {
|
|
15
|
+
position: 'fixed',
|
|
16
|
+
top: 24,
|
|
17
|
+
left: '50%',
|
|
18
|
+
transform: 'translateX(-50%)',
|
|
19
|
+
zIndex: 9999,
|
|
20
|
+
backgroundColor: props.color ?? 'var(--app-background, #222)',
|
|
21
|
+
color: 'var(--app-foreground, #fff)',
|
|
22
|
+
borderRadius: 16,
|
|
23
|
+
overflow: 'clip',
|
|
24
|
+
boxShadow: '0 4px 24px rgba(0,0,0,0.2)',
|
|
25
|
+
display: 'flex',
|
|
26
|
+
alignItems: 'center',
|
|
27
|
+
justifyContent: 'center',
|
|
28
|
+
paddingLeft: 4,
|
|
29
|
+
paddingRight: 4,
|
|
30
|
+
paddingTop: 2,
|
|
31
|
+
paddingBottom: 2,
|
|
32
|
+
}, children: _jsx("span", { style: {
|
|
33
|
+
textAlign: 'center',
|
|
34
|
+
paddingTop: 12,
|
|
35
|
+
paddingBottom: 12,
|
|
36
|
+
paddingLeft: 16,
|
|
37
|
+
paddingRight: 16,
|
|
38
|
+
minWidth: 200,
|
|
39
|
+
fontSize: 14,
|
|
40
|
+
fontWeight: 600,
|
|
41
|
+
}, children: props.message }) }));
|
|
42
|
+
}
|
|
43
|
+
export function alertShowError(message) {
|
|
44
|
+
console.error(`[ALERT] ${message}`);
|
|
45
|
+
alertShowMessage(message, undefined);
|
|
46
|
+
}
|
|
47
|
+
export function alertShowMessage(message, color) {
|
|
48
|
+
console.log(`[ALERT] ${message}`);
|
|
49
|
+
const container = document.createElement('div');
|
|
50
|
+
document.body.appendChild(container);
|
|
51
|
+
const root = ReactDOM.createRoot(container);
|
|
52
|
+
const dismiss = () => {
|
|
53
|
+
root.unmount();
|
|
54
|
+
if (document.body.contains(container)) {
|
|
55
|
+
document.body.removeChild(container);
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
root.render(_jsx(AlertPopup, { message: message, color: color, timeout: 3000, onDismiss: dismiss }));
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=Alert.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/client/components/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AAExC,MAAM,UAAU,UAAU,CAAC,KAK1B;IACC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC;QACtC,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;QAClC,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,SAAS,EAAE,EAAE,CAAC;QAChB,CAAC,EAAE,OAAO,CAAC,CAAC;QACZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACjC,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,OAAO;YACjB,GAAG,EAAE,EAAE;YACP,IAAI,EAAE,KAAK;YACX,SAAS,EAAE,kBAAkB;YAC7B,MAAM,EAAE,IAAI;YACZ,eAAe,EAAE,KAAK,CAAC,KAAK,IAAI,6BAA6B;YAC7D,KAAK,EAAE,6BAA6B;YACpC,YAAY,EAAE,EAAE;YAChB,QAAQ,EAAE,MAAM;YAChB,SAAS,EAAE,4BAA4B;YACvC,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,CAAC;SACjB,YAED,eACE,KAAK,EAAE;gBACL,SAAS,EAAE,QAAQ;gBACnB,UAAU,EAAE,EAAE;gBACd,aAAa,EAAE,EAAE;gBACjB,WAAW,EAAE,EAAE;gBACf,YAAY,EAAE,EAAE;gBAChB,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,GAAG;aAChB,YAEA,KAAK,CAAC,OAAO,GACT,GACH,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,OAAe;IAC5C,OAAO,CAAC,KAAK,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC;IACpC,gBAAgB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AACvC,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,OAAe,EAAE,KAAc;IAC9D,OAAO,CAAC,GAAG,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC;IAElC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAErC,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YACtC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,MAAM,CACT,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,OAAO,GAClB,CACH,CAAC;AACJ,CAAC"}
|