react-native-swipeable-actions 0.1.11 → 1.0.0-rc.0

package/jestSetup.js

@@ -7,16 +7,21 @@ jest.mock('./src/SwipeableView.tsx', () => {
     closeByKey: jest.fn(),
     cancelByKey: jest.fn(),
     closeAll: jest.fn(),
-    isOpenByKey: jest.fn().mockReturnValue(true)
+    isOpenByKey: jest.fn().mockReturnValue(true),
+    openByKeyOnSide: jest.fn(),
+    getOpenSideByKey: jest.fn(() => null)
   }
 
   const SwipeableView = React.forwardRef((props, ref) => {
+    // The native event props (onSwipeStart, onSwipeEnd and the others) stay on the
+    // host View, so a test can fire native-shaped events with fireEvent.
     const {
       children,
-      onSwipeStart,
+      onActionsNeeded,
       testID,
       ...rest
     } = props
+    const { recyclingKey } = props
 
     React.useImperativeHandle(ref, () => ({
       close: jest.fn(),
@@ -25,8 +30,15 @@ jest.mock('./src/SwipeableView.tsx', () => {
     }), [])
 
     React.useEffect(() => {
-      onSwipeStart?.()
-    }, [onSwipeStart])
+      // Match the native event shape: Swipeable reads the binding key from nativeEvent.
+      const nativeEvent = (extra) => ({
+        nativeEvent: { ...(recyclingKey != null ? { recyclingKey } : {}), ...extra }
+      })
+      // Mount both action rails so tests can find action content. This internal
+      // request calls no consumer callback. A mount never starts a swipe.
+      onActionsNeeded?.(nativeEvent({ side: 'left' }))
+      onActionsNeeded?.(nativeEvent({ side: 'right' }))
+    }, [onActionsNeeded, recyclingKey])
 
     return React.createElement(
       View,
@@ -44,4 +56,4 @@ jest.mock('./src/SwipeableView.tsx', () => {
     SwipeableModule,
     SwipeableView
   }
-})
+})

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "react-native-swipeable-actions",
-  "version": "0.1.11",
+  "version": "1.0.0-rc.0",
   "description": "High-performance native swipeable row component for React Native using Expo Modules",
   "main": "src/index.ts",
   "types": "build/index.d.ts",
   "files": [
+    "CHANGELOG.md",
+    "docs/migration-v1.md",
+    "docs/support.md",
     "build",
     "src",
     "!src/__tests__",
     "!src/__mocks__",
+    "!src/__type_tests__",
     "ios",
     "!ios/Tests",
     "!ios/.build",
+    "!ios/build",
     "android/src/main",
     "android/build.gradle",
     "expo-module.config.json",
@@ -33,6 +38,8 @@
     "format:check": "biome format src example e2e",
     "check": "biome check src example e2e",
     "typecheck": "tsc --noEmit",
+    "typecheck:fixtures": "tsc -p tsconfig.type-tests.json",
+    "test:package": "node --test scripts/package-artifact.test.mjs",
     "android": "expo run:android",
     "ios": "expo run:ios",
     "e2e": "cd e2e && npm run test",
@@ -59,10 +66,9 @@
   "author": "chocky335",
   "license": "MIT",
   "peerDependencies": {
-    "expo": ">=50.0.0",
-    "expo-modules-core": ">=1.0.0",
-    "react": ">=18.0.0",
-    "react-native": ">=0.73.0"
+    "expo": ">=54.0.0",
+    "react": ">=19.1.0",
+    "react-native": ">=0.81.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.4.9",

package/src/Swipeable.tsx

@@ -1,12 +1,35 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import {
+  Fragment,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
 import { Platform, StyleSheet, View } from 'react-native'
 import { SWIPE_DEFAULTS } from './constants'
-import { cancelByKey, closeAll, closeByKey, isOpenByKey, openByKey } from './nativeModuleUtils'
+import {
+  cancelByKey,
+  closeAll,
+  closeByKey,
+  getOpenSideByKey,
+  openByKey,
+  openByKeyOnSide
+} from './nativeModuleUtils'
+import { resolveSwipeableActions } from './resolveSwipeableActions'
 import type {
+  ActionsNeededEvent,
   NativeSwipeableRef,
+  SwipeSide,
+  SwipeableComponentProps,
   SwipeableMethods,
-  SwipeableProps,
+  SwipeableStatic,
   SwipeProgressEvent,
+  SwipeStartEvent,
   SwipeStateEvent
 } from './Swipeable.types'
 import { SwipeableActions } from './SwipeableActions'
@@ -23,12 +46,17 @@ function normalizeRecyclingKey(key: string | number | undefined): string | undef
   return undefined
 }
 
-const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(function Swipeable(
+const Swipeable = forwardRef<SwipeableMethods, SwipeableComponentProps>(function Swipeable(
   {
     children,
-    actions,
-    actionsWidth,
-    actionsPosition = SWIPE_DEFAULTS.ACTIONS_POSITION,
+    leftActions,
+    leftActionsWidth,
+    rightActions,
+    rightActionsWidth,
+    onLeftSwipeEnd,
+    onRightSwipeEnd,
+    appearance = 'default',
+    hapticFeedback,
     friction = SWIPE_DEFAULTS.FRICTION,
     threshold = SWIPE_DEFAULTS.THRESHOLD,
     gestureEnabled = SWIPE_DEFAULTS.GESTURE_ENABLED,
@@ -46,28 +74,48 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(function Swipeabl
   ref
 ) {
   const nativeRef = useRef<NativeSwipeableRef>(null)
+  const resolved = useMemo(
+    () =>
+      resolveSwipeableActions({
+        leftActions,
+        ...(leftActionsWidth !== undefined ? { leftActionsWidth } : {}),
+        rightActions,
+        ...(rightActionsWidth !== undefined ? { rightActionsWidth } : {})
+      }),
+    [leftActions, leftActionsWidth, rightActions, rightActionsWidth]
+  )
 
   // Normalize recyclingKey before hooks that depend on it
   const normalizedKey = normalizeRecyclingKey(recyclingKey)
   const recyclingKeyRef = useRef<string | undefined>(undefined)
   recyclingKeyRef.current = normalizedKey
 
-  // Initialize from native cache: if this recyclingKey was open, render actions immediately.
-  // This handles FlatList remounting components during data reorder - React state is lost
-  // but native cache preserves the open state.
-  const [hasActionsRendered, setHasActionsRendered] = useState(() => {
-    return normalizedKey != null && isOpenByKey(normalizedKey)
-  })
+  // Hydrate the cached physical edge, including after a keyed list remount.
   const swipeStartedRef = useRef(false)
+  const cachedSide = useMemo(
+    () => (normalizedKey != null ? getOpenSideByKey(normalizedKey) : null),
+    [normalizedKey]
+  )
+  const initialSides = useMemo(
+    () => ({
+      key: normalizedKey,
+      left: cachedSide === 'left',
+      right: cachedSide === 'right'
+    }),
+    [normalizedKey, cachedSide]
+  )
+  const [renderedSides, setRenderedSides] = useState(initialSides)
+  const sides = renderedSides.key === normalizedKey ? renderedSides : initialSides
 
-  // When recyclingKey changes (FlatList reorder/recycle), sync hasActionsRendered
-  // with the native cached open state. FlatList reuses component instances without
-  // remounting, so useState initializer doesn't re-run.
   useEffect(() => {
-    if (!normalizedKey) return
-    const cachedOpen = isOpenByKey(normalizedKey)
-    setHasActionsRendered(cachedOpen)
-  }, [normalizedKey])
+    setRenderedSides((previous) => (previous.key === normalizedKey ? previous : initialSides))
+    swipeStartedRef.current = false
+  }, [initialSides, normalizedKey])
+
+  const warningText = resolved.warnings.join('\n')
+  useEffect(() => {
+    if (__DEV__ && warningText) console.warn(`[Swipeable] ${warningText}`)
+  }, [warningText])
 
   // Development-time validation
   if (__DEV__) {
@@ -90,10 +138,11 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(function Swipeabl
           console.warn('[Swipeable] close() called without recyclingKey - method has no effect')
         }
       },
-      open: () => {
+      open: (side?: SwipeSide) => {
         const key = recyclingKeyRef.current
         if (key) {
-          openByKey(key)
+          if (side === undefined) openByKey(key)
+          else openByKeyOnSide(key, side)
         } else if (__DEV__) {
           console.warn('[Swipeable] open() called without recyclingKey - method has no effect')
         }
@@ -114,47 +163,80 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(function Swipeabl
     []
   )
 
-  const handleSwipeStart = useCallback(() => {
-    if (!hasActionsRendered) {
-      setHasActionsRendered(true)
-    }
+  const handleSwipeStart = useCallback(
+    (event: SwipeStartEvent) => {
+      // Missing metadata identifies the unkeyed native binding. It must not
+      // bypass identity checks after recycling into a keyed row.
+      if (event.nativeEvent.recyclingKey !== (normalizedKey || undefined)) return
+      if (!swipeStartedRef.current) {
+        swipeStartedRef.current = true
+        onSwipeStart?.()
+      }
+    },
+    [normalizedKey, onSwipeStart]
+  )
 
-    if (!swipeStartedRef.current) {
-      swipeStartedRef.current = true
-      onSwipeStart?.()
-    }
-  }, [hasActionsRendered, onSwipeStart])
+  const handleGestureCancelled = useCallback(
+    (event: { nativeEvent: { recyclingKey?: string } }) => {
+      if (event.nativeEvent.recyclingKey !== (normalizedKey || undefined)) return
+      swipeStartedRef.current = false
+    },
+    [normalizedKey]
+  )
+
+  const handleActionsNeeded = useCallback(
+    (event: ActionsNeededEvent) => {
+      const side = event.nativeEvent.side
+      if (event.nativeEvent.recyclingKey !== (normalizedKey || undefined)) return
+      if ((side !== 'left' && side !== 'right') || resolved[side].width <= 0) return
+      setRenderedSides((previous) => {
+        const current = previous.key === normalizedKey ? previous : initialSides
+        return current[side] ? current : { ...current, [side]: true }
+      })
+    },
+    [initialSides, normalizedKey, resolved]
+  )
 
   const handleSwipeProgress = useCallback(
     (event: SwipeProgressEvent) => {
+      if (event.nativeEvent.recyclingKey !== (normalizedKey || undefined)) return
       const newProgress = event.nativeEvent.progress
       const clamped = Math.max(0, Math.min(1, newProgress))
       onProgress?.(clamped)
     },
-    [onProgress]
+    [normalizedKey, onProgress]
   )
 
   const handleSwipeStateChange = useCallback(
     (event: SwipeStateEvent) => {
+      if (event.nativeEvent.recyclingKey !== (normalizedKey || undefined)) return
       onSwipeStateChange?.(event.nativeEvent.state)
     },
-    [onSwipeStateChange]
+    [normalizedKey, onSwipeStateChange]
   )
 
   const handleSwipeEnd = useCallback(
     (event: SwipeStateEvent) => {
+      if (event.nativeEvent.recyclingKey !== (normalizedKey || undefined)) return
       swipeStartedRef.current = false
       onSwipeEnd?.(event.nativeEvent.state)
+      const side = event.nativeEvent.side
+      if (side === 'left') onLeftSwipeEnd?.(event.nativeEvent.state)
+      if (side === 'right') onRightSwipeEnd?.(event.nativeEvent.state)
     },
-    [onSwipeEnd]
+    [normalizedKey, onLeftSwipeEnd, onRightSwipeEnd, onSwipeEnd]
   )
 
   return (
     <SwipeableView
       ref={nativeRef}
       style={[styles.container, style]}
-      actionsWidth={actionsWidth}
-      actionsPosition={actionsPosition}
+      leftActionsWidth={resolved.left.width}
+      rightActionsWidth={resolved.right.width}
+      onActionsNeeded={handleActionsNeeded}
+      {...(Platform.OS === 'ios'
+        ? { appearance, hapticFeedback: hapticFeedback ?? appearance === 'ios26' }
+        : {})}
       friction={friction}
       threshold={threshold}
       gestureEnabled={gestureEnabled}
@@ -164,20 +246,32 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(function Swipeabl
       {...(normalizedKey ? { recyclingKey: normalizedKey } : {})}
       {...(testID ? { testID } : {})}
       onSwipeStart={handleSwipeStart}
+      onGestureCancelled={handleGestureCancelled}
       onSwipeProgress={handleSwipeProgress}
       onSwipeStateChange={handleSwipeStateChange}
       onSwipeEnd={handleSwipeEnd}
     >
-      {hasActionsRendered && (
-        <SwipeableActions
-          actionsPosition={actionsPosition}
-          {...(testID ? { testID: `${testID}-actions` } : {})}
-        >
-          {actions}
-        </SwipeableActions>
-      )}
-
-      <View style={styles.content}>{children}</View>
+      <SwipeableActions
+        key='left-slot'
+        actionsPosition='left'
+        {...(testID ? { testID: `${testID}-left-actions` } : {})}
+      >
+        <Fragment key={normalizedKey ?? ''}>
+          {sides.left && resolved.left.width > 0 ? resolved.left.node : null}
+        </Fragment>
+      </SwipeableActions>
+      <SwipeableActions
+        key='right-slot'
+        actionsPosition='right'
+        {...(testID ? { testID: `${testID}-right-actions` } : {})}
+      >
+        <Fragment key={normalizedKey ?? ''}>
+          {sides.right && resolved.right.width > 0 ? resolved.right.node : null}
+        </Fragment>
+      </SwipeableActions>
+      <View key='content' style={styles.content} collapsable={false}>
+        {children}
+      </View>
     </SwipeableView>
   )
 })
@@ -196,21 +290,20 @@ const styles = StyleSheet.create({
 Swipeable.displayName = 'Swipeable'
 
 // Static methods for controlling Swipeables by recyclingKey
-type SwipeableWithStatic = typeof Swipeable & {
-  open: (recyclingKey: string) => void
-  close: (recyclingKey: string, animated?: boolean) => void
-  cancel: (recyclingKey: string) => void
-  closeAll: (animated?: boolean) => void
-}
+type SwipeableWithStatic = ForwardRefExoticComponent<
+  SwipeableComponentProps & RefAttributes<SwipeableMethods>
+> &
+  SwipeableStatic
 
 const SwipeableExport = Swipeable as SwipeableWithStatic
 
-SwipeableExport.open = (recyclingKey: string) => {
+SwipeableExport.open = (recyclingKey: string, side?: SwipeSide) => {
   if (__DEV__ && (!recyclingKey || typeof recyclingKey !== 'string')) {
     console.warn('[Swipeable.open] recyclingKey must be a non-empty string')
     return
   }
-  openByKey(recyclingKey)
+  if (side === undefined) openByKey(recyclingKey)
+  else openByKeyOnSide(recyclingKey, side)
 }
 
 SwipeableExport.close = (recyclingKey: string, animated?: boolean) => {

package/src/Swipeable.types.ts

@@ -1,16 +1,32 @@
 import type { ReactNode, Ref } from 'react'
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native'
 
+export type SwipeSide = 'left' | 'right'
+export type SwipeAppearance = 'default' | 'ios26'
+
+/** Internal native identity; the consumer's onSwipeStart remains zero-argument. */
+export interface SwipeStartEvent {
+  nativeEvent: { recyclingKey?: string; side?: SwipeSide }
+}
+
+export interface ActionsNeededEvent {
+  nativeEvent: { side: SwipeSide; recyclingKey?: string }
+}
+
 export interface SwipeProgressEvent {
   nativeEvent: {
     progress: number
     translationX: number
+    side?: SwipeSide
+    recyclingKey?: string
   }
 }
 
 export interface SwipeStateEvent {
   nativeEvent: {
     state: 'open' | 'closed'
+    side?: SwipeSide
+    recyclingKey?: string
   }
 }
 
@@ -20,16 +36,20 @@ export interface NativeSwipeableRef {
   cancel: () => Promise<void>
 }
 
+/** Native child order is always left slot, right slot, then content. */
 export interface SwipeableViewProps extends ViewProps {
-  actionsWidth: number
-  actionsPosition?: 'left' | 'right'
+  leftActionsWidth?: number
+  rightActionsWidth?: number
+  onActionsNeeded?: (event: ActionsNeededEvent) => void
+  appearance?: SwipeAppearance
+  hapticFeedback?: boolean
   friction?: number
   threshold?: number
   gestureEnabled?: boolean
   dragOffsetFromEdge?: number
   recyclingKey?: string
   onSwipeProgress?: (event: SwipeProgressEvent) => void
-  onSwipeStart?: () => void
+  onSwipeStart?: (event: SwipeStartEvent) => void
   onSwipeStateChange?: (event: SwipeStateEvent) => void
   onSwipeEnd?: (event: SwipeStateEvent) => void
   autoClose?: boolean
@@ -40,11 +60,13 @@ export interface SwipeableViewProps extends ViewProps {
   testID?: string
 }
 
-export interface SwipeableProps {
+/** Props that every side configuration shares. Wrappers that emit declarations name it. */
+export interface SwipeableCommonProps {
   children: ReactNode
-  actions: ReactNode
-  actionsWidth: number
-  actionsPosition?: 'left' | 'right'
+  onLeftSwipeEnd?: (state: 'open' | 'closed') => void
+  onRightSwipeEnd?: (state: 'open' | 'closed') => void
+  appearance?: SwipeAppearance
+  hapticFeedback?: boolean
   friction?: number
   threshold?: number
   gestureEnabled?: boolean
@@ -63,13 +85,32 @@ export interface SwipeableProps {
 
 export interface SwipeableMethods {
   close: (animated?: boolean) => void
-  open: () => void
+  /** Open the requested physical edge; without a side, prefer enabled right, then left. */
+  open: (side?: SwipeSide) => void
   cancel: () => void
 }
 
 export interface SwipeableStatic {
-  open: (recyclingKey: string) => void
+  open: (recyclingKey: string, side?: SwipeSide) => void
   close: (recyclingKey: string, animated?: boolean) => void
   cancel: (recyclingKey: string) => void
   closeAll: (animated?: boolean) => void
 }
+
+type LeftActionsConfiguration =
+  | { leftActions: ReactNode; leftActionsWidth: number }
+  | { leftActions?: null | false | undefined; leftActionsWidth?: never }
+
+type RightActionsConfiguration =
+  | { rightActions: ReactNode; rightActionsWidth: number }
+  | { rightActions?: null | false | undefined; rightActionsWidth?: never }
+
+/** The sole action API: explicit physical-edge pairs, including single-sided rows. */
+export type SwipeableProps = SwipeableCommonProps &
+  LeftActionsConfiguration &
+  RightActionsConfiguration &
+  ({ leftActions: ReactNode } | { rightActions: ReactNode })
+
+/** Descriptive alias for the same explicit-side API, not a separate implementation. */
+export type TwoSidedSwipeableProps = SwipeableProps
+export type SwipeableComponentProps = SwipeableProps

package/src/SwipeableActions.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { I18nManager, StyleSheet, View } from 'react-native'
 
 /**
  * Props for SwipeableActions component
@@ -16,14 +16,17 @@ export interface SwipeableActionsProps {
 /**
  * SwipeableActions - Internal layout component for swipeable actions
  *
- * Handles entrance animation when children mount.
+ * Provides a stable physical-edge slot while action content mounts lazily.
  */
 export function SwipeableActions({ children, actionsPosition, testID }: SwipeableActionsProps) {
+  // Side names are physical edges; flex row start/end reverse in RTL.
+  const leading = I18nManager.isRTL ? actionsPosition === 'right' : actionsPosition === 'left'
   return (
     <View
-      style={actionsPosition === 'left' ? styles.actionsLeading : styles.actionsTrailing}
+      style={leading ? styles.actionsLeading : styles.actionsTrailing}
       pointerEvents={children ? 'auto' : 'none'}
       testID={testID}
+      collapsable={false}
     >
       {children}
     </View>

package/src/SwipeableView.tsx

@@ -1,8 +1,13 @@
 import { requireNativeModule, requireNativeViewManager } from 'expo-modules-core'
 import { type ComponentProps, createElement, forwardRef } from 'react'
-import type { NativeSwipeableRef, SwipeableViewProps } from './Swipeable.types'
+import type { NativeSwipeableRef, SwipeableViewProps, SwipeSide } from './Swipeable.types'
 
-const NativeView = requireNativeViewManager<SwipeableViewProps>('Swipeable')
+type NativeViewProps = SwipeableViewProps & {
+  /** Internal lifecycle notification; never forwarded as a consumer completion. */
+  onGestureCancelled?: (event: { nativeEvent: { recyclingKey?: string } }) => void
+}
+
+const NativeView = requireNativeViewManager<NativeViewProps>('Swipeable')
 
 // Module-level functions interface
 interface SwipeableNativeModule {
@@ -11,11 +16,13 @@ interface SwipeableNativeModule {
   cancelByKey: (key: string) => void
   closeAll: (animated?: boolean) => void
   isOpenByKey: (key: string) => boolean
+  openByKeyOnSide: (key: string, side: SwipeSide) => void
+  getOpenSideByKey: (key: string) => SwipeSide | null
 }
 
 export const SwipeableModule = requireNativeModule<SwipeableNativeModule>('Swipeable')
 
-export const SwipeableView = forwardRef<NativeSwipeableRef, SwipeableViewProps>(
+export const SwipeableView = forwardRef<NativeSwipeableRef, NativeViewProps>(
   function SwipeableView(props, ref) {
     return createElement(NativeView, { ...props, ref } as ComponentProps<typeof NativeView>)
   }

package/src/constants.ts

@@ -7,6 +7,5 @@ export const SWIPE_DEFAULTS = {
   FRICTION: 1,
   THRESHOLD: 0.4,
   DRAG_OFFSET_FROM_EDGE: 0,
-  ACTIONS_POSITION: 'right',
   GESTURE_ENABLED: true
 } as const

package/src/index.ts

@@ -4,12 +4,19 @@ export type { NativeModuleError, SwipeableErrorHandler } from './nativeModuleUti
 export { setGlobalErrorHandler } from './nativeModuleUtils'
 export { default as Swipeable } from './Swipeable'
 export type {
+  ActionsNeededEvent,
   NativeSwipeableRef,
+  SwipeAppearance,
+  SwipeSide,
+  SwipeableCommonProps,
+  SwipeableComponentProps,
+  TwoSidedSwipeableProps,
   SwipeableMethods,
   SwipeableProps,
   SwipeableStatic,
   SwipeableViewProps,
   SwipeProgressEvent,
+  SwipeStartEvent,
   SwipeStateEvent
 } from './Swipeable.types'
 export { SwipeableView } from './SwipeableView'

package/src/nativeModuleUtils.ts

@@ -1,4 +1,5 @@
 import { SwipeableModule } from './SwipeableView'
+import type { SwipeSide } from './Swipeable.types'
 
 export interface NativeModuleError {
   code: string
@@ -40,6 +41,24 @@ export function openByKey(key: string): void {
   }
 }
 
+export function openByKeyOnSide(key: string, side: SwipeSide): void {
+  try {
+    SwipeableModule.openByKeyOnSide(key, side)
+  } catch (error) {
+    handleNativeError(error, 'openByKeyOnSide', key)
+  }
+}
+
+export function getOpenSideByKey(key: string): SwipeSide | null {
+  try {
+    const side = SwipeableModule.getOpenSideByKey(key)
+    return side === 'left' || side === 'right' ? side : null
+  } catch (error) {
+    handleNativeError(error, 'getOpenSideByKey', key)
+    return null
+  }
+}
+
 export function closeByKey(key: string, animated?: boolean): void {
   try {
     SwipeableModule.closeByKey(key, animated)
@@ -63,11 +82,3 @@ export function closeAll(animated?: boolean): void {
     handleNativeError(error, 'closeAll')
   }
 }
-
-export function isOpenByKey(key: string): boolean {
-  try {
-    return SwipeableModule.isOpenByKey(key)
-  } catch {
-    return false
-  }
-}

package/src/resolveSwipeableActions.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react'
+import type { SwipeSide } from './Swipeable.types'
+
+interface ActionsInput {
+  leftActions?: ReactNode
+  leftActionsWidth?: number
+  rightActions?: ReactNode
+  rightActionsWidth?: number
+}
+
+export interface ResolvedActions {
+  node: ReactNode
+  width: number
+}
+
+const isContent = (node: ReactNode) => node != null && typeof node !== 'boolean'
+const isWidth = (width: number | undefined): width is number =>
+  width !== undefined && Number.isFinite(width) && width > 0
+
+export function resolveSwipeableActions(input: ActionsInput) {
+  const warnings: string[] = []
+  const resolve = (side: SwipeSide, node: ReactNode, width?: number): ResolvedActions => {
+    if (node !== undefined) {
+      if (!isContent(node)) return { node: null, width: 0 }
+      if (isWidth(width)) return { node, width }
+      warnings.push(side + 'Actions requires a finite, positive ' + side + 'ActionsWidth.')
+      return { node: null, width: 0 }
+    }
+    if (width !== undefined) {
+      warnings.push(side + 'ActionsWidth is ignored without explicit ' + side + 'Actions.')
+    }
+    return { node: null, width: 0 }
+  }
+  const left = resolve('left', input.leftActions, input.leftActionsWidth)
+  const right = resolve('right', input.rightActions, input.rightActionsWidth)
+  return { left, right, warnings }
+}