Skip to content

Commit 45c7df4

Browse files
jameswilddevjameswilddev
committed
Add autofocus throughout all input component types. Disabled is now a required prop.
1 parent 9fa991c commit 45c7df4

File tree

78 files changed

+2950
-871
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+2950
-871
lines changed

‎react-native/components/Hitbox/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ React.PropsWithChildren<{
1515
* This will, of course, not apply until the next render. To synchronously
1616
* disable all Hitboxes, use the "enabled" static property.
1717
*/
18-
readonly disabled?: undefined | boolean
18+
readonly disabled: boolean
1919

2020
/**
2121
* Passed down to TouchableOpacity.
@@ -60,7 +60,7 @@ export const Hitbox: Component & {
6060

6161
return (
6262
<TouchableOpacity
63-
disabled={disabled ?? false}
63+
disabled={disabled}
6464
style={style}
6565
ref={ref}
6666
onLayout={onLayout}

‎react-native/components/Hitbox/unit.tsx

+2-47
Original file line numberDiff line numberDiff line change
@@ -53,52 +53,7 @@ test('renders as expected when enabled', () => {
5353
renderer.unmount()
5454
})
5555

56-
test('renders as expected when enabled by not disabling', () => {
57-
const onPress = jest.fn()
58-
const onMeasure = jest.fn()
59-
60-
const renderer = TestRenderer.create(
61-
<Hitbox
62-
style={{ backgroundColor: 'red' }}
63-
onPress={onPress}
64-
onMeasure={onMeasure}
65-
>
66-
<Text>Test Children</Text>
67-
</Hitbox>
68-
)
69-
70-
expect(renderer.toTree()?.rendered).toEqual(
71-
expect.objectContaining({
72-
nodeType: 'component',
73-
props: expect.objectContaining({
74-
disabled: false,
75-
style: { backgroundColor: 'red' },
76-
hostRef: expect.any(Function),
77-
onLayout: expect.any(Function),
78-
onPress: expect.any(Function),
79-
children: expect.objectContaining({
80-
type: Text,
81-
props: {
82-
children: 'Test Children'
83-
}
84-
})
85-
})
86-
})
87-
)
88-
expect(
89-
(
90-
(renderer.toTree()?.rendered as TestRenderer.ReactTestRendererTree)
91-
.type as unknown as () => void
92-
).name
93-
).toEqual('TouchableOpacity')
94-
95-
expect(onPress).not.toHaveBeenCalled()
96-
expect(onMeasure).not.toHaveBeenCalled()
97-
98-
renderer.unmount()
99-
})
100-
101-
test('renders as expected when enabled by disabled being undefined', () => {
56+
test('renders as expected when enabled', () => {
10257
const onPress = jest.fn()
10358
const onMeasure = jest.fn()
10459

@@ -107,7 +62,7 @@ test('renders as expected when enabled by disabled being undefined', () => {
10762
style={{ backgroundColor: 'red' }}
10863
onPress={onPress}
10964
onMeasure={onMeasure}
110-
disabled={undefined}
65+
disabled={false}
11166
>
11267
<Text>Test Children</Text>
11368
</Hitbox>

‎react-native/components/createBottomTabBarComponent/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ export function createBottomTabBarComponent<
9494
}}
9595
key={bottomTab.tab}
9696
style={isActive ? styles.activeHitbox : styles.inactiveHitbox}
97+
disabled={false}
9798
>
9899
<HorizontallySymmetricalSafeAreaView
99100
style={styles.innerHorizontallySymmetricalSafeAreaView}

‎react-native/components/createBottomTabBarComponent/unit.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ test('renders as expected', () => {
8686
flexGrow: 1,
8787
backgroundColor: 'yellow'
8888
}}
89+
disabled={false}
8990
>
9091
<HorizontallySymmetricalSafeAreaView
9192
style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -114,6 +115,7 @@ test('renders as expected', () => {
114115
flexGrow: 1,
115116
backgroundColor: 'purple'
116117
}}
118+
disabled={false}
117119
>
118120
<HorizontallySymmetricalSafeAreaView
119121
style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -142,6 +144,7 @@ test('renders as expected', () => {
142144
flexGrow: 1,
143145
backgroundColor: 'yellow'
144146
}}
147+
disabled={false}
145148
>
146149
<HorizontallySymmetricalSafeAreaView
147150
style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -170,6 +173,7 @@ test('renders as expected', () => {
170173
flexGrow: 1,
171174
backgroundColor: 'yellow'
172175
}}
176+
disabled={false}
173177
>
174178
<HorizontallySymmetricalSafeAreaView
175179
style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -275,6 +279,7 @@ test('renders as expected without top padding', () => {
275279
flexGrow: 1,
276280
backgroundColor: 'yellow'
277281
}}
282+
disabled={false}
278283
>
279284
<HorizontallySymmetricalSafeAreaView
280285
style={{ alignItems: 'center', paddingBottom: 5 }}
@@ -303,6 +308,7 @@ test('renders as expected without top padding', () => {
303308
flexGrow: 1,
304309
backgroundColor: 'purple'
305310
}}
311+
disabled={false}
306312
>
307313
<HorizontallySymmetricalSafeAreaView
308314
style={{ alignItems: 'center', paddingBottom: 5 }}
@@ -331,6 +337,7 @@ test('renders as expected without top padding', () => {
331337
flexGrow: 1,
332338
backgroundColor: 'yellow'
333339
}}
340+
disabled={false}
334341
>
335342
<HorizontallySymmetricalSafeAreaView
336343
style={{ alignItems: 'center', paddingBottom: 5 }}
@@ -359,6 +366,7 @@ test('renders as expected without top padding', () => {
359366
flexGrow: 1,
360367
backgroundColor: 'yellow'
361368
}}
369+
disabled={false}
362370
>
363371
<HorizontallySymmetricalSafeAreaView
364372
style={{ alignItems: 'center', paddingBottom: 5 }}
@@ -464,6 +472,7 @@ test('renders as expected without bottom padding', () => {
464472
flexGrow: 1,
465473
backgroundColor: 'yellow'
466474
}}
475+
disabled={false}
467476
>
468477
<HorizontallySymmetricalSafeAreaView
469478
style={{ alignItems: 'center', paddingTop: 12 }}
@@ -492,6 +501,7 @@ test('renders as expected without bottom padding', () => {
492501
flexGrow: 1,
493502
backgroundColor: 'purple'
494503
}}
504+
disabled={false}
495505
>
496506
<HorizontallySymmetricalSafeAreaView
497507
style={{ alignItems: 'center', paddingTop: 12 }}
@@ -520,6 +530,7 @@ test('renders as expected without bottom padding', () => {
520530
flexGrow: 1,
521531
backgroundColor: 'yellow'
522532
}}
533+
disabled={false}
523534
>
524535
<HorizontallySymmetricalSafeAreaView
525536
style={{ alignItems: 'center', paddingTop: 12 }}
@@ -548,6 +559,7 @@ test('renders as expected without bottom padding', () => {
548559
flexGrow: 1,
549560
backgroundColor: 'yellow'
550561
}}
562+
disabled={false}
551563
>
552564
<HorizontallySymmetricalSafeAreaView
553565
style={{ alignItems: 'center', paddingTop: 12 }}
@@ -653,6 +665,7 @@ test('renders as expected without icon-text spacing', () => {
653665
flexGrow: 1,
654666
backgroundColor: 'yellow'
655667
}}
668+
disabled={false}
656669
>
657670
<HorizontallySymmetricalSafeAreaView
658671
style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -680,6 +693,7 @@ test('renders as expected without icon-text spacing', () => {
680693
flexGrow: 1,
681694
backgroundColor: 'purple'
682695
}}
696+
disabled={false}
683697
>
684698
<HorizontallySymmetricalSafeAreaView
685699
style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -707,6 +721,7 @@ test('renders as expected without icon-text spacing', () => {
707721
flexGrow: 1,
708722
backgroundColor: 'yellow'
709723
}}
724+
disabled={false}
710725
>
711726
<HorizontallySymmetricalSafeAreaView
712727
style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}
@@ -734,6 +749,7 @@ test('renders as expected without icon-text spacing', () => {
734749
flexGrow: 1,
735750
backgroundColor: 'yellow'
736751
}}
752+
disabled={false}
737753
>
738754
<HorizontallySymmetricalSafeAreaView
739755
style={{ alignItems: 'center', paddingTop: 12, paddingBottom: 5 }}

‎react-native/components/createButtonComponent/index.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -160,8 +160,6 @@ export const createButtonComponent = (
160160
})
161161

162162
const Button: React.FunctionComponent<ButtonProps> = ({ leftIcon, rightIcon, onPress, disabled, children }) => {
163-
disabled = disabled ?? false
164-
165163
const color = disabled
166164
? buttonStyle.disabled.color
167165
: buttonStyle.default.color

‎react-native/components/createButtonComponent/unit.tsx

-131
Original file line numberDiff line numberDiff line change
@@ -74,137 +74,6 @@ test('renders when enabled', () => {
7474
expect(onPress).not.toHaveBeenCalled()
7575
})
7676

77-
test('renders when enabled by not disabling', () => {
78-
const Component = createButtonComponent({
79-
fontFamily: 'Example Font Family',
80-
fontSize: 16,
81-
horizontalPadding: 10,
82-
verticalPadding: 2,
83-
iconSpacing: 7,
84-
default: {
85-
backgroundColor: 'yellow',
86-
color: 'blue',
87-
radius: 25,
88-
border: {
89-
width: 5,
90-
color: 'aquamarine'
91-
}
92-
},
93-
disabled: {
94-
backgroundColor: 'orange',
95-
color: 'purple',
96-
radius: 7,
97-
border: {
98-
width: 2,
99-
color: 'aquamarine'
100-
}
101-
}
102-
})
103-
const onPress = jest.fn()
104-
105-
const rendered = (
106-
<Component leftIcon={() => null} rightIcon={() => null} onPress={onPress}>
107-
Example Content
108-
</Component>
109-
)
110-
111-
expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
112-
<Hitbox
113-
disabled={false}
114-
onPress={onPress}
115-
style={{
116-
backgroundColor: 'yellow',
117-
borderRadius: 25,
118-
paddingHorizontal: 10,
119-
paddingVertical: 2,
120-
borderWidth: 5,
121-
borderColor: 'aquamarine',
122-
alignItems: 'center'
123-
}}
124-
>
125-
<Text
126-
style={{
127-
color: 'blue',
128-
fontFamily: 'Example Font Family',
129-
fontSize: 16,
130-
lineHeight: 22.4
131-
}}
132-
>
133-
Example Content
134-
</Text>
135-
</Hitbox>
136-
)
137-
expect(onPress).not.toHaveBeenCalled()
138-
})
139-
140-
test('renders when enabled by disabled being undefined', () => {
141-
const Component = createButtonComponent({
142-
fontFamily: 'Example Font Family',
143-
fontSize: 16,
144-
horizontalPadding: 10,
145-
verticalPadding: 2,
146-
iconSpacing: 7,
147-
default: {
148-
backgroundColor: 'yellow',
149-
color: 'blue',
150-
radius: 25,
151-
border: {
152-
width: 5,
153-
color: 'aquamarine'
154-
}
155-
},
156-
disabled: {
157-
backgroundColor: 'orange',
158-
color: 'purple',
159-
radius: 7,
160-
border: {
161-
width: 2,
162-
color: 'aquamarine'
163-
}
164-
}
165-
})
166-
const onPress = jest.fn()
167-
168-
const rendered = (
169-
<Component
170-
leftIcon={() => null}
171-
rightIcon={() => null}
172-
onPress={onPress}
173-
disabled={undefined}
174-
>
175-
Example Content
176-
</Component>
177-
)
178-
179-
expect(unwrapRenderedFunctionComponent(rendered)).toEqual(
180-
<Hitbox
181-
disabled={false}
182-
onPress={onPress}
183-
style={{
184-
backgroundColor: 'yellow',
185-
borderRadius: 25,
186-
paddingHorizontal: 10,
187-
paddingVertical: 2,
188-
borderWidth: 5,
189-
borderColor: 'aquamarine',
190-
alignItems: 'center'
191-
}}
192-
>
193-
<Text
194-
style={{
195-
color: 'blue',
196-
fontFamily: 'Example Font Family',
197-
fontSize: 16,
198-
lineHeight: 22.4
199-
}}
200-
>
201-
Example Content
202-
</Text>
203-
</Hitbox>
204-
)
205-
expect(onPress).not.toHaveBeenCalled()
206-
})
207-
20877
test('renders when disabled', () => {
20978
const Component = createButtonComponent({
21079
fontFamily: 'Example Font Family',

‎react-native/components/createCreatableSelectComponent/createCreatableSelectChildrenComponent/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ export const createCreatableSelectChildrenComponent = <
7171
'off',
7272
'default',
7373
'sentences',
74-
true,
7574
false,
7675
'left'
7776
)
@@ -225,6 +224,7 @@ export const createCreatableSelectChildrenComponent = <
225224
}
226225
}}
227226
context={null}
227+
autoFocus
228228
/>
229229
</View>
230230
)

0 commit comments

Comments
 (0)