Skip to content

Commit db04a8f

Browse files
lukewalczaklukewalczak
authored
refactor: adjust searchbar to the latest md guidelines (#3582)
1 parent 0396b88 commit db04a8f

File tree

6 files changed

+577
-132
lines changed

6 files changed

+577
-132
lines changed

‎example/src/Examples/SearchbarExample.tsx

Lines changed: 221 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import * as React from 'react';
22
import { Keyboard, StyleSheet } from 'react-native';
33

4+
import type { DrawerNavigationProp } from '@react-navigation/drawer';
45
import type { StackNavigationProp } from '@react-navigation/stack';
5-
import { Caption, Searchbar, Text } from 'react-native-paper';
6+
import {
7+
List,
8+
MD3Colors,
9+
Searchbar,
10+
Snackbar,
11+
Avatar,
12+
} from 'react-native-paper';
613

714
import { useExampleTheme } from '..';
815
import ScreenWrapper from '../ScreenWrapper';
@@ -12,65 +19,228 @@ type Props = {
1219
};
1320

1421
const SearchExample = ({ navigation }: Props) => {
15-
const [firstQuery, setFirstQuery] = React.useState<string>('');
16-
const [secondQuery, setSecondQuery] = React.useState<string>('');
17-
const [thirdQuery, setThirdQuery] = React.useState<string>('');
18-
const [fourthQuery, setFourthQuery] = React.useState<string>('');
22+
const [isVisible, setIsVisible] = React.useState(false);
23+
const [searchQueries, setSearchQuery] = React.useState({
24+
searchBarMode: '',
25+
traileringIcon: '',
26+
traileringIconWithRightItem: '',
27+
rightItem: '',
28+
loadingBarMode: '',
29+
searchViewMode: '',
30+
searchWithoutBottomLine: '',
31+
loadingViewMode: '',
32+
clickableBack: '',
33+
clickableDrawer: '',
34+
clickableLoading: '',
35+
});
1936

20-
const { isV3 } = useExampleTheme();
21-
22-
const TextComponent = isV3 ? Text : Caption;
37+
const { isV3, colors } = useExampleTheme();
2338

2439
return (
25-
<ScreenWrapper>
26-
<Searchbar
27-
placeholder="Search"
28-
onChangeText={(query: string) => setFirstQuery(query)}
29-
value={firstQuery}
30-
style={styles.searchbar}
31-
/>
32-
<TextComponent variant="bodySmall" style={styles.caption}>
33-
Clickable icon
34-
</TextComponent>
35-
<Searchbar
36-
placeholder="Search"
37-
onChangeText={(query: string) => setSecondQuery(query)}
38-
value={secondQuery}
39-
onIconPress={() => navigation.goBack()}
40-
icon={{ source: 'arrow-left', direction: 'auto' }}
41-
style={styles.searchbar}
42-
/>
43-
<Searchbar
44-
placeholder="Search"
45-
onChangeText={(query: string) => setThirdQuery(query)}
46-
value={thirdQuery}
47-
onIconPress={/* In real code, this will open the drawer */ () => {}}
48-
onClearIconPress={
49-
/* delete query text (default behavior) and dismiss keyboard */ () =>
50-
Keyboard.dismiss()
51-
}
52-
icon="menu"
53-
style={styles.searchbar}
54-
/>
55-
56-
<Searchbar
57-
placeholder="Search"
58-
onChangeText={(query: string) => setFourthQuery(query)}
59-
value={fourthQuery}
60-
loading
61-
style={styles.searchbar}
62-
/>
63-
</ScreenWrapper>
40+
<>
41+
<ScreenWrapper>
42+
{!isV3 && (
43+
<Searchbar
44+
placeholder="Search"
45+
onChangeText={(query) =>
46+
setSearchQuery({ ...searchQueries, searchBarMode: query })
47+
}
48+
value={searchQueries.searchBarMode}
49+
style={styles.searchbar}
50+
/>
51+
)}
52+
{isV3 && (
53+
<List.Section title="Bar mode">
54+
<Searchbar
55+
placeholder="Search"
56+
onChangeText={(query) =>
57+
setSearchQuery({ ...searchQueries, searchBarMode: query })
58+
}
59+
value={searchQueries.searchBarMode}
60+
style={styles.searchbar}
61+
mode="bar"
62+
/>
63+
<Searchbar
64+
placeholder="Trailering icon"
65+
onChangeText={(query) =>
66+
setSearchQuery({ ...searchQueries, traileringIcon: query })
67+
}
68+
value={searchQueries.traileringIcon}
69+
traileringIcon={'microphone'}
70+
traileringIconColor={
71+
isVisible ? MD3Colors.error40 : colors.onSurfaceVariant
72+
}
73+
traileringIconAccessibilityLabel={'microphone button'}
74+
onTraileringIconPress={() => setIsVisible(true)}
75+
style={styles.searchbar}
76+
mode="bar"
77+
/>
78+
<Searchbar
79+
mode="bar"
80+
placeholder="Trailering icon with right item"
81+
onChangeText={(query) =>
82+
setSearchQuery({
83+
...searchQueries,
84+
traileringIconWithRightItem: query,
85+
})
86+
}
87+
value={searchQueries.traileringIconWithRightItem}
88+
traileringIcon={'microphone'}
89+
traileringIconColor={
90+
isVisible ? MD3Colors.error40 : colors.onSurfaceVariant
91+
}
92+
traileringIconAccessibilityLabel={'microphone button'}
93+
onTraileringIconPress={() => setIsVisible(true)}
94+
right={(props) => (
95+
<Avatar.Image
96+
{...props}
97+
size={30}
98+
source={require('../../assets/images/avatar.png')}
99+
/>
100+
)}
101+
style={styles.searchbar}
102+
/>
103+
<Searchbar
104+
mode="bar"
105+
placeholder="Right item"
106+
onChangeText={(query) =>
107+
setSearchQuery({
108+
...searchQueries,
109+
rightItem: query,
110+
})
111+
}
112+
value={searchQueries.rightItem}
113+
right={(props) => (
114+
<Avatar.Image
115+
{...props}
116+
size={30}
117+
source={require('../../assets/images/avatar.png')}
118+
/>
119+
)}
120+
style={styles.searchbar}
121+
/>
122+
<Searchbar
123+
placeholder="Loading"
124+
onChangeText={(query) =>
125+
setSearchQuery({
126+
...searchQueries,
127+
loadingBarMode: query,
128+
})
129+
}
130+
value={searchQueries.loadingBarMode}
131+
style={styles.searchbar}
132+
mode="bar"
133+
loading
134+
traileringIcon={'microphone'}
135+
/>
136+
</List.Section>
137+
)}
138+
{isV3 && (
139+
<List.Section title="View mode">
140+
<Searchbar
141+
placeholder="Search"
142+
onChangeText={(query) =>
143+
setSearchQuery({
144+
...searchQueries,
145+
searchViewMode: query,
146+
})
147+
}
148+
value={searchQueries.searchViewMode}
149+
style={styles.searchbar}
150+
mode="view"
151+
/>
152+
<Searchbar
153+
placeholder="Search without bottom line"
154+
onChangeText={(query) =>
155+
setSearchQuery({
156+
...searchQueries,
157+
searchWithoutBottomLine: query,
158+
})
159+
}
160+
value={searchQueries.searchWithoutBottomLine}
161+
style={styles.searchbar}
162+
mode="view"
163+
showDivider={false}
164+
/>
165+
<Searchbar
166+
placeholder="Loading"
167+
onChangeText={(query) =>
168+
setSearchQuery({
169+
...searchQueries,
170+
loadingViewMode: query,
171+
})
172+
}
173+
value={searchQueries.loadingViewMode}
174+
style={styles.searchbar}
175+
mode="view"
176+
loading
177+
/>
178+
</List.Section>
179+
)}
180+
<List.Section title="Clickable icon">
181+
<Searchbar
182+
placeholder="Search"
183+
onChangeText={(query) =>
184+
setSearchQuery({
185+
...searchQueries,
186+
clickableBack: query,
187+
})
188+
}
189+
value={searchQueries.clickableBack}
190+
onIconPress={() => {
191+
Keyboard.dismiss();
192+
navigation.goBack();
193+
}}
194+
onClearIconPress={() => {
195+
Keyboard.dismiss();
196+
}}
197+
icon={{ source: 'arrow-left', direction: 'auto' }}
198+
style={styles.searchbar}
199+
/>
200+
<Searchbar
201+
placeholder="Search"
202+
onChangeText={(query) =>
203+
setSearchQuery({
204+
...searchQueries,
205+
clickableDrawer: query,
206+
})
207+
}
208+
value={searchQueries.clickableDrawer}
209+
onIconPress={() => {
210+
Keyboard.dismiss();
211+
(navigation as any as DrawerNavigationProp<{}>).openDrawer();
212+
}}
213+
icon="menu"
214+
style={styles.searchbar}
215+
/>
216+
<Searchbar
217+
placeholder="Search"
218+
onChangeText={(query) =>
219+
setSearchQuery({
220+
...searchQueries,
221+
clickableLoading: query,
222+
})
223+
}
224+
value={searchQueries.clickableLoading}
225+
loading
226+
style={styles.searchbar}
227+
/>
228+
</List.Section>
229+
</ScreenWrapper>
230+
<Snackbar
231+
visible={isVisible}
232+
onDismiss={() => setIsVisible(false)}
233+
duration={Snackbar.DURATION_SHORT}
234+
>
235+
Microphone button pressed
236+
</Snackbar>
237+
</>
64238
);
65239
};
66240

67241
SearchExample.title = 'Searchbar';
68242

69243
const styles = StyleSheet.create({
70-
caption: {
71-
paddingHorizontal: 16,
72-
paddingVertical: 8,
73-
},
74244
searchbar: {
75245
margin: 4,
76246
},

‎example/src/ScreenWrapper.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default function ScreenWrapper({
4646
<ScrollView
4747
{...rest}
4848
contentContainerStyle={contentContainerStyle}
49+
keyboardShouldPersistTaps="always"
4950
alwaysBounceVertical={false}
5051
showsVerticalScrollIndicator={false}
5152
style={[containerStyle, style]}

0 commit comments

Comments
 (0)