mirror/iNaturalistReactNative
1
0
Fork 0
mirror of https://github.com/inaturalist/iNaturalistReactNative.git synced 2025-12-23 22:18:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

extract tooltip modal to separate component

Browse Source
This commit is contained in:
Abbey Campbell
2025-11-17 13:49:55 -08:00
parent 578f1d5ce4
commit 4a45896703
2 changed files with 48 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/AddObsBottomSheet/AddObsButton.js
View File

@@ -1,13 +1,11 @@
// @flow
import { CommonActions, useNavigation } from "@react-navigation/native";
import classNames from "classnames";
import AddObsBottomSheet from "components/AddObsBottomSheet/AddObsBottomSheet";
import { Body2 } from "components/SharedComponents";
import AddObsTooltip from "components/AddObsBottomSheet/AddObsTooltip";
import GradientButton from "components/SharedComponents/Buttons/GradientButton";
import { navigationRef } from "navigation/navigationUtils";
import * as React from "react";
import { Modal, View } from "react-native";
import { log } from "sharedHelpers/logger";
import { useCurrentUser, useLayoutPrefs, useTranslation } from "sharedHooks";
import useStore, { zustandStorage } from "stores/useStore";
@@ -144,34 +142,7 @@ const AddObsButton = ( ): React.Node => {
return (
<>
<Modal
visible={showTooltip}
animationType="fade"
transparent
onRequestClose={dismissTooltip}
>
<View className="flex-1 bg-black/50 items-center justify-end">
{/* Tooltip */}
<View className="relative bottom-[24px] items-center">
<View className="bg-white rounded-2xl px-5 py-4">
<Body2>{t( "Press-and-hold-to-view-more-options" )}</Body2>
</View>
<View
className={classNames(
"border-l-[10px] border-r-[10px] border-x-[#00000000]",
"border-t-[16px] border-t-white mb-2"
)}
/>
<GradientButton
sizeClassName="w-[69px] h-[69px]"
onPress={() => {}}
onLongPress={() => dismissTooltip()}
accessibilityLabel={t( "Add-observations" )}
accessibilityHint={t( "Shows-observation-creation-options" )}
/>
</View>
</View>
</Modal>
<AddObsTooltip isVisible={showTooltip} dismissTooltip={dismissTooltip} />
{/* match the animation timing on FadeInView.tsx */}
<AddObsBottomSheet
closeBottomSheet={closeBottomSheet}

46
src/components/AddObsBottomSheet/AddObsTooltip.tsx Normal file
View File

@@ -0,0 +1,46 @@
import classNames from "classnames";
import { Body2 } from "components/SharedComponents";
import GradientButton from "components/SharedComponents/Buttons/GradientButton";
import React from "react";
import { Modal, View } from "react-native";
import { useTranslation } from "sharedHooks";
type Props = {
isVisible: boolean;
dismissTooltip: () => void;
};
const AddObsTooltip = ( { isVisible, dismissTooltip }: Props ): React.ReactNode => {
const { t } = useTranslation();
return (
<Modal
visible={isVisible}
animationType="fade"
transparent
onRequestClose={dismissTooltip}
>
<View className="flex-1 bg-black/50 items-center justify-end">
<View className="relative bottom-[24px] items-center">
<View className="bg-white rounded-2xl px-5 py-4">
<Body2>{t( "Press-and-hold-to-view-more-options" )}</Body2>
</View>
<View
className={classNames(
"border-l-[10px] border-r-[10px] border-x-[#00000000]",
"border-t-[16px] border-t-white mb-2"
)}
/>
<GradientButton
sizeClassName="w-[69px] h-[69px]"
onPress={() => {}}
onLongPress={() => dismissTooltip()}
accessibilityLabel={t( "Add-observations" )}
accessibilityHint={t( "Shows-observation-creation-options" )}
/>
</View>
</View>
</Modal>
);
};
export default AddObsTooltip;