From 04468eb1b7cccc6dcee127c7a89d001fa2ea352b Mon Sep 17 00:00:00 2001 From: Ansh Nanda Date: Wed, 24 May 2023 14:59:42 -0700 Subject: [PATCH 1/3] make prettier and eslint work together --- .eslintrc.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 2d59d36d..19fcf230 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,10 @@ module.exports = { root: true, - extends: ['@react-native-community', 'plugin:react-native-a11y/ios'], + extends: [ + '@react-native-community', + 'plugin:react-native-a11y/ios', + 'prettier', + ], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint', 'detox'], ignorePatterns: [ From 7e555ecc1b04fed96192d3c68b87cf679993abfa Mon Sep 17 00:00:00 2001 From: Ansh Nanda Date: Wed, 24 May 2023 15:00:36 -0700 Subject: [PATCH 2/3] fix lint errors --- src/lib/constants.ts | 9 ++++++--- src/view/screens/Notifications.tsx | 5 ++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/lib/constants.ts b/src/lib/constants.ts index e492dd61..c42e6f3a 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -102,13 +102,15 @@ export async function DEFAULT_FEEDS( serviceUrl: string, resolveHandle: (name: string) => Promise, ) { - if (serviceUrl.includes('localhost')) { // local dev + if (serviceUrl.includes('localhost')) { + // local dev const aliceDid = await resolveHandle('alice.test') return { pinned: [`at://${aliceDid}/app.bsky.feed.generator/alice-favs`], saved: [`at://${aliceDid}/app.bsky.feed.generator/alice-favs`], } - } else if (serviceUrl.includes('staging')) { // staging + } else if (serviceUrl.includes('staging')) { + // staging return { pinned: [STAGING_DEFAULT_FEED('whats-hot')], saved: [ @@ -118,7 +120,8 @@ export async function DEFAULT_FEEDS( STAGING_DEFAULT_FEED('hot-classic'), ], } - } else { // production + } else { + // production return { pinned: [PROD_DEFAULT_FEED('whats-hot')], saved: [ diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index df84b541..67507d00 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -98,7 +98,10 @@ export const NotificationsScreen = withAuthRequired( /> {store.me.notifications.hasNewLatest && !store.me.notifications.isRefreshing && ( - + )} ) From 32c9dabb7467149baf39d8f5c2eb3d0b81236d92 Mon Sep 17 00:00:00 2001 From: Ansh Nanda Date: Wed, 24 May 2023 15:04:30 -0700 Subject: [PATCH 3/3] make tab bar scroll view draggable on web --- src/lib/hooks/useDraggableScrollView.ts | 84 ++++++++++++++++++++++ src/lib/merge-refs.ts | 27 +++++++ src/view/com/pager/DraggableScrollView.tsx | 15 ++++ src/view/com/pager/FeedsTabBar.web.tsx | 2 +- src/view/com/pager/TabBar.tsx | 5 +- 5 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 src/lib/hooks/useDraggableScrollView.ts create mode 100644 src/lib/merge-refs.ts create mode 100644 src/view/com/pager/DraggableScrollView.tsx diff --git a/src/lib/hooks/useDraggableScrollView.ts b/src/lib/hooks/useDraggableScrollView.ts new file mode 100644 index 00000000..b0f7465d --- /dev/null +++ b/src/lib/hooks/useDraggableScrollView.ts @@ -0,0 +1,84 @@ +import {useEffect, useRef, useMemo, ForwardedRef} from 'react' +import {Platform, findNodeHandle} from 'react-native' +import type {ScrollView} from 'react-native' +import {mergeRefs} from 'lib/merge-refs' + +type Props = { + cursor?: string + outerRef?: ForwardedRef +} + +export function useDraggableScroll({ + outerRef, + cursor = 'grab', +}: Props = {}) { + const ref = useRef(null) + + useEffect(() => { + if (Platform.OS !== 'web' || !ref.current) { + return + } + const slider = findNodeHandle(ref.current) as unknown as HTMLDivElement + if (!slider) { + return + } + let isDragging = false + let isMouseDown = false + let startX = 0 + let scrollLeft = 0 + + const mouseDown = (e: MouseEvent) => { + isMouseDown = true + startX = e.pageX - slider.offsetLeft + scrollLeft = slider.scrollLeft + + slider.style.cursor = cursor + } + + const mouseUp = () => { + if (isDragging) { + slider.addEventListener('click', e => e.stopPropagation(), {once: true}) + } + + isMouseDown = false + isDragging = false + slider.style.cursor = 'default' + } + + const mouseMove = (e: MouseEvent) => { + if (!isMouseDown) { + return + } + + // Require n pixels momement before start of drag (3 in this case ) + const x = e.pageX - slider.offsetLeft + if (Math.abs(x - startX) < 3) { + return + } + + isDragging = true + e.preventDefault() + const walk = x - startX + slider.scrollLeft = scrollLeft - walk + } + + slider.addEventListener('mousedown', mouseDown) + window.addEventListener('mouseup', mouseUp) + window.addEventListener('mousemove', mouseMove) + + return () => { + slider.removeEventListener('mousedown', mouseDown) + window.removeEventListener('mouseup', mouseUp) + window.removeEventListener('mousemove', mouseMove) + } + }, [cursor]) + + const refs = useMemo( + () => mergeRefs(outerRef ? [ref, outerRef] : [ref]), + [ref, outerRef], + ) + + return { + refs, + } +} diff --git a/src/lib/merge-refs.ts b/src/lib/merge-refs.ts new file mode 100644 index 00000000..4617b526 --- /dev/null +++ b/src/lib/merge-refs.ts @@ -0,0 +1,27 @@ +/** + * This TypeScript function merges multiple React refs into a single ref callback. + * When developing low level UI components, it is common to have to use a local ref + * but also support an external one using React.forwardRef. + * Natively, React does not offer a way to set two refs inside the ref property. This is the goal of this small utility. + * Today a ref can be a function or an object, tomorrow it could be another thing, who knows. + * This utility handles compatibility for you. + * This function is inspired by https://github.com/gregberge/react-merge-refs + * @param refs - An array of React refs, which can be either `React.MutableRefObject` or + * `React.LegacyRef`. These refs are used to store references to DOM elements or React components. + * The `mergeRefs` function takes in an array of these refs and returns a callback function that + * @returns The function `mergeRefs` is being returned. It takes an array of mutable or legacy refs and + * returns a ref callback function that can be used to merge multiple refs into a single ref. + */ +export function mergeRefs( + refs: Array | React.LegacyRef>, +): React.RefCallback { + return value => { + refs.forEach(ref => { + if (typeof ref === 'function') { + ref(value) + } else if (ref != null) { + ;(ref as React.MutableRefObject).current = value + } + }) + } +} diff --git a/src/view/com/pager/DraggableScrollView.tsx b/src/view/com/pager/DraggableScrollView.tsx new file mode 100644 index 00000000..4b7396ea --- /dev/null +++ b/src/view/com/pager/DraggableScrollView.tsx @@ -0,0 +1,15 @@ +import {useDraggableScroll} from 'lib/hooks/useDraggableScrollView' +import React, {ComponentProps} from 'react' +import {ScrollView} from 'react-native' + +export const DraggableScrollView = React.forwardRef< + ScrollView, + ComponentProps +>(function DraggableScrollView(props, ref) { + const {refs} = useDraggableScroll({ + outerRef: ref, + cursor: 'grab', // optional, default + }) + + return +}) diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx index fc04c3b2..b51db174 100644 --- a/src/view/com/pager/FeedsTabBar.web.tsx +++ b/src/view/com/pager/FeedsTabBar.web.tsx @@ -53,8 +53,8 @@ const FeedsTabBarDesktop = observer( // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index 48521973..cebf58b4 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -11,6 +11,7 @@ import {Text} from '../util/text/Text' import {PressableWithHover} from '../util/PressableWithHover' import {usePalette} from 'lib/hooks/usePalette' import {isDesktopWeb} from 'platform/detection' +import {DraggableScrollView} from './DraggableScrollView' export interface TabBarProps { testID?: string @@ -75,7 +76,7 @@ export function TabBar({ return ( - ) })} - + ) }