tamagui · natew · Oct 21, 2022 · Oct 21, 2022
diff --git a/apps/sandbox/Sandbox.tsx b/apps/sandbox/Sandbox.tsx
@@ -6,6 +6,7 @@ import '../site/app.css'
 
 // import { AppRegistry, useColorScheme } from 'react-native'
 import { TamaguiProvider } from '@tamagui/core'
+import { SheetDemo } from '@tamagui/demos'
 // import { SliderDemo, SwitchDemo } from '@tamagui/demos'
 import { useState } from 'react'
 import { Square } from 'tamagui'
@@ -82,6 +83,7 @@ export const Sandbox = () => {
         {/* <Input /> */}
 
         <Square size={100} bc="red" />
+        <SheetDemo />
 
         {/* <SliderDemo /> */}
 

diff --git a/apps/sandbox/vite.config.ts b/apps/sandbox/vite.config.ts
@@ -26,7 +26,7 @@ export default defineConfig({
     }),
     tamaguiPlugin({
       ...tamaguiConfig,
-      // useReactNativeWebLite: true,
+      useReactNativeWebLite: true,
     }),
     ...(shouldExtract
       ? [

diff --git a/apps/site-vite/src/components/home/Hero.server.tsx b/apps/site-vite/src/components/home/Hero.server.tsx
@@ -34,7 +34,7 @@ export function Hero() {
 
 const HeroTop = memo(() => {
   return (
-    <ContainerLarge className="okok" pos="relative">
+    <ContainerLarge pos="relative">
       <YStack
         contain="strict"
         className="bg-grid mask-gradient-up"

diff --git a/apps/site/components/Hero.tsx b/apps/site/components/Hero.tsx
@@ -143,7 +143,7 @@ const HeroTop = memo(() => {
                   UI&nbsp;kit
                 </Tag>
               </Link>{' '}
-              that&nbsp;unifies react native + web
+              that&nbsp;unify&nbsp;react native + web
             </Subtitle>
           </YStack>
         </YStack>

diff --git a/packages/demos/src/SheetDemo.tsx b/packages/demos/src/SheetDemo.tsx
@@ -1,7 +1,7 @@
 import { ChevronDown } from '@tamagui/lucide-icons'
 import { Sheet } from '@tamagui/sheet'
-import React, { useState } from 'react'
-import { Button, Circle, Paragraph, XStack, YStack, isWeb } from 'tamagui'
+import { useState } from 'react'
+import { Button, Circle, Square, XStack, YStack, isWeb } from 'tamagui'
 
 export const SheetDemo = () => {
   const [position, setPosition] = useState(0)
@@ -26,19 +26,27 @@ export const SheetDemo = () => {
       >
         <Sheet.Overlay />
         <Sheet.Handle />
-        <Sheet.Frame ai="center" jc="center">
-          <Sheet.ScrollView>
-            <YStack p="$4" jc="center" ai="center">
-              <Button
-                size="$6"
-                circular
-                icon={ChevronDown}
-                onPress={() => {
-                  setOpen(false)
-                }}
-              />
-            </YStack>
-          </Sheet.ScrollView>
+        <Sheet.Frame>
+          {/* <Sheet.ScrollView
+            contentContainerStyle={{
+              minHeight: '100%',
+            }}
+          > */}
+          <YStack f={1} p="$4" jc="center" ai="center">
+            <Button
+              size="$6"
+              circular
+              icon={ChevronDown}
+              onPress={() => {
+                setOpen(false)
+              }}
+            />
+          </YStack>
+
+          <Square m="$4" size={120} bc="$red9" />
+          <Circle m="$4" size={120} bc="$orange9" />
+          <Square m="$4" size={120} bc="$yellow9" />
+          {/* </Sheet.ScrollView> */}
         </Sheet.Frame>
       </Sheet>
     </>

diff --git a/packages/react-native-use-responder-events/src/ResponderTouchHistoryStore.ts b/packages/react-native-use-responder-events/src/ResponderTouchHistoryStore.ts
@@ -1,5 +1,6 @@
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
@@ -22,8 +23,8 @@ type TouchRecord = {
 
 export type TouchHistory = {
   indexOfSingleActiveTouch: number
-  mostRecentTS: number
-  numActive: number
+  mostRecentTimeStamp: number
+  numberActiveTouches: number
   touchBank: Array<TouchRecord>
 }
 
@@ -38,7 +39,7 @@ const MAX_TOUCH_BANK = 20
 function timestampForTouch(touch: Touch): number {
   // The legacy internal implementation provides "timeStamp", which has been
   // renamed to "timestamp".
-  return (touch as any).timeStamp || touch.timestamp
+  return touch['timeStamp'] || touch.timestamp
 }
 
 /**
@@ -100,7 +101,7 @@ function recordTouchStart(touch: Touch, touchHistory): void {
   } else {
     touchHistory.touchBank[identifier] = createTouchRecord(touch)
   }
-  touchHistory.mostRecentTS = timestampForTouch(touch)
+  touchHistory.mostRecentTimeStamp = timestampForTouch(touch)
 }
 
 function recordTouchMove(touch: Touch, touchHistory): void {
@@ -113,16 +114,13 @@ function recordTouchMove(touch: Touch, touchHistory): void {
     touchRecord.currentPageX = touch.pageX
     touchRecord.currentPageY = touch.pageY
     touchRecord.currentTimeStamp = timestampForTouch(touch)
-    touchHistory.mostRecentTS = timestampForTouch(touch)
+    touchHistory.mostRecentTimeStamp = timestampForTouch(touch)
   } else {
-    if (process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Cannot record touch move without a touch start.\n',
-        `Touch Move: ${printTouch(touch)}\n`,
-        `Touch Bank: ${printTouchBank(touchHistory)}`
-      )
-    }
+    console.warn(
+      'Cannot record touch move without a touch start.\n',
+      `Touch Move: ${printTouch(touch)}\n`,
+      `Touch Bank: ${printTouchBank(touchHistory)}`
+    )
   }
 }
 
@@ -136,16 +134,13 @@ function recordTouchEnd(touch: Touch, touchHistory): void {
     touchRecord.currentPageX = touch.pageX
     touchRecord.currentPageY = touch.pageY
     touchRecord.currentTimeStamp = timestampForTouch(touch)
-    touchHistory.mostRecentTS = timestampForTouch(touch)
+    touchHistory.mostRecentTimeStamp = timestampForTouch(touch)
   } else {
-    if (process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Cannot record touch end without a touch start.\n',
-        `Touch End: ${printTouch(touch)}\n`,
-        `Touch Bank: ${printTouchBank(touchHistory)}`
-      )
-    }
+    console.warn(
+      'Cannot record touch end without a touch start.\n',
+      `Touch End: ${printTouch(touch)}\n`,
+      `Touch Bank: ${printTouchBank(touchHistory)}`
+    )
   }
 }
 
@@ -168,42 +163,43 @@ function printTouchBank(touchHistory): string {
 }
 
 export class ResponderTouchHistoryStore {
-  _hist = {
+  _touchHistory = {
     touchBank: [], //Array<TouchRecord>
-    numActive: 0,
+    numberActiveTouches: 0,
     // If there is only one active touch, we remember its location. This prevents
     // us having to loop through all of the touches all the time in the most
     // common case.
     indexOfSingleActiveTouch: -1,
-    mostRecentTS: 0,
+    mostRecentTimeStamp: 0,
   }
 
   recordTouchTrack(topLevelType: string, nativeEvent: TouchEvent): void {
-    const touchHistory = this._hist
+    const touchHistory = this._touchHistory
     if (isMoveish(topLevelType)) {
       nativeEvent.changedTouches.forEach((touch) => recordTouchMove(touch, touchHistory))
     } else if (isStartish(topLevelType)) {
       nativeEvent.changedTouches.forEach((touch) => recordTouchStart(touch, touchHistory))
-      touchHistory.numActive = nativeEvent.touches.length
-      if (touchHistory.numActive === 1) {
+      touchHistory.numberActiveTouches = nativeEvent.touches.length
+      if (touchHistory.numberActiveTouches === 1) {
         touchHistory.indexOfSingleActiveTouch = nativeEvent.touches[0].identifier
       }
     } else if (isEndish(topLevelType)) {
       nativeEvent.changedTouches.forEach((touch) => recordTouchEnd(touch, touchHistory))
-      touchHistory.numActive = nativeEvent.touches.length
-      if (touchHistory.numActive === 1) {
+      touchHistory.numberActiveTouches = nativeEvent.touches.length
+      if (touchHistory.numberActiveTouches === 1) {
         const { touchBank } = touchHistory
         for (let i = 0; i < touchBank.length; i++) {
-          const touchTrackToCheck = touchBank[i] as any
+          const touchTrackToCheck = touchBank[i]
+          //  @ts-ignore
           if (touchTrackToCheck != null && touchTrackToCheck.touchActive) {
             touchHistory.indexOfSingleActiveTouch = i
             break
           }
         }
         if (process.env.NODE_ENV === 'development') {
-          const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch] as any
+          const activeRecord = touchBank[touchHistory.indexOfSingleActiveTouch]
+          //  @ts-ignore
           if (!(activeRecord != null && activeRecord.touchActive)) {
-            // eslint-disable-next-line no-console
             console.error('Cannot find single active touch.')
           }
         }
@@ -212,6 +208,6 @@ export class ResponderTouchHistoryStore {
   }
 
   get touchHistory(): TouchHistory {
-    return this._hist
+    return this._touchHistory
   }
 }
diff --git a/packages/react-native-use-responder-events/src/index.ts b/packages/react-native-use-responder-events/src/index.ts
@@ -1,72 +1 @@
-/**
- * Copyright (c) Nicolas Gallagher
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react'
-
-import * as ResponderSystem from './ResponderSystem'
-
-export * from './utils'
-
-const emptyObject = {}
-
-export function useResponderEvents(
-  hostRef: any,
-  config: ResponderSystem.ResponderConfig = emptyObject
-) {
-  const id = React.useId()
-  const isAttachedRef = React.useRef(false)
-
-  // This is a separate effects so it doesn't run when the config changes.
-  // On initial mount, attach global listeners if needed.
-  // On unmount, remove node potentially attached to the Responder System.
-  React.useEffect(() => {
-    ResponderSystem.attachListeners()
-    return () => {
-      ResponderSystem.removeNode(id)
-    }
-  }, [id])
-
-  // Register and unregister with the Responder System as necessary
-  React.useEffect(() => {
-    const {
-      onMoveShouldSetResponder,
-      onMoveShouldSetResponderCapture,
-      onScrollShouldSetResponder,
-      onScrollShouldSetResponderCapture,
-      onSelectionChangeShouldSetResponder,
-      onSelectionChangeShouldSetResponderCapture,
-      onStartShouldSetResponder,
-      onStartShouldSetResponderCapture,
-    } = config
-
-    const requiresResponderSystem =
-      onMoveShouldSetResponder != null ||
-      onMoveShouldSetResponderCapture != null ||
-      onScrollShouldSetResponder != null ||
-      onScrollShouldSetResponderCapture != null ||
-      onSelectionChangeShouldSetResponder != null ||
-      onSelectionChangeShouldSetResponderCapture != null ||
-      onStartShouldSetResponder != null ||
-      onStartShouldSetResponderCapture != null
-
-    const node = hostRef.current
-
-    if (requiresResponderSystem) {
-      ResponderSystem.addNode(id, node, config)
-      isAttachedRef.current = true
-    } else if (isAttachedRef.current) {
-      ResponderSystem.removeNode(id)
-      isAttachedRef.current = false
-    }
-  }, [config, hostRef, id])
-
-  if (process.env.NODE_ENV === 'development') {
-    React.useDebugValue({
-      isResponder: hostRef.current === ResponderSystem.getResponderNode(),
-    })
-    React.useDebugValue(config)
-  }
-}
+export * from './useResponderEvents'
diff --git a/.../src/modules/useResponderEvents/index.tsx → ...esponder-events/src/useResponderEvents.ts b/.../src/modules/useResponderEvents/index.tsx → ...esponder-events/src/useResponderEvents.ts
@@ -1,40 +1,22 @@
 /**
  * Copyright (c) Nicolas Gallagher
- *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-/**
- * Hook for integrating the Responder System into React
- *
- *   function SomeComponent({ onStartShouldSetResponder }) {
- *     const ref = useRef(null);
- *     useResponderEvents(ref, { onStartShouldSetResponder });
- *     return <div ref={ref} />
- *   }
  */
 
 import * as React from 'react'
 
-import { ResponderConfig } from './ResponderSystem.js'
-import * as ResponderSystem from './ResponderSystem.js'
+import * as ResponderSystem from './ResponderSystem'
 
-const emptyObject = {}
-let idCounter = 0
+export * from './utils'
 
-function useStable<T>(getInitialValue: () => T): T {
-  const ref = React.useRef<T | null>(null)
-  if (ref.current == null) {
-    ref.current = getInitialValue()
-  }
-  return ref.current
-}
+const emptyObject = {}
 
-export default function useResponderEvents(hostRef: any, config: ResponderConfig = emptyObject) {
-  const id = useStable(() => idCounter++)
+export function useResponderEvents(
+  hostRef: any,
+  config: ResponderSystem.ResponderConfig = emptyObject
+) {
+  const id = React.useId()
   const isAttachedRef = React.useRef(false)
 
   // This is a separate effects so it doesn't run when the config changes.
@@ -81,8 +63,10 @@ export default function useResponderEvents(hostRef: any, config: ResponderConfig
     }
   }, [config, hostRef, id])
 
-  React.useDebugValue({
-    isResponder: hostRef.current === ResponderSystem.getResponderNode(),
-  })
-  React.useDebugValue(config)
+  if (process.env.NODE_ENV === 'development') {
+    React.useDebugValue({
+      isResponder: hostRef.current === ResponderSystem.getResponderNode(),
+    })
+    React.useDebugValue(config)
+  }
 }