Skip to content

Commit 6c827b8

Browse files
Karthik-B-06Karthik-B-06
authored
Merge pull request #85 from adaptui/select-component
2 parents 8a6bb8e + 7845b73 commit 6c827b8

File tree

9 files changed

+426
-159
lines changed

9 files changed

+426
-159
lines changed

‎docs/select.md‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
# Select
2+
3+
Adapt UI provides one theme for `Select` components with four styles and seven interaction states.
4+
5+
![simulator_screenshot_8A5D0D6E-7D61-4E89-925D-758D9C50D554](https://user-images.githubusercontent.com/35562287/202125786-e9626cb0-7298-462e-8e21-9a7748429bff.png)
6+
7+
8+
#### Simple Usage
9+
10+
```js
11+
import { Select } from "@adaptui/react-native-tailwind";
12+
13+
const themes: ItemData[] = [
14+
{ value: "system", label: "System" },
15+
{ value: "dark", label: "Dark" },
16+
{ value: "light", label: "Light" },
17+
];
18+
19+
export default function App() {
20+
return <Select options={themes} placeholder="Select theme" />;
21+
}
22+
```
23+
24+
## Table of Contents
25+
26+
- [Themes](#themes)
27+
- [Variant](#variant)
28+
- [Size](#size)
29+
- [Prefix](#prefix)
30+
- [Props](#props)
31+
32+
## Themes
33+
34+
Adapt UI provides only one `base` theme. You can add more themes by adding new variants and new design tokens if needed.
35+
36+
![simulator_screenshot_0998EA14-DD2E-4848-8ABF-ABBDE1981DDC](https://user-images.githubusercontent.com/35562287/202126465-3ee5aa8b-818b-4683-a7d7-80ad56734d85.png)
37+
38+
<details>
39+
40+
<summary>
41+
<h3>Usage</h3>
42+
</summary>
43+
44+
```js
45+
import { Select, useTheme } from "@adaptui/react-native-tailwind"
46+
47+
export default function App() {
48+
const tailwind = useTheme();
49+
return (
50+
<>
51+
<Select
52+
style={tailwind.style("w-60")}
53+
variant="subtle"
54+
size="xl"
55+
placeholder="Select a payment mode"
56+
/>
57+
</>
58+
)
59+
}
60+
```
61+
</details>
62+
63+
## Variant
64+
65+
Adapt UI provides four select component styles: `outline`, `subtle`, `underline`, and `ghost`.
66+
You can use these various styled select components based on the necessity and style you wish to provide to your design.
67+
68+
![simulator_screenshot_E4CD1FC3-B47A-4E7B-9FE9-8A142608D856](https://user-images.githubusercontent.com/35562287/202127995-45a517ee-b7cb-4fcd-b88e-67aafabf0993.png)
69+
70+
<details>
71+
<summary>
72+
<h3>Usage</h3>
73+
</summary>
74+
75+
```js
76+
import { Select, useTheme } from "@adaptui/react-native-tailwind"
77+
78+
export default function App() {
79+
const tailwind = useTheme();
80+
return (
81+
<>
82+
<Select placeholder="Select a payment mode" />;
83+
<Select variant="subtle" placeholder="Select theme" />;
84+
<Select variant="underline" placeholder="Select an option" />;
85+
<Select variant="ghost" placeholder="Toggle list" />;
86+
87+
</>
88+
)
89+
}
90+
```
91+
</details>
92+
93+
## Size
94+
95+
There are four different sizes for select components in Adapt UI. Based on your requirement, you can switch between different sizes.
96+
97+
![simulator_screenshot_F714FF22-4994-4635-BB23-9E0CF9ABF812](https://user-images.githubusercontent.com/35562287/202128316-6400bde3-81f4-4f52-852c-284a99294642.png)
98+
99+
<details>
100+
<summary>
101+
<h3>Usage</h3>
102+
</summary>
103+
104+
```js
105+
import { Select, useTheme } from "@adaptui/react-native-tailwind";
106+
107+
export default function App() {
108+
const tailwind = useTheme();
109+
return (
110+
<>
111+
<Select size="sm" placeholder="Select gender" />
112+
<Select placeholder="Select gender" />
113+
<Select size="lg" placeholder="Select gender" />
114+
<Select size="xl" placeholder="Select gender" />
115+
</>
116+
);
117+
}
118+
```
119+
120+
</details>
121+
122+
## Prefix
123+
124+
The prefix is a slot at the beginning or prefix position of a component. Here in the select, the prefix slot can be used to bring icons. Prefix itself doesn't have any unique property.
125+
126+
Here in the select, we have an icon in the prefix slot. You can change the icon by passing an <Icon /> component to prefix prop.
127+
128+
![simulator_screenshot_45A7B053-DCC8-49D5-9AE9-EA0042DC3772](https://user-images.githubusercontent.com/35562287/202129117-d1e065d3-3c0c-496d-9b18-8365ff8afe19.png)
129+
130+
<details>
131+
<summary>
132+
<h3>Usage</h3>
133+
</summary>
134+
135+
```js
136+
import { Select, useTheme } from "@adaptui/react-native-tailwind";
137+
138+
export default function App() {
139+
const tailwind = useTheme();
140+
return (
141+
<>
142+
<Select size="xl" placeholder="Pick a date" />
143+
<Select size="xl" placeholder="Sandeep Prabhakaran" />
144+
</>
145+
);
146+
}
147+
```
148+
149+
</details>
150+
151+
## Props
152+
153+
154+
> Select implements Touchable accepting all `PressableProps`
155+
156+
| Name | Description | Type | Default |
157+
|---------------|------------------------------------------------------------------------|--------------------------------------------|-----------------|
158+
| options | The Select Component options, which is rendered inside the Bottomsheet | ItemData[]* | |
159+
| defaultState | Default value of Select when it is uncontrolled | string | |
160+
| state | Value of Select when it is controlled | string | |
161+
| onStateChange | Callback called with the new value when it changes | (val: string) => void | |
162+
| placeholder | Default placeholder valye | string | "Select option" |
163+
| size | How large should the select be? | `sm`, `md`, `lg`, `xl` | `md` |
164+
| variant | How the select should look? | `outline`, `subtle`, `underline` , `ghost` | `outline` |
165+
| prefix | Prefix for the Select. | RenderPropType | null |
166+
| suffix | Suffix for the Select. | RenderPropType | null |
167+
| invalid | Set to True, if the value of the Select is invalid. | boolean | false |
168+
| disabled | Set to True, if the value of the Select is disabled. | boolean | false |
169+
| snapPoints | Bottomsheet Snap points | string[] | ["50%"] |

‎example/src/modules/forms/SelectScreen.tsx‎

Lines changed: 94 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import {
33
Box,
4+
CaretDown,
5+
Icon,
46
ItemData,
7+
Radio,
8+
RadioGroup,
59
Select,
10+
SelectSizes,
11+
SelectVariants,
12+
Slot,
13+
Switch,
14+
UpDownArrow,
615
useTheme,
716
} from "@adaptui/react-native-tailwind";
817
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
@@ -68,34 +77,93 @@ const options: ItemData[] = [
6877

6978
export const SelectScreen = () => {
7079
const tailwind = useTheme();
80+
const [selectedSize, setSelectedSize] = useState<SelectSizes>("md");
81+
const [selectedVariant, setSelectedVariant] =
82+
useState<SelectVariants>("outline");
83+
84+
const [isSelectInvalid, setIsSelectInvalid] = useState<boolean>(false);
85+
const [isSelectDisabled, setIsSelectDisabled] = useState<boolean>(false);
86+
const [hasPrefix, setHasPrefix] = useState<boolean>(false);
87+
88+
const [changeSuffix, setChangeSuffix] = useState(false);
7189

7290
return (
73-
<Box style={tailwind.style("flex-1 px-2 justify-center bg-white-900")}>
91+
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
7492
<BottomSheetModalProvider>
75-
<Select
76-
style={tailwind.style("my-1")}
77-
size="sm"
78-
options={options}
79-
placeholder="Select fruit"
80-
/>
81-
<Select
82-
style={tailwind.style("my-1")}
83-
size="md"
84-
options={options}
85-
placeholder="Select fruit"
86-
/>
87-
<Select
88-
style={tailwind.style("my-1")}
89-
size="lg"
90-
options={options}
91-
placeholder="Select fruit"
92-
/>
93-
<Select
94-
style={tailwind.style("my-1")}
95-
size="xl"
96-
options={options}
97-
placeholder="Select fruit"
98-
/>
93+
<Box style={tailwind.style("flex-1 px-2 justify-center")}>
94+
<Select
95+
size={selectedSize}
96+
variant={selectedVariant}
97+
invalid={isSelectInvalid}
98+
disabled={isSelectDisabled}
99+
options={options}
100+
placeholder="Select fruit"
101+
prefix={hasPrefix ? <Icon icon={<Slot />} /> : null}
102+
suffix={
103+
<Icon icon={changeSuffix ? <CaretDown /> : <UpDownArrow />} />
104+
}
105+
/>
106+
</Box>
107+
<Box
108+
style={tailwind.style(
109+
"py-2 rounded-t-lg shadow-lg bg-gray-100 justify-end items-center",
110+
)}
111+
>
112+
<RadioGroup
113+
value={selectedSize}
114+
onChange={value => setSelectedSize(value as SelectSizes)}
115+
orientation="horizontal"
116+
>
117+
<Radio value="sm" label="sm" />
118+
<Radio value="md" label="md" />
119+
<Radio value="lg" label="lg" />
120+
<Radio value="xl" label="xl" />
121+
</RadioGroup>
122+
<RadioGroup
123+
value={selectedVariant}
124+
onChange={value => setSelectedVariant(value as SelectVariants)}
125+
orientation="horizontal"
126+
>
127+
<Radio value="outline" label="outline" />
128+
<Radio value="subtle" label="subtle" />
129+
<Radio value="underline" label="underline" />
130+
<Radio value="ghost" label="ghost" />
131+
</RadioGroup>
132+
<Box
133+
style={tailwind.style(
134+
"flex flex-row justify-center flex-wrap w-full",
135+
)}
136+
>
137+
<Switch
138+
state={isSelectInvalid}
139+
onStateChange={value => setIsSelectInvalid(value)}
140+
size="md"
141+
label="Invalid"
142+
style={tailwind.style("mt-1")}
143+
/>
144+
<Switch
145+
state={isSelectDisabled}
146+
onStateChange={value => setIsSelectDisabled(value)}
147+
size="md"
148+
style={tailwind.style("ml-1 mt-1")}
149+
label="Disabled"
150+
/>
151+
<Switch
152+
state={hasPrefix}
153+
onStateChange={value => setHasPrefix(value)}
154+
size="md"
155+
style={tailwind.style("ml-1 mt-1")}
156+
label="Prefix"
157+
/>
158+
<Switch
159+
state={changeSuffix}
160+
onStateChange={value => setChangeSuffix(value)}
161+
size="md"
162+
style={tailwind.style("ml-1 mt-1")}
163+
label="Change suffix"
164+
/>
165+
</Box>
166+
</Box>
99167
</BottomSheetModalProvider>
100168
</Box>
101169
);

0 commit comments

Comments
 (0)