diff options
| author | Mohamed Bassem <me@mbassem.com> | 2024-11-23 20:59:34 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-11-23 20:59:34 +0000 |
| commit | 5522e20104da6afe2e4667cf45dbbbbc0e838865 (patch) | |
| tree | 72f416fa83c97a8533eea431e25bd63bda1e7d81 /apps/mobile/components/lists | |
| parent | 4bb74872fd518008afea16a136292037baf5b024 (diff) | |
| download | karakeep-5522e20104da6afe2e4667cf45dbbbbc0e838865.tar.zst | |
ui(mobile): Replace bottom sheet with native screens (#690)
* Remove bottom sheet from bookmark info page
* Remove bottom sheet from manage lists page
* Remove bottom sheet from new list page
* Remove bottom sheet from new bookmark page
* Drop bottom-sheets
* Improve the look of the modals
* Make the search page fade from bottom
Diffstat (limited to 'apps/mobile/components/lists')
| -rw-r--r-- | apps/mobile/components/lists/NewListModal.tsx | 80 |
1 files changed, 0 insertions, 80 deletions
diff --git a/apps/mobile/components/lists/NewListModal.tsx b/apps/mobile/components/lists/NewListModal.tsx deleted file mode 100644 index d31ac362..00000000 --- a/apps/mobile/components/lists/NewListModal.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useState } from "react"; -import { Text, View } from "react-native"; -import { - BottomSheetBackdrop, - BottomSheetModal, - BottomSheetModalProps, - BottomSheetView, - useBottomSheetModal, -} from "@gorhom/bottom-sheet"; - -import { useCreateBookmarkList } from "@hoarder/shared-react/hooks/lists"; - -import { Button } from "../ui/Button"; -import { Input } from "../ui/Input"; -import PageTitle from "../ui/PageTitle"; -import { useToast } from "../ui/Toast"; - -const NewListModal = React.forwardRef< - BottomSheetModal, - Omit<BottomSheetModalProps, "children" | "backdropComponent" | "onDismiss"> ->(({ ...props }, ref) => { - const { dismiss } = useBottomSheetModal(); - const { toast } = useToast(); - const [text, setText] = useState(""); - - const { mutate, isPending } = useCreateBookmarkList({ - onSuccess: () => { - dismiss(); - }, - onError: () => { - toast({ - message: "Something went wrong", - variant: "destructive", - }); - }, - }); - - const onSubmit = () => { - mutate({ - name: text, - icon: "🚀", - }); - }; - - return ( - <View> - <BottomSheetModal - ref={ref} - onDismiss={() => setText("")} - backdropComponent={(props) => ( - <BottomSheetBackdrop - appearsOnIndex={0} - disappearsOnIndex={-1} - {...props} - /> - )} - {...props} - > - <PageTitle title="New List" /> - <BottomSheetView className="gap-2 px-4"> - <BottomSheetView className="flex flex-row items-center gap-1"> - <Text className="shrink p-2">🚀</Text> - <Input - className="flex-1" - onChangeText={setText} - placeholder="List Name" - autoFocus - autoCapitalize={"none"} - /> - </BottomSheetView> - <Button disabled={isPending} onPress={onSubmit} label="Save" /> - </BottomSheetView> - </BottomSheetModal> - </View> - ); -}); - -NewListModal.displayName = "NewListModal"; - -export default NewListModal; |
