Skip to content

Commit 7fd9ef8

Browse files
imdevanimdevan
authored
Merge pull request #10 from imdevan/update-example-app
2 parents ff8f6cc + c85052a commit 7fd9ef8

File tree

6 files changed

+155
-511
lines changed

6 files changed

+155
-511
lines changed

‎examples/App.tsx‎

Lines changed: 40 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
import React, { JSX, useState } from 'react';
2-
import { StyleSheet, Text, View, useColorScheme } from 'react-native';
3-
import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
4-
import JavascriptClassExample from './example-src-files/javascript-class-example';
5-
import JavascriptFunctionExample from './example-src-files/javascript-function-example';
6-
import TypescriptClassExample from './example-src-files/typescript-class-example';
7-
import TypescriptFunctionExample from './example-src-files/typescript-function-example';
1+
import React, { JSX } from 'react';
2+
import { StyleSheet, View, useColorScheme } from 'react-native';
83
import { GestureHandlerRootView } from 'react-native-gesture-handler';
4+
import DropDownPickerExample from './example-src-files/example';
95

106
enum ExampleComponent {
117
JavaScriptClassSingleValue,
@@ -21,90 +17,25 @@ enum ExampleComponent {
2117
const styles = StyleSheet.create({
2218
page: {
2319
flex: 1,
24-
justifyContent: 'center',
25-
alignItems: 'center',
26-
width: '100%',
27-
height: '100%',
2820
},
2921
container: {
3022
flexDirection: 'column',
3123
margin: 'auto',
32-
marginTop: 20,
24+
marginTop: 64,
25+
marginBottom: 64,
3326
padding: 3,
34-
maxWidth: 400,
27+
maxWidth: 600,
28+
minWidth: 400
3529
},
36-
});
37-
38-
const EXAMPLE_COMPONENT_ITEMS: Array<ItemType<ExampleComponent>> = [
39-
{
40-
label: 'JavaScript; class component; single-item',
41-
value: ExampleComponent.JavaScriptClassSingleValue,
42-
},
43-
{
44-
label: 'JavaScript; class component; multiple-item',
45-
value: ExampleComponent.JavaScriptClassMultiValue,
46-
},
47-
{
48-
label: 'JavaScript; function component; single-item',
49-
value: ExampleComponent.JavaScriptFunctionSingleValue,
50-
},
51-
{
52-
label: 'JavaScript; function component; multiple-item',
53-
value: ExampleComponent.JavaScriptFunctionMultiValue,
54-
},
55-
{
56-
label: 'TypeScript; class component; single-item',
57-
value: ExampleComponent.TypeScriptClassSingleValue,
58-
},
59-
{
60-
label: 'TypeScript; class component; multiple-item',
61-
value: ExampleComponent.TypeScriptClassMultiValue,
62-
},
63-
{
64-
label: 'TypeScript; function component; single-item',
65-
value: ExampleComponent.TypeScriptFunctionSingleValue,
66-
},
67-
{
68-
label: 'TypeScript; function component; multiple-item',
69-
value: ExampleComponent.TypeScriptFunctionMultiValue,
70-
},
71-
];
72-
73-
const getExample = (egComponent: ExampleComponent): JSX.Element => {
74-
switch (egComponent) {
75-
case ExampleComponent.JavaScriptClassSingleValue:
76-
return <JavascriptClassExample multiple={false} />;
77-
case ExampleComponent.JavaScriptClassMultiValue:
78-
return <JavascriptClassExample multiple />;
79-
case ExampleComponent.JavaScriptFunctionSingleValue:
80-
return <JavascriptFunctionExample multiple={false} />;
81-
case ExampleComponent.JavaScriptFunctionMultiValue:
82-
return <JavascriptFunctionExample multiple />;
83-
case ExampleComponent.TypeScriptClassSingleValue:
84-
return <TypescriptClassExample multiple={false} />;
85-
case ExampleComponent.TypeScriptClassMultiValue:
86-
return <TypescriptClassExample multiple />;
87-
case ExampleComponent.TypeScriptFunctionSingleValue:
88-
return <TypescriptFunctionExample multiple={false} />;
89-
case ExampleComponent.TypeScriptFunctionMultiValue:
90-
return <TypescriptFunctionExample multiple />;
91-
default:
92-
throw new Error(
93-
"couldn't match example component in getExample() in App.tsx. egComponent was: ",
94-
egComponent,
95-
);
30+
examplesContainer: {
31+
display: 'flex',
32+
flexDirection: 'column',
33+
justifyContent: 'flex-start',
34+
gap: 32
9635
}
97-
};
36+
});
9837

9938
export default function App(): JSX.Element {
100-
const [currentExample, setCurrentExample] = useState<ExampleComponent>(
101-
ExampleComponent.JavaScriptClassSingleValue
102-
);
103-
const [examplePickerOpen, setOpen] = useState<boolean>(false);
104-
const [exampleComponents] = useState<Array<ItemType<ExampleComponent>>>(
105-
EXAMPLE_COMPONENT_ITEMS
106-
);
107-
10839
const colorScheme = useColorScheme();
10940
const backgroundColor = colorScheme === 'dark' ? '#222' : '#fff';
11041

@@ -115,28 +46,37 @@ export default function App(): JSX.Element {
11546
backgroundColor,
11647
}}>
11748
<View style={styles.container}>
118-
<View style={{ marginBottom: 32 }}>
119-
<View style={{ marginBottom: 32 }}>
120-
<Text>Choose example:</Text>
121-
</View>
49+
<View style={styles.examplesContainer}>
50+
<DropDownPickerExample
51+
title="Default Example"
52+
description="This is the default dropdown picker"
53+
/>
54+
55+
<DropDownPickerExample
56+
title="Multiple Select"
57+
description="Multiple select example"
58+
multiple
59+
/>
60+
61+
<DropDownPickerExample
62+
title="Multiple Select Badge Mode"
63+
description="Multiple select example - with badges"
64+
multiple
65+
dropdownProps={{mode: "BADGE"}}
66+
/>
12267

123-
<View style={{ marginBottom: 32 }}>
124-
<DropDownPicker
125-
setValue={setCurrentExample}
126-
value={currentExample}
127-
items={exampleComponents}
128-
open={examplePickerOpen}
129-
setOpen={setOpen}
68+
<DropDownPickerExample
69+
title="Autoscroll Example"
70+
description="This is the default dropdown picker - with autoscroll"
71+
dropdownProps={{autoScroll: true}}
13072
/>
131-
</View>
132-
</View>
13373

134-
<View style={{ marginBottom: 32 }}>
135-
<View style={{ marginBottom: 32 }}>
136-
<Text>Example:</Text>
137-
</View>
13874

139-
{getExample(currentExample)}
75+
<DropDownPickerExample
76+
title="Searchable Example"
77+
description="This is the default dropdown picker - with search"
78+
dropdownProps={{searchable: true}}
79+
/>
14080
</View>
14181
</View>
14282
</View>

‎examples/example-src-files/example.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React, { useState } from 'react';
2+
import { StyleSheet, Button, Text, View, useColorScheme } from 'react-native';
3+
import DropDownPicker, { ItemType,DropDownPickerProps } from 'react-native-dropdown-picker';
4+
5+
type ExampleProps = {
6+
multiple?: boolean;
7+
title: string;
8+
description?: string;
9+
dropdownProps?: Partial<DropDownPickerProps<string>>;
10+
};
11+
12+
const styles = StyleSheet.create({
13+
title: {
14+
fontSize: 24,
15+
marginBottom: 4,
16+
fontWeight: 'bold',
17+
},
18+
description: {
19+
fontSize: 12,
20+
},
21+
exampleContainer: {
22+
display: 'flex',
23+
flexDirection: 'column',
24+
gap: 16
25+
}
26+
});
27+
28+
/**
29+
*
30+
* @param props
31+
* @param props.multiple
32+
*/
33+
export default function DropDownPickerExample({
34+
multiple = false,
35+
title,
36+
description,
37+
dropdownProps,
38+
}: ExampleProps): JSX.Element {
39+
const [open, setOpen] = useState<boolean>(false);
40+
const [singleValue, setSingleValue] = useState<string | null>(null);
41+
const [multiValue, setMultiValue] = useState<Array<string> | null>(null);
42+
const colorScheme = useColorScheme();
43+
const color = colorScheme === 'dark' ? '#fff' : '#222';
44+
const theme = colorScheme === 'dark' ? 'DARK' : 'LIGHT';
45+
46+
const [items, setItems] = useState<Array<ItemType<string>>>([
47+
{ label: 'Apple', value: 'apple' },
48+
{ label: 'Banana', value: 'banana' },
49+
{ label: 'Nectarines', value: 'nectarines' },
50+
{ label: 'Kiwis', value: 'kiwis' },
51+
{ label: 'Raspberries', value: 'raspberries' },
52+
{ label: 'Pears', value: 'pears' },
53+
]);
54+
55+
return (
56+
<View style={styles.exampleContainer}>
57+
<View>
58+
<Text style={{...styles.title, color}}>{title}</Text>
59+
{description && (
60+
<Text style={{...styles.description, color}}>{description}</Text>
61+
)}
62+
</View>
63+
64+
<View>
65+
{multiple ? (
66+
<DropDownPicker
67+
open={open}
68+
value={multiValue}
69+
items={items}
70+
setOpen={setOpen}
71+
setValue={setMultiValue}
72+
setItems={setItems}
73+
theme={theme}
74+
placeholder='Choose a fruit'
75+
multiple
76+
multipleText='You have chosen {count} fruits.'
77+
{...dropdownProps}
78+
/>
79+
) : (
80+
<DropDownPicker
81+
open={open}
82+
value={singleValue}
83+
items={items}
84+
setOpen={setOpen}
85+
setValue={setSingleValue}
86+
setItems={setItems}
87+
theme={theme}
88+
placeholder='Choose a fruit'
89+
multiple={false}
90+
{...dropdownProps}
91+
/>
92+
)}
93+
</View>
94+
95+
<View>
96+
<Text style={{...styles.description, color}}>
97+
{multiple ? 'Fruits currently are: ' : 'Fruit currently is: '}
98+
{multiple
99+
? JSON.stringify(multiValue)
100+
: JSON.stringify(singleValue)}
101+
</Text>
102+
</View>
103+
104+
<View>
105+
<Button
106+
title={multiple ? 'Clear fruits' : 'Clear fruit'}
107+
onPress={(): void => {
108+
if (multiple) setMultiValue(null);
109+
else setSingleValue(null);
110+
}}
111+
/>
112+
</View>
113+
</View>
114+
);
115+
}

0 commit comments

Comments
 (0)