From 18800531d72bc2eb3d13788b0856760672cb1547 Mon Sep 17 00:00:00 2001 From: Sakul Budhathoki Date: Tue, 23 Jan 2024 16:04:06 +0545 Subject: [PATCH] refactor: renamed useClickOutside to useDropdowns --- App.tsx | 6 +++--- packages/components/Dropdown.tsx | 4 ++-- packages/components/Menu.tsx | 4 ++-- packages/components/NetworkSelector/NetworkSelector.tsx | 4 ++-- .../components/NetworkSelector/NetworkSelectorMobile.tsx | 4 ++-- packages/components/Pagination.tsx | 4 ++-- packages/components/Search/SearchBar.tsx | 4 ++-- packages/components/TopMenu/TopMenu.tsx | 4 ++-- packages/components/TopMenu/TopMenuMobile.tsx | 4 ++-- packages/components/nfts/NFTView.tsx | 4 ++-- packages/components/user/UserCard.tsx | 4 ++-- packages/hooks/{useClickOutside.ts => useDropdowns.ts} | 6 +++--- packages/screens/DAppStore/components/Dropdown.tsx | 4 ++-- packages/screens/Marketplace/PeriodFilter.tsx | 4 ++-- packages/screens/Message/components/ChatHeader.tsx | 4 ++-- .../screens/Message/components/ConversationSelector.tsx | 4 ++-- packages/screens/Swap/components/SwapView/SwapView.tsx | 7 +++---- 17 files changed, 37 insertions(+), 38 deletions(-) rename packages/hooks/{useClickOutside.ts => useDropdowns.ts} (77%) diff --git a/App.tsx b/App.tsx index f61a76854f..374cdcc48d 100644 --- 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() { - + @@ -114,7 +114,7 @@ export default function App() { - + diff --git a/packages/components/Dropdown.tsx b/packages/components/Dropdown.tsx index a17dc6abf0..94dfb527d3 100644 --- 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 index 31d73afed5..1e8a8f84d1 100644 --- 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 = ({ component, width = DEFAULT_WIDTH, }) => { - const [isDropdownOpen, setDropdownState, dropdownRef] = useClickOutside(); + const [isDropdownOpen, setDropdownState, dropdownRef] = useDropdowns(); return ( diff --git a/packages/components/NetworkSelector/NetworkSelector.tsx b/packages/components/NetworkSelector/NetworkSelector.tsx index ba45c53b41..14dfd51fba 100644 --- 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 index e6fc305371..a901ae8138 100644 --- 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 index e896d7cdda..8164e87917 100644 --- 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 ( diff --git a/packages/components/Search/SearchBar.tsx b/packages/components/Search/SearchBar.tsx index 8df7387b5d..ff4949e45a 100644 --- 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 }> = ({ 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 index 13ff9d6195..5cb83d1f1a 100644 --- 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 ( diff --git a/packages/components/TopMenu/TopMenuMobile.tsx b/packages/components/TopMenu/TopMenuMobile.tsx index c535a86bd7..39c8be6ae4 100644 --- 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 index 96acf6b068..bc2abe1852 100644 --- 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 index 8e19b36ddf..6b32a10f99 100644 --- 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 => diff --git a/packages/hooks/useClickOutside.ts b/packages/hooks/useDropdowns.ts similarity index 77% rename from packages/hooks/useClickOutside.ts rename to packages/hooks/useDropdowns.ts index ede7a0d9a5..4fcfcabc77 100644 --- a/packages/hooks/useClickOutside.ts +++ b/packages/hooks/useDropdowns.ts @@ -1,13 +1,13 @@ 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 = ({ +export const useDropdowns = ({ config, callback, }: { @@ -15,7 +15,7 @@ export const useClickOutside = ({ callback?: (val: boolean) => void; } = {}): [boolean, (value?: boolean) => void, React.RefObject] => { const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const ref = _useClickOutside(() => { + const ref = useClickOutside(() => { setIsDropdownOpen(false); callback?.(false); }, config); diff --git a/packages/screens/DAppStore/components/Dropdown.tsx b/packages/screens/DAppStore/components/Dropdown.tsx index 2cd77ff7b5..c3e7ef0a28 100644 --- 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 index bc9b949003..b21f85667f 100644 --- 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(timePeriod); diff --git a/packages/screens/Message/components/ChatHeader.tsx b/packages/screens/Message/components/ChatHeader.tsx index b0e244a358..83359aa897 100644 --- 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 index db8f9cfe62..ae4dff6848 100644 --- 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; }> = ({ 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 index 09abb938d4..e33e58ea2b 100644 --- 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) {