Добавлена поддержка изображений в ToggleButton

src/components/ToggleButton/ToggleButton.stories.ts

@@ -3,7 +3,9 @@ import { IconArrowDownRight, IconUser } from '@tabler/icons-react-native'
 
 import { ToggleButton } from './ToggleButton'
 
-const icons = { IconArrowDownRight, IconUser, none: undefined }
+const svgIcons = { IconArrowDownRight, IconUser, none: undefined }
+
+const imageIcons = { hotels: require('./hotels.png'), none: undefined }
 
 const meta: Meta<typeof ToggleButton> = {
   title: 'Form/ToggleButton',
@@ -16,6 +18,7 @@ const meta: Meta<typeof ToggleButton> = {
     label: 'ButtonToggle',
     size: 'base',
     Icon: IconArrowDownRight,
+    Image: undefined,
   },
   argTypes: {
     iconPos: {
@@ -24,7 +27,16 @@ const meta: Meta<typeof ToggleButton> = {
       mapping: { null: null },
     },
     size: { control: 'radio', options: ['xlarge', 'large', 'base', 'small'] },
-    Icon: { control: 'radio', options: Object.keys(icons), mapping: icons },
+    Icon: {
+      control: 'radio',
+      options: Object.keys(svgIcons),
+      mapping: svgIcons,
+    },
+    Image: {
+      control: 'radio',
+      options: Object.keys(imageIcons),
+      mapping: imageIcons,
+    },
     onPress: { action: 'onPress' },
   },
 }

src/components/ToggleButton/ToggleButton.tsx

@@ -1,6 +1,8 @@
 import { memo, useCallback, useMemo, useState } from 'react'
 import {
   type AccessibilityProps,
+  Image,
+  type ImageSourcePropType,
   Pressable,
   type StyleProp,
   Text,
@@ -43,8 +45,10 @@ export interface ToggleButtonProps
   size?: 'xlarge' | 'large' | 'base' | 'small'
   /** Дополнительная стилизация для контейнера компонента */
   style?: StyleProp<ViewStyle>
-  /** SVG-иконка */
+  /** SVG-иконка. Если передана, то изображение не будет отображаться */
   Icon?: SvgSource
+  /** Изображение. Будет отображаться, только если не передана иконка Icon */
+  Image?: ImageSourcePropType
 }
 
 /**
@@ -62,6 +66,7 @@ export const ToggleButton = memo<ToggleButtonProps>(
     size = 'base',
     style,
     Icon,
+    Image: imageSource,
     testID,
     ...rest
   }) => {
@@ -80,6 +85,13 @@ export const ToggleButton = memo<ToggleButtonProps>(
         source={Icon}
         testID={ToggleButtonTestId.icon}
       />
+    ) : imageSource ? (
+      <Image
+        resizeMode='contain'
+        source={imageSource}
+        style={toggleStyles.icon}
+        testID={ToggleButtonTestId.icon}
+      />
     ) : null
 
     const onPressIn = useCallback(() => setPressed(true), [])

src/components/ToggleButton/__tests__/ToggleButton.test.tsx

@@ -70,6 +70,16 @@ describe('ToggleButton', () => {
           iconPos: 'right',
         },
       ],
+      [
+        'checked = false, disabled = false, iconOnly = true, size = base, with PNG Icon',
+        {
+          checked: false,
+          disabled: false,
+          iconOnly: true,
+          size: 'base',
+          Image: require('../hotels.png'),
+        },
+      ],
     ]
 
     beforeAll(() => {
@@ -90,6 +100,84 @@ describe('ToggleButton', () => {
     })
   })
 
+  test('should render PNG Icon as Image', () => {
+    const { getByTestId } = render(
+      <ToggleButton
+        {...defaultProps}
+        iconOnly
+        Image={require('../hotels.png')}
+      />
+    )
+    const icon = getByTestId(ToggleButtonTestId.icon)
+
+    expect(icon.type).toBe('Image')
+  })
+
+  test('should render SVG Icon as Svg (uri)', async () => {
+    const originalFetch = global.fetch
+    jest
+      .spyOn(global, 'fetch')
+      .mockImplementation()
+      .mockResolvedValue({
+        ok: true,
+        status: 200,
+        text: async () =>
+          '<svg width="10" height="10"><path d="M0 0h10v10H0z" /></svg>',
+      } as Response)
+
+    try {
+      const { findByTestId } = render(
+        <ToggleButton
+          {...defaultProps}
+          iconOnly
+          Icon={{ uri: 'https://example.com/icon.svg' }}
+        />
+      )
+      const icon = await findByTestId(ToggleButtonTestId.icon)
+
+      expect(icon.type).toBe('RNSVGSvgView')
+    } finally {
+      global.fetch = originalFetch
+    }
+  })
+
+  test('should render SVG Icon as Svg (xml)', () => {
+    const { getByTestId } = render(
+      <ToggleButton
+        {...defaultProps}
+        iconOnly
+        Icon={{
+          xml: '<svg width="10" height="10"><path d="M0 0h10v10H0z" /></svg>',
+        }}
+      />
+    )
+    const icon = getByTestId(ToggleButtonTestId.icon)
+
+    expect(icon.type).toBe('RNSVGSvgView')
+  })
+
+  test('should render non-svg uri Icon as Image', () => {
+    const { getByTestId } = render(
+      <ToggleButton
+        {...defaultProps}
+        iconOnly
+        Image={{ uri: 'https://example.com/icon.png' }}
+      />
+    )
+    const icon = getByTestId(ToggleButtonTestId.icon)
+
+    expect(icon.type).toBe('Image')
+  })
+
+  test('should render numeric Icon as Image', () => {
+    const { getByTestId } = render(
+      <ToggleButton {...defaultProps} iconOnly Image={1} />
+    )
+    const icon = getByTestId(ToggleButtonTestId.icon)
+
+    expect(icon.type).toBe('Image')
+  })
+
   test('should handle press', async () => {
     const mockedOnPress = jest.fn()
     const { queryByTestId } = render(<ToggleButton onPress={mockedOnPress} />)