forked from
pds.ls/pdsls
atmosphere explorer
modal closing animation
+35
-11
+2
-2
src/auth/account.tsx
+2
-2
src/auth/account.tsx
+25
-2
src/components/modal.tsx
+25
-2
src/components/modal.tsx
···
1
-
import { ComponentProps, createEffect, onCleanup, Show } from "solid-js";
1
+
import { ComponentProps, createEffect, createSignal, onCleanup, Show } from "solid-js";
2
2
3
3
export interface ModalProps extends Pick<ComponentProps<"svg">, "children"> {
4
4
open?: boolean;
5
5
onClose?: () => void;
6
+
onClosed?: () => void;
6
7
closeOnClick?: boolean;
7
8
nonBlocking?: boolean;
8
9
alignTop?: boolean;
9
10
contentClass?: string;
10
11
}
11
12
13
+
export const CLOSE_DURATION = 200;
14
+
12
15
export const Modal = (props: ModalProps) => {
16
+
const [mounted, setMounted] = createSignal(props.open ?? false);
17
+
const [closing, setClosing] = createSignal(false);
18
+
19
+
createEffect(() => {
20
+
if (props.open) {
21
+
setMounted(true);
22
+
setClosing(false);
23
+
} else if (mounted()) {
24
+
setClosing(true);
25
+
const t = setTimeout(() => {
26
+
setMounted(false);
27
+
setClosing(false);
28
+
props.onClosed?.();
29
+
}, CLOSE_DURATION);
30
+
onCleanup(() => clearTimeout(t));
31
+
}
32
+
});
33
+
13
34
return (
14
-
<Show when={props.open}>
35
+
<Show when={mounted()}>
15
36
<div
16
37
data-modal
17
38
class="fixed inset-0 z-50 flex h-full max-h-none w-full max-w-none justify-center bg-transparent text-neutral-900 dark:text-neutral-200"
···
57
78
>
58
79
<div
59
80
class={`transition-all starting:scale-95 starting:opacity-0 ${props.contentClass ?? ""}`}
81
+
classList={{ "scale-95 opacity-0": closing() }}
82
+
style={{ "transition-duration": `${CLOSE_DURATION}ms` }}
60
83
>
61
84
{props.children}
62
85
</div>
+8
-7
src/components/search.tsx
+8
-7
src/components/search.tsx
···
167
167
});
168
168
169
169
createEffect(() => {
170
-
if (showSearch()) {
171
-
searchInput.focus();
172
-
} else {
173
-
setInput(undefined);
174
-
setSelectedIndex(-1);
175
-
setSearch(undefined);
176
-
}
170
+
if (showSearch()) setTimeout(() => searchInput?.focus());
177
171
});
172
+
173
+
const resetSearch = () => {
174
+
setInput(undefined);
175
+
setSelectedIndex(-1);
176
+
setSearch(undefined);
177
+
};
178
178
179
179
const fetchTypeahead = async (input: string | undefined) => {
180
180
if (!input) return [];
···
284
284
<Modal
285
285
open={showSearch()}
286
286
onClose={() => setShowSearch(false)}
287
+
onClosed={resetSearch}
287
288
alignTop
288
289
contentClass="dark:bg-dark-200 dark:shadow-dark-700 pointer-events-auto mx-3 w-full max-w-lg rounded-lg border-[0.5px] min-w-0 border-neutral-300 bg-white shadow-md dark:border-neutral-700"
289
290
>