27 lines
580 B
TypeScript
27 lines
580 B
TypeScript
|
import { createEffect, type ParentComponent } from "solid-js";
|
||
|
|
import styles from './BottomSheet.module.css'
|
||
|
|
|
||
|
|
export type BottomSheetProps = {
|
||
|
|
open?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
|
||
|
|
let element: HTMLDialogElement;
|
||
|
|
|
||
|
|
createEffect(() => {
|
||
|
|
if (props.open) {
|
||
|
|
if (!element.open) {
|
||
|
|
element.showModal();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (element.open) {
|
||
|
|
element.close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return <dialog class={styles.bottomSheet} ref={element!}>{props.children}</dialog>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BottomSheet;
|