Skip to content

Commit f4cbca2

Browse files
pinarkizilarslanpinarkizilarslan
committed
feat(selectBottomSheet): added SelectBottomSheet component
1 parent 09359c2 commit f4cbca2

10 files changed

Lines changed: 1762 additions & 0 deletions

File tree

‎.storybook/preview.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export const parameters: Parameters = {
5959
'Input',
6060
'Modal',
6161
'RadioButton',
62+
'SelectBottomSheet',
6263
'Spinner',
6364
'Switch',
6465
'Tabs',

‎.storybook/storybook.requires.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const getStories = () => {
2828
require('../src/components/Alert/Alert.stories.tsx'),
2929
require('../src/components/Badge/Badge.stories.tsx'),
3030
require('../src/components/BottomSheet/BottomSheet.stories.tsx'),
31+
require('../src/components/SelectBottomSheet/SelectBottomSheet.stories.tsx'),
3132
require('../src/components/Box/Box.stories.tsx'),
3233
require('../src/components/Button/Button.stories.tsx'),
3334
require('../src/components/Checkbox/Checkbox.stories.tsx'),

‎docs/stories/assets/selectbottomsheet/SelectBottomSheetWithCheckbox.png‎

80.8 KB
Loading

‎docs/stories/assets/selectbottomsheet/SelectBottomSheetWithRadioButton.png‎

83.6 KB
Loading

‎docs/stories/components/selectbottomsheet.stories.mdx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
import SelectBottomSheetWithCheckbox from '../assets/selectbottomsheet/SelectBottomSheetWithCheckbox.png';
3+
import SelectBottomSheetWithRadioButton from '../assets/selectbottomsheet/SelectBottomSheetWithRadioButton.png';
4+
5+
<Meta
6+
title="Components/SelectBottomSheet"
7+
parameters={{
8+
viewMode: 'docs',
9+
previewTabs: {
10+
canvas: {
11+
hidden: true,
12+
},
13+
},
14+
}}
15+
/>
16+
17+
# SelectBottomSheet
18+
19+
Select component uses the Bottom Sheet component for listing the selectable (single and multi selection) options.
20+
21+
<div
22+
style={{
23+
display: 'flex',
24+
flexWrap: 'wrap',
25+
justifyContent: 'center',
26+
}}>
27+
<img src={SelectBottomSheetWithCheckbox} width="250" alt="SelectBottomSheetWithCheckbox" />
28+
<img src={SelectBottomSheetWithRadioButton} width="250" alt="SelectBottomSheetWithRadioButton" />
29+
</div>
30+
31+
<br/>
32+
<br/>
33+
34+
## Provider
35+
Developed using Portal for easy use of Component.
36+
There is no direct portal solution in React Native as <a href="https://legacy.reactjs.org/docs/portals.html" title="title">React Portal</a>.
37+
We use the https://github.com/gorhom/react-native-portal.
38+
39+
Make sure to add `PortalProvider` in your root view.
40+
41+
```jsx
42+
import * as React from 'react';
43+
import { theme, ThemeProvider, PortalProvider } from '@trendyol/baklava-react-native';
44+
import App from './src/App';
45+
46+
export default function Main() {
47+
return (
48+
<ThemeProvider theme={theme}>
49+
<PortalProvider>
50+
<App />
51+
</PortalProvider>
52+
</ThemeProvider>
53+
);
54+
}
55+
```
56+
57+
## Usage
58+
59+
```jsx
60+
<SelectBottomSheet
61+
visible={isVisible}
62+
type="checkbox"
63+
selectButtonLabel="Select"
64+
closeButtonLabel="Close"
65+
title="Select Options"
66+
closeButtonAction={() => setVisible(false)}
67+
selectButtonAction={() => {
68+
showAlert(selectedOptions);
69+
setVisible(false);
70+
}}
71+
options={options}
72+
selectedOption={selectedOptions}
73+
onSelect={handleMultiSelect}
74+
/>
75+
```
76+
77+
<br />
78+
79+
## Props
80+
81+
### options (required)
82+
83+
Type: `Option[]`
84+
85+
### type (required)
86+
87+
Type: `'checkbox' | 'radio'`
88+
89+
### onSelect (required)
90+
91+
Type: `Function`
92+
93+
### selectedOption
94+
95+
Type: `string[]`
96+
97+
### maxVisibleItems
98+
99+
Type: `number`
100+
101+
### ...bottomSheetProps
102+
103+
Type: `BottomSheetProps`
104+
105+
<>
106+
<a href="https://trendyol.github.io/baklava-react-native/?path=/docs/components-bottomsheet--page" title="title">
107+
...BottomSheet props
108+
</a>
109+
</>

‎src/components/SelectBottomSheet/SelectBottomSheet.stories.tsx‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import React from 'react';
2+
import { ComponentStory, ComponentMeta } from '@storybook/react';
3+
import { Alert } from 'react-native';
4+
import SelectBottomSheet from './SelectBottomSheet';
5+
import Text from '../Text/Text';
6+
import Button from '../Button/Button';
7+
import Box from '../Box/Box';
8+
9+
const typeList = ['checkbox', 'radio'];
10+
11+
const SelectBottomSheetMeta: ComponentMeta<typeof SelectBottomSheet> = {
12+
title: 'SelectBottomSheet',
13+
component: SelectBottomSheet,
14+
argTypes: {
15+
type: typeList,
16+
options: {
17+
id: '1',
18+
label: 'Option',
19+
},
20+
},
21+
args: {
22+
visible: true,
23+
type: 'checkbox',
24+
selectButtonLabel: 'Select',
25+
closeButtonLabel: 'Close',
26+
title: 'Select Options',
27+
options: [
28+
{ id: '1', label: 'Option 1' },
29+
{ id: '2', label: 'Option 2' },
30+
{ id: '3', label: 'Option 3' },
31+
],
32+
},
33+
};
34+
35+
export default SelectBottomSheetMeta;
36+
37+
type SelectBottomSheetStory = ComponentStory<typeof SelectBottomSheet>;
38+
39+
export const Basic: SelectBottomSheetStory = args => (
40+
<Box borderRadius="l" p="m">
41+
<Text variant="subtitle1Bold" mb="l">
42+
Select Bottom Sheet
43+
</Text>
44+
45+
<SelectBottomSheet
46+
visible={args.visible}
47+
type={args.type}
48+
selectButtonLabel="Select"
49+
closeButtonLabel="Close"
50+
title="Select Options"
51+
options={args.options}
52+
onSelect={() => {}}
53+
/>
54+
</Box>
55+
);
56+
57+
export const Checkbox: SelectBottomSheetStory = () => {
58+
const [modal, showModal] = React.useState(false);
59+
const [selectedOptions, setSelectedOptions] = React.useState<string[]>([]);
60+
61+
const handleMultiSelect = (options: string | string[]) => {
62+
if (Array.isArray(options)) {
63+
setSelectedOptions(options);
64+
}
65+
};
66+
67+
const options = [
68+
{ id: '1', label: 'Option 1' },
69+
{ id: '2', label: 'Option 2' },
70+
{ id: '3', label: 'Option 3' },
71+
{ id: '4', label: 'Option 4' },
72+
{ id: '5', label: 'Option 5' },
73+
{ id: '6', label: 'Option 6' },
74+
{ id: '7', label: 'Option 7' },
75+
{ id: '8', label: 'Option 8' },
76+
{ id: '9', label: 'Option 9' },
77+
];
78+
79+
const showAlert = (selected: string[]) => {
80+
Alert.alert('Selected Items', selected.join(', '));
81+
};
82+
83+
return (
84+
<>
85+
<Text p="2xs" variant="subtitle01Bold">
86+
Select Bottom Sheet with Checkbox
87+
</Text>
88+
89+
<Box px="m" py="2xs">
90+
<Button
91+
mb="m"
92+
filled
93+
label="Checkbox"
94+
onPress={() => showModal(true)}
95+
/>
96+
<SelectBottomSheet
97+
visible={modal}
98+
type="checkbox"
99+
selectButtonLabel="Select"
100+
closeButtonLabel="Close"
101+
title="Select Options"
102+
closeButtonAction={() => showModal(false)}
103+
selectButtonAction={() => {
104+
showAlert(selectedOptions);
105+
showModal(false);
106+
}}
107+
options={options}
108+
selectedOption={selectedOptions}
109+
onSelect={handleMultiSelect}
110+
/>
111+
</Box>
112+
</>
113+
);
114+
};
115+
116+
export const RadioButton: SelectBottomSheetStory = () => {
117+
const [modal, showModal] = React.useState(false);
118+
const [selectedRadioOption, setSelectedRadioOption] =
119+
React.useState<string>('');
120+
121+
const handleRadioSelect = (option: string | string[]) => {
122+
if (Array.isArray(option) && option.length > 0) {
123+
setSelectedRadioOption(option[0]);
124+
} else if (typeof option === 'string') {
125+
setSelectedRadioOption(option);
126+
}
127+
};
128+
129+
const options = [
130+
{ id: '1', label: 'Option 1' },
131+
{ id: '2', label: 'Option 2' },
132+
{ id: '3', label: 'Option 3' },
133+
{ id: '4', label: 'Option 4' },
134+
{ id: '5', label: 'Option 5' },
135+
{ id: '6', label: 'Option 6' },
136+
{ id: '7', label: 'Option 7' },
137+
{ id: '8', label: 'Option 8' },
138+
{ id: '9', label: 'Option 9' },
139+
];
140+
141+
const showAlert = (selected: string[]) => {
142+
Alert.alert('Selected Items', selected.join(', '));
143+
};
144+
145+
return (
146+
<>
147+
<Text p="2xs" variant="subtitle01Bold">
148+
Select Bottom Sheet with RadioButton
149+
</Text>
150+
151+
<Box px="m" py="2xs">
152+
<Button
153+
mb="m"
154+
filled
155+
label="RadioButton"
156+
onPress={() => showModal(true)}
157+
/>
158+
<SelectBottomSheet
159+
visible={modal}
160+
type="radio"
161+
selectButtonLabel="Select"
162+
closeButtonLabel="Close"
163+
title="Select a Single Option"
164+
closeButtonAction={() => showModal(false)}
165+
selectButtonAction={() => {
166+
showAlert([selectedRadioOption]);
167+
showModal(false);
168+
}}
169+
options={options}
170+
selectedOption={[selectedRadioOption]}
171+
onSelect={handleRadioSelect}
172+
/>
173+
</Box>
174+
</>
175+
);
176+
};

0 commit comments

Comments
 (0)