Skip to content

Commit b070961

Browse files
YoussefHennaYoussefHenna
authored
Update Picker + Add Multiselect Picker component (47) (#769)
* Delete unused platform specific pickers * Cleaned up Picker code * Fix TextField failing test * More code cleanup and optimizations * Moved Picker text field/input into a seperate component * Add `react-native-dropdown-picker` * Initial implementation of DropDownPicker * Figured out how to render dropdown above sibling components * Update some default styling and icon usage * Finalized styling props + added multi select picker * Extract dropdown item styles to a seperate component * Final tweaks and fixes + update example * Fix ios picker issue * Fix another IOS issue * Fix web picker not disabling + update examples * Simplify theme in props * Added some tests for Picker * Update type of `error` * Remove outdated props * Small fix and adding of a comment * Simpilify finding the first picker item
1 parent b359de3 commit b070961

21 files changed

+880
-1138
lines changed

‎example/src/PickerExample.js‎

Lines changed: 0 additions & 225 deletions
This file was deleted.

‎example/src/PickerExample.tsx‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
import * as React from "react";
2+
import { Picker, MultiSelectPicker, PickerItem, withTheme } from "@draftbit/ui";
3+
import Section, { Container } from "./Section";
4+
5+
const OPTIONS = [
6+
{ value: "AudiValue", label: "Audi" },
7+
{ value: "BMWValue", label: "BMW" },
8+
{
9+
value: "CadillacValue",
10+
label: "Cadillac",
11+
},
12+
{ value: "DodgeValue", label: "Dodge" },
13+
{ value: "KiaValue", label: "Kia" },
14+
{ value: "HyundaiValue", label: "Hyundai" },
15+
];
16+
17+
function PickerExample() {
18+
const [value1, setValue] = React.useState("Audi");
19+
const [value3, setValue3] = React.useState(1);
20+
const [value4, setValue4] = React.useState<(string | number)[]>([]);
21+
22+
return (
23+
<Container style={{}}>
24+
{/* Dropdown and Multiselect Pickers placed outside Section to be able to draw over sibling components */}
25+
<Section style={{}} title="Picker - Dropdown">
26+
<></>
27+
</Section>
28+
<Picker
29+
label="Make"
30+
placeholder="Select a make..."
31+
options={OPTIONS}
32+
value={value1}
33+
mode="dropdown"
34+
onValueChange={(value) => setValue(value.toString())}
35+
style={{ marginBottom: 20 }}
36+
/>
37+
38+
<Section style={{}} title="Picker - Dropdown (customized item)">
39+
<></>
40+
</Section>
41+
<Picker
42+
label="Make"
43+
placeholder="Select a make..."
44+
options={OPTIONS}
45+
value={value1}
46+
mode="dropdown"
47+
onValueChange={(value) => setValue(value.toString())}
48+
style={{ marginBottom: 20 }}
49+
selectedIconColor="white"
50+
>
51+
<PickerItem
52+
style={{ color: "red", fontWeight: 600 }}
53+
selectedTextColor="white"
54+
selectedBackgroundColor="black"
55+
selectedTextSize={22}
56+
/>
57+
</Picker>
58+
59+
<Section style={{}} title="Multiselect Picker">
60+
<></>
61+
</Section>
62+
<MultiSelectPicker
63+
label="Make"
64+
placeholder="Select multiple makes"
65+
options={OPTIONS}
66+
value={value4}
67+
onValueChange={(value) => setValue4(value)}
68+
style={{ marginBottom: 20 }}
69+
/>
70+
71+
<Section style={{}} title="Picker - Underline">
72+
<Picker
73+
label="Make"
74+
placeholder="Select a make..."
75+
options={OPTIONS}
76+
value={value1}
77+
onValueChange={(value) => setValue(value.toString())}
78+
/>
79+
</Section>
80+
81+
<Section style={{}} title="Picker - Underline (Disabled)">
82+
<Picker
83+
label="Make"
84+
placeholder="Select a make..."
85+
options={OPTIONS}
86+
disabled
87+
value={value1}
88+
onValueChange={(value) => setValue(value.toString())}
89+
/>
90+
</Section>
91+
92+
<Section style={{}} title="Picker - Underline (Error)">
93+
<Picker
94+
label="Make"
95+
placeholder="Select a make..."
96+
options={OPTIONS}
97+
error
98+
value={value1}
99+
onValueChange={(value) => setValue(value.toString())}
100+
/>
101+
</Section>
102+
103+
<Section style={{}} title="Picker - Solid">
104+
<Picker
105+
label="Make"
106+
placeholder="Select a make..."
107+
type="solid"
108+
options={OPTIONS}
109+
value={value1}
110+
onValueChange={(value) => setValue(value.toString())}
111+
leftIconName={"AntDesign/caretleft"}
112+
leftIconMode="outset"
113+
/>
114+
</Section>
115+
116+
<Section style={{}} title="Picker - Solid (Disabled)">
117+
<Picker
118+
label="Make"
119+
placeholder="Select a make..."
120+
type="solid"
121+
options={OPTIONS}
122+
disabled
123+
value={value1}
124+
onValueChange={(value) => setValue(value.toString())}
125+
/>
126+
</Section>
127+
128+
<Section style={{}} title="Picker - Solid (Error)">
129+
<Picker
130+
label="Make"
131+
placeholder="Select a make..."
132+
type="solid"
133+
options={OPTIONS}
134+
error
135+
value={value1}
136+
onValueChange={(value) => setValue(value.toString())}
137+
/>
138+
</Section>
139+
140+
<Section style={{}} title="Picker - Solid with numeric values">
141+
<Picker
142+
label="Number"
143+
placeholder="Select a make..."
144+
type="solid"
145+
options={[
146+
{ value: 1, label: "One" },
147+
{ value: 2, label: "Two" },
148+
]}
149+
value={value3}
150+
onValueChange={(value) => setValue3(value as number)}
151+
/>
152+
</Section>
153+
</Container>
154+
);
155+
}
156+
157+
export default withTheme(PickerExample);

‎packages/core/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,13 @@
5252
"date-fns": "^2.16.1",
5353
"dateformat": "^3.0.3",
5454
"expo-av": "~13.0.3",
55+
"lodash.isequal": "^4.5.0",
5556
"lodash.isnumber": "^3.0.3",
5657
"lodash.omit": "^4.5.0",
5758
"lodash.tonumber": "^4.0.3",
5859
"react-native-confirmation-code-field": "^7.3.1",
5960
"react-native-deck-swiper": "^2.0.12",
61+
"react-native-dropdown-picker": "^5.4.6",
6062
"react-native-gesture-handler": "~2.8.0",
6163
"react-native-markdown-display": "^7.0.0-alpha.2",
6264
"react-native-modal-datetime-picker": "^13.0.0",

0 commit comments

Comments
 (0)