one 1.21.8 → 1.21.10

package/src/layouts/stack-utils/StackToolbar.tsx

@@ -1,550 +0,0 @@
-'use client'
-
-import type {
-  NativeStackHeaderItem,
-  NativeStackHeaderItemButton,
-  NativeStackHeaderItemMenu,
-  NativeStackHeaderItemMenuAction,
-  NativeStackHeaderItemMenuSubmenu,
-  NativeStackNavigationOptions,
-} from '@react-navigation/native-stack'
-import { MenuAction, ToolbarHost, ToolbarItem } from '@vxrn/native'
-import {
-  Children,
-  createContext,
-  Fragment,
-  useContext,
-  useId,
-  useMemo,
-  type ReactNode,
-} from 'react'
-import { Platform, StyleSheet, type ImageSourcePropType } from 'react-native'
-
-import type {
-  StackToolbarBadgeProps,
-  StackToolbarButtonProps,
-  StackToolbarIconProps,
-  StackToolbarItemProps,
-  StackToolbarLabelProps,
-  StackToolbarMenuActionProps,
-  StackToolbarMenuProps,
-  StackToolbarPlacement,
-  StackToolbarProps,
-  StackToolbarSearchBarSlotProps,
-  StackToolbarSpacerProps,
-  StackToolbarViewProps,
-} from './StackToolbar.types'
-import { useIsomorphicLayoutEffect } from '@vxrn/use-isomorphic-layout-effect'
-import { useNavigation } from '../../router/useNavigation'
-import { isChildOfType } from '../../utils/children'
-
-const StackToolbarPlacementContext = createContext<StackToolbarPlacement | null>(null)
-
-export function StackToolbarLabel(_props: StackToolbarLabelProps) {
-  return null
-}
-
-export function StackToolbarIcon(_props: StackToolbarIconProps) {
-  return null
-}
-
-export function StackToolbarBadge(_props: StackToolbarBadgeProps) {
-  return null
-}
-
-type ToolbarContent = {
-  label: string
-  icon?: StackToolbarIconProps
-  badge?: StackToolbarBadgeProps
-}
-
-function getToolbarContent(
-  children: ReactNode,
-  icon?: string | ImageSourcePropType,
-  iconRenderingMode?: 'template' | 'original'
-): ToolbarContent {
-  let label = ''
-  let iconProps: StackToolbarIconProps | undefined =
-    typeof icon === 'string'
-      ? { sf: icon }
-      : icon
-        ? { src: icon, renderingMode: iconRenderingMode }
-        : undefined
-  let badge: StackToolbarBadgeProps | undefined
-
-  Children.forEach(children, (child) => {
-    if (typeof child === 'string' || typeof child === 'number') {
-      label += String(child)
-    } else if (isChildOfType(child, StackToolbarLabel)) {
-      label = child.props.children ?? ''
-    } else if (isChildOfType(child, StackToolbarIcon)) {
-      iconProps = child.props
-    } else if (isChildOfType(child, StackToolbarBadge)) {
-      badge = child.props
-    }
-  })
-
-  return { label, icon: iconProps, badge }
-}
-
-function getHeaderIcon(
-  content: ToolbarContent,
-  tintColor?: StackToolbarItemProps['tintColor']
-) {
-  if (content.icon?.sf) {
-    return { type: 'sfSymbol' as const, name: content.icon.sf }
-  }
-  if (content.icon?.src) {
-    return {
-      type: 'image' as const,
-      source: content.icon.src,
-      tinted:
-        (content.icon.renderingMode ?? (tintColor ? 'template' : 'original')) ===
-        'template',
-    }
-  }
-  if (content.icon?.xcasset) {
-    return {
-      type: 'image' as const,
-      source: { uri: content.icon.xcasset },
-      tinted:
-        (content.icon.renderingMode ?? (tintColor ? 'template' : 'original')) ===
-        'template',
-    }
-  }
-  return undefined
-}
-
-function getHeaderItemSharedProps(
-  props: StackToolbarButtonProps | StackToolbarMenuProps,
-  content: ToolbarContent
-) {
-  const labelStyle = StyleSheet.flatten(props.style)
-  const badgeStyle = StyleSheet.flatten(content.badge?.style)
-
-  return {
-    label: content.label,
-    labelStyle,
-    icon: getHeaderIcon(content, props.tintColor),
-    variant: props.variant,
-    tintColor: props.tintColor,
-    disabled: props.disabled,
-    hidesSharedBackground: props.hidesSharedBackground,
-    sharesBackground: !props.separateBackground,
-    accessibilityLabel: props.accessibilityLabel ?? content.label,
-    accessibilityHint: props.accessibilityHint,
-    badge: content.badge
-      ? {
-          value: content.badge.children ?? '',
-          style: badgeStyle,
-        }
-      : undefined,
-  }
-}
-
-function getMenuItems(children: ReactNode): NativeStackHeaderItemMenu['menu']['items'] {
-  return Children.toArray(children)
-    .map(
-      (
-        child
-      ): NativeStackHeaderItemMenuAction | NativeStackHeaderItemMenuSubmenu | null => {
-        if (isChildOfType(child, StackToolbarMenuAction)) {
-          const content = getToolbarContent(
-            child.props.children,
-            child.props.icon,
-            child.props.iconRenderingMode
-          )
-          return {
-            type: 'action',
-            label: content.label,
-            description: child.props.subtitle,
-            icon: getHeaderIcon(content, child.props.tintColor),
-            onPress: child.props.onPress ?? (() => {}),
-            state: child.props.isOn ? 'on' : 'off',
-            disabled: child.props.disabled,
-            destructive: child.props.destructive,
-            hidden: child.props.hidden,
-            keepsMenuPresented: child.props.unstable_keepPresented,
-            discoverabilityLabel: child.props.discoverabilityLabel,
-          } as NativeStackHeaderItemMenuAction
-        }
-
-        if (isChildOfType(child, StackToolbarMenu)) {
-          const content = getToolbarContent(
-            child.props.children,
-            child.props.icon,
-            child.props.iconRenderingMode
-          )
-          return {
-            type: 'submenu',
-            label: content.label || child.props.title || '',
-            icon: getHeaderIcon(content, child.props.tintColor),
-            inline: child.props.inline,
-            layout: child.props.palette ? 'palette' : 'default',
-            destructive: child.props.destructive,
-            multiselectable: child.props.singleSelection === false,
-            items: getMenuItems(child.props.children),
-          } as NativeStackHeaderItemMenuSubmenu
-        }
-
-        return null
-      }
-    )
-    .filter(
-      (
-        item
-      ): item is NativeStackHeaderItemMenuAction | NativeStackHeaderItemMenuSubmenu =>
-        Boolean(item)
-    )
-}
-
-function convertToolbarChildToHeaderItem(child: ReactNode): NativeStackHeaderItem | null {
-  if (isChildOfType(child, StackToolbarButton)) {
-    if (child.props.hidden) return null
-    const content = getToolbarContent(
-      child.props.children,
-      child.props.icon,
-      child.props.iconRenderingMode
-    )
-    return {
-      ...getHeaderItemSharedProps(child.props, content),
-      type: 'button',
-      onPress: child.props.onPress ?? (() => {}),
-      selected: child.props.selected,
-    } as NativeStackHeaderItemButton
-  }
-
-  if (isChildOfType(child, StackToolbarMenu)) {
-    if (child.props.hidden) return null
-    const content = getToolbarContent(
-      child.props.children,
-      child.props.icon,
-      child.props.iconRenderingMode
-    )
-    const contentWithTitle = {
-      ...content,
-      label: content.label || child.props.title || '',
-    }
-    return {
-      ...getHeaderItemSharedProps(child.props, contentWithTitle),
-      type: 'menu',
-      menu: {
-        title: child.props.title,
-        multiselectable: child.props.singleSelection === false,
-        layout: child.props.palette ? 'palette' : 'default',
-        items: getMenuItems(child.props.children),
-      },
-    } as NativeStackHeaderItemMenu
-  }
-
-  if (isChildOfType(child, StackToolbarSpacer)) {
-    if (child.props.hidden) return null
-    if (child.props.width === undefined) {
-      if (process.env.NODE_ENV !== 'production') {
-        console.warn('Stack.Toolbar.Spacer requires a width in header placements.')
-      }
-      return null
-    }
-    return { type: 'spacing', spacing: child.props.width }
-  }
-
-  if (isChildOfType(child, StackToolbarView)) {
-    if (child.props.hidden) return null
-    return {
-      type: 'custom',
-      element: <Fragment>{child.props.children}</Fragment>,
-      hidesSharedBackground: child.props.hidesSharedBackground,
-    }
-  }
-
-  return null
-}
-
-export function appendStackToolbarPropsToOptions(
-  options: NativeStackNavigationOptions,
-  props: StackToolbarProps
-): NativeStackNavigationOptions {
-  if (Platform.OS !== 'ios') return options
-
-  const placement = props.placement ?? 'bottom'
-  if (placement === 'bottom') {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn(
-        'Stack.Toolbar with bottom placement must be rendered in a page component, not inside Stack.Screen.'
-      )
-    }
-    return options
-  }
-
-  if (placement !== 'left' && placement !== 'right') {
-    throw new Error(
-      `Invalid placement "${placement}" for Stack.Toolbar. Expected "left", "right", or "bottom".`
-    )
-  }
-
-  if (props.asChild) {
-    return placement === 'left'
-      ? { ...options, headerShown: true, headerLeft: () => props.children }
-      : { ...options, headerShown: true, headerRight: () => props.children }
-  }
-
-  const allChildren = Children.toArray(props.children)
-  const items = allChildren
-    .map(convertToolbarChildToHeaderItem)
-    .filter((item): item is NativeStackHeaderItem => Boolean(item))
-
-  if (process.env.NODE_ENV !== 'production' && items.length !== allChildren.length) {
-    const invalidChildren = allChildren.filter(
-      (child) =>
-        !isChildOfType(child, StackToolbarButton) &&
-        !isChildOfType(child, StackToolbarMenu) &&
-        !isChildOfType(child, StackToolbarSpacer) &&
-        !isChildOfType(child, StackToolbarView)
-    )
-    if (invalidChildren.length) {
-      console.warn(
-        `Stack.Toolbar with placement="${placement}" only accepts Stack.Toolbar.Button, Menu, Spacer, and View children.`
-      )
-    }
-  }
-
-  const getItems = () => items
-  return placement === 'left'
-    ? { ...options, headerShown: true, unstable_headerLeftItems: getItems }
-    : { ...options, headerShown: true, unstable_headerRightItems: getItems }
-}
-
-function StackToolbarComponent(props: StackToolbarProps) {
-  const parentPlacement = useContext(StackToolbarPlacementContext)
-  const navigation = useNavigation()
-  const placement = props.placement ?? 'bottom'
-  const options = useMemo(
-    () => (placement === 'bottom' ? {} : appendStackToolbarPropsToOptions({}, props)),
-    [placement, props.asChild, props.children]
-  )
-
-  if (parentPlacement) {
-    throw new Error('Stack.Toolbar cannot be nested inside another Stack.Toolbar.')
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    if (Platform.OS !== 'ios' || placement === 'bottom') return
-
-    navigation.setOptions(options)
-  }, [navigation, options, placement])
-
-  if (Platform.OS !== 'ios' || placement !== 'bottom') return null
-
-  return (
-    <StackToolbarPlacementContext.Provider value="bottom">
-      <ToolbarHost>{props.children}</ToolbarHost>
-    </StackToolbarPlacementContext.Provider>
-  )
-}
-
-export function StackToolbarButton(props: StackToolbarButtonProps) {
-  const placement = useContext(StackToolbarPlacementContext)
-  const identifier = useId()
-  if (Platform.OS !== 'ios') return null
-  if (!placement)
-    throw new Error('Stack.Toolbar.Button must be used inside Stack.Toolbar.')
-
-  const content = getToolbarContent(props.children, props.icon, props.iconRenderingMode)
-  const badgeStyle = StyleSheet.flatten(content.badge?.style)
-  return (
-    <ToolbarItem
-      identifier={identifier}
-      title={content.label}
-      systemImageName={content.icon?.sf}
-      xcassetName={content.icon?.xcasset}
-      image={props.image ?? content.icon?.src}
-      imageRenderingMode={
-        content.icon?.renderingMode ??
-        props.iconRenderingMode ??
-        (props.tintColor ? 'template' : 'original')
-      }
-      tintColor={props.tintColor}
-      hidesSharedBackground={props.hidesSharedBackground}
-      sharesBackground={!props.separateBackground}
-      barButtonItemStyle={props.variant === 'done' ? 'prominent' : props.variant}
-      hidden={props.hidden}
-      selected={props.selected}
-      badgeConfiguration={
-        content.badge
-          ? {
-              value: content.badge.children,
-              backgroundColor: badgeStyle?.backgroundColor,
-              color: badgeStyle?.color,
-              fontFamily: badgeStyle?.fontFamily,
-              fontSize: badgeStyle?.fontSize,
-              fontWeight: badgeStyle?.fontWeight,
-            }
-          : undefined
-      }
-      titleStyle={StyleSheet.flatten(props.style)}
-      accessibilityLabel={props.accessibilityLabel ?? content.label}
-      accessibilityHint={props.accessibilityHint}
-      disabled={props.disabled}
-      onSelected={props.onPress}
-    />
-  )
-}
-
-export function StackToolbarMenu(props: StackToolbarMenuProps) {
-  const placement = useContext(StackToolbarPlacementContext)
-  const identifier = useId()
-  if (Platform.OS !== 'ios') return null
-  if (!placement) throw new Error('Stack.Toolbar.Menu must be used inside Stack.Toolbar.')
-
-  const content = getToolbarContent(props.children, props.icon, props.iconRenderingMode)
-  const actions = Children.toArray(props.children).filter(
-    (child) =>
-      isChildOfType(child, StackToolbarMenu) ||
-      isChildOfType(child, StackToolbarMenuAction)
-  )
-  return (
-    <MenuAction
-      identifier={identifier}
-      title={props.title ?? ''}
-      label={content.label || props.title}
-      icon={content.icon?.sf}
-      xcassetName={content.icon?.xcasset}
-      image={props.image ?? content.icon?.src}
-      imageRenderingMode={
-        content.icon?.renderingMode ??
-        props.iconRenderingMode ??
-        (props.tintColor ? 'template' : 'original')
-      }
-      disabled={props.disabled}
-      destructive={props.destructive}
-      hidden={props.hidden}
-      accessibilityLabel={props.accessibilityLabel ?? (content.label || props.title)}
-      accessibilityHint={props.accessibilityHint}
-      displayInline={props.inline}
-      displayAsPalette={props.palette}
-      singleSelection={props.singleSelection}
-      preferredElementSize={props.elementSize}
-      tintColor={props.tintColor}
-      barButtonItemStyle={props.variant === 'done' ? 'prominent' : props.variant}
-      sharesBackground={!props.separateBackground}
-      hidesSharedBackground={props.hidesSharedBackground}
-      titleStyle={StyleSheet.flatten(props.style)}
-    >
-      {actions}
-    </MenuAction>
-  )
-}
-
-export function StackToolbarMenuAction(props: StackToolbarMenuActionProps) {
-  const placement = useContext(StackToolbarPlacementContext)
-  const identifier = useId()
-  if (Platform.OS !== 'ios') return null
-  if (!placement)
-    throw new Error('Stack.Toolbar.MenuAction must be used inside Stack.Toolbar.Menu.')
-
-  const content = getToolbarContent(props.children, props.icon, props.iconRenderingMode)
-  return (
-    <MenuAction
-      identifier={identifier}
-      title={content.label}
-      icon={content.icon?.sf}
-      xcassetName={content.icon?.xcasset}
-      image={props.image ?? content.icon?.src}
-      imageRenderingMode={
-        content.icon?.renderingMode ??
-        props.iconRenderingMode ??
-        (props.tintColor ? 'template' : 'original')
-      }
-      disabled={props.disabled}
-      destructive={props.destructive}
-      discoverabilityLabel={props.discoverabilityLabel}
-      subtitle={props.subtitle}
-      accessibilityLabel={props.accessibilityLabel ?? content.label}
-      accessibilityHint={props.accessibilityHint}
-      isOn={props.isOn}
-      keepPresented={props.unstable_keepPresented}
-      hidden={props.hidden}
-      onSelected={props.onPress}
-    />
-  )
-}
-
-export function StackToolbarSpacer(props: StackToolbarSpacerProps) {
-  const placement = useContext(StackToolbarPlacementContext)
-  const identifier = useId()
-  if (Platform.OS !== 'ios') return null
-  if (!placement)
-    throw new Error('Stack.Toolbar.Spacer must be used inside Stack.Toolbar.')
-
-  return (
-    <ToolbarItem
-      identifier={identifier}
-      type={props.width === undefined ? 'fluidSpacer' : 'fixedSpacer'}
-      width={props.width}
-      hidden={props.hidden}
-      sharesBackground={props.sharesBackground}
-    />
-  )
-}
-
-export function StackToolbarSearchBarSlot(props: StackToolbarSearchBarSlotProps) {
-  const placement = useContext(StackToolbarPlacementContext)
-  const identifier = useId()
-  if (Platform.OS !== 'ios') return null
-  if (!placement)
-    throw new Error('Stack.Toolbar.SearchBarSlot must be used inside Stack.Toolbar.')
-
-  return (
-    <ToolbarItem
-      identifier={identifier}
-      type="searchBar"
-      hidden={props.hidden}
-      hidesSharedBackground={props.hidesSharedBackground}
-      sharesBackground={!props.separateBackground}
-    />
-  )
-}
-
-export function StackToolbarView(props: StackToolbarViewProps) {
-  const placement = useContext(StackToolbarPlacementContext)
-  const identifier = useId()
-  if (Platform.OS !== 'ios') return null
-  if (!placement) throw new Error('Stack.Toolbar.View must be used inside Stack.Toolbar.')
-  if (props.hidden) return null
-
-  return (
-    <ToolbarItem
-      identifier={identifier}
-      hidesSharedBackground={props.hidesSharedBackground}
-      sharesBackground={!props.separateBackground}
-    >
-      {props.children}
-    </ToolbarItem>
-  )
-}
-
-export const StackToolbar = Object.assign(StackToolbarComponent, {
-  Button: StackToolbarButton,
-  Menu: StackToolbarMenu,
-  MenuAction: StackToolbarMenuAction,
-  Spacer: StackToolbarSpacer,
-  SearchBarSlot: StackToolbarSearchBarSlot,
-  View: StackToolbarView,
-  Label: StackToolbarLabel,
-  Icon: StackToolbarIcon,
-  Badge: StackToolbarBadge,
-})
-
-export type {
-  StackToolbarBadgeProps,
-  StackToolbarButtonProps,
-  StackToolbarIconProps,
-  StackToolbarLabelProps,
-  StackToolbarMenuActionProps,
-  StackToolbarMenuProps,
-  StackToolbarPlacement,
-  StackToolbarProps,
-  StackToolbarSearchBarSlotProps,
-  StackToolbarSpacerProps,
-  StackToolbarViewProps,
-} from './StackToolbar.types'

package/src/layouts/stack-utils/StackToolbar.types.ts

@@ -1,98 +0,0 @@
-import type { ReactNode } from 'react'
-import type { ColorValue, ImageSourcePropType, StyleProp, TextStyle } from 'react-native'
-
-export type StackToolbarPlacement = 'left' | 'right' | 'bottom'
-
-export interface StackToolbarProps {
-  children?: ReactNode
-  placement?: StackToolbarPlacement
-  asChild?: boolean
-  /** Android-only. One's Android toolbar host is not implemented yet. */
-  disableImePadding?: boolean
-  /** Android-only. One's Android toolbar host is not implemented yet. */
-  tintColor?: ColorValue
-  /** Android-only. One's Android toolbar host is not implemented yet. */
-  backgroundColor?: ColorValue
-}
-
-export interface StackToolbarIconProps {
-  src?: ImageSourcePropType
-  sf?: string
-  xcasset?: string
-  renderingMode?: 'template' | 'original'
-}
-
-export interface StackToolbarLabelProps {
-  children?: string
-}
-
-export interface StackToolbarBadgeProps {
-  children?: string
-  style?: StyleProp<
-    Pick<
-      TextStyle,
-      'fontFamily' | 'fontSize' | 'fontWeight' | 'color' | 'backgroundColor'
-    >
-  >
-}
-
-export interface StackToolbarItemProps {
-  children?: ReactNode
-  icon?: string | ImageSourcePropType
-  iconRenderingMode?: 'template' | 'original'
-  tintColor?: ColorValue
-  hidden?: boolean
-  disabled?: boolean
-  accessibilityLabel?: string
-  accessibilityHint?: string
-  hidesSharedBackground?: boolean
-  separateBackground?: boolean
-  style?: StyleProp<TextStyle>
-}
-
-export interface StackToolbarButtonProps extends StackToolbarItemProps {
-  image?: ImageSourcePropType
-  onPress?: () => void
-  selected?: boolean
-  variant?: 'plain' | 'done' | 'prominent'
-}
-
-export interface StackToolbarMenuProps extends StackToolbarItemProps {
-  image?: ImageSourcePropType
-  destructive?: boolean
-  title?: string
-  inline?: boolean
-  palette?: boolean
-  singleSelection?: boolean
-  elementSize?: 'auto' | 'small' | 'medium' | 'large'
-  variant?: 'plain' | 'done' | 'prominent'
-}
-
-export interface StackToolbarMenuActionProps extends StackToolbarItemProps {
-  image?: ImageSourcePropType
-  destructive?: boolean
-  discoverabilityLabel?: string
-  subtitle?: string
-  isOn?: boolean
-  onPress?: () => void
-  unstable_keepPresented?: boolean
-}
-
-export interface StackToolbarSpacerProps {
-  width?: number
-  hidden?: boolean
-  sharesBackground?: boolean
-}
-
-export interface StackToolbarSearchBarSlotProps {
-  hidden?: boolean
-  hidesSharedBackground?: boolean
-  separateBackground?: boolean
-}
-
-export interface StackToolbarViewProps {
-  children?: ReactNode
-  hidden?: boolean
-  hidesSharedBackground?: boolean
-  separateBackground?: boolean
-}

package/src/layouts/stack-utils/__tests__/StackToolbar.runtime.test.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import TestRenderer, { act } from 'react-test-renderer'
-import { Platform } from 'react-native'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-
-const setOptions = vi.fn()
-
-vi.mock('../../../router/useNavigation', () => ({
-  useNavigation: () => ({ setOptions }),
-}))
-
-import { StackToolbar } from '../StackToolbar'
-
-describe('StackToolbar runtime options', () => {
-  const originalOS = Platform.OS
-
-  afterEach(() => {
-    ;(Platform as any).OS = originalOS
-    setOptions.mockClear()
-  })
-
-  it('does not write undefined header overrides when the toolbar unmounts', () => {
-    ;(Platform as any).OS = 'ios'
-    let renderer: TestRenderer.ReactTestRenderer
-
-    act(() => {
-      renderer = TestRenderer.create(
-        <StackToolbar placement="right">
-          <StackToolbar.Button icon="bell" />
-        </StackToolbar>
-      )
-    })
-
-    expect(setOptions).toHaveBeenCalledTimes(1)
-    expect(setOptions).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        headerShown: true,
-        unstable_headerRightItems: expect.any(Function),
-      })
-    )
-
-    act(() => renderer!.unmount())
-
-    expect(setOptions).toHaveBeenCalledTimes(1)
-  })
-})