Skip to content

Commit 1792bb2

Browse files
bluerssenadnelson
andauthored
Add LongPress and other props to buttons and pressables (#556)
* Update Button * Update to mapping and Types * More Updates * Ensure Props are right * Include Pressable * Export Pressable in UI * Keep Touchable Exposed * Remove duplicative types Co-authored-by: Allen Nelson <[email protected]>
1 parent d8ca741 commit 1792bb2

File tree

13 files changed

+189
-76
lines changed

13 files changed

+189
-76
lines changed

packages/core/src/components/Button.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import * as React from "react";
22
import {
33
Text,
44
Pressable,
5+
PressableProps,
56
Platform,
67
StyleSheet,
78
TextStyle,
8-
PressableProps,
99
ActivityIndicator,
1010
} from "react-native";
1111

@@ -27,6 +27,11 @@ type BaseProps = {
2727
loading: boolean;
2828
style?: TextStyle;
2929
onPress: () => void;
30+
onLongPress?: () => void;
31+
activeOpacity?: number;
32+
disabledOpacity?: number;
33+
delayLongPress?: number;
34+
hitSlop?: number;
3035
icon?: string;
3136
} & PressableProps &
3237
IconSlot;
@@ -37,6 +42,11 @@ type Props = {
3742
loading: boolean;
3843
style?: TextStyle;
3944
onPress: () => void;
45+
onLongPress?: () => void;
46+
activeOpacity?: number;
47+
disabledOpacity?: number;
48+
delayLongPress?: number;
49+
hitSlop?: number;
4050
icon?: string;
4151
theme: Theme;
4252
} & PressableProps &
@@ -46,10 +56,11 @@ function Base({
4656
Icon,
4757
icon,
4858
title,
49-
onPress,
5059
loading,
5160
disabled,
5261
style,
62+
activeOpacity,
63+
disabledOpacity,
5364
...props
5465
}: BaseProps): JSX.Element {
5566
const {
@@ -91,13 +102,12 @@ function Base({
91102

92103
return (
93104
<Pressable
94-
onPress={onPress}
95105
disabled={disabled || loading}
96106
style={({ pressed }) => {
97107
return [
98108
styles.base,
99109
{
100-
opacity: pressed || disabled ? 0.75 : 1,
110+
opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
101111
},
102112
buttonStyles,
103113
];

packages/core/src/components/Checkbox/Checkbox.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import * as React from "react";
22
import {
33
View,
44
StyleSheet,
5-
TouchableHighlightProps,
5+
Pressable,
6+
PressableProps,
67
StyleProp,
78
ViewStyle,
89
} from "react-native";
910
import { useTheme } from "../../theming";
1011
import type { IconSlot } from "../../interfaces/Icon";
1112

12-
import Touchable from "../Touchable";
1313
import { usePrevious } from "../../hooks";
1414

1515
export interface CheckboxProps {
@@ -27,9 +27,7 @@ export interface CheckboxProps {
2727
style?: StyleProp<ViewStyle>;
2828
}
2929

30-
const Checkbox: React.FC<
31-
CheckboxProps & TouchableHighlightProps & IconSlot
32-
> = ({
30+
const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
3331
Icon,
3432
status,
3533
disabled = false,
@@ -87,7 +85,7 @@ const Checkbox: React.FC<
8785
};
8886

8987
return (
90-
<Touchable
88+
<Pressable
9189
{...rest}
9290
onPress={handlePress}
9391
disabled={disabled}
@@ -111,7 +109,7 @@ const Checkbox: React.FC<
111109
]}
112110
/>
113111
</View>
114-
</Touchable>
112+
</Pressable>
115113
);
116114
};
117115

packages/core/src/components/Checkbox/CheckboxGroupRow.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import {
66
TextStyle,
77
View,
88
Platform,
9+
Pressable,
910
} from "react-native";
1011
import Checkbox, { CheckboxProps } from "./Checkbox";
1112
import Text from "../Text";
1213
import { useCheckboxGroupContext } from "./context";
1314
import type { IconSlot } from "../../interfaces/Icon";
1415
import { Direction as GroupDirection } from "./context";
15-
import Touchable from "../Touchable";
1616
import { extractStyles } from "../../utilities";
1717

1818
export enum Direction {
@@ -92,7 +92,7 @@ const CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({
9292
const { textStyles, viewStyles } = extractStyles(style);
9393

9494
return (
95-
<Touchable
95+
<Pressable
9696
onPress={handlePress}
9797
style={[styles.mainParent, { flexDirection: direction }, viewStyles]}
9898
disabled={disabled}
@@ -125,7 +125,7 @@ const CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({
125125
uncheckedColor={uncheckedColor}
126126
/>
127127
</View>
128-
</Touchable>
128+
</Pressable>
129129
);
130130
};
131131

packages/core/src/components/Checkbox/CheckboxRow.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import {
66
TextStyle,
77
View,
88
Platform,
9+
Pressable,
910
} from "react-native";
1011
import { isString } from "lodash";
1112

1213
import type { IconSlot } from "../../interfaces/Icon";
1314
import { extractStyles } from "../../utilities";
1415
import { usePrevious } from "../../hooks";
1516
import Text from "../Text";
16-
import Touchable from "../Touchable";
1717
import Checkbox, { CheckboxProps } from "./Checkbox";
1818

1919
export enum Direction {
@@ -100,7 +100,7 @@ const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
100100
const { textStyles, viewStyles } = extractStyles(style);
101101

102102
return (
103-
<Touchable
103+
<Pressable
104104
onPress={handlePress}
105105
style={[viewStyles, styles.mainParent, { flexDirection: direction }]}
106106
disabled={disabled}
@@ -130,7 +130,7 @@ const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
130130
uncheckedIcon={uncheckedIcon}
131131
size={size}
132132
/>
133-
</Touchable>
133+
</Pressable>
134134
);
135135
};
136136

packages/core/src/components/DeprecatedButton.tsx

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import {
44
View,
55
Text,
66
StyleSheet,
7-
TouchableHighlightProps,
87
StyleProp,
98
ViewStyle,
109
TextStyle,
10+
Pressable,
11+
PressableProps,
1112
} from "react-native";
1213
import color from "color";
1314
import Config from "./Config";
14-
import Touchable from "./Touchable";
1515
import Elevation from "./Elevation";
1616
import { withTheme } from "../theming";
1717

@@ -63,7 +63,7 @@ type Props = {
6363
elevation?: number;
6464
style?: StyleProp<ViewStyle>;
6565
theme: Theme;
66-
} & TouchableHighlightProps &
66+
} & PressableProps &
6767
IconSlot;
6868

6969
const Button: React.FC<React.PropsWithChildren<Props>> = ({
@@ -77,7 +77,6 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
7777
children,
7878
onPress,
7979
elevation = 0,
80-
style,
8180
theme: { colors, disabledOpacity, roundness, typography },
8281
...rest
8382
}) => {
@@ -137,38 +136,15 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
137136
},
138137
];
139138

140-
const {
141-
margin,
142-
marginEnd,
143-
marginTop,
144-
marginLeft,
145-
marginRight,
146-
marginBottom,
147-
marginHorizontal,
148-
marginVertical,
149-
...innerStyles
150-
} = StyleSheet.flatten(style || {});
151-
152-
const margins = {
153-
margin,
154-
marginEnd,
155-
marginTop,
156-
marginLeft,
157-
marginRight,
158-
marginBottom,
159-
marginHorizontal,
160-
marginVertical,
161-
};
162-
163139
return (
164-
<Elevation style={{ elevation, alignSelf: "stretch", ...margins }}>
165-
<Touchable
140+
<Elevation style={{ elevation, alignSelf: "stretch" }}>
141+
<Pressable
166142
{...rest}
167143
onPress={onPress}
168144
accessibilityState={{ disabled }}
169145
accessibilityRole="button"
170146
disabled={disabled || loading}
171-
style={[styles.button, buttonStyle, innerStyles]}
147+
style={[styles.button, buttonStyle]}
172148
>
173149
<View style={styles.content}>
174150
{icon && loading !== true ? (
@@ -191,7 +167,7 @@ const Button: React.FC<React.PropsWithChildren<Props>> = ({
191167
{children}
192168
</Text>
193169
</View>
194-
</Touchable>
170+
</Pressable>
195171
</Elevation>
196172
);
197173
};

packages/core/src/components/DeprecatedFAB.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import {
33
ActivityIndicator,
44
View,
55
StyleSheet,
6-
TouchableHighlightProps,
76
StyleProp,
87
ViewStyle,
98
TextStyle,
9+
Pressable,
10+
PressableProps,
1011
} from "react-native";
1112
import color from "color";
1213
import Config from "./Config";
1314
import Text from "./Text";
14-
import Touchable from "./Touchable";
1515
import Elevation from "./Elevation";
1616
import { withTheme } from "../theming";
1717

@@ -65,7 +65,7 @@ type Props = {
6565
elevation?: number;
6666
theme: Theme;
6767
style?: StyleProp<ViewStyle>;
68-
} & TouchableHighlightProps &
68+
} & PressableProps &
6969
IconSlot;
7070

7171
const FAB: React.FC<React.PropsWithChildren<Props>> = ({
@@ -169,7 +169,7 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
169169

170170
return (
171171
<Elevation style={[{ elevation }, style]}>
172-
<Touchable
172+
<Pressable
173173
{...rest}
174174
onPress={onPress}
175175
accessibilityState={{ disabled }}
@@ -200,7 +200,7 @@ const FAB: React.FC<React.PropsWithChildren<Props>> = ({
200200
</Text>
201201
) : null}
202202
</View>
203-
</Touchable>
203+
</Pressable>
204204
</Elevation>
205205
);
206206
};
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from "react";
2+
import {
3+
Pressable as NativePressable,
4+
PressableProps,
5+
ViewStyle,
6+
} from "react-native";
7+
8+
type Props = {
9+
style?: ViewStyle;
10+
activeOpacity?: number;
11+
disabledOpacity?: number;
12+
} & PressableProps;
13+
14+
export default function Pressable({
15+
children,
16+
disabled,
17+
onPress,
18+
activeOpacity,
19+
disabledOpacity,
20+
delayLongPress,
21+
hitSlop,
22+
style,
23+
...props
24+
}: Props) {
25+
return (
26+
<NativePressable
27+
onPress={onPress}
28+
disabled={disabled}
29+
delayLongPress={delayLongPress ? delayLongPress : 500}
30+
hitSlop={hitSlop ? hitSlop : 8}
31+
style={({ pressed }) => {
32+
return [
33+
{
34+
opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
35+
},
36+
style,
37+
];
38+
}}
39+
{...props}
40+
>
41+
{children}
42+
</NativePressable>
43+
);
44+
}

packages/core/src/components/Touchable.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
import React from "react";
2-
import { Pressable, ViewStyle, PressableProps } from "react-native";
2+
import { Pressable, PressableProps, ViewStyle } from "react-native";
33

44
type Props = {
5-
disabled?: boolean;
6-
children: React.ReactNode;
75
style?: ViewStyle;
8-
onPress?: () => void;
6+
activeOpacity?: number;
7+
disabledOpacity?: number;
98
} & PressableProps;
109

1110
export default function Touchable({
1211
children,
1312
disabled,
1413
onPress,
14+
activeOpacity,
15+
disabledOpacity,
16+
delayLongPress,
17+
hitSlop,
1518
style,
1619
...props
1720
}: Props) {
1821
return (
1922
<Pressable
20-
onPress={onPress}
2123
disabled={disabled}
22-
hitSlop={8}
24+
onPress={onPress}
25+
delayLongPress={delayLongPress ? delayLongPress : 500}
26+
hitSlop={hitSlop ? hitSlop : 8}
2327
style={({ pressed }) => {
2428
return [
2529
{
26-
opacity: pressed || disabled ? 0.75 : 1,
30+
opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
2731
},
2832
style,
2933
];

0 commit comments

Comments
 (0)