refactor: renamed useClickOutside to useDropdowns

TERITORI · Jan 23, 2024 · 1880053 · 1880053
1 parent a798d92
commit 1880053
Show file tree

Hide file tree

Showing 17 changed files with 37 additions and 38 deletions.
diff --git a/App.tsx b/App.tsx
@@ -12,7 +12,7 @@ import Plausible from "plausible-tracker";
 import React, { ReactNode, memo, useEffect } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import { Platform, View, Text, TextStyle } from "react-native";
-import { ClickOutsideProvider } from "react-native-click-outside";
+import { ClickOutsideProvider as DropdownsProvider } from "react-native-click-outside";
 import { enableLegacyWebImplementation } from "react-native-gesture-handler";
 import { MenuProvider } from "react-native-popup-menu";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -90,7 +90,7 @@ export default function App() {
                 <NavigationContainer linking={linking}>
                   <SafeAreaProvider>
                     <FeedbacksContextProvider>
-                      <ClickOutsideProvider>
+                      <DropdownsProvider>
                         <WalletsProvider>
                           <WalletSyncer />
                           <DappStoreApps />
@@ -114,7 +114,7 @@ export default function App() {
                             </SearchBarContextProvider>
                           </WalletControlContextProvider>
                         </WalletsProvider>
-                      </ClickOutsideProvider>
+                      </DropdownsProvider>
                     </FeedbacksContextProvider>
                   </SafeAreaProvider>
                 </NavigationContainer>

diff --git a/packages/components/Dropdown.tsx b/packages/components/Dropdown.tsx
@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from "react-native";
 
-import { useClickOutside } from "../hooks/useClickOutside";
+import { useDropdowns } from "../hooks/useDropdowns";
 
 interface DropdownProps {
   children:
@@ -35,7 +35,7 @@ export const Dropdown = ({
     height: 0,
     width: 0,
   });
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside({
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns({
     callback: (val) => {
       if (!val) {
         onDropdownClosed?.();

diff --git a/packages/components/Menu.tsx b/packages/components/Menu.tsx
@@ -3,7 +3,7 @@ import { View, TouchableOpacity } from "react-native";
 
 import { BrandText } from "./BrandText";
 import { LegacyPrimaryBox } from "./boxes/LegacyPrimaryBox";
-import { useClickOutside } from "../hooks/useClickOutside";
+import { useDropdowns } from "../hooks/useDropdowns";
 import { neutral33 } from "../utils/style/colors";
 import { fontSemibold13 } from "../utils/style/fonts";
 import { layout } from "../utils/style/layout";
@@ -25,7 +25,7 @@ export const Menu: React.FC<MenuProps> = ({
   component,
   width = DEFAULT_WIDTH,
 }) => {
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   return (
     <View style={{ position: "relative" }}>

diff --git a/packages/components/NetworkSelector/NetworkSelector.tsx b/packages/components/NetworkSelector/NetworkSelector.tsx
@@ -4,7 +4,7 @@ import { StyleProp, TouchableOpacity, View, ViewStyle } from "react-native";
 import { NetworkSelectorMenu } from "./NetworkSelectorMenu";
 import chevronDownSVG from "../../../assets/icons/chevron-down.svg";
 import chevronUpSVG from "../../../assets/icons/chevron-up.svg";
-import { useClickOutside } from "../../hooks/useClickOutside";
+import { useDropdowns } from "../../hooks/useDropdowns";
 import { useSelectedNetworkInfo } from "../../hooks/useSelectedNetwork";
 import { NetworkFeature, NetworkKind } from "../../networks";
 import { neutral17, secondaryColor } from "../../utils/style/colors";
@@ -21,7 +21,7 @@ export const NetworkSelector: React.FC<{
   forceNetworkKind?: NetworkKind;
   forceNetworkFeatures?: NetworkFeature[];
 }> = ({ style, forceNetworkId, forceNetworkKind, forceNetworkFeatures }) => {
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
   const selectedNetworkInfo = useSelectedNetworkInfo();
 
   return (

diff --git a/packages/components/NetworkSelector/NetworkSelectorMobile.tsx b/packages/components/NetworkSelector/NetworkSelectorMobile.tsx
@@ -4,7 +4,7 @@ import { StyleProp, TouchableOpacity, View, ViewStyle } from "react-native";
 import { NetworkSelectorMenu } from "./NetworkSelectorMenu";
 import chevronDownSVG from "../../../assets/icons/chevron-down.svg";
 import chevronUpSVG from "../../../assets/icons/chevron-up.svg";
-import { useClickOutside } from "../../hooks/useClickOutside";
+import { useDropdowns } from "../../hooks/useDropdowns";
 import { useSelectedNetworkInfo } from "../../hooks/useSelectedNetwork";
 import { NetworkFeature, NetworkKind } from "../../networks";
 import { secondaryColor } from "../../utils/style/colors";
@@ -20,7 +20,7 @@ export const NetworkSelectorMobile: React.FC<{
   forceNetworkKind?: NetworkKind;
   forceNetworkFeatures?: NetworkFeature[];
 }> = ({ style, forceNetworkId, forceNetworkKind, forceNetworkFeatures }) => {
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
   const selectedNetworkInfo = useSelectedNetworkInfo();
 
   return (

diff --git a/packages/components/Pagination.tsx b/packages/components/Pagination.tsx
@@ -12,7 +12,7 @@ import chevronLeftSVG from "../../assets/icons/chevron-left.svg";
 import chevronRightDoubleSVG from "../../assets/icons/chevron-right-double.svg";
 import chevronRightSVG from "../../assets/icons/chevron-right.svg";
 import chevronUpSVG from "../../assets/icons/chevron-up.svg";
-import { useClickOutside } from "../hooks/useClickOutside";
+import { useDropdowns } from "../hooks/useDropdowns";
 import {
   neutral33,
   neutral77,
@@ -49,7 +49,7 @@ export const Pagination = ({
       onChangePage(pageIndex);
     }
   };
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   return (
     <View style={styles.container}>

diff --git a/packages/components/Search/SearchBar.tsx b/packages/components/Search/SearchBar.tsx
@@ -11,14 +11,14 @@ import {
   SearchBarResults,
 } from "./SearchBarResults";
 import { useSearchBar } from "../../context/SearchBarProvider";
-import { useClickOutside } from "../../hooks/useClickOutside";
+import { useDropdowns } from "../../hooks/useDropdowns";
 import { COLLECTION_VIEW_SM_WIDTH } from "../CollectionView";
 import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
 
 export const SearchBar: React.FC<{ style?: StyleProp<ViewStyle> }> = ({
   style,
 }) => {
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
   const { hasCollections, hasNames } = useSearchBar();
   const hasSomething = hasNames || hasCollections;
 

diff --git a/packages/components/TopMenu/TopMenu.tsx b/packages/components/TopMenu/TopMenu.tsx
@@ -5,7 +5,7 @@ import { TopMenuBox } from "./TopMenuBox";
 import { WalletView } from "./WalletView";
 import chevronDownSVG from "../../../assets/icons/chevron-down.svg";
 import chevronUpSVG from "../../../assets/icons/chevron-up.svg";
-import { useClickOutside } from "../../hooks/useClickOutside";
+import { useDropdowns } from "../../hooks/useDropdowns";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 import {
   neutral00,
@@ -21,7 +21,7 @@ export const TOP_MENU_BUTTON_HEIGHT = 40;
 
 export const TopMenu: FC = () => {
   const selectedWallet = useSelectedWallet();
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   return (
     <View ref={dropdownRef} collapsable={false}>

diff --git a/packages/components/TopMenu/TopMenuMobile.tsx b/packages/components/TopMenu/TopMenuMobile.tsx
@@ -2,13 +2,13 @@ import React, { FC } from "react";
 import { View, TouchableOpacity } from "react-native";
 
 import { TopMenuBox } from "./TopMenuBox";
-import { useClickOutside } from "../../hooks/useClickOutside";
+import { useDropdowns } from "../../hooks/useDropdowns";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { neutral00 } from "../../utils/style/colors";
 import { UserAvatarWithFrame } from "../images/AvatarWithFrame";
 
 export const TopMenuMobile: FC = () => {
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   const selectedWallet = useSelectedWallet();
 

diff --git a/packages/components/nfts/NFTView.tsx b/packages/components/nfts/NFTView.tsx
@@ -12,7 +12,7 @@ import octagonSVG from "../../../assets/icons/octagon.svg";
 import raffleSVG from "../../../assets/icons/raffle.svg";
 import sendSVG from "../../../assets/icons/send.svg";
 import { NFT } from "../../api/marketplace/v1/marketplace";
-import { useClickOutside } from "../../hooks/useClickOutside";
+import { useDropdowns } from "../../hooks/useDropdowns";
 import { useIsMobile } from "../../hooks/useIsMobile";
 import { useNSUserInfo } from "../../hooks/useNSUserInfo";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
@@ -215,7 +215,7 @@ const NFTViewHeader: React.FC<{
 }> = memo(({ nft, localSelected }) => {
   const selectedWallet = useSelectedWallet();
   const userInfo = useNSUserInfo(nft.ownerId);
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
   const isOwner = nft.ownerId === selectedWallet?.userId;
   const isOwnerAndNotListed = isOwner && !nft.isListed;
   const [isTransferNFTVisible, setIsTransferNFTVisible] =

diff --git a/packages/components/user/UserCard.tsx b/packages/components/user/UserCard.tsx
@@ -15,7 +15,7 @@ import { Member } from "../../contracts-clients/cw4-group/Cw4Group.types";
 import { useDAOGroup } from "../../hooks/dao/useDAOGroup";
 import { useDAOMakeProposal } from "../../hooks/dao/useDAOMakeProposal";
 import { useIsDAOMember } from "../../hooks/dao/useDAOMember";
-import { useClickOutside } from "../../hooks/useClickOutside";
+import { useDropdowns } from "../../hooks/useDropdowns";
 import { useNSUserInfo } from "../../hooks/useNSUserInfo";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { parseUserId } from "../../networks";
@@ -188,7 +188,7 @@ const CardActions: React.FC<{
     | boolean
   )[];
 }> = ({ actions }) => {
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   const filteredActions = actions.filter(
     (a): a is ComponentProps<typeof DropdownOption> =>

diff --git a/packages/hooks/useClickOutside.ts → packages/hooks/useDropdowns.ts b/packages/hooks/useClickOutside.ts → packages/hooks/useDropdowns.ts
@@ -1,21 +1,21 @@
 import { useState } from "react";
 import { View } from "react-native";
-import { useClickOutside as _useClickOutside } from "react-native-click-outside";
+import { useClickOutside } from "react-native-click-outside";
 
 type HookConfig = {
   triggerOnUnmount?: boolean;
   triggerOnBlur?: boolean;
 };
 
-export const useClickOutside = <T = View>({
+export const useDropdowns = <T = View>({
   config,
   callback,
 }: {
   config?: HookConfig;
   callback?: (val: boolean) => void;
 } = {}): [boolean, (value?: boolean) => void, React.RefObject<T>] => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const ref = _useClickOutside<T>(() => {
+  const ref = useClickOutside<T>(() => {
     setIsDropdownOpen(false);
     callback?.(false);
   }, config);

diff --git a/packages/screens/DAppStore/components/Dropdown.tsx b/packages/screens/DAppStore/components/Dropdown.tsx
@@ -8,7 +8,7 @@ import chevronUpSVG from "../../../../assets/icons/chevron-up.svg";
 import { BrandText } from "../../../components/BrandText";
 import { SVG } from "../../../components/SVG";
 import { LegacySecondaryBox } from "../../../components/boxes/LegacySecondaryBox";
-import { useClickOutside } from "../../../hooks/useClickOutside";
+import { useDropdowns } from "../../../hooks/useDropdowns";
 import {
   selectAvailableApps,
   setAvailableApps,
@@ -59,7 +59,7 @@ const SelectableOption: React.FC<{
 };
 
 export const DropdownDappsStoreFilter: React.FC = () => {
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   const availableApps = useSelector(selectAvailableApps);
   const options = Object.values(availableApps).map((option) => {

diff --git a/packages/screens/Marketplace/PeriodFilter.tsx b/packages/screens/Marketplace/PeriodFilter.tsx
@@ -8,7 +8,7 @@ import sortSVG from "../../../assets/icons/sort.svg";
 import { BrandText } from "../../components/BrandText";
 import { SVG } from "../../components/SVG";
 import { SpacerColumn, SpacerRow } from "../../components/spacer";
-import { useClickOutside } from "../../hooks/useClickOutside";
+import { useDropdowns } from "../../hooks/useDropdowns";
 import {
   marketplacePeriodItems,
   PeriodItem,
@@ -22,7 +22,7 @@ import { layout, RESPONSIVE_BREAKPOINT_S } from "../../utils/style/layout";
 
 export const PeriodFilter: FC = () => {
   const { width } = useWindowDimensions();
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   const timePeriod = useSelector(selectTimePeriod);
   const [selectedItem, setSelectedItem] = useState<PeriodItem>(timePeriod);

diff --git a/packages/screens/Message/components/ChatHeader.tsx b/packages/screens/Message/components/ChatHeader.tsx
@@ -15,7 +15,7 @@ import { LegacyTertiaryBox } from "../../../components/boxes/LegacyTertiaryBox";
 import { BackButton } from "../../../components/navigation/components/BackButton";
 import { SpacerRow } from "../../../components/spacer";
 import { useFeedbacks } from "../../../context/FeedbacksProvider";
-import { useClickOutside } from "../../../hooks/useClickOutside";
+import { useDropdowns } from "../../../hooks/useDropdowns";
 import { updateConversationById } from "../../../store/slices/message";
 import { neutral17, secondaryColor } from "../../../utils/style/colors";
 import { fontSemibold13, fontSemibold12 } from "../../../utils/style/fonts";
@@ -46,7 +46,7 @@ export const ChatHeader = ({
   const [showTextInput, setShowTextInput] = useState(false);
   const [showGroupDetails, setShowGroupDetails] = useState(false);
 
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
   const handleSearchIconPress = () => {
     setShowTextInput(true);
   };

diff --git a/packages/screens/Message/components/ConversationSelector.tsx b/packages/screens/Message/components/ConversationSelector.tsx
@@ -8,7 +8,7 @@ import { SVG } from "../../../components/SVG";
 import { LegacyTertiaryBox } from "../../../components/boxes/LegacyTertiaryBox";
 import { SpacerRow } from "../../../components/spacer";
 import { useMessage } from "../../../context/MessageProvider";
-import { useClickOutside } from "../../../hooks/useClickOutside";
+import { useDropdowns } from "../../../hooks/useDropdowns";
 import { neutral17, secondaryColor } from "../../../utils/style/colors";
 import { fontSemibold12 } from "../../../utils/style/fonts";
 import { layout } from "../../../utils/style/layout";
@@ -17,7 +17,7 @@ import { CONVERSATION_TYPES } from "../../../utils/types/message";
 export const ConversationSelector: React.FC<{
   style?: StyleProp<ViewStyle>;
 }> = ({ style }) => {
-  const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside();
+  const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns();
 
   const { activeConversationType, setActiveConversationType } = useMessage();
 

diff --git a/packages/screens/Swap/components/SwapView/SwapView.tsx b/packages/screens/Swap/components/SwapView/SwapView.tsx
@@ -20,8 +20,8 @@ import { SeparatorGradient } from "../../../../components/separators/SeparatorGr
 import { SpacerColumn } from "../../../../components/spacer";
 import { useFeedbacks } from "../../../../context/FeedbacksProvider";
 import { useBalances } from "../../../../hooks/useBalances";
-import { useClickOutside } from "../../../../hooks/useClickOutside";
 import { useCoingeckoPrices } from "../../../../hooks/useCoingeckoPrices";
+import { useDropdowns } from "../../../../hooks/useDropdowns";
 import {
   useSelectedNetworkId,
   useSelectedNetworkInfo,
@@ -226,10 +226,9 @@ export const SwapView: React.FC = () => {
   const [slippage, setSlippage] = useState(1);
 
   // ---- Dropdowns
-  const [isDropdownInOpen, setDropdownInState, dropdownInRef] =
-    useClickOutside();
+  const [isDropdownInOpen, setDropdownInState, dropdownInRef] = useDropdowns();
   const [isDropdownOutOpen, setDropdownOutState, dropdownOutRef] =
-    useClickOutside();
+    useDropdowns();
 
   const onChangeAmountIn = (text: string) => {
     if (!text) {