Skip to content

Commit 64e4ebd

Browse files
lukewalczaklukewalczak
committed
fix: allow to override hitSlop
1 parent 4fcf642 commit 64e4ebd

File tree

8 files changed

+73
-8
lines changed

8 files changed

+73
-8
lines changed

‎src/components/Checkbox/CheckboxItem.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ import CheckboxAndroid from './CheckboxAndroid';
1515
import CheckboxIOS from './CheckboxIOS';
1616
import { useInternalTheme } from '../../core/theming';
1717
import type { ThemeProp, MD3TypescaleKey } from '../../types';
18-
import TouchableRipple from '../TouchableRipple/TouchableRipple';
18+
import TouchableRipple, {
19+
Props as TouchableRippleProps,
20+
} from '../TouchableRipple/TouchableRipple';
1921
import Text from '../Typography/Text';
2022

2123
export type Props = {
@@ -106,6 +108,10 @@ export type Props = {
106108
* Left undefined `<Checkbox />` will be used.
107109
*/
108110
mode?: 'android' | 'ios';
111+
/**
112+
* Sets additional distance outside of element in which a press can be detected.
113+
*/
114+
hitSlop?: TouchableRippleProps['hitSlop'];
109115
};
110116

111117
/**
@@ -144,6 +150,7 @@ const CheckboxItem = ({
144150
labelMaxFontSizeMultiplier = 1.5,
145151
rippleColor,
146152
background,
153+
hitSlop,
147154
...props
148155
}: Props) => {
149156
const theme = useInternalTheme(themeOverrides);
@@ -185,6 +192,7 @@ const CheckboxItem = ({
185192
rippleColor={rippleColor}
186193
theme={theme}
187194
background={background}
195+
hitSlop={hitSlop}
188196
>
189197
<View
190198
style={[styles.container, style]}

‎src/components/Chip/Chip.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ import type { IconSource } from '../Icon';
2525
import Icon from '../Icon';
2626
import MaterialCommunityIcon from '../MaterialCommunityIcon';
2727
import Surface from '../Surface';
28-
import TouchableRipple from '../TouchableRipple/TouchableRipple';
28+
import TouchableRipple, {
29+
Props as TouchableRippleProps,
30+
} from '../TouchableRipple/TouchableRipple';
2931
import Text from '../Typography/Text';
3032

3133
export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
@@ -131,6 +133,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
131133
*/
132134
textStyle?: StyleProp<TextStyle>;
133135
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
136+
/**
137+
* Sets additional distance outside of element in which a press can be detected.
138+
*/
139+
hitSlop?: TouchableRippleProps['hitSlop'];
134140
/**
135141
* @optional
136142
*/
@@ -202,6 +208,7 @@ const Chip = ({
202208
compact,
203209
elevated = false,
204210
maxFontSizeMultiplier,
211+
hitSlop,
205212
...rest
206213
}: Props) => {
207214
const theme = useInternalTheme(themeOverrides);
@@ -327,6 +334,7 @@ const Chip = ({
327334
accessibilityState={accessibilityState}
328335
testID={testID}
329336
theme={theme}
337+
hitSlop={hitSlop}
330338
>
331339
<View
332340
style={[styles.content, isV3 && styles.md3Content, contentSpacings]}

‎src/components/Drawer/DrawerItem.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ import color from 'color';
1414
import { useInternalTheme } from '../../core/theming';
1515
import type { ThemeProp } from '../../types';
1616
import Icon, { IconSource } from '../Icon';
17-
import TouchableRipple from '../TouchableRipple/TouchableRipple';
17+
import TouchableRipple, {
18+
Props as TouchableRippleProps,
19+
} from '../TouchableRipple/TouchableRipple';
1820
import Text from '../Typography/Text';
1921

2022
export type Props = React.ComponentPropsWithRef<typeof View> & {
@@ -59,6 +61,10 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
5961
* Color of the ripple effect.
6062
*/
6163
rippleColor?: ColorValue;
64+
/**
65+
* Sets additional distance outside of element in which a press can be detected.
66+
*/
67+
hitSlop?: TouchableRippleProps['hitSlop'];
6268
style?: StyleProp<ViewStyle>;
6369
/**
6470
* @optional
@@ -98,6 +104,7 @@ const DrawerItem = ({
98104
accessibilityLabel,
99105
right,
100106
labelMaxFontSizeMultiplier,
107+
hitSlop,
101108
...rest
102109
}: Props) => {
103110
const theme = useInternalTheme(themeOverrides);
@@ -141,6 +148,7 @@ const DrawerItem = ({
141148
accessibilityLabel={accessibilityLabel}
142149
rippleColor={customRippleColor || rippleColor}
143150
theme={theme}
151+
hitSlop={hitSlop}
144152
>
145153
<View style={[styles.wrapper, isV3 && styles.v3Wrapper]}>
146154
<View style={styles.content}>

‎src/components/FAB/AnimatedFAB.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ import type { $Omit, $RemoveChildren, ThemeProp } from '../../types';
2828
import type { IconSource } from '../Icon';
2929
import Icon from '../Icon';
3030
import Surface from '../Surface';
31-
import TouchableRipple from '../TouchableRipple/TouchableRipple';
31+
import TouchableRipple, {
32+
Props as TouchableRippleProps,
33+
} from '../TouchableRipple/TouchableRipple';
3234
import AnimatedText from '../Typography/AnimatedText';
3335

3436
export type AnimatedFABIconMode = 'static' | 'dynamic';
@@ -112,6 +114,10 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
112114
*/
113115
variant?: 'primary' | 'secondary' | 'tertiary' | 'surface';
114116
style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
117+
/**
118+
* Sets additional distance outside of element in which a press can be detected.
119+
*/
120+
hitSlop?: TouchableRippleProps['hitSlop'];
115121
/**
116122
* @optional
117123
*/
@@ -223,6 +229,7 @@ const AnimatedFAB = ({
223229
iconMode = 'dynamic',
224230
variant = 'primary',
225231
labelMaxFontSizeMultiplier,
232+
hitSlop,
226233
...rest
227234
}: Props) => {
228235
const theme = useInternalTheme(themeOverrides);
@@ -482,6 +489,7 @@ const AnimatedFAB = ({
482489
testID={testID}
483490
style={{ borderRadius }}
484491
theme={theme}
492+
hitSlop={hitSlop}
485493
>
486494
<View
487495
style={[

‎src/components/List/ListAccordion.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ import { getAccordionColors, getLeftStyles } from './utils';
2020
import { useInternalTheme } from '../../core/theming';
2121
import type { ThemeProp } from '../../types';
2222
import MaterialCommunityIcon from '../MaterialCommunityIcon';
23-
import TouchableRipple from '../TouchableRipple/TouchableRipple';
23+
import TouchableRipple, {
24+
Props as TouchableRippleProps,
25+
} from '../TouchableRipple/TouchableRipple';
2426
import Text from '../Typography/Text';
2527

2628
export type Props = {
@@ -129,6 +131,11 @@ export type Props = {
129131
* `pointerEvents` passed to the `View` container
130132
*/
131133
pointerEvents?: ViewProps['pointerEvents'];
134+
/**
135+
* Amount of space between the touchable area and the edge of the component.
136+
* This can be used to enlarge the touchable area beyond the visible component.
137+
*/
138+
hitSlop?: TouchableRippleProps['hitSlop'];
132139
};
133140

134141
/**
@@ -194,6 +201,7 @@ const ListAccordion = ({
194201
pointerEvents = 'none',
195202
titleMaxFontSizeMultiplier,
196203
descriptionMaxFontSizeMultiplier,
204+
hitSlop,
197205
}: Props) => {
198206
const theme = useInternalTheme(themeOverrides);
199207
const [expanded, setExpanded] = React.useState<boolean>(
@@ -260,6 +268,7 @@ const ListAccordion = ({
260268
theme={theme}
261269
background={background}
262270
borderless
271+
hitSlop={hitSlop}
263272
>
264273
<View
265274
style={[theme.isV3 ? styles.rowV3 : styles.row, containerStyle]}

‎src/components/Menu/MenuItem.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ import {
2020
import { useInternalTheme } from '../../core/theming';
2121
import type { ThemeProp } from '../../types';
2222
import Icon, { IconSource } from '../Icon';
23-
import TouchableRipple from '../TouchableRipple/TouchableRipple';
23+
import TouchableRipple, {
24+
Props as TouchableRippleProps,
25+
} from '../TouchableRipple/TouchableRipple';
2426
import Text from '../Typography/Text';
2527

2628
export type Props = {
@@ -88,6 +90,10 @@ export type Props = {
8890
* @optional
8991
*/
9092
theme?: ThemeProp;
93+
/**
94+
* Sets additional distance outside of element in which a press can be detected.
95+
*/
96+
hitSlop?: TouchableRippleProps['hitSlop'];
9197
/**
9298
* TestID used for testing purposes
9399
*/
@@ -142,6 +148,7 @@ const MenuItem = ({
142148
accessibilityState,
143149
theme: themeOverrides,
144150
titleMaxFontSizeMultiplier = 1.5,
151+
hitSlop,
145152
}: Props) => {
146153
const theme = useInternalTheme(themeOverrides);
147154
const { titleColor, iconColor, rippleColor } = getMenuItemColor({
@@ -187,6 +194,7 @@ const MenuItem = ({
187194
accessibilityRole="menuitem"
188195
accessibilityState={newAccessibilityState}
189196
rippleColor={rippleColor}
197+
hitSlop={hitSlop}
190198
>
191199
<View style={[styles.row, containerStyle]}>
192200
{leadingIcon ? (

‎src/components/RadioButton/RadioButtonItem.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ import RadioButtonIOS from './RadioButtonIOS';
1717
import { handlePress, isChecked } from './utils';
1818
import { useInternalTheme } from '../../core/theming';
1919
import type { ThemeProp, MD3TypescaleKey } from '../../types';
20-
import TouchableRipple from '../TouchableRipple/TouchableRipple';
20+
import TouchableRipple, {
21+
Props as TouchableRippleProps,
22+
} from '../TouchableRipple/TouchableRipple';
2123
import Text from '../Typography/Text';
2224

2325
export type Props = {
@@ -112,6 +114,10 @@ export type Props = {
112114
* Radio button control position.
113115
*/
114116
position?: 'leading' | 'trailing';
117+
/**
118+
* Sets additional distance outside of element in which a press can be detected.
119+
*/
120+
hitSlop?: TouchableRippleProps['hitSlop'];
115121
};
116122

117123
/**
@@ -156,6 +162,7 @@ const RadioButtonItem = ({
156162
position = 'trailing',
157163
labelVariant = 'bodyLarge',
158164
labelMaxFontSizeMultiplier,
165+
hitSlop,
159166
}: Props) => {
160167
const theme = useInternalTheme(themeOverrides);
161168
const radioButtonProps = {
@@ -219,6 +226,7 @@ const RadioButtonItem = ({
219226
background={background}
220227
theme={theme}
221228
rippleColor={rippleColor}
229+
hitSlop={hitSlop}
222230
>
223231
<View style={[styles.container, style]} pointerEvents="none">
224232
{isLeading && radioButton}

‎src/components/SegmentedButtons/SegmentedButtonItem.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ import {
2222
import { useInternalTheme } from '../../core/theming';
2323
import type { IconSource } from '../Icon';
2424
import Icon from '../Icon';
25-
import TouchableRipple from '../TouchableRipple/TouchableRipple';
25+
import TouchableRipple, {
26+
Props as TouchableRippleProps,
27+
} from '../TouchableRipple/TouchableRipple';
2628
import Text from '../Typography/Text';
2729

2830
export type Props = {
@@ -98,6 +100,10 @@ export type Props = {
98100
* testID to be used on tests.
99101
*/
100102
testID?: string;
103+
/**
104+
* Sets additional distance outside of element in which a press can be detected.
105+
*/
106+
hitSlop?: TouchableRippleProps['hitSlop'];
101107
/**
102108
* @optional
103109
*/
@@ -123,6 +129,7 @@ const SegmentedButtonItem = ({
123129
density = 'regular',
124130
theme: themeOverrides,
125131
labelMaxFontSizeMultiplier,
132+
hitSlop,
126133
}: Props) => {
127134
const theme = useInternalTheme(themeOverrides);
128135

@@ -217,6 +224,7 @@ const SegmentedButtonItem = ({
217224
style={rippleStyle}
218225
background={background}
219226
theme={theme}
227+
hitSlop={hitSlop}
220228
>
221229
<View style={[styles.content, { paddingVertical }]}>
222230
{showCheckedIcon ? (

0 commit comments

Comments
 (0)