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

61 lines
1.8 KiB
TypeScript
Raw Normal View History

2021-08-08 03:00:00 +00:00
import { Suspense, useRef, useState } from "react";
2021-08-01 07:40:18 +00:00
import { BottomSheet } from "react-spring-bottom-sheet";
2021-08-01 16:52:23 +00:00
import { useAtom } from "jotai";
2021-08-01 07:40:18 +00:00
import { useRouter, Routes } from "blitz";
import "react-spring-bottom-sheet/dist/style.css";
import NewMessageArea from "./new-message-area";
2021-08-01 16:52:23 +00:00
import { bottomSheetOpenAtom } from "../pages/messages";
2021-08-01 07:40:18 +00:00
export default function NewMessageBottomSheet() {
const router = useRouter();
const [isOpen, setIsOpen] = useAtom(bottomSheetOpenAtom);
const [recipient, setRecipient] = useState("");
2021-08-01 16:52:23 +00:00
const recipientRef = useRef<HTMLInputElement>(null);
2021-08-01 07:40:18 +00:00
return (
<BottomSheet
open={isOpen}
2021-08-08 03:00:00 +00:00
initialFocusRef={recipientRef}
onSpringEnd={(event) => {
if (event.type === "OPEN") {
// doesn't work with iOS safari *sigh*
recipientRef.current?.focus();
}
}}
2021-08-01 07:40:18 +00:00
onDismiss={() => setIsOpen(false)}
snapPoints={({ maxHeight }) => maxHeight / 2}
header={
<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>
}
>
<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
2021-08-01 16:52:23 +00:00
ref={recipientRef}
2021-08-01 07:40:18 +00:00
onChange={(event) => setRecipient(event.target.value)}
className="bg-none border-none outline-none flex-1 text-black"
2021-08-08 03:00:00 +00:00
type="tel"
2021-08-01 07:40:18 +00:00
/>
</div>
<Suspense fallback={null}>
<NewMessageArea
recipient={recipient}
onSend={() => {
2021-08-01 14:03:49 +00:00
router.push(Routes.ConversationPage({ recipient })).then(() => setIsOpen(false));
2021-08-01 07:40:18 +00:00
}}
/>
</Suspense>
</main>
</BottomSheet>
);
}