shellphone.app/app/features/messages/components/new-message-bottom-sheet.tsx

55 lines
1.8 KiB
TypeScript
Raw Normal View History

2022-05-20 00:45:07 +00:00
import { Suspense, useRef, useState } from "react";
import BottomSheet from "react-modal-sheet";
import { useAtom } from "jotai";
import NewMessageArea from "./new-message-area";
import { bottomSheetOpenAtom } from "~/routes/__app/messages";
export default function NewMessageBottomSheet() {
const [isOpen, setIsOpen] = useAtom(bottomSheetOpenAtom);
const [recipient, setRecipient] = useState("");
const recipientRef = useRef<HTMLInputElement>(null);
return (
<BottomSheet
isOpen={isOpen}
onOpenEnd={() => {
// doesn't work with iOS safari *sigh*
recipientRef.current?.focus();
}}
onClose={() => setIsOpen(false)}
snapPoints={[0.5]}
>
<BottomSheet.Container onViewportBoxUpdate={null}>
<BottomSheet.Header onViewportBoxUpdate={null}>
2022-05-20 00:45:07 +00:00
<div className="w-full flex items-center justify-center p-4 text-black relative">
<span className="font-semibold text-base">New Message</span>
<button onClick={() => setIsOpen(false)} className="absolute right-4">
Cancel
</button>
</div>
</BottomSheet.Header>
<BottomSheet.Content onViewportBoxUpdate={null}>
2022-05-20 00:45:07 +00:00
<main className="flex flex-col h-full overflow-hidden">
<div className="flex items-center p-4 border-t border-b">
<span className="mr-4 text-[#333]">To:</span>
<input
ref={recipientRef}
onChange={(event) => setRecipient(event.target.value)}
className="bg-none border-none outline-none flex-1 text-black"
type="tel"
/>
</div>
<Suspense fallback={null}>
<NewMessageArea onSend={() => setIsOpen(false)} recipient={recipient} />
</Suspense>
</main>
</BottomSheet.Content>
</BottomSheet.Container>
<BottomSheet.Backdrop onViewportBoxUpdate={null} onTap={() => setIsOpen(false)} />
2022-05-20 00:45:07 +00:00
</BottomSheet>
);
}