panelui-native 0.1.0 → 0.4.0
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 +251 -0
- package/lib/module/components/alert/index.js +107 -24
- package/lib/module/components/alert/index.js.map +1 -1
- package/lib/module/components/avatar/index.js +1 -1
- package/lib/module/components/avatar/index.js.map +1 -1
- package/lib/module/components/badge/index.js +3 -3
- package/lib/module/components/badge/index.js.map +1 -1
- package/lib/module/components/bottom-sheet/index.js +35 -31
- package/lib/module/components/bottom-sheet/index.js.map +1 -1
- package/lib/module/components/button/index.js +44 -15
- package/lib/module/components/button/index.js.map +1 -1
- package/lib/module/components/card/index.js +5 -5
- package/lib/module/components/card/index.js.map +1 -1
- package/lib/module/components/checkbox/index.js +21 -8
- package/lib/module/components/checkbox/index.js.map +1 -1
- package/lib/module/components/dialog/index.js +21 -17
- package/lib/module/components/dialog/index.js.map +1 -1
- package/lib/module/components/empty-state/index.js +178 -0
- package/lib/module/components/empty-state/index.js.map +1 -0
- package/lib/module/components/frame/index.js +100 -0
- package/lib/module/components/frame/index.js.map +1 -0
- package/lib/module/components/inline-select/index.js +159 -0
- package/lib/module/components/inline-select/index.js.map +1 -0
- package/lib/module/components/input/index.js +1 -1
- package/lib/module/components/input/index.js.map +1 -1
- package/lib/module/components/input-group/index.js +132 -0
- package/lib/module/components/input-group/index.js.map +1 -0
- package/lib/module/components/label/index.js +117 -0
- package/lib/module/components/label/index.js.map +1 -0
- package/lib/module/components/progress/index.js +138 -0
- package/lib/module/components/progress/index.js.map +1 -0
- package/lib/module/components/select/index.js +35 -28
- package/lib/module/components/select/index.js.map +1 -1
- package/lib/module/components/skeleton/index.js +1 -1
- package/lib/module/components/skeleton/index.js.map +1 -1
- package/lib/module/components/spinner/index.js +1 -1
- package/lib/module/components/spinner/index.js.map +1 -1
- package/lib/module/components/steps/index.js +354 -0
- package/lib/module/components/steps/index.js.map +1 -0
- package/lib/module/components/tabs/index.js +9 -3
- package/lib/module/components/tabs/index.js.map +1 -1
- package/lib/module/components/toast/index.js +479 -0
- package/lib/module/components/toast/index.js.map +1 -0
- package/lib/module/components/toast/toast-store.js +81 -0
- package/lib/module/components/toast/toast-store.js.map +1 -0
- package/lib/module/components/typography/index.js +126 -0
- package/lib/module/components/typography/index.js.map +1 -0
- package/lib/module/icons/index.js +223 -2
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js +11 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/providers/panel-ui-provider.js +20 -8
- package/lib/module/providers/panel-ui-provider.js.map +1 -1
- package/lib/module/theme/use-theme.js +90 -3
- package/lib/module/theme/use-theme.js.map +1 -1
- package/lib/typescript/src/components/alert/index.d.ts +41 -19
- package/lib/typescript/src/components/alert/index.d.ts.map +1 -1
- package/lib/typescript/src/components/bottom-sheet/index.d.ts.map +1 -1
- package/lib/typescript/src/components/button/index.d.ts +39 -0
- package/lib/typescript/src/components/button/index.d.ts.map +1 -1
- package/lib/typescript/src/components/checkbox/index.d.ts +8 -0
- package/lib/typescript/src/components/checkbox/index.d.ts.map +1 -1
- package/lib/typescript/src/components/dialog/index.d.ts.map +1 -1
- package/lib/typescript/src/components/empty-state/index.d.ts +73 -0
- package/lib/typescript/src/components/empty-state/index.d.ts.map +1 -0
- package/lib/typescript/src/components/frame/index.d.ts +21 -0
- package/lib/typescript/src/components/frame/index.d.ts.map +1 -0
- package/lib/typescript/src/components/inline-select/index.d.ts +25 -0
- package/lib/typescript/src/components/inline-select/index.d.ts.map +1 -0
- package/lib/typescript/src/components/input-group/index.d.ts +34 -0
- package/lib/typescript/src/components/input-group/index.d.ts.map +1 -0
- package/lib/typescript/src/components/label/index.d.ts +28 -0
- package/lib/typescript/src/components/label/index.d.ts.map +1 -0
- package/lib/typescript/src/components/progress/index.d.ts +132 -0
- package/lib/typescript/src/components/progress/index.d.ts.map +1 -0
- package/lib/typescript/src/components/select/index.d.ts.map +1 -1
- package/lib/typescript/src/components/spinner/index.d.ts +2 -2
- package/lib/typescript/src/components/spinner/index.d.ts.map +1 -1
- package/lib/typescript/src/components/steps/index.d.ts +62 -0
- package/lib/typescript/src/components/steps/index.d.ts.map +1 -0
- package/lib/typescript/src/components/tabs/index.d.ts.map +1 -1
- package/lib/typescript/src/components/toast/index.d.ts +176 -0
- package/lib/typescript/src/components/toast/index.d.ts.map +1 -0
- package/lib/typescript/src/components/toast/toast-store.d.ts +65 -0
- package/lib/typescript/src/components/toast/toast-store.d.ts.map +1 -0
- package/lib/typescript/src/components/typography/index.d.ts +77 -0
- package/lib/typescript/src/components/typography/index.d.ts.map +1 -0
- package/lib/typescript/src/icons/index.d.ts +25 -0
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +12 -3
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/providers/panel-ui-provider.d.ts +20 -5
- package/lib/typescript/src/providers/panel-ui-provider.d.ts.map +1 -1
- package/lib/typescript/src/theme/use-theme.d.ts +64 -4
- package/lib/typescript/src/theme/use-theme.d.ts.map +1 -1
- package/package.json +28 -5
- package/src/components/alert/index.tsx +104 -28
- package/src/components/avatar/index.tsx +1 -1
- package/src/components/badge/index.tsx +3 -3
- package/src/components/bottom-sheet/index.tsx +8 -3
- package/src/components/button/index.tsx +47 -7
- package/src/components/card/index.tsx +5 -5
- package/src/components/checkbox/index.tsx +18 -4
- package/src/components/dialog/index.tsx +10 -5
- package/src/components/empty-state/index.tsx +136 -0
- package/src/components/frame/index.tsx +104 -0
- package/src/components/inline-select/index.tsx +185 -0
- package/src/components/input/index.tsx +1 -1
- package/src/components/input-group/index.tsx +164 -0
- package/src/components/label/index.tsx +128 -0
- package/src/components/progress/index.tsx +147 -0
- package/src/components/select/index.tsx +30 -23
- package/src/components/skeleton/index.tsx +1 -1
- package/src/components/spinner/index.tsx +1 -1
- package/src/components/steps/index.tsx +343 -0
- package/src/components/tabs/index.tsx +10 -2
- package/src/components/toast/index.tsx +447 -0
- package/src/components/toast/toast-store.ts +120 -0
- package/src/components/typography/index.tsx +121 -0
- package/src/icons/index.tsx +152 -1
- package/src/index.ts +82 -3
- package/src/providers/panel-ui-provider.tsx +35 -10
- package/src/theme/use-theme.ts +119 -4
- package/theme.css +446 -108
|
@@ -0,0 +1,479 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Toast — transient notification.
|
|
5
|
+
*
|
|
6
|
+
* Adapted from: heroui-inc/heroui-native src/components/toast/
|
|
7
|
+
* (the three usage patterns — string, config object, custom component — the
|
|
8
|
+
* Title / Description / Action / Close anatomy, placement, and swipe-to-
|
|
9
|
+
* dismiss). Styled with Coss UI tokens and PanelUI's Alert status palette.
|
|
10
|
+
*
|
|
11
|
+
* The viewport is mounted for you by PanelUIProvider; `useToast()` works
|
|
12
|
+
* anywhere below it.
|
|
13
|
+
*/
|
|
14
|
+
import { createContext, useCallback, useContext, useMemo, useSyncExternalStore } from 'react';
|
|
15
|
+
import { View } from 'react-native';
|
|
16
|
+
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
17
|
+
import Animated, { Easing, Extrapolation, FadeInDown, FadeInUp, Keyframe, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withDecay, withSpring, withTiming } from 'react-native-reanimated';
|
|
18
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
19
|
+
import { tv } from 'tailwind-variants';
|
|
20
|
+
import { useCSSVariable } from 'uniwind';
|
|
21
|
+
import { Portal } from "../../primitives/portal.js";
|
|
22
|
+
import { Text } from "../../primitives/text.js";
|
|
23
|
+
import { cn } from "../../utils/cn.js";
|
|
24
|
+
import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from "../../icons/index.js";
|
|
25
|
+
import { Button } from "../button/index.js";
|
|
26
|
+
import { toast, toastStore } from "./toast-store.js";
|
|
27
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
|
+
const SPRING = {
|
|
29
|
+
damping: 20,
|
|
30
|
+
stiffness: 260,
|
|
31
|
+
mass: 0.6
|
|
32
|
+
};
|
|
33
|
+
/** Drag distance past which a release dismisses. */
|
|
34
|
+
const DISMISS_DISTANCE = 50;
|
|
35
|
+
/** Fling speed past which a release dismisses regardless of distance. */
|
|
36
|
+
const DISMISS_VELOCITY = 500;
|
|
37
|
+
/** How far a toast can be dragged away from its edge before it stops moving. */
|
|
38
|
+
const RUBBER_BAND_LIMIT = 40;
|
|
39
|
+
/** How far a toast travels on entry. Short, so the spring has little to settle. */
|
|
40
|
+
const ENTER_OFFSET = 100;
|
|
41
|
+
/** Newest toasts only; older ones are dropped rather than stacking off-screen. */
|
|
42
|
+
const MAX_VISIBLE = 3;
|
|
43
|
+
|
|
44
|
+
/*
|
|
45
|
+
* Entering/exiting animations, from heroui-inc/heroui-native
|
|
46
|
+
* src/components/toast/toast.animation.ts.
|
|
47
|
+
*
|
|
48
|
+
* `mass(3)` is doing the important work: a heavy spring settles without the
|
|
49
|
+
* visible overshoot a default-mass one gives. `withInitialValues` keeps
|
|
50
|
+
* opacity at 1 so the toast slides rather than fades, and starts it
|
|
51
|
+
* ENTER_OFFSET px away instead of off-screen.
|
|
52
|
+
*/
|
|
53
|
+
const enteringTop = FadeInUp.springify().withInitialValues({
|
|
54
|
+
opacity: 1,
|
|
55
|
+
transform: [{
|
|
56
|
+
translateY: -ENTER_OFFSET
|
|
57
|
+
}]
|
|
58
|
+
}).mass(3);
|
|
59
|
+
const enteringBottom = FadeInDown.springify().withInitialValues({
|
|
60
|
+
opacity: 1,
|
|
61
|
+
transform: [{
|
|
62
|
+
translateY: ENTER_OFFSET
|
|
63
|
+
}]
|
|
64
|
+
}).mass(3);
|
|
65
|
+
const exitKeyframe = offset => new Keyframe({
|
|
66
|
+
0: {
|
|
67
|
+
opacity: 1,
|
|
68
|
+
transform: [{
|
|
69
|
+
translateY: 0
|
|
70
|
+
}, {
|
|
71
|
+
scale: 1
|
|
72
|
+
}]
|
|
73
|
+
},
|
|
74
|
+
100: {
|
|
75
|
+
opacity: 0.5,
|
|
76
|
+
transform: [{
|
|
77
|
+
translateY: offset
|
|
78
|
+
}, {
|
|
79
|
+
scale: 0.97
|
|
80
|
+
}],
|
|
81
|
+
easing: Easing.bezier(0.4, 0, 1, 1)
|
|
82
|
+
}
|
|
83
|
+
}).duration(150);
|
|
84
|
+
const exitingTop = exitKeyframe(-ENTER_OFFSET);
|
|
85
|
+
const exitingBottom = exitKeyframe(ENTER_OFFSET);
|
|
86
|
+
const toastVariants = tv({
|
|
87
|
+
slots: {
|
|
88
|
+
root: 'w-full flex-row items-start gap-3 rounded-2xl border px-4 py-3.5 shadow-lg',
|
|
89
|
+
indicator: 'pt-px',
|
|
90
|
+
content: 'flex-1 gap-0.5',
|
|
91
|
+
title: 'text-sm font-medium',
|
|
92
|
+
description: 'text-sm text-muted-foreground'
|
|
93
|
+
},
|
|
94
|
+
variants: {
|
|
95
|
+
variant: {
|
|
96
|
+
default: {
|
|
97
|
+
root: 'border-border bg-popover',
|
|
98
|
+
title: 'text-popover-foreground'
|
|
99
|
+
},
|
|
100
|
+
info: {
|
|
101
|
+
root: 'border-info/32 bg-popover',
|
|
102
|
+
title: 'text-info-foreground'
|
|
103
|
+
},
|
|
104
|
+
success: {
|
|
105
|
+
root: 'border-success/32 bg-popover',
|
|
106
|
+
title: 'text-success-foreground'
|
|
107
|
+
},
|
|
108
|
+
warning: {
|
|
109
|
+
root: 'border-warning/32 bg-popover',
|
|
110
|
+
title: 'text-warning-foreground'
|
|
111
|
+
},
|
|
112
|
+
destructive: {
|
|
113
|
+
root: 'border-destructive/32 bg-popover',
|
|
114
|
+
title: 'text-destructive-foreground'
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
},
|
|
118
|
+
defaultVariants: {
|
|
119
|
+
variant: 'default'
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
const INDICATOR_COLOR_VAR = {
|
|
123
|
+
default: '--color-muted-foreground',
|
|
124
|
+
info: '--color-info-foreground',
|
|
125
|
+
success: '--color-success-foreground',
|
|
126
|
+
warning: '--color-warning-foreground',
|
|
127
|
+
destructive: '--color-destructive-foreground'
|
|
128
|
+
};
|
|
129
|
+
const INDICATOR_ICON = {
|
|
130
|
+
default: InfoIcon,
|
|
131
|
+
info: InfoIcon,
|
|
132
|
+
success: CheckCircleIcon,
|
|
133
|
+
warning: AlertTriangleIcon,
|
|
134
|
+
destructive: AlertTriangleIcon
|
|
135
|
+
};
|
|
136
|
+
const ToastContext = /*#__PURE__*/createContext({
|
|
137
|
+
variant: 'default',
|
|
138
|
+
hide: () => {}
|
|
139
|
+
});
|
|
140
|
+
/**
|
|
141
|
+
* Presentational toast surface. Render it yourself only for custom toasts —
|
|
142
|
+
* `toast.show(...)` builds one for you from a config object.
|
|
143
|
+
*/
|
|
144
|
+
const ToastRoot = ({
|
|
145
|
+
className,
|
|
146
|
+
variant = 'default',
|
|
147
|
+
onHide,
|
|
148
|
+
children,
|
|
149
|
+
...props
|
|
150
|
+
}) => {
|
|
151
|
+
const context = useMemo(() => ({
|
|
152
|
+
variant,
|
|
153
|
+
hide: onHide ?? (() => {})
|
|
154
|
+
}), [variant, onHide]);
|
|
155
|
+
const {
|
|
156
|
+
root
|
|
157
|
+
} = toastVariants({
|
|
158
|
+
variant
|
|
159
|
+
});
|
|
160
|
+
return /*#__PURE__*/_jsx(ToastContext.Provider, {
|
|
161
|
+
value: context,
|
|
162
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
163
|
+
accessibilityRole: "alert",
|
|
164
|
+
accessibilityLiveRegion: "polite",
|
|
165
|
+
className: root({
|
|
166
|
+
className
|
|
167
|
+
}),
|
|
168
|
+
...props,
|
|
169
|
+
children: children
|
|
170
|
+
})
|
|
171
|
+
});
|
|
172
|
+
};
|
|
173
|
+
ToastRoot.displayName = 'Toast';
|
|
174
|
+
const ToastIndicator = ({
|
|
175
|
+
className,
|
|
176
|
+
iconProps,
|
|
177
|
+
children,
|
|
178
|
+
...props
|
|
179
|
+
}) => {
|
|
180
|
+
const {
|
|
181
|
+
variant
|
|
182
|
+
} = useContext(ToastContext);
|
|
183
|
+
const {
|
|
184
|
+
indicator
|
|
185
|
+
} = toastVariants({
|
|
186
|
+
variant
|
|
187
|
+
});
|
|
188
|
+
const themeColor = useCSSVariable(INDICATOR_COLOR_VAR[variant]);
|
|
189
|
+
const Icon = INDICATOR_ICON[variant];
|
|
190
|
+
const color = iconProps?.color ?? (typeof themeColor === 'string' ? themeColor : undefined);
|
|
191
|
+
return /*#__PURE__*/_jsx(View, {
|
|
192
|
+
className: indicator({
|
|
193
|
+
className
|
|
194
|
+
}),
|
|
195
|
+
...props,
|
|
196
|
+
children: children ?? /*#__PURE__*/_jsx(Icon, {
|
|
197
|
+
size: iconProps?.size ?? 18,
|
|
198
|
+
color: color
|
|
199
|
+
})
|
|
200
|
+
});
|
|
201
|
+
};
|
|
202
|
+
ToastIndicator.displayName = 'Toast.Indicator';
|
|
203
|
+
const ToastContent = ({
|
|
204
|
+
className,
|
|
205
|
+
...props
|
|
206
|
+
}) => {
|
|
207
|
+
const {
|
|
208
|
+
variant
|
|
209
|
+
} = useContext(ToastContext);
|
|
210
|
+
const {
|
|
211
|
+
content
|
|
212
|
+
} = toastVariants({
|
|
213
|
+
variant
|
|
214
|
+
});
|
|
215
|
+
return /*#__PURE__*/_jsx(View, {
|
|
216
|
+
className: content({
|
|
217
|
+
className
|
|
218
|
+
}),
|
|
219
|
+
...props
|
|
220
|
+
});
|
|
221
|
+
};
|
|
222
|
+
ToastContent.displayName = 'Toast.Content';
|
|
223
|
+
const ToastTitle = ({
|
|
224
|
+
className,
|
|
225
|
+
...props
|
|
226
|
+
}) => {
|
|
227
|
+
const {
|
|
228
|
+
variant
|
|
229
|
+
} = useContext(ToastContext);
|
|
230
|
+
const {
|
|
231
|
+
title
|
|
232
|
+
} = toastVariants({
|
|
233
|
+
variant
|
|
234
|
+
});
|
|
235
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
236
|
+
className: cn(title(), className),
|
|
237
|
+
...props
|
|
238
|
+
});
|
|
239
|
+
};
|
|
240
|
+
ToastTitle.displayName = 'Toast.Title';
|
|
241
|
+
const ToastDescription = ({
|
|
242
|
+
className,
|
|
243
|
+
...props
|
|
244
|
+
}) => {
|
|
245
|
+
const {
|
|
246
|
+
variant
|
|
247
|
+
} = useContext(ToastContext);
|
|
248
|
+
const {
|
|
249
|
+
description
|
|
250
|
+
} = toastVariants({
|
|
251
|
+
variant
|
|
252
|
+
});
|
|
253
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
254
|
+
className: cn(description(), className),
|
|
255
|
+
...props
|
|
256
|
+
});
|
|
257
|
+
};
|
|
258
|
+
ToastDescription.displayName = 'Toast.Description';
|
|
259
|
+
|
|
260
|
+
/** Trailing action button. Defaults to a subtle variant that reads on the popover surface. */
|
|
261
|
+
const ToastAction = ({
|
|
262
|
+
variant = 'secondary',
|
|
263
|
+
size = 'sm',
|
|
264
|
+
onPress,
|
|
265
|
+
...props
|
|
266
|
+
}) => {
|
|
267
|
+
const {
|
|
268
|
+
hide
|
|
269
|
+
} = useContext(ToastContext);
|
|
270
|
+
return /*#__PURE__*/_jsx(Button, {
|
|
271
|
+
variant: variant,
|
|
272
|
+
size: size,
|
|
273
|
+
onPress: event => {
|
|
274
|
+
onPress?.(event);
|
|
275
|
+
hide();
|
|
276
|
+
},
|
|
277
|
+
...props
|
|
278
|
+
});
|
|
279
|
+
};
|
|
280
|
+
ToastAction.displayName = 'Toast.Action';
|
|
281
|
+
const ToastClose = ({
|
|
282
|
+
className,
|
|
283
|
+
...props
|
|
284
|
+
}) => {
|
|
285
|
+
const {
|
|
286
|
+
hide
|
|
287
|
+
} = useContext(ToastContext);
|
|
288
|
+
const color = useCSSVariable('--color-muted-foreground');
|
|
289
|
+
return /*#__PURE__*/_jsx(View, {
|
|
290
|
+
className: cn('pt-px', className),
|
|
291
|
+
...props,
|
|
292
|
+
children: /*#__PURE__*/_jsx(Button, {
|
|
293
|
+
variant: "ghost",
|
|
294
|
+
size: "icon",
|
|
295
|
+
accessibilityLabel: "Dismiss notification",
|
|
296
|
+
className: "h-6 w-6 rounded-full",
|
|
297
|
+
onPress: hide,
|
|
298
|
+
children: /*#__PURE__*/_jsx(XIcon, {
|
|
299
|
+
size: 14,
|
|
300
|
+
color: typeof color === 'string' ? color : undefined
|
|
301
|
+
})
|
|
302
|
+
})
|
|
303
|
+
});
|
|
304
|
+
};
|
|
305
|
+
ToastClose.displayName = 'Toast.Close';
|
|
306
|
+
export const Toast = Object.assign(ToastRoot, {
|
|
307
|
+
Indicator: ToastIndicator,
|
|
308
|
+
Content: ToastContent,
|
|
309
|
+
Title: ToastTitle,
|
|
310
|
+
Description: ToastDescription,
|
|
311
|
+
Action: ToastAction,
|
|
312
|
+
Close: ToastClose
|
|
313
|
+
});
|
|
314
|
+
|
|
315
|
+
/* -------------------------------------------------------------------------- */
|
|
316
|
+
/* Viewport */
|
|
317
|
+
/* -------------------------------------------------------------------------- */
|
|
318
|
+
|
|
319
|
+
/**
|
|
320
|
+
* One queued toast.
|
|
321
|
+
*
|
|
322
|
+
* The entering spring is deliberately heavy (`mass(3)`) and travels only
|
|
323
|
+
* ENTER_OFFSET px rather than the full screen height. A default-mass spring
|
|
324
|
+
* across that distance overshoots visibly — it reads as a bounce, and arrives
|
|
325
|
+
* too fast to follow.
|
|
326
|
+
*
|
|
327
|
+
* Swiping is vertical and direction-aware: dragging toward the screen edge the
|
|
328
|
+
* toast came from dismisses it, dragging the other way rubber-bands against a
|
|
329
|
+
* hard limit. Matches heroui-native's toast.animation.ts.
|
|
330
|
+
*/
|
|
331
|
+
function ToastSlot({
|
|
332
|
+
item,
|
|
333
|
+
depth
|
|
334
|
+
}) {
|
|
335
|
+
const placement = item.placement ?? 'bottom';
|
|
336
|
+
const translateY = useSharedValue(0);
|
|
337
|
+
const scale = useSharedValue(1);
|
|
338
|
+
const hide = useCallback(() => toastStore.hide(item.id), [item.id]);
|
|
339
|
+
|
|
340
|
+
/** +1 when a downward drag dismisses (bottom), -1 when an upward one does. */
|
|
341
|
+
const dismissSign = placement === 'top' ? -1 : 1;
|
|
342
|
+
const pan = Gesture.Pan().activeOffsetY([-12, 12]).onBegin(() => {
|
|
343
|
+
scale.value = withTiming(0.995, {
|
|
344
|
+
duration: 120
|
|
345
|
+
});
|
|
346
|
+
}).onChange(event => {
|
|
347
|
+
const next = translateY.value + event.changeY;
|
|
348
|
+
// Toward the edge: follow the finger. Away from it: rubber-band, so the
|
|
349
|
+
// toast never detaches from where it belongs.
|
|
350
|
+
translateY.value = next * dismissSign > 0 ? next : interpolate(Math.abs(next), [0, 400], [0, RUBBER_BAND_LIMIT], Extrapolation.CLAMP) * -dismissSign;
|
|
351
|
+
}).onFinalize(event => {
|
|
352
|
+
scale.value = withTiming(1, {
|
|
353
|
+
duration: 120
|
|
354
|
+
});
|
|
355
|
+
const towardEdge = translateY.value * dismissSign > 0;
|
|
356
|
+
const shouldDismiss = towardEdge && (Math.abs(translateY.value) > DISMISS_DISTANCE || Math.abs(event.velocityY) > DISMISS_VELOCITY);
|
|
357
|
+
if (shouldDismiss) {
|
|
358
|
+
// Carry the flick's momentum instead of stopping dead, clamped so it
|
|
359
|
+
// can only continue toward the edge.
|
|
360
|
+
translateY.value = withDecay({
|
|
361
|
+
velocity: event.velocityY * 1.5,
|
|
362
|
+
clamp: dismissSign > 0 ? [0, Number.POSITIVE_INFINITY] : [Number.NEGATIVE_INFINITY, 0]
|
|
363
|
+
});
|
|
364
|
+
runOnJS(hide)();
|
|
365
|
+
} else {
|
|
366
|
+
translateY.value = withSpring(0, SPRING);
|
|
367
|
+
}
|
|
368
|
+
});
|
|
369
|
+
|
|
370
|
+
// Gesture transform only — the layout animations below own opacity and
|
|
371
|
+
// their own translate, and Reanimated cannot drive a property from both.
|
|
372
|
+
const gestureStyle = useAnimatedStyle(() => ({
|
|
373
|
+
transform: [{
|
|
374
|
+
translateY: translateY.value
|
|
375
|
+
}, {
|
|
376
|
+
scale: scale.value
|
|
377
|
+
}]
|
|
378
|
+
}));
|
|
379
|
+
const handle = {
|
|
380
|
+
id: item.id,
|
|
381
|
+
hide
|
|
382
|
+
};
|
|
383
|
+
return /*#__PURE__*/_jsx(Animated.View, {
|
|
384
|
+
entering: placement === 'top' ? enteringTop : enteringBottom,
|
|
385
|
+
exiting: placement === 'top' ? exitingTop : exitingBottom
|
|
386
|
+
// Toasts further down the stack sit back a little.
|
|
387
|
+
,
|
|
388
|
+
style: {
|
|
389
|
+
opacity: 1 - depth * 0.15,
|
|
390
|
+
transform: [{
|
|
391
|
+
scale: 1 - depth * 0.03
|
|
392
|
+
}]
|
|
393
|
+
},
|
|
394
|
+
children: /*#__PURE__*/_jsx(GestureDetector, {
|
|
395
|
+
gesture: pan,
|
|
396
|
+
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
397
|
+
style: gestureStyle,
|
|
398
|
+
children: item.component ? item.component(handle) : /*#__PURE__*/_jsxs(Toast, {
|
|
399
|
+
variant: item.variant ?? 'default',
|
|
400
|
+
onHide: hide,
|
|
401
|
+
children: [item.icon === null ? null : /*#__PURE__*/_jsx(Toast.Indicator, {
|
|
402
|
+
children: item.icon ?? undefined
|
|
403
|
+
}), /*#__PURE__*/_jsxs(Toast.Content, {
|
|
404
|
+
children: [item.label ? /*#__PURE__*/_jsx(Toast.Title, {
|
|
405
|
+
children: item.label
|
|
406
|
+
}) : null, item.description ? /*#__PURE__*/_jsx(Toast.Description, {
|
|
407
|
+
children: item.description
|
|
408
|
+
}) : null]
|
|
409
|
+
}), item.actionLabel ? /*#__PURE__*/_jsx(Toast.Action, {
|
|
410
|
+
onPress: () => item.onActionPress?.(handle),
|
|
411
|
+
children: item.actionLabel
|
|
412
|
+
}) : null, item.closable ?? !item.actionLabel ? /*#__PURE__*/_jsx(Toast.Close, {}) : null]
|
|
413
|
+
})
|
|
414
|
+
})
|
|
415
|
+
})
|
|
416
|
+
});
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
/** Absolutely positioned stack for one edge of the screen. */
|
|
420
|
+
function ToastStack({
|
|
421
|
+
items,
|
|
422
|
+
placement
|
|
423
|
+
}) {
|
|
424
|
+
const insets = useSafeAreaInsets();
|
|
425
|
+
if (items.length === 0) return null;
|
|
426
|
+
|
|
427
|
+
// Only the newest few are shown; older ones are dropped rather than piling
|
|
428
|
+
// up off-screen. Newest sits closest to the edge it entered from.
|
|
429
|
+
const visible = items.slice(-MAX_VISIBLE);
|
|
430
|
+
const ordered = placement === 'top' ? visible : [...visible].reverse();
|
|
431
|
+
return /*#__PURE__*/_jsx(View, {
|
|
432
|
+
pointerEvents: "box-none",
|
|
433
|
+
className: cn('absolute left-0 right-0 gap-2 px-4', placement === 'top' ? 'top-0' : 'bottom-0'),
|
|
434
|
+
style: {
|
|
435
|
+
paddingTop: placement === 'top' ? insets.top + 8 : 0,
|
|
436
|
+
paddingBottom: placement === 'bottom' ? insets.bottom + 8 : 0
|
|
437
|
+
},
|
|
438
|
+
children: ordered.map((item, index) => /*#__PURE__*/_jsx(ToastSlot, {
|
|
439
|
+
item: item,
|
|
440
|
+
depth: index
|
|
441
|
+
}, item.id))
|
|
442
|
+
});
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
/**
|
|
446
|
+
* Renders the toast queue. PanelUIProvider mounts this automatically — you
|
|
447
|
+
* only need it directly if you build your own provider.
|
|
448
|
+
*/
|
|
449
|
+
export function ToastViewport() {
|
|
450
|
+
const items = useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot);
|
|
451
|
+
if (items.length === 0) return null;
|
|
452
|
+
const top = items.filter(item => item.placement === 'top');
|
|
453
|
+
const bottom = items.filter(item => item.placement !== 'top');
|
|
454
|
+
return /*#__PURE__*/_jsxs(Portal, {
|
|
455
|
+
children: [/*#__PURE__*/_jsx(ToastStack, {
|
|
456
|
+
items: top,
|
|
457
|
+
placement: "top"
|
|
458
|
+
}), /*#__PURE__*/_jsx(ToastStack, {
|
|
459
|
+
items: bottom,
|
|
460
|
+
placement: "bottom"
|
|
461
|
+
})]
|
|
462
|
+
});
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
/**
|
|
466
|
+
* Access the toast API.
|
|
467
|
+
*
|
|
468
|
+
* ```tsx
|
|
469
|
+
* const { toast } = useToast();
|
|
470
|
+
* toast.show({ variant: 'success', label: 'Saved' });
|
|
471
|
+
* ```
|
|
472
|
+
*/
|
|
473
|
+
export function useToast() {
|
|
474
|
+
return {
|
|
475
|
+
toast
|
|
476
|
+
};
|
|
477
|
+
}
|
|
478
|
+
export { toast };
|
|
479
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","useCallback","useContext","useMemo","useSyncExternalStore","View","Gesture","GestureDetector","Animated","Easing","Extrapolation","FadeInDown","FadeInUp","Keyframe","interpolate","runOnJS","useAnimatedStyle","useSharedValue","withDecay","withSpring","withTiming","useSafeAreaInsets","tv","useCSSVariable","Portal","Text","cn","AlertTriangleIcon","CheckCircleIcon","InfoIcon","XIcon","Button","toast","toastStore","jsx","_jsx","jsxs","_jsxs","SPRING","damping","stiffness","mass","DISMISS_DISTANCE","DISMISS_VELOCITY","RUBBER_BAND_LIMIT","ENTER_OFFSET","MAX_VISIBLE","enteringTop","springify","withInitialValues","opacity","transform","translateY","enteringBottom","exitKeyframe","offset","scale","easing","bezier","duration","exitingTop","exitingBottom","toastVariants","slots","root","indicator","content","title","description","variants","variant","default","info","success","warning","destructive","defaultVariants","INDICATOR_COLOR_VAR","INDICATOR_ICON","ToastContext","hide","ToastRoot","className","onHide","children","props","context","Provider","value","accessibilityRole","accessibilityLiveRegion","displayName","ToastIndicator","iconProps","themeColor","Icon","color","undefined","size","ToastContent","ToastTitle","ToastDescription","ToastAction","onPress","event","ToastClose","accessibilityLabel","Toast","Object","assign","Indicator","Content","Title","Description","Action","Close","ToastSlot","item","depth","placement","id","dismissSign","pan","Pan","activeOffsetY","onBegin","onChange","next","changeY","Math","abs","CLAMP","onFinalize","towardEdge","shouldDismiss","velocityY","velocity","clamp","Number","POSITIVE_INFINITY","NEGATIVE_INFINITY","gestureStyle","handle","entering","exiting","style","gesture","component","icon","label","actionLabel","onActionPress","closable","ToastStack","items","insets","length","visible","slice","ordered","reverse","pointerEvents","paddingTop","top","paddingBottom","bottom","map","index","ToastViewport","subscribe","getSnapshot","filter","useToast"],"sourceRoot":"../../../../src","sources":["components/toast/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Toast queue.
|
|
5
|
+
*
|
|
6
|
+
* A module-level store rather than React state, so `toast.show()` works from
|
|
7
|
+
* anywhere — event handlers, API clients, code outside the component tree —
|
|
8
|
+
* without threading a context through. The viewport subscribes with
|
|
9
|
+
* `useSyncExternalStore`.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
/** Handle given to action callbacks so they can dismiss their own toast. */
|
|
13
|
+
|
|
14
|
+
const DEFAULT_DURATION = 4000;
|
|
15
|
+
let counter = 0;
|
|
16
|
+
class ToastStore {
|
|
17
|
+
items = [];
|
|
18
|
+
snapshot = this.items;
|
|
19
|
+
listeners = new Set();
|
|
20
|
+
timers = new Map();
|
|
21
|
+
subscribe = listener => {
|
|
22
|
+
this.listeners.add(listener);
|
|
23
|
+
return () => {
|
|
24
|
+
this.listeners.delete(listener);
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
getSnapshot = () => this.snapshot;
|
|
28
|
+
show = options => {
|
|
29
|
+
const resolved = typeof options === 'string' ? {
|
|
30
|
+
label: options
|
|
31
|
+
} : options;
|
|
32
|
+
const id = `toast-${++counter}`;
|
|
33
|
+
this.items = [...this.items, {
|
|
34
|
+
...resolved,
|
|
35
|
+
id
|
|
36
|
+
}];
|
|
37
|
+
this.emit();
|
|
38
|
+
const duration = resolved.duration ?? DEFAULT_DURATION;
|
|
39
|
+
if (duration > 0) {
|
|
40
|
+
this.timers.set(id, setTimeout(() => this.hide(id), duration));
|
|
41
|
+
}
|
|
42
|
+
return id;
|
|
43
|
+
};
|
|
44
|
+
hide = id => {
|
|
45
|
+
const timer = this.timers.get(id);
|
|
46
|
+
if (timer) {
|
|
47
|
+
clearTimeout(timer);
|
|
48
|
+
this.timers.delete(id);
|
|
49
|
+
}
|
|
50
|
+
if (!this.items.some(item => item.id === id)) return;
|
|
51
|
+
this.items = this.items.filter(item => item.id !== id);
|
|
52
|
+
this.emit();
|
|
53
|
+
};
|
|
54
|
+
hideAll = () => {
|
|
55
|
+
this.timers.forEach(clearTimeout);
|
|
56
|
+
this.timers.clear();
|
|
57
|
+
if (this.items.length === 0) return;
|
|
58
|
+
this.items = [];
|
|
59
|
+
this.emit();
|
|
60
|
+
};
|
|
61
|
+
emit() {
|
|
62
|
+
this.snapshot = this.items;
|
|
63
|
+
this.listeners.forEach(listener => listener());
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
export const toastStore = new ToastStore();
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* Imperative toast API. Also returned from `useToast()`.
|
|
70
|
+
*
|
|
71
|
+
* ```ts
|
|
72
|
+
* toast.show('Saved');
|
|
73
|
+
* toast.show({ variant: 'success', label: 'Deployed', actionLabel: 'View' });
|
|
74
|
+
* ```
|
|
75
|
+
*/
|
|
76
|
+
export const toast = {
|
|
77
|
+
show: toastStore.show,
|
|
78
|
+
hide: toastStore.hide,
|
|
79
|
+
hideAll: toastStore.hideAll
|
|
80
|
+
};
|
|
81
|
+
//# sourceMappingURL=toast-store.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["DEFAULT_DURATION","counter","ToastStore","items","snapshot","listeners","Set","timers","Map","subscribe","listener","add","delete","getSnapshot","show","options","resolved","label","id","emit","duration","set","setTimeout","hide","timer","get","clearTimeout","some","item","filter","hideAll","forEach","clear","length","toastStore","toast"],"sourceRoot":"../../../../src","sources":["components/toast/toast-store.ts"],"mappings":"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","ignoreList":[]}
|