Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dapp browser: disable tab closing for empty state #5573

Merged
merged 4 commits into from
Mar 30, 2024
Merged

Dapp browser: disable tab closing for empty state #5573

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0332333
fix
benisgold Mar 28, 2024
46bfd2b
vars
benisgold Mar 28, 2024
920efb5
remove early returns from gesture handler
benisgold Mar 30, 2024
67857ad
Merge branch 'develop' of https://github.com/rainbow-me/rainbow into …
benisgold Mar 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/DappBrowser/BrowserTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -616,13 +616,13 @@ export const BrowserTab = React.memo(function BrowserTab({ tabId, tabIndex, inje

const swipeToCloseTabGestureHandler = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
onStart: (_, ctx: { startX?: number }) => {
if (!tabViewVisible?.value) return;
Copy link
Member

@christianbaroni christianbaroni Mar 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these early returns should be removed once we fix the disabling of the gesture handlers outside of the tab view

probably currently allows the tab to get stuck if while dragging a tab you exit the tab view

we could even remove the early return in onEnd now and add a !!tabViewVisible?.value condition where I added !isEmptyTab:

onEnd: (e, ctx: { startX?: number }) => {
  const xDelta = e.absoluteX - (ctx.startX || 0);
  setNativeProps(scrollViewRef, { scrollEnabled: !!tabViewVisible?.value });

  const isBeyondDismissThreshold = (xDelta < -(TAB_VIEW_COLUMN_WIDTH / 2 + 20) && e.velocityX <= 0);
  const isFastLeftwardSwipe = e.velocityX < -500;
  const shouldDismiss = !!tabViewVisible?.value && !isEmptyState && (isBeyondDismissThreshold || isFastLeftwardSwipe);

  if (shouldDismiss) {
      
    // rest the same

if (!tabViewVisible?.value || (!multipleTabsOpen && isOnHomepage)) return;
if (ctx.startX) {
ctx.startX = undefined;
}
},
onActive: (e, ctx: { startX?: number }) => {
if (!tabViewVisible?.value) return;
if (!tabViewVisible?.value || (!multipleTabsOpen && isOnHomepage)) return;

if (ctx.startX === undefined) {
gestureScale.value = withTiming(1.1, TIMING_CONFIGS.tabPressConfig);
Expand All @@ -637,7 +637,7 @@ export const BrowserTab = React.memo(function BrowserTab({ tabId, tabIndex, inje
gestureX.value = xDelta;
},
onEnd: (e, ctx: { startX?: number }) => {
if (!tabViewVisible?.value) return;
if (!tabViewVisible?.value || (!multipleTabsOpen && isOnHomepage)) return;

const xDelta = e.absoluteX - (ctx.startX || 0);
setNativeProps(scrollViewRef, { scrollEnabled: !!tabViewVisible?.value });
Expand Down
14 changes: 9 additions & 5 deletions src/components/DappBrowser/CloseTabButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Box, Cover, TextIcon, useColorMode } from '@/design-system';
import { IS_IOS } from '@/env';
import { deviceUtils } from '@/utils';
import { AnimatedBlurView } from '@/__swaps__/screens/Swap/components/AnimatedBlurView';
import { useBrowserContext } from './BrowserContext';
import { RAINBOW_HOME, useBrowserContext } from './BrowserContext';
import { TAB_VIEW_COLUMN_WIDTH } from './Dimensions';
import { TIMING_CONFIGS } from '../animations/animationConfigs';

Expand All @@ -28,7 +28,9 @@ export const CloseTabButton = ({ onPress, tabIndex }: { onPress: () => void; tab
const { animatedActiveTabIndex, tabStates, tabViewProgress, tabViewVisible } = useBrowserContext();
const { isDarkMode } = useColorMode();

const multipleTabsOpen = React.useMemo(() => tabStates.length > 1, [tabStates.length]);
const multipleTabsOpen = tabStates.length > 1;
const tabUrl = tabStates[tabIndex]?.url;
const isOnHomepage = tabUrl === RAINBOW_HOME;
const buttonSize = multipleTabsOpen ? SCALE_ADJUSTED_X_BUTTON_SIZE : SCALE_ADJUSTED_X_BUTTON_SIZE_SINGLE_TAB;
const buttonPadding = multipleTabsOpen ? SCALE_ADJUSTED_X_BUTTON_PADDING : SCALE_ADJUSTED_X_BUTTON_PADDING_SINGLE_TAB;

Expand All @@ -40,13 +42,15 @@ export const CloseTabButton = ({ onPress, tabIndex }: { onPress: () => void; tab
// entered. This is mainly to avoid showing the close button in the
// active tab until the tab view animation is near complete.
const interpolatedOpacity = interpolate(progress, [0, 80, 100], [isActiveTab ? 0 : 1, isActiveTab ? 0 : 1, 1]);
const opacity = tabViewVisible?.value || !isActiveTab ? interpolatedOpacity : withTiming(0, TIMING_CONFIGS.fastFadeConfig);

const opacity =
(multipleTabsOpen || !isOnHomepage) && (tabViewVisible?.value || !isActiveTab)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might need diff animation config here once we add animation for going from multiple tabs -> single tab

? interpolatedOpacity
: withTiming(0, TIMING_CONFIGS.fastFadeConfig);
return { opacity };
});

const pointerEventsStyle = useAnimatedStyle(() => {
const pointerEvents = tabViewVisible?.value ? 'auto' : 'none';
const pointerEvents = tabViewVisible?.value && (multipleTabsOpen || !isOnHomepage) ? 'auto' : 'none';
return { pointerEvents };
});

Expand Down
Loading