@tamagui/slider 2.7.7 → 3.0.0-beta.1093.1

package/src/SliderResponder.tsx

@@ -0,0 +1,37 @@
+import type { TamaguiElement } from '@tamagui/core'
+import { View } from '@tamagui/core'
+import { useResponderEvents } from '@tamagui/react-native-use-responder-events'
+import * as React from 'react'
+
+import type { SliderResponderProps } from './types'
+
+/**
+ * The slider is dragged through the responder system, and tamagui views stopped
+ * carrying responder props on web. This is the same responder system
+ * react-native-web runs, used directly, so dragging behaves as it did when this
+ * was a react-native `View`.
+ */
+export const SliderResponder = ({
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  children,
+}: SliderResponderProps) => {
+  const ref = React.useRef<TamaguiElement>(null)
+
+  useResponderEvents(ref, {
+    onMoveShouldSetResponderCapture: () => true,
+    onMoveShouldSetResponder: () => true,
+    onStartShouldSetResponder: () => true,
+    onResponderTerminationRequest: () => false,
+    onResponderGrant,
+    onResponderMove,
+    onResponderRelease,
+  })
+
+  return (
+    <View ref={ref} position="absolute" inset={0}>
+      {children}
+    </View>
+  )
+}

package/src/constants.tsx

@@ -4,12 +4,22 @@ import type { Direction, SliderContextValue } from './types'
 
 export const SLIDER_NAME = 'Slider'
 
-export const SliderContext = createStyledContext<SliderContextValue>({
-  size: '$true',
-  min: 0,
-  max: 100,
-  orientation: 'horizontal',
-} as SliderContextValue)
+const sliderContextKeys = ['size', 'min', 'max', 'orientation'] as const
+
+export const SliderContext = createStyledContext<
+  SliderContextValue,
+  (typeof sliderContextKeys)[number]
+>(
+  {
+    size: true,
+    min: 0,
+    max: 100,
+    orientation: 'horizontal',
+  } as SliderContextValue,
+  {
+    keys: sliderContextKeys,
+  }
+)
 
 export const { Provider: SliderProvider, useStyledContext: useSliderContext } =
   SliderContext

package/src/types.ts

@@ -1,6 +1,6 @@
 import type { GestureReponderEvent, SizeTokens, TamaguiElement } from '@tamagui/core'
 import type { Scope } from '@tamagui/create-context'
-import type { SizableStackProps } from '@tamagui/stacks'
+import type { YStackProps } from '@tamagui/stacks'
 
 export type ScopedProps<P> = P & { __scopeSlider?: string }
 
@@ -25,7 +25,9 @@ type SliderImplPrivateProps = {
   onStepKeyDown(event: React.KeyboardEvent): void
 }
 
-export type SliderTrackProps = SizableStackProps
+export type SliderTrackProps = YStackProps & {
+  size?: SizeTokens | true
+}
 
 export interface SliderImplProps extends SliderTrackProps, SliderImplPrivateProps {
   dir?: Direction
@@ -64,7 +66,7 @@ export interface SliderProps
   extends
     Omit<SliderHorizontalProps, keyof SliderOrientationPrivateProps | 'defaultValue'>,
     SliderEventProps {
-  size?: SizeTokens
+  size?: SizeTokens | true
   name?: string
   disabled?: boolean
   orientation?: React.AriaAttributes['aria-orientation']
@@ -79,7 +81,7 @@ export interface SliderProps
 }
 
 export type SliderContextValue = {
-  size?: SizeTokens | number | null
+  size?: SizeTokens | number | true | null
   disabled?: boolean
   min: number
   max: number
@@ -88,3 +90,10 @@ export type SliderContextValue = {
   thumbs: Map<TamaguiElement, number>
   orientation: SliderProps['orientation']
 }
+
+export type SliderResponderProps = {
+  onResponderGrant: (event: any) => void
+  onResponderMove: (event: any) => void
+  onResponderRelease: (event: any) => void
+  children?: React.ReactNode
+}