Skip to content

Commit c53d39b

Browse files
k0ndeek0ndee
committed
fix: revert ToggleButton to main
1 parent 205cd3e commit c53d39b

4 files changed

Lines changed: 35 additions & 183 deletions

File tree

‎src/components/ToggleButton/ToggleButton.tsx‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import * as React from 'react';
22
import { StyleSheet, View } from 'react-native';
3-
import type {
4-
GestureResponderEvent,
5-
Insets,
6-
StyleProp,
7-
ViewStyle,
8-
} from 'react-native';
3+
import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
94

105
import type { AnimatedStyle } from 'react-native-reanimated';
116

@@ -59,26 +54,8 @@ export type Props = {
5954
* testID to be used on tests.
6055
*/
6156
testID?: string;
62-
/**
63-
* @optional
64-
* Set by `ToggleButton.Row` to divide the touch targets of adjoining
65-
* buttons; not meant to be passed directly.
66-
*/
67-
hitSlop?: Insets;
68-
/**
69-
* @optional
70-
* Set by `ToggleButton.Row` to square off the corners shared with a
71-
* neighbouring button; not meant to be passed directly.
72-
*/
73-
borderRadius?: number;
74-
borderTopLeftRadius?: number;
75-
borderTopRightRadius?: number;
76-
borderBottomLeftRadius?: number;
77-
borderBottomRightRadius?: number;
7857
};
7958

80-
export const TOGGLE_BUTTON_SIZE = 42;
81-
8259
/**
8360
* Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,
8461
* a group should share a common container.
@@ -156,11 +133,11 @@ const ToggleButton = ({
156133
styles.content,
157134
{
158135
backgroundColor,
136+
borderRadius,
159137
borderColor,
160138
},
161139
style,
162140
]}
163-
borderRadius={borderRadius}
164141
ref={ref}
165142
theme={theme}
166143
{...rest}
@@ -173,8 +150,8 @@ const ToggleButton = ({
173150

174151
const styles = StyleSheet.create({
175152
content: {
176-
width: TOGGLE_BUTTON_SIZE,
177-
height: TOGGLE_BUTTON_SIZE,
153+
width: 42,
154+
height: 42,
178155
margin: 0,
179156
},
180157
});

‎src/components/ToggleButton/ToggleButtonRow.tsx‎

Lines changed: 21 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import * as React from 'react';
22
import { StyleSheet, View } from 'react-native';
3-
import type { Insets, StyleProp, ViewStyle } from 'react-native';
3+
import type { StyleProp, ViewStyle } from 'react-native';
44

5-
import ToggleButton, { TOGGLE_BUTTON_SIZE } from './ToggleButton';
5+
import ToggleButton from './ToggleButton';
66
import ToggleButtonGroup from './ToggleButtonGroup';
7-
import getMinInteractiveSizeHitSlop from '../../utils/getMinInteractiveSizeHitSlop';
87

98
export type Props = {
109
/**
@@ -22,34 +21,6 @@ export type Props = {
2221
style?: StyleProp<ViewStyle>;
2322
};
2423

25-
type Position = 'first' | 'middle' | 'last';
26-
27-
// Buttons in a row sit flush against each other, so an unrestricted hitSlop
28-
// would have each button's expanded target reach into its neighbour's own
29-
// visible bounds. On web, whichever button is later in the row wins that
30-
// overlap, so a tap meant for one button's own edge could activate the other
31-
// instead. Zero the slop on every edge shared with a neighbour; the outer
32-
// edges (and, for a single button, every edge) keep the usual slop.
33-
const DEFAULT_HIT_SLOP = getMinInteractiveSizeHitSlop({
34-
width: TOGGLE_BUTTON_SIZE,
35-
height: TOGGLE_BUTTON_SIZE,
36-
});
37-
38-
const HIT_SLOP_BY_POSITION: Record<Position, Insets | undefined> =
39-
DEFAULT_HIT_SLOP
40-
? {
41-
first: { ...DEFAULT_HIT_SLOP, right: 0 },
42-
middle: { ...DEFAULT_HIT_SLOP, left: 0, right: 0 },
43-
last: { ...DEFAULT_HIT_SLOP, left: 0 },
44-
}
45-
: { first: undefined, middle: undefined, last: undefined };
46-
47-
const RADIUS_OVERRIDES_BY_POSITION: Record<Position, ViewStyle> = {
48-
first: { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
49-
middle: { borderRadius: 0 },
50-
last: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },
51-
};
52-
5324
/**
5425
* Toggle button row renders a group of toggle buttons in a row.
5526
*
@@ -82,29 +53,18 @@ const ToggleButtonRow = ({ value, onValueChange, children, style }: Props) => {
8253
{React.Children.map(children, (child, i) => {
8354
// @ts-expect-error: TypeScript complains about child.type but it doesn't matter
8455
if (child && child.type === ToggleButton) {
85-
const position: Position =
86-
i === 0 ? 'first' : i === count - 1 ? 'last' : 'middle';
87-
8856
// @ts-expect-error: We're sure that child is a React Element
8957
return React.cloneElement(child, {
9058
style: [
9159
styles.button,
92-
position !== 'first' && styles.noLeftBorder,
60+
i === 0
61+
? styles.first
62+
: i === count - 1
63+
? styles.last
64+
: styles.middle,
9365
// @ts-expect-error: We're sure that child is a React Element
9466
child.props.style,
9567
],
96-
...RADIUS_OVERRIDES_BY_POSITION[position],
97-
hitSlop:
98-
// @ts-expect-error: We're sure that child is a React Element
99-
child.props.hitSlop !== undefined
100-
? // @ts-expect-error: We're sure that child is a React Element
101-
child.props.hitSlop
102-
: // @ts-expect-error: We're sure that child is a React Element
103-
child.props.disabled
104-
? undefined
105-
: count > 1
106-
? HIT_SLOP_BY_POSITION[position]
107-
: DEFAULT_HIT_SLOP,
10868
});
10969
}
11070

@@ -124,8 +84,21 @@ const styles = StyleSheet.create({
12484
button: {
12585
borderWidth: StyleSheet.hairlineWidth,
12686
},
127-
noLeftBorder: {
87+
88+
first: {
89+
borderTopRightRadius: 0,
90+
borderBottomRightRadius: 0,
91+
},
92+
93+
middle: {
94+
borderRadius: 0,
95+
borderLeftWidth: 0,
96+
},
97+
98+
last: {
12899
borderLeftWidth: 0,
100+
borderTopLeftRadius: 0,
101+
borderBottomLeftRadius: 0,
129102
},
130103
});
131104

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

Lines changed: 1 addition & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe, expect, it } from '@jest/globals';
22

3-
import { render, screen } from '../../test-utils';
3+
import { render } from '../../test-utils';
44
import { DarkTheme, LightTheme } from '../../theme/schemes';
55
import ToggleButton from '../ToggleButton';
66
import { getToggleButtonColor } from '../ToggleButton/utils';
@@ -33,107 +33,6 @@ it('renders unchecked toggle button', async () => {
3333
expect(tree).toMatchSnapshot();
3434
});
3535

36-
describe('ToggleButton.Row', () => {
37-
it('divides hitSlop between adjoining buttons, zeroing the shared edge', async () => {
38-
await render(
39-
<ToggleButton.Row value="a" onValueChange={() => {}}>
40-
<ToggleButton testID="first" icon="heart" value="a" />
41-
<ToggleButton testID="middle" icon="heart" value="b" />
42-
<ToggleButton testID="last" icon="heart" value="c" />
43-
</ToggleButton.Row>
44-
);
45-
46-
// eslint-disable-next-line no-restricted-syntax
47-
expect(screen.getByTestId('first').props.hitSlop).toEqual({
48-
top: 3,
49-
bottom: 3,
50-
left: 3,
51-
right: 0,
52-
});
53-
// eslint-disable-next-line no-restricted-syntax
54-
expect(screen.getByTestId('middle').props.hitSlop).toEqual({
55-
top: 3,
56-
bottom: 3,
57-
left: 0,
58-
right: 0,
59-
});
60-
// eslint-disable-next-line no-restricted-syntax
61-
expect(screen.getByTestId('last').props.hitSlop).toEqual({
62-
top: 3,
63-
bottom: 3,
64-
left: 0,
65-
right: 3,
66-
});
67-
});
68-
69-
it('keeps the usual hitSlop for a lone button in a row', async () => {
70-
await render(
71-
<ToggleButton.Row value="a" onValueChange={() => {}}>
72-
<ToggleButton testID="only" icon="heart" value="a" />
73-
</ToggleButton.Row>
74-
);
75-
76-
// eslint-disable-next-line no-restricted-syntax
77-
expect(screen.getByTestId('only').props.hitSlop).toEqual({
78-
top: 3,
79-
bottom: 3,
80-
left: 3,
81-
right: 3,
82-
});
83-
});
84-
85-
it('gives a disabled button in a row no hitSlop of its own', async () => {
86-
await render(
87-
<ToggleButton.Row value="a" onValueChange={() => {}}>
88-
<ToggleButton testID="first" icon="heart" value="a" disabled />
89-
<ToggleButton testID="last" icon="heart" value="b" />
90-
</ToggleButton.Row>
91-
);
92-
93-
// eslint-disable-next-line no-restricted-syntax
94-
expect(screen.getByTestId('first').props.hitSlop).toBeUndefined();
95-
});
96-
97-
it('lets a caller-supplied hitSlop win over the row default', async () => {
98-
const customHitSlop = { top: 2, bottom: 2, left: 2, right: 2 };
99-
100-
await render(
101-
<ToggleButton.Row value="a" onValueChange={() => {}}>
102-
<ToggleButton
103-
testID="first"
104-
icon="heart"
105-
value="a"
106-
hitSlop={customHitSlop}
107-
/>
108-
<ToggleButton testID="last" icon="heart" value="b" />
109-
</ToggleButton.Row>
110-
);
111-
112-
// eslint-disable-next-line no-restricted-syntax
113-
expect(screen.getByTestId('first').props.hitSlop).toBe(customHitSlop);
114-
});
115-
116-
it('squares off the corners shared with a neighbour', async () => {
117-
await render(
118-
<ToggleButton.Row value="a" onValueChange={() => {}}>
119-
<ToggleButton testID="first" icon="heart" value="a" />
120-
<ToggleButton testID="middle" icon="heart" value="b" />
121-
<ToggleButton testID="last" icon="heart" value="c" />
122-
</ToggleButton.Row>
123-
);
124-
125-
expect(screen.getByTestId('first')).toHaveStyle({
126-
borderTopRightRadius: 0,
127-
borderBottomRightRadius: 0,
128-
});
129-
expect(screen.getByTestId('middle')).toHaveStyle({ borderRadius: 0 });
130-
expect(screen.getByTestId('last')).toHaveStyle({
131-
borderTopLeftRadius: 0,
132-
borderBottomLeftRadius: 0,
133-
});
134-
});
135-
});
136-
13736
describe('getToggleButtonColor', () => {
13837
it('should return correct color when checked and theme version 3', () => {
13938
expect(getToggleButtonColor({ theme: LightTheme, checked: true })).toBe(

‎src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ exports[`renders disabled toggle button 1`] = `
1919
"borderBottomRightRadius": undefined,
2020
"borderBottomStartRadius": undefined,
2121
"borderColor": "rgba(202, 196, 208, 1)",
22-
"borderRadius": 4,
22+
"borderRadius": 20,
2323
"borderTopEndRadius": undefined,
2424
"borderTopLeftRadius": undefined,
2525
"borderTopRightRadius": undefined,
@@ -34,6 +34,7 @@ exports[`renders disabled toggle button 1`] = `
3434
{
3535
"backgroundColor": "rgba(230, 224, 233, 1)",
3636
"borderColor": "rgba(121, 116, 126, 1)",
37+
"borderRadius": 4,
3738
},
3839
undefined,
3940
]
@@ -85,7 +86,7 @@ exports[`renders disabled toggle button 1`] = `
8586
"borderBottomLeftRadius": undefined,
8687
"borderBottomRightRadius": undefined,
8788
"borderBottomStartRadius": undefined,
88-
"borderRadius": 4,
89+
"borderRadius": 20,
8990
"borderTopEndRadius": undefined,
9091
"borderTopLeftRadius": undefined,
9192
"borderTopRightRadius": undefined,
@@ -163,7 +164,7 @@ exports[`renders toggle button 1`] = `
163164
"borderBottomRightRadius": undefined,
164165
"borderBottomStartRadius": undefined,
165166
"borderColor": "rgba(202, 196, 208, 1)",
166-
"borderRadius": 4,
167+
"borderRadius": 20,
167168
"borderTopEndRadius": undefined,
168169
"borderTopLeftRadius": undefined,
169170
"borderTopRightRadius": undefined,
@@ -178,6 +179,7 @@ exports[`renders toggle button 1`] = `
178179
{
179180
"backgroundColor": "rgba(230, 224, 233, 1)",
180181
"borderColor": "rgba(121, 116, 126, 1)",
182+
"borderRadius": 4,
181183
},
182184
undefined,
183185
]
@@ -237,7 +239,7 @@ exports[`renders toggle button 1`] = `
237239
"borderBottomLeftRadius": undefined,
238240
"borderBottomRightRadius": undefined,
239241
"borderBottomStartRadius": undefined,
240-
"borderRadius": 4,
242+
"borderRadius": 20,
241243
"borderTopEndRadius": undefined,
242244
"borderTopLeftRadius": undefined,
243245
"borderTopRightRadius": undefined,
@@ -315,7 +317,7 @@ exports[`renders unchecked toggle button 1`] = `
315317
"borderBottomRightRadius": undefined,
316318
"borderBottomStartRadius": undefined,
317319
"borderColor": "rgba(202, 196, 208, 1)",
318-
"borderRadius": 4,
320+
"borderRadius": 20,
319321
"borderTopEndRadius": undefined,
320322
"borderTopLeftRadius": undefined,
321323
"borderTopRightRadius": undefined,
@@ -330,6 +332,7 @@ exports[`renders unchecked toggle button 1`] = `
330332
{
331333
"backgroundColor": "rgba(243, 237, 247, 1)",
332334
"borderColor": "rgba(121, 116, 126, 1)",
335+
"borderRadius": 4,
333336
},
334337
undefined,
335338
]
@@ -381,7 +384,7 @@ exports[`renders unchecked toggle button 1`] = `
381384
"borderBottomLeftRadius": undefined,
382385
"borderBottomRightRadius": undefined,
383386
"borderBottomStartRadius": undefined,
384-
"borderRadius": 4,
387+
"borderRadius": 20,
385388
"borderTopEndRadius": undefined,
386389
"borderTopLeftRadius": undefined,
387390
"borderTopRightRadius": undefined,

0 commit comments

Comments
 (0)