@tamagui/switch 2.7.7 → 3.0.0-beta.643.1

package/src/Switch.draggable-tmp

@@ -1,340 +0,0 @@
-// via radix
-// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx
-
-import { usePrevious } from '@tamagui/use-previous'
-import { useComposedRefs } from '@tamagui/compose-refs'
-import {
-  GetProps,
-  SizeTokens,
-  calc,
-  getSize,
-  getVariableValue,
-  isWeb,
-  styled,
-  withStaticProperties,
-} from '@tamagui/core'
-import { ScopedProps, createContextScope } from '@tamagui/create-context'
-import { registerFocusable } from '@tamagui/focusable'
-import { useLabelContext } from '@tamagui/label'
-import { ThemeableStack, XStack } from '@tamagui/stacks'
-import { useControllableState } from '@tamagui/use-controllable-state'
-import * as React from 'react'
-import { Animated, LayoutRectangle, PanResponder, View } from 'react-native'
-
-const SWITCH_NAME = 'Switch'
-
-// TODO make customizable
-const getSwitchHeight = (val: SizeTokens) => Math.round(getVariableValue(getSize(val)) * 0.65)
-const getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2
-
-const scopeContexts = createContextScope(SWITCH_NAME)
-const [createSwitchContext] = scopeContexts
-export const createSwitchScope = scopeContexts[1]
-
-const [SwitchProvider, useSwitchContext] = createSwitchContext<{
-  checked: boolean
-  disabled?: boolean
-  size: SizeTokens
-  frameLayout?: LayoutRectangle
-}>(SWITCH_NAME)
-
-/* -------------------------------------------------------------------------------------------------
- * SwitchThumb
- * -----------------------------------------------------------------------------------------------*/
-
-const THUMB_NAME = 'SwitchThumb'
-
-export const SwitchThumbFrame = styled(ThemeableStack, {
-  name: 'SwitchThumb',
-  backgroundColor: '$background',
-  borderRadius: 1000,
-
-  variants: {
-    size: {
-      '...size': (val) => ({
-        height: getSwitchHeight(val),
-        width: getSwitchHeight(val),
-      }),
-    },
-  },
-
-  defaultVariants: {
-    size: '$4',
-  },
-})
-
-export type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>
-
-export const SwitchThumb = SwitchThumbFrame.extractable(
-  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(
-    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {
-      const { __scopeSwitch, ...thumbProps } = props
-      const { size, disabled, checked, frameLayout } = useSwitchContext(THUMB_NAME, __scopeSwitch)
-      const [position] = React.useState(new Animated.ValueXY(0))
-      const [thumbWidth, setThumbWidth] = React.useState(0)
-      const responder = React.useMemo(() => {
-        return PanResponder.create({
-          onStartShouldSetPanResponder: () => true,
-          onPanResponderMove: Animated.event(
-            [
-              null,
-              {
-                dx: position.x,
-              },
-            ],
-            {
-              useNativeDriver: false,
-            }
-          ),
-        })
-      }, [])
-
-      React.useEffect(() => {
-        position.addListener((val) => {
-          console.log('x', val)
-        })
-      }, [])
-
-      const maxMove =
-        getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))
-
-      const maxDrag = (frameLayout?.width || 0) - thumbWidth
-
-      return (
-        <Animated.View
-          style={[
-            {
-              transform: [{ translateX: position.x }],
-            },
-          ]}
-        >
-          <SwitchThumbFrame
-            size={size}
-            data-state={getState(checked)}
-            data-disabled={disabled ? '' : undefined}
-            {...responder.panHandlers}
-            {...thumbProps}
-            onLayout={({ nativeEvent }) => {
-              console.log('thumb', nativeEvent.layout)
-              setThumbWidth(nativeEvent.layout.width)
-            }}
-            x={checked ? maxMove : 0}
-            ref={forwardedRef}
-          />
-        </Animated.View>
-      )
-    }
-  )
-)
-
-SwitchThumb.displayName = THUMB_NAME
-
-/* -------------------------------------------------------------------------------------------------
- * Switch
- * -----------------------------------------------------------------------------------------------*/
-
-export const SwitchFrame = styled(XStack, {
-  name: 'Switch',
-  tag: 'button',
-  borderRadius: 1000,
-  borderWidth: 2,
-  borderColor: 'transparent',
-  backgroundColor: '$background',
-
-  focusStyle: {
-    borderColor: '$borderColorFocus',
-  },
-
-  variants: {
-    size: {
-      '...size': (val) => {
-        const height = calc(getSwitchHeight(val), '+', 4)
-        const width = calc(getSwitchWidth(val), '+', 4)
-        return {
-          height,
-          minHeight: height,
-          width,
-        }
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: '$4',
-  },
-})
-
-type SwitchButtonProps = GetProps<typeof SwitchFrame>
-
-export type SwitchProps = SwitchButtonProps & {
-  labeledBy?: string
-  name?: string
-  value?: string
-  checked?: boolean
-  defaultChecked?: boolean
-  required?: boolean
-  onCheckedChange?(checked: boolean): void
-}
-
-export const Switch = withStaticProperties(
-  SwitchFrame.extractable(
-    React.forwardRef<HTMLButtonElement | View, SwitchProps>(
-      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {
-        const {
-          __scopeSwitch,
-          labeledBy: ariaLabelledby,
-          name,
-          checked: checkedProp,
-          defaultChecked,
-          required,
-          disabled,
-          value = 'on',
-          onCheckedChange,
-          size = '$4',
-          ...switchProps
-        } = props
-        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)
-        const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))
-        const labelId = useLabelContext(button)
-        const labelledBy = ariaLabelledby || labelId
-        const hasConsumerStoppedPropagationRef = React.useRef(false)
-        const [frameLayout, setFrameLayout] = React.useState<LayoutRectangle>()
-        // We set this to true by default so that events bubble to forms without JS (SSR)
-        const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false
-        const [checked = false, setChecked] = useControllableState({
-          prop: checkedProp,
-          defaultProp: defaultChecked || false,
-          onChange: onCheckedChange,
-        })
-
-        if (!isWeb) {
-          
-          React.useEffect(() => {
-            if (!props.id) return
-            return registerFocusable(props.id, {
-              focus: () => {
-                setChecked((x) => !x)
-              },
-            })
-          }, [props.id, setChecked])
-        }
-
-        return (
-          <SwitchProvider
-            scope={__scopeSwitch}
-            checked={checked}
-            disabled={disabled}
-            size={size}
-            frameLayout={frameLayout}
-          >
-            <SwitchFrame
-              size={size}
-              onLayout={({ nativeEvent }) => {
-                console.log('?', nativeEvent.layout)
-                setFrameLayout(nativeEvent.layout)
-              }}
-              // @ts-ignore
-              role="switch"
-              aria-checked={checked}
-              aria-labelledby={labelledBy}
-              aria-required={required}
-              data-state={getState(checked)}
-              data-disabled={disabled ? '' : undefined}
-              disabled={disabled}
-              theme={checked ? 'active' : null}
-              themeShallow
-              // @ts-ignore
-              tabIndex={disabled ? undefined : 0}
-              // @ts-ignore
-              value={value}
-              {...switchProps}
-              ref={composedRefs}
-              onPress={(event) => {
-                props.onPress?.(event)
-                setChecked((prevChecked) => !prevChecked)
-                if (isWeb && isFormControl) {
-                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()
-                  // if switch is in a form, stop propagation from the button so that we only propagate
-                  // one click event (from the input). We propagate changes from an input so that native
-                  // form validation works and form events reflect switch updates.
-                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()
-                }
-              }}
-            />
-            {isWeb && isFormControl && (
-              <BubbleInput
-                control={button}
-                bubbles={!hasConsumerStoppedPropagationRef.current}
-                name={name}
-                value={value}
-                checked={checked}
-                required={required}
-                disabled={disabled}
-                // We transform because the input is absolutely positioned but we have
-                // rendered it **after** the button. This pulls it back to sit on top
-                // of the button.
-                style={{ transform: 'translateX(-100%)' }}
-              />
-            )}
-          </SwitchProvider>
-        )
-      }
-    )
-  ),
-  {
-    Thumb: SwitchThumb,
-  }
-)
-
-/* ---------------------------------------------------------------------------------------------- */
-
-type InputProps = any //Radix.ComponentPropsWithoutRef<'input'>
-interface BubbleInputProps extends Omit<InputProps, 'checked'> {
-  checked: boolean
-  control: HTMLElement | null
-  bubbles: boolean
-}
-
-// TODO make this native friendly
-const BubbleInput = (props: BubbleInputProps) => {
-  const { control, checked, bubbles = true, ...inputProps } = props
-  const ref = React.useRef<HTMLInputElement>(null)
-  const prevChecked = usePrevious(checked)
-  // const controlSize = useSize(control)
-
-  // Bubble checked change to parents (e.g form change event)
-  React.useEffect(() => {
-    const input = ref.current!
-    const inputProto = window.HTMLInputElement.prototype
-    const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'checked') as PropertyDescriptor
-    const setChecked = descriptor.set
-    if (prevChecked !== checked && setChecked) {
-      const event = new Event('click', { bubbles })
-      setChecked.call(input, checked)
-      input.dispatchEvent(event)
-    }
-  }, [prevChecked, checked, bubbles])
-
-  return (
-    <input
-      type="checkbox"
-      aria-hidden
-      defaultChecked={checked}
-      {...inputProps}
-      tabIndex={-1}
-      ref={ref}
-      style={{
-        ...props.style,
-        // ...controlSize,
-        position: 'absolute',
-        pointerEvents: 'none',
-        opacity: 0,
-        margin: 0,
-      }}
-    />
-  )
-}
-
-function getState(checked: boolean) {
-  return checked ? 'checked' : 'unchecked'
-}

package/src/createSwitch.tsx

@@ -1,201 +0,0 @@
-import {
-  composeEventHandlers,
-  getVariableValue,
-  isWeb,
-  View,
-  withStaticProperties,
-} from '@tamagui/core'
-import { useSwitch } from '@tamagui/switch-headless'
-import { useControllableState } from '@tamagui/use-controllable-state'
-import * as React from 'react'
-import type { LayoutChangeEvent } from 'react-native'
-import { SwitchStyledContext } from './StyledContext'
-import { SwitchFrame as DefaultSwitchFrame, SwitchThumb } from './Switch'
-import type {
-  SwitchComponent,
-  SwitchExtraProps,
-  SwitchProps,
-  SwitchThumbComponent,
-  SwitchThumbProps,
-} from './types'
-import { useSwitchNative } from './useSwitchNative'
-
-export type { SwitchExtraProps, SwitchProps, SwitchThumbProps }
-
-export function createSwitch<
-  F extends SwitchComponent,
-  T extends SwitchThumbComponent,
->(createProps: { Frame?: F; Thumb?: T }) {
-  const { Frame = DefaultSwitchFrame, Thumb = SwitchThumb } = createProps as any as {
-    Frame: typeof DefaultSwitchFrame
-    Thumb: typeof SwitchThumb
-  }
-
-  if (process.env.NODE_ENV === 'development') {
-    if (
-      (Frame !== DefaultSwitchFrame &&
-        Frame.staticConfig.context &&
-        Frame.staticConfig.context !== SwitchStyledContext) ||
-      (Thumb !== SwitchThumb &&
-        Thumb.staticConfig.context &&
-        Thumb.staticConfig.context !== SwitchStyledContext)
-    ) {
-      console.warn(
-        `Warning: createSwitch() needs to control context to pass checked state from Frame to Thumb, any custom context passed will be overridden.`
-      )
-    }
-  }
-
-  Frame.staticConfig.context = SwitchStyledContext
-  Thumb.staticConfig.context = SwitchStyledContext
-
-  const SwitchThumbComponent = Thumb.styleable<SwitchThumbProps>(
-    function SwitchThumb(props, forwardedRef) {
-      const { size: sizeProp, unstyled: unstyledProp, activeStyle, ...thumbProps } = props
-      const styledContext = SwitchStyledContext.useStyledContext()
-      const {
-        unstyled: unstyledContext,
-        size: sizeContext,
-        active,
-        disabled,
-        frameWidth = 0,
-      } = styledContext
-      const unstyled =
-        process.env.TAMAGUI_HEADLESS === '1'
-          ? true
-          : (unstyledProp ?? unstyledContext ?? false)
-      const size = sizeProp ?? sizeContext ?? '$true'
-      const initialChecked = React.useRef(active).current
-      const initialWidth = getVariableValue(props.width || size, 'size')
-      const [thumbWidth, setThumbWidth] = React.useState(
-        typeof initialWidth === 'number' ? initialWidth : 0
-      )
-      const distance = frameWidth - thumbWidth
-      const x = initialChecked ? (active ? 0 : -distance) : active ? distance : 0
-
-      return (
-        <Thumb
-          ref={forwardedRef}
-          unstyled={unstyled}
-          {...(unstyled === false && {
-            size,
-          })}
-          alignSelf={initialChecked ? 'flex-end' : 'flex-start'}
-          x={x}
-          onLayout={composeEventHandlers(props.onLayout, (e) => {
-            const next = e.nativeEvent.layout.width
-            setThumbWidth(next)
-          })}
-          disabled={disabled}
-          {...thumbProps}
-          {...(active && activeStyle)}
-        />
-      )
-    }
-  )
-
-  const SwitchComponent = Frame.styleable<SwitchProps>(
-    function SwitchFrame(_props, forwardedRef) {
-      const {
-        native,
-        nativeProps,
-        checked: checkedProp,
-        defaultChecked,
-        onCheckedChange,
-        activeStyle,
-        unstyled: unstyledProp,
-        activeTheme: activeThemeProp,
-        ...props
-      } = _props
-      const [checked, setChecked] = useControllableState({
-        prop: checkedProp,
-        defaultProp: defaultChecked || false,
-        onChange: onCheckedChange,
-        transition: true,
-      })
-
-      const styledContext = React.useContext(SwitchStyledContext.context)
-
-      // this is actually inner width
-      const [frameWidth, setFrameInnerWidth] = React.useState(0)
-
-      const { switchProps, bubbleInput, switchRef } = useSwitch(
-        props as any,
-        [checked, setChecked],
-        // @ts-ignore TODO tamagui react 19 type error
-        forwardedRef
-      )
-
-      const nativeSwitch = useSwitchNative({
-        id: props.id,
-        disabled: props.disabled,
-        native,
-        nativeProps,
-        checked,
-        setChecked,
-      })
-
-      if (nativeSwitch) {
-        return nativeSwitch
-      }
-
-      const disabled = props.disabled
-
-      const handleLayout = (e: LayoutChangeEvent) => {
-        const next = e.nativeEvent.layout.width
-        if (next !== frameWidth) {
-          setFrameInnerWidth(next)
-        }
-      }
-
-      const unstyled = styledContext.unstyled ?? unstyledProp ?? false
-
-      return (
-        <>
-          <SwitchStyledContext.Provider
-            size={styledContext.size ?? props.size ?? '$true'}
-            unstyled={unstyled}
-            active={checked}
-            disabled={disabled}
-            frameWidth={frameWidth}
-          >
-            <Frame
-              ref={switchRef}
-              render="button"
-              // activeThemeProp should be a theme name string like "active", not a style object
-              theme={activeThemeProp ?? null}
-              {...(isWeb && { type: 'button' })}
-              {...(!unstyled && {
-                size: styledContext.size ?? props.size ?? '$true',
-              })}
-              unstyled={unstyled}
-              {...props}
-              {...(switchProps as any)}
-              disabled={disabled}
-              {...(checked && {
-                ...(!unstyled &&
-                  !activeStyle && {
-                    backgroundColor: '$backgroundActive',
-                  }),
-                ...activeStyle,
-              })}
-            >
-              <View alignSelf="stretch" flex={1} onLayout={handleLayout}>
-                {props.children}
-              </View>
-            </Frame>
-          </SwitchStyledContext.Provider>
-
-          {bubbleInput}
-        </>
-      )
-    },
-    {
-      disableTheme: true,
-    }
-  )
-
-  return withStaticProperties(SwitchComponent, {
-    Thumb: SwitchThumbComponent,
-  })
-}