From 69b97a484fbbf5a6d4d9e642d3dcafe79e618db2 Mon Sep 17 00:00:00 2001 From: Ted Palmer Date: Wed, 29 Nov 2023 12:26:15 -0500 Subject: [PATCH] Add onPointerDownOutside override to all modals --- demo/pages/modal/acceptBid.tsx | 3 +++ demo/pages/modal/bid.tsx | 3 +++ demo/pages/modal/buy.tsx | 3 +++ demo/pages/modal/cancelBid.tsx | 3 +++ demo/pages/modal/cancelListing.tsx | 3 +++ demo/pages/modal/collect.tsx | 3 +++ demo/pages/modal/editBid.tsx | 3 +++ demo/pages/modal/editListing.tsx | 3 +++ demo/pages/modal/list.tsx | 3 +++ .../ui/src/modal/acceptBid/AcceptBidModal.tsx | 11 +++++++++++ packages/ui/src/modal/bid/BidModal.tsx | 9 +++++++++ packages/ui/src/modal/buy/BuyModal.tsx | 9 +++++++++ .../ui/src/modal/cancelBid/CancelBidModal.tsx | 18 +++++++++++++++++- .../modal/cancelListing/CancelListingModal.tsx | 18 +++++++++++++++++- packages/ui/src/modal/collect/CollectModal.tsx | 18 ++++++++++++++++-- packages/ui/src/modal/editBid/EditBidModal.tsx | 11 +++++++++++ .../src/modal/editListing/EditListingModal.tsx | 18 +++++++++++++++++- packages/ui/src/modal/list/ListModal.tsx | 9 +++++++++ 18 files changed, 143 insertions(+), 5 deletions(-) diff --git a/demo/pages/modal/acceptBid.tsx b/demo/pages/modal/acceptBid.tsx index b86dc28bb..c7db1efb8 100644 --- a/demo/pages/modal/acceptBid.tsx +++ b/demo/pages/modal/acceptBid.tsx @@ -186,6 +186,9 @@ const AcceptBidPage: NextPage = () => { onClose={() => { console.log('AcceptBidModal Closed') }} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/demo/pages/modal/bid.tsx b/demo/pages/modal/bid.tsx index c28076ec4..801efe80c 100644 --- a/demo/pages/modal/bid.tsx +++ b/demo/pages/modal/bid.tsx @@ -233,6 +233,9 @@ const BidPage: NextPage = () => { onViewOffers={() => { console.log('On View offers clicked') }} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/demo/pages/modal/buy.tsx b/demo/pages/modal/buy.tsx index 406868d6b..9f701b015 100644 --- a/demo/pages/modal/buy.tsx +++ b/demo/pages/modal/buy.tsx @@ -165,6 +165,9 @@ const BuyPage: NextPage = () => { onClose={() => { console.log('BuyModal Closed') }} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/demo/pages/modal/cancelBid.tsx b/demo/pages/modal/cancelBid.tsx index f62b6f4b6..9aea3cd41 100644 --- a/demo/pages/modal/cancelBid.tsx +++ b/demo/pages/modal/cancelBid.tsx @@ -102,6 +102,9 @@ const CancelBidPage: NextPage = () => { onClose={() => { console.log('CancelBidModal Closed') }} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/demo/pages/modal/cancelListing.tsx b/demo/pages/modal/cancelListing.tsx index 5d4d047cd..829157c97 100644 --- a/demo/pages/modal/cancelListing.tsx +++ b/demo/pages/modal/cancelListing.tsx @@ -102,6 +102,9 @@ const CancelListingPage: NextPage = () => { onClose={() => { console.log('CancelListingModal Closed') }} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/demo/pages/modal/collect.tsx b/demo/pages/modal/collect.tsx index 0ca11d5ac..fae14d36a 100644 --- a/demo/pages/modal/collect.tsx +++ b/demo/pages/modal/collect.tsx @@ -194,6 +194,9 @@ const CollectPage: NextPage = () => { console.log('CollectModal Closed') }} onGoToToken={(data) => console.log('Go to Token', data)} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/demo/pages/modal/editBid.tsx b/demo/pages/modal/editBid.tsx index 76b03c88e..9d20c773f 100644 --- a/demo/pages/modal/editBid.tsx +++ b/demo/pages/modal/editBid.tsx @@ -118,6 +118,9 @@ const EditBidPage: NextPage = () => { onClose={() => { console.log('EditBidModal Closed') }} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/demo/pages/modal/editListing.tsx b/demo/pages/modal/editListing.tsx index 991dd47cf..e4301a6f1 100644 --- a/demo/pages/modal/editListing.tsx +++ b/demo/pages/modal/editListing.tsx @@ -126,6 +126,9 @@ const EditListingPage: NextPage = () => { onClose={() => { console.log('EditListingModal Closed') }} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/demo/pages/modal/list.tsx b/demo/pages/modal/list.tsx index 5a2dc8660..3051bf1b7 100644 --- a/demo/pages/modal/list.tsx +++ b/demo/pages/modal/list.tsx @@ -205,6 +205,9 @@ const Index: NextPage = () => { onClose={() => { console.log('ListModal Closed') }} + onPointerDownOutside={(e) => { + console.log('onPointerDownOutside') + }} /> diff --git a/packages/ui/src/modal/acceptBid/AcceptBidModal.tsx b/packages/ui/src/modal/acceptBid/AcceptBidModal.tsx index 2f1deddc6..ba8d2a2db 100644 --- a/packages/ui/src/modal/acceptBid/AcceptBidModal.tsx +++ b/packages/ui/src/modal/acceptBid/AcceptBidModal.tsx @@ -1,4 +1,5 @@ import React, { + ComponentPropsWithoutRef, Dispatch, ReactElement, SetStateAction, @@ -45,6 +46,7 @@ import { truncateAddress } from '../../lib/truncate' import { WalletClient } from 'viem' import { ReservoirWallet, SellPath } from '@reservoir0x/reservoir-sdk' import getChainBlockExplorerUrl from '../../lib/getChainBlockExplorerUrl' +import { Dialog } from '../../primitives/Dialog' type BidData = { tokens?: EnhancedAcceptBidTokenData[] @@ -78,6 +80,9 @@ type Props = Pick['0'], 'trigger'> & { ) => void onBidAcceptError?: (error: Error, data: BidData) => void onCurrentStepUpdate?: (data: AcceptBidStepData) => void + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } export function AcceptBidModal({ @@ -94,6 +99,7 @@ export function AcceptBidModal({ onClose, onBidAcceptError, onCurrentStepUpdate, + onPointerDownOutside, }: Props): ReactElement { const [open, setOpen] = useFallbackState( openState ? openState[0] : false, @@ -201,6 +207,11 @@ export function AcceptBidModal({ setOpen(open) }} loading={loading} + onPointerDownOutside={(e) => { + if (onPointerDownOutside) { + onPointerDownOutside(e) + } + }} > {acceptBidStep === AcceptBidStep.Unavailable && !loading && ( ['0'], 'trigger'> & { ) => void onBidComplete?: (data: any) => void onBidError?: (error: Error, data: any) => void + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } function titleForStep(step: BidStep, copy: typeof ModalCopy) { @@ -160,6 +165,7 @@ export function BidModal({ onClose, onBidComplete, onBidError, + onPointerDownOutside, }: Props): ReactElement { const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides } const [open, setOpen] = useFallbackState( @@ -386,6 +392,9 @@ export function BidModal({ ) { e.preventDefault() } + if (onPointerDownOutside) { + onPointerDownOutside(e) + } }} onFocusCapture={(e) => { e.stopPropagation() diff --git a/packages/ui/src/modal/buy/BuyModal.tsx b/packages/ui/src/modal/buy/BuyModal.tsx index 0662626df..ca7b3108a 100644 --- a/packages/ui/src/modal/buy/BuyModal.tsx +++ b/packages/ui/src/modal/buy/BuyModal.tsx @@ -1,4 +1,5 @@ import React, { + ComponentPropsWithoutRef, Dispatch, ReactElement, SetStateAction, @@ -38,6 +39,7 @@ import { truncateAddress } from '../../lib/truncate' import { SelectPaymentToken } from '../SelectPaymentToken' import { WalletClient } from 'viem' import getChainBlockExplorerUrl from '../../lib/getChainBlockExplorerUrl' +import { Dialog } from '../../primitives/Dialog' type PurchaseData = { tokenId?: string @@ -83,6 +85,9 @@ type Props = Pick['0'], 'trigger'> & { stepData: BuyModalStepData | null, currentStep: BuyStep ) => void + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } function titleForStep( @@ -122,6 +127,7 @@ export function BuyModal({ onPurchaseError, onClose, onGoToToken, + onPointerDownOutside, }: Props): ReactElement { const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides } const [open, setOpen] = useFallbackState( @@ -249,6 +255,9 @@ export function BuyModal({ if (!clickedDismissableLayer && dismissableLayers.length > 0) { e.preventDefault() } + if (onPointerDownOutside) { + onPointerDownOutside(e) + } }} onOpenChange={(open) => { if (!open && onClose) { diff --git a/packages/ui/src/modal/cancelBid/CancelBidModal.tsx b/packages/ui/src/modal/cancelBid/CancelBidModal.tsx index 5d327948f..819895bf7 100644 --- a/packages/ui/src/modal/cancelBid/CancelBidModal.tsx +++ b/packages/ui/src/modal/cancelBid/CancelBidModal.tsx @@ -1,5 +1,11 @@ import { useFallbackState, useReservoirClient, useTimeSince } from '../../hooks' -import React, { ReactElement, Dispatch, SetStateAction, useEffect } from 'react' +import React, { + ReactElement, + Dispatch, + SetStateAction, + useEffect, + ComponentPropsWithoutRef, +} from 'react' import { Flex, Text, @@ -19,6 +25,7 @@ import { truncateAddress } from '../../lib/truncate' import { ReservoirWallet } from '@reservoir0x/reservoir-sdk' import { WalletClient } from 'viem' import getChainBlockExplorerUrl from '../../lib/getChainBlockExplorerUrl' +import { Dialog } from '../../primitives/Dialog' const ModalCopy = { title: 'Cancel Offer', @@ -38,6 +45,9 @@ type Props = Pick['0'], 'trigger'> & { onClose?: (data: any, currentStep: CancelStep) => void onCancelComplete?: (data: any) => void onCancelError?: (error: Error, data: any) => void + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } export function CancelBidModal({ @@ -51,6 +61,7 @@ export function CancelBidModal({ onClose, onCancelComplete, onCancelError, + onPointerDownOutside, }: Props): ReactElement { const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides } const [open, setOpen] = useFallbackState( @@ -135,6 +146,11 @@ export function CancelBidModal({ setOpen(open) }} loading={loading} + onPointerDownOutside={(e) => { + if (onPointerDownOutside) { + onPointerDownOutside(e) + } + }} > {!isBidAvailable && !loading && ( ['0'], 'trigger'> & { onClose?: (data: any, currentStep: CancelStep) => void onCancelComplete?: (data: any) => void onCancelError?: (error: Error, data: any) => void + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } export function CancelListingModal({ @@ -54,6 +64,7 @@ export function CancelListingModal({ onClose, onCancelComplete, onCancelError, + onPointerDownOutside, }: Props): ReactElement { const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides } const [open, setOpen] = useFallbackState( @@ -137,6 +148,11 @@ export function CancelListingModal({ setOpen(open) }} loading={loading} + onPointerDownOutside={(e) => { + if (onPointerDownOutside) { + onPointerDownOutside(e) + } + }} > {!isListingAvailable && !loading && ( ['0'], 'trigger'> & { onCollectError?: (error: Error, data: CollectCallbackData) => void onClose?: (data: CollectCallbackData, currentStep: CollectStep) => void onGoToToken?: (data: CollectCallbackData) => any + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } export function CollectModal({ @@ -73,12 +83,13 @@ export function CollectModal({ copyOverrides, walletClient, usePermit, + defaultQuantity, onCollectComplete, onCollectError, onClose, onConnectWallet, onGoToToken, - defaultQuantity, + onPointerDownOutside, }: Props): ReactElement { const copy: typeof CollectModalCopy = { ...CollectModalCopy, @@ -164,6 +175,9 @@ export function CollectModal({ if (!clickedDismissableLayer && dismissableLayers.length > 0) { e.preventDefault() } + if (onPointerDownOutside) { + onPointerDownOutside(e) + } }} onOpenChange={(open) => { if (!open && onClose) { diff --git a/packages/ui/src/modal/editBid/EditBidModal.tsx b/packages/ui/src/modal/editBid/EditBidModal.tsx index 7809b2c33..6e90332b4 100644 --- a/packages/ui/src/modal/editBid/EditBidModal.tsx +++ b/packages/ui/src/modal/editBid/EditBidModal.tsx @@ -5,6 +5,7 @@ import React, { SetStateAction, useEffect, useState, + ComponentPropsWithoutRef, } from 'react' import { Flex, @@ -35,6 +36,7 @@ import { } from '@fortawesome/free-solid-svg-icons' import { ReservoirWallet } from '@reservoir0x/reservoir-sdk' import { WalletClient } from 'viem' +import { Dialog } from '../../primitives/Dialog' const ModalCopy = { title: 'Edit Offer', ctaClose: 'Close', @@ -58,6 +60,9 @@ type Props = Pick['0'], 'trigger'> & { onClose?: (data: any, currentStep: EditBidStep) => void onEditBidComplete?: (data: any) => void onEditBidError?: (error: Error, data: any) => void + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } export function EditBidModal({ @@ -73,6 +78,7 @@ export function EditBidModal({ onClose, onEditBidComplete, onEditBidError, + onPointerDownOutside, }: Props): ReactElement { const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides } const [open, setOpen] = useFallbackState( @@ -204,6 +210,11 @@ export function EditBidModal({ setOpen(open) }} loading={loading} + onPointerDownOutside={(e) => { + if (onPointerDownOutside) { + onPointerDownOutside(e) + } + }} > {!isBidAvailable && !loading && ( ['0'], 'trigger'> & { onClose?: (data: any, currentStep: EditListingStep) => void onEditListingComplete?: (data: any) => void onEditListingError?: (error: Error, data: any) => void + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } const MINIMUM_AMOUNT = 0.000001 @@ -64,6 +74,7 @@ export function EditListingModal({ onClose, onEditListingComplete, onEditListingError, + onPointerDownOutside, }: Props): ReactElement { const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides } const [open, setOpen] = useFallbackState( @@ -169,6 +180,11 @@ export function EditListingModal({ setOpen(open) }} loading={loading} + onPointerDownOutside={(e) => { + if (onPointerDownOutside) { + onPointerDownOutside(e) + } + }} > {!isListingAvailable && !loading && ( ['0'], 'trigger'> & { stepData: ListModalStepData | null, currentStep: ListStep ) => void + onPointerDownOutside?: ComponentPropsWithoutRef< + typeof Dialog + >['onPointerDownOutside'] } const Image = styled('img', {}) @@ -102,6 +107,7 @@ export function ListModal({ onListingComplete, onListingError, onClose, + onPointerDownOutside, }: Props): ReactElement { const copy: typeof ModalCopy = { ...ModalCopy, ...copyOverrides } const [open, setOpen] = useFallbackState( @@ -273,6 +279,9 @@ export function ListModal({ ) { e.preventDefault() } + if (onPointerDownOutside) { + onPointerDownOutside(e) + } }} onFocusCapture={(e) => { e.stopPropagation()