@tamagui/switch 2.7.7 → 3.0.0-beta.643.1

package/src/Switch.tsx

@@ -1,91 +1,192 @@
-import type { SizeTokens } from '@tamagui/core'
-import { getVariableValue, styled } from '@tamagui/core'
-import { getSize } from '@tamagui/get-token'
-import { YStack } from '@tamagui/stacks'
-
-export const SwitchThumb = styled(
-  YStack,
-  {
-    name: 'SwitchThumb',
-
-    variants: {
-      unstyled: {
-        false: {
-          size: '$true',
-          backgroundColor: '$background',
-          borderRadius: 1000,
-        },
-      },
-
-      size: {
-        '...size': (val) => {
-          const size = getSwitchHeight(val)
-          return {
-            height: size,
-            width: size,
-          }
-        },
-      },
-    } as const,
-
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
-    },
-  },
-  {
-    accept: {
-      activeStyle: 'style',
-    } as const,
+import type { GetProps } from '@tamagui/core'
+import {
+  composeEventHandlers,
+  createStyledHOC,
+  getVariableValue,
+  isWeb,
+  styled,
+  Theme,
+  type ThemeProps,
+  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 type {
+  SwitchComponent as SwitchFrameComponent,
+  SwitchProps,
+  SwitchThumbComponent as SwitchThumbFrameComponent,
+  SwitchThumbProps,
+} from './types'
+import { useSwitchNative } from './useSwitchNative'
+
+export const SwitchThumbFrame = styled(View, {
+  displayName: 'SwitchThumb',
+  context: SwitchStyledContext,
+})
+
+export const SwitchFrame = styled(View, {
+  displayName: 'Switch',
+  context: SwitchStyledContext,
+  render: 'button',
+  tabIndex: 0,
+})
+
+export function createSwitch(createProps: {
+  Frame?: SwitchFrameComponent
+  Thumb?: SwitchThumbFrameComponent
+  componentThemes?: {
+    frame?: ThemeProps['name']
+    thumb?: ThemeProps['name']
   }
-)
-
-const getSwitchHeight = (val: SizeTokens) =>
-  Math.round(getVariableValue(getSize(val)) * 0.65)
-
-const getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2
-
-export const SwitchFrame = styled(
-  YStack,
-  {
-    name: 'Switch',
-    render: 'button',
-    tabIndex: 0,
-
-    variants: {
-      unstyled: {
-        false: {
-          borderRadius: 1000,
-          backgroundColor: '$background',
-
-          focusVisibleStyle: {
-            outlineColor: '$outlineColor',
-            outlineStyle: 'solid',
-            outlineWidth: 2,
-          },
-        },
-      },
-
-      size: {
-        '...size': (val, { props }) => {
-          if (props['unstyled']) return
-          const height = getSwitchHeight(val)
-          const width = getSwitchWidth(val)
-          return {
-            height,
-            minHeight: height,
-            width,
-          }
-        },
-      },
-    } as const,
-
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
+}) {
+  const Frame = (createProps.Frame ?? SwitchFrame) as typeof SwitchFrame
+  const Thumb = (createProps.Thumb ?? SwitchThumbFrame) as typeof SwitchThumbFrame
+
+  Frame.staticConfig.context = SwitchStyledContext
+  Thumb.staticConfig.context = SwitchStyledContext
+
+  const SwitchThumbComponent = createStyledHOC(
+    Thumb,
+    function SwitchThumb(
+      props: Omit<GetProps<typeof Thumb>, keyof SwitchThumbProps> & SwitchThumbProps,
+      forwardedRef
+    ) {
+      const { size: sizeProp, activeStyle, theme, ...thumbProps } = props
+      const styledContext = SwitchStyledContext.useStyledContext()
+      const { size: sizeContext, active, disabled, frameWidth = 0 } = styledContext
+      const size = sizeProp ?? sizeContext ?? true
+      const initialChecked = React.useRef(active).current
+      const initialWidth = getVariableValue(props.width, 'size')
+      const [thumbWidth, setThumbWidth] = React.useState(
+        typeof initialWidth === 'number' ? initialWidth : 0
+      )
+      const distance = frameWidth - thumbWidth
+      const x = initialChecked ? (active ? 0 : -distance) : active ? distance : 0
+
+      const thumb = (
+        <Thumb
+          ref={forwardedRef}
+          size={size}
+          alignSelf={initialChecked ? 'flex-end' : 'flex-start'}
+          x={x}
+          onLayout={composeEventHandlers(props.onLayout, (event) => {
+            setThumbWidth(event.nativeEvent.layout.width)
+          })}
+          disabled={disabled}
+          {...thumbProps}
+          {...(active && activeStyle)}
+        />
+      )
+
+      const themeName = theme ?? createProps.componentThemes?.thumb
+      return themeName ? <Theme name={themeName}>{thumb}</Theme> : thumb
+    }
+  )
+
+  const SwitchComponent = createStyledHOC(
+    Frame,
+    function Switch(_props: SwitchProps, forwardedRef) {
+      const {
+        native,
+        nativeProps,
+        checked: checkedProp,
+        defaultChecked,
+        onCheckedChange,
+        activeStyle,
+        activeTheme,
+        theme,
+        ...props
+      } = _props
+      const [checked, setChecked] = useControllableState({
+        prop: checkedProp,
+        defaultProp: defaultChecked || false,
+        onChange: onCheckedChange,
+        transition: true,
+      })
+      const styledContext = React.useContext(SwitchStyledContext.context)
+      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 size = styledContext.size ?? props.size ?? true
+
+      const handleLayout = (event: LayoutChangeEvent) => {
+        const next = event.nativeEvent.layout.width
+        if (next !== frameWidth) {
+          setFrameInnerWidth(next)
+        }
+      }
+
+      const frame = (
+        <Frame
+          ref={switchRef}
+          render="button"
+          {...(isWeb && { type: 'button' })}
+          size={size}
+          {...props}
+          {...(switchProps as any)}
+          disabled={disabled}
+          {...(checked && activeStyle)}
+        >
+          <View alignSelf="stretch" flex={1} onLayout={handleLayout}>
+            {props.children}
+          </View>
+        </Frame>
+      )
+
+      const frameTheme =
+        (checked ? activeTheme : undefined) ?? theme ?? createProps.componentThemes?.frame
+
+      return (
+        <>
+          <SwitchStyledContext.Provider
+            size={size}
+            active={checked}
+            disabled={disabled}
+            frameWidth={frameWidth}
+          >
+            {frameTheme ? <Theme name={frameTheme}>{frame}</Theme> : frame}
+          </SwitchStyledContext.Provider>
+
+          {bubbleInput}
+        </>
+      )
     },
-  },
-  {
-    accept: {
-      activeStyle: 'style',
-    } as const,
-  }
-)
+    {
+      disableTheme: true,
+    }
+  )
+
+  return withStaticProperties(SwitchComponent, {
+    Frame,
+    Thumb: SwitchThumbComponent,
+  })
+}
+
+export const Switch = createSwitch({
+  Frame: SwitchFrame,
+  Thumb: SwitchThumbFrame,
+})
+
+export const SwitchThumb = Switch.Thumb

package/src/index.ts

@@ -1,24 +1,4 @@
-import { createSwitch } from './createSwitch'
-import { SwitchFrame, SwitchThumb } from './Switch'
-
-export * from './createSwitch'
 export * from './StyledContext'
 export * from './Switch'
 export * from './types'
 export { useSwitchNative } from './useSwitchNative'
-
-/**
- * @summary A component that displays a switch that can be used to toggle between two states.
- * @see — Docs https://tamagui.dev/ui/switch
- *
- * @example
- * ```tsx
- * <Switch id={id} size={props.size} defaultChecked={props.defaultChecked}>
- *  <Switch.Thumb transition="quicker" />
- * </Switch>
- * ```
- */
-export const Switch = createSwitch({
-  Frame: SwitchFrame,
-  Thumb: SwitchThumb,
-})

package/src/types.ts

@@ -1,11 +1,10 @@
 import type { GetProps, NativeValue, SizeTokens, ViewProps } from '@tamagui/core'
 import type { SwitchExtraProps as HeadlessSwitchExtraProps } from '@tamagui/switch-headless'
 import type { SwitchProps as NativeSwitchProps, ViewStyle } from 'react-native'
-import type { SwitchThumb } from './Switch'
+import type { SwitchThumbFrame } from './Switch'
 
 export type SwitchSharedProps = {
-  size?: SizeTokens | number
-  unstyled?: boolean
+  size?: SizeTokens | number | true
 }
 
 export type SwitchBaseProps = ViewProps & SwitchSharedProps
@@ -16,7 +15,7 @@ export type SwitchFrameActiveStyleProps = {
 }
 
 export type SwitchThumbActiveStyleProps = {
-  activeStyle?: GetProps<typeof SwitchThumb>
+  activeStyle?: GetProps<typeof SwitchThumbFrame>
 }
 
 export type SwitchExtraProps = HeadlessSwitchExtraProps & {
@@ -32,7 +31,6 @@ export type SwitchThumbProps = SwitchThumbBaseProps &
   SwitchSharedProps &
   SwitchThumbActiveStyleProps
 
-// loose types for createSwitch generics - actual components have stricter types
 export type SwitchComponent = (props: any) => any
 export type SwitchThumbComponent = (props: any) => any
 

package/types/StyledContext.d.ts

@@ -3,7 +3,6 @@ export declare const SwitchStyledContext: import("@tamagui/core").StyledContext<
     active?: boolean;
     disabled?: boolean;
     frameWidth?: number;
-    size?: SizeTokens;
-    unstyled?: boolean;
-}>;
+    size?: SizeTokens | number | true;
+}, "active" | "disabled" | "frameWidth" | "size">;
 //# sourceMappingURL=StyledContext.d.ts.map

package/types/StyledContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledContext.d.ts","sourceRoot":"","sources":["../src/StyledContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,eAAO,MAAM,mBAAmB;aACrB,OAAO;eACL,OAAO;iBACL,MAAM;WACZ,UAAU;eACN,OAAO;EAOlB,CAAA"}
+{"version":3,"file":"StyledContext.d.ts","sourceRoot":"","sources":["../src/StyledContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG/C,eAAO,MAAM,mBAAmB;aACrB,OAAO;eACL,OAAO;iBACL,MAAM;WACZ,UAAU,GAAG,MAAM,GAAG,IAAI;iDAMjC,CAAA"}