Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Picker + Add Multiselect Picker component #751

Merged
merged 27 commits into from
Sep 5, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
e235321
Delete unused platform specific pickers
YoussefHenna Jul 27, 2023
4e0954a
Cleaned up Picker code
YoussefHenna Jul 27, 2023
4bcd843
Merge branch 'master' into youssef/p-3786-update-picker-component
YoussefHenna Jul 27, 2023
a803560
Fix TextField failing test
YoussefHenna Jul 27, 2023
44f6831
Merge branch 'master' into youssef/p-3786-update-picker-component
YoussefHenna Aug 14, 2023
e7b076f
More code cleanup and optimizations
YoussefHenna Aug 14, 2023
1c5cd59
Moved Picker text field/input into a seperate component
YoussefHenna Aug 14, 2023
49f1c9d
Add `react-native-dropdown-picker`
YoussefHenna Aug 14, 2023
cfd0d9d
Merge branch 'master' into youssef/p-3786-update-picker-component
YoussefHenna Aug 15, 2023
ffc8ef9
Initial implementation of DropDownPicker
YoussefHenna Aug 15, 2023
fa9c524
Figured out how to render dropdown above sibling components
YoussefHenna Aug 17, 2023
78e2fa8
Update some default styling and icon usage
YoussefHenna Aug 17, 2023
8ba2520
Finalized styling props + added multi select picker
YoussefHenna Aug 20, 2023
04f6437
Merge branch 'master' into youssef/p-3786-update-picker-component
YoussefHenna Aug 20, 2023
eba15bd
Merge branch 'master' into youssef/p-3786-update-picker-component
YoussefHenna Aug 27, 2023
2415455
Extract dropdown item styles to a seperate component
YoussefHenna Aug 27, 2023
c9bd878
Final tweaks and fixes + update example
YoussefHenna Aug 27, 2023
017e5ef
Fix ios picker issue
YoussefHenna Aug 27, 2023
9db2847
Fix another IOS issue
YoussefHenna Aug 27, 2023
cc693c8
Fix web picker not disabling + update examples
YoussefHenna Aug 27, 2023
f4d05d7
Simplify theme in props
YoussefHenna Aug 27, 2023
13ba1e6
Added some tests for Picker
YoussefHenna Aug 28, 2023
a793dff
Update type of `error`
YoussefHenna Aug 28, 2023
683bb2a
Remove outdated props
YoussefHenna Aug 28, 2023
beeab9d
Small fix and adding of a comment
YoussefHenna Aug 29, 2023
dafaec9
Simpilify finding the first picker item
YoussefHenna Sep 5, 2023
59d567f
Merge branch 'master' into youssef/p-3786-update-picker-component
YoussefHenna Sep 5, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
225 changes: 0 additions & 225 deletions example/src/PickerExample.js

This file was deleted.

157 changes: 157 additions & 0 deletions example/src/PickerExample.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
import * as React from "react";
import { Picker, MultiSelectPicker, PickerItem, withTheme } from "@draftbit/ui";
import Section, { Container } from "./Section";

const OPTIONS = [
{ value: "AudiValue", label: "Audi" },
{ value: "BMWValue", label: "BMW" },
{
value: "CadillacValue",
label: "Cadillac",
},
{ value: "DodgeValue", label: "Dodge" },
{ value: "KiaValue", label: "Kia" },
{ value: "HyundaiValue", label: "Hyundai" },
];

function PickerExample() {
const [value1, setValue] = React.useState("Audi");
const [value3, setValue3] = React.useState(1);
const [value4, setValue4] = React.useState<(string | number)[]>([]);

return (
<Container style={{}}>
{/* Dropdown and Multiselect Pickers placed outside Section to be able to draw over sibling components */}
<Section style={{}} title="Picker - Dropdown">
<></>
</Section>
<Picker
label="Make"
placeholder="Select a make..."
options={OPTIONS}
value={value1}
mode="dropdown"
onValueChange={(value) => setValue(value.toString())}
style={{ marginBottom: 20 }}
/>

<Section style={{}} title="Picker - Dropdown (customized item)">
<></>
</Section>
<Picker
label="Make"
placeholder="Select a make..."
options={OPTIONS}
value={value1}
mode="dropdown"
onValueChange={(value) => setValue(value.toString())}
style={{ marginBottom: 20 }}
selectedIconColor="white"
>
<PickerItem
style={{ color: "red", fontWeight: 600 }}
selectedTextColor="white"
selectedBackgroundColor="black"
selectedTextSize={22}
/>
</Picker>

<Section style={{}} title="Multiselect Picker">
<></>
</Section>
<MultiSelectPicker
label="Make"
placeholder="Select multiple makes"
options={OPTIONS}
value={value4}
onValueChange={(value) => setValue4(value)}
style={{ marginBottom: 20 }}
/>

<Section style={{}} title="Picker - Underline">
<Picker
label="Make"
placeholder="Select a make..."
options={OPTIONS}
value={value1}
onValueChange={(value) => setValue(value.toString())}
/>
</Section>

<Section style={{}} title="Picker - Underline (Disabled)">
<Picker
label="Make"
placeholder="Select a make..."
options={OPTIONS}
disabled
value={value1}
onValueChange={(value) => setValue(value.toString())}
/>
</Section>

<Section style={{}} title="Picker - Underline (Error)">
<Picker
label="Make"
placeholder="Select a make..."
options={OPTIONS}
error
value={value1}
onValueChange={(value) => setValue(value.toString())}
/>
</Section>

<Section style={{}} title="Picker - Solid">
<Picker
label="Make"
placeholder="Select a make..."
type="solid"
options={OPTIONS}
value={value1}
onValueChange={(value) => setValue(value.toString())}
leftIconName={"AntDesign/caretleft"}
leftIconMode="outset"
/>
</Section>

<Section style={{}} title="Picker - Solid (Disabled)">
<Picker
label="Make"
placeholder="Select a make..."
type="solid"
options={OPTIONS}
disabled
value={value1}
onValueChange={(value) => setValue(value.toString())}
/>
</Section>

<Section style={{}} title="Picker - Solid (Error)">
<Picker
label="Make"
placeholder="Select a make..."
type="solid"
options={OPTIONS}
error
value={value1}
onValueChange={(value) => setValue(value.toString())}
/>
</Section>

<Section style={{}} title="Picker - Solid with numeric values">
<Picker
label="Number"
placeholder="Select a make..."
type="solid"
options={[
{ value: 1, label: "One" },
{ value: 2, label: "Two" },
]}
value={value3}
onValueChange={(value) => setValue3(value as number)}
/>
</Section>
</Container>
);
}

export default withTheme(PickerExample);
2 changes: 2 additions & 0 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,13 @@
"date-fns": "^2.16.1",
"dateformat": "^3.0.3",
"expo-av": "~13.2.1",
"lodash.isequal": "^4.5.0",
"lodash.isnumber": "^3.0.3",
"lodash.omit": "^4.5.0",
"lodash.tonumber": "^4.0.3",
"react-native-confirmation-code-field": "^7.3.1",
"react-native-deck-swiper": "^2.0.12",
"react-native-dropdown-picker": "^5.4.6",
"react-native-gesture-handler": "~2.9.0",
"react-native-markdown-display": "^7.0.0-alpha.2",
"react-native-modal-datetime-picker": "^13.0.0",
Expand Down
Loading
Loading