Skip to content

Commit

Permalink
Use IconProps for passing icon info to IconButton and Tooltip (#12)
Browse files Browse the repository at this point in the history
  • Loading branch information
SjaakSchilperoort authored Oct 9, 2023
1 parent 23d7239 commit d936b85
Show file tree
Hide file tree
Showing 6 changed files with 19 additions and 40 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@observation.org/react-native-components",
"version": "1.8.0",
"version": "1.9.0",
"main": "src/index.ts",
"repository": "[email protected]:observation/react-native-components.git",
"author": "Observation.org",
Expand Down
4 changes: 1 addition & 3 deletions src/components/BackButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ const BackButton = ({ navigation }: Props) => (
<IconButton
containerStyle={{ padding: theme.margin.common }}
onPress={() => navigation.goBack()}
iconName="chevron-left"
size={theme.icon.size.extraExtraLarge}
color={theme.color.primary}
icon={{ name: 'chevron-left', size: theme.icon.size.extraExtraLarge, color: theme.color.primary }}
/>
)

Expand Down
22 changes: 4 additions & 18 deletions src/components/IconButton.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,19 @@
import React from 'react'
import { TouchableOpacity, ViewStyle, StyleProp } from 'react-native'

import { Icon } from './Icon'
import { IconName } from '../lib/Icons'
import { Icon, IconProps } from './Icon'
import theme from '../styles/theme'

type Props = {
containerStyle?: StyleProp<ViewStyle>
disabled?: boolean
onPress?: () => void
iconName: IconName
iconStyle?: 'light' | 'solid'
size?: number
color?: string
icon: IconProps
accessibilityLabel?: string
testID?: string
}

const IconButton = ({
containerStyle,
disabled,
onPress,
iconName,
iconStyle,
size = theme.icon.size.large,
color,
accessibilityLabel,
testID = 'pressable',
}: Props) => (
const IconButton = ({ containerStyle, disabled, onPress, icon, accessibilityLabel, testID = 'pressable' }: Props) => (
<TouchableOpacity
testID={testID}
accessibilityLabel={accessibilityLabel}
Expand All @@ -36,7 +22,7 @@ const IconButton = ({
onPress={disabled ? undefined : onPress}
activeOpacity={0.5}
>
<Icon style={iconStyle} name={iconName} color={color} size={size} />
<Icon size={theme.icon.size.large} {...icon} />
</TouchableOpacity>
)

Expand Down
11 changes: 5 additions & 6 deletions src/components/Tooltip.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import React from 'react'
import { StyleSheet, View, Text, TouchableOpacity, ViewStyle, StyleProp } from 'react-native'

import { Icon } from './Icon'
import { Icon, IconProps } from './Icon'
import LargeButton, { LargeButtonProps } from '../components/LargeButton'
import { IconName } from '../lib/Icons'
import textStyle from '../styles/text'
import theme from '../styles/theme'

type TooltipProps = {
title: string
text: string
iconName?: IconName
icon?: IconProps
closable?: boolean
onClose?: () => void
buttons?: LargeButtonProps[]
Expand All @@ -20,7 +19,7 @@ type TooltipProps = {
}

const Tooltip = ({
iconName,
icon,
title,
text,
closable = true,
Expand All @@ -34,9 +33,9 @@ const Tooltip = ({
<View style={styles.tooltipContainer}>
<View style={styles.tooltip}>
<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
{iconName && (
{icon && (
<View style={{ ...styles.iconContainer, marginRight: theme.margin.common }}>
<Icon name={iconName} size={theme.icon.size.extraLarge} />
<Icon size={theme.icon.size.extraLarge} {...icon} />
</View>
)}
<View style={{ flex: 1 }}>
Expand Down
14 changes: 5 additions & 9 deletions src/components/__tests__/IconButton.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import React from 'react'

import { render, fireEvent } from '@testing-library/react-native'

import { IconProps } from '../Icon'
import IconButton from '../IconButton'

describe('IconButton', () => {
const icon: IconProps = { name: 'chevron-left', size: 20, color: 'black' }
test('Rendering', () => {
// GIVEN
const { toJSON } = render(
<IconButton containerStyle={{ flex: 1 }} disabled={false} iconName="chevron-left" size={20} color="black" />,
)
const { toJSON } = render(<IconButton containerStyle={{ flex: 1 }} disabled={false} icon={icon} />)

// THEN
expect(toJSON()).toMatchSnapshot()
Expand All @@ -18,9 +18,7 @@ describe('IconButton', () => {
test('Handle press when enabled', () => {
// GIVEN
const mockOnPress = jest.fn()
const { getByTestId } = render(
<IconButton disabled={false} onPress={mockOnPress} iconName="chevron-left" size={20} color="black" />,
)
const { getByTestId } = render(<IconButton disabled={false} onPress={mockOnPress} icon={icon} />)

// WHEN
const pressable = getByTestId('pressable')
Expand All @@ -33,9 +31,7 @@ describe('IconButton', () => {
test('Do not handle press when disabled', () => {
// GIVEN
const mockOnPress = jest.fn()
const { getByTestId } = render(
<IconButton disabled onPress={mockOnPress} iconName="chevron-left" size={20} color="black" />,
)
const { getByTestId } = render(<IconButton disabled onPress={mockOnPress} icon={icon} />)

// WHEN
const pressable = getByTestId('pressable')
Expand Down
6 changes: 3 additions & 3 deletions src/components/__tests__/ToolTip.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ describe('Tooltip', () => {
describe('Rendering', () => {
test('With icon', () => {
// GIVEN
const { toJSON } = render(<Tooltip iconName="info-circle" title="Title" text="Text" />)
const { toJSON } = render(<Tooltip icon={{ name: 'info-circle' }} title="Title" text="Text" />)

// THEN
expect(toJSON()).toMatchSnapshot()
Expand Down Expand Up @@ -45,7 +45,7 @@ describe('Tooltip', () => {
test('Click on close', () => {
// GIVEN
const { getByTestId } = render(
<Tooltip title="Title" text="Text" onClose={onCloseTooltip} iconName="info-circle" />,
<Tooltip title="Title" text="Text" onClose={onCloseTooltip} icon={{ name: 'info-circle' }} />,
)
// WHEN
fireEvent.press(getByTestId('close'))
Expand All @@ -58,7 +58,7 @@ describe('Tooltip', () => {
// GIVEN
const onPress = jest.fn()
const { getByText } = render(
<Tooltip title="Title" text="Text" buttons={[{ onPress, title: 'Action!' }]} iconName="info-circle" />,
<Tooltip title="Title" text="Text" buttons={[{ onPress, title: 'Action!' }]} icon={{ name: 'info-circle' }} />,
)

// WHEN
Expand Down

0 comments on commit d936b85

Please sign in to comment.