Skip to content
This repository was archived by the owner on Mar 30, 2022. It is now read-only.

Commit 44aa2ab

Browse files
Dhananjayan-PNDhananjayan-PN
authored
Addition of Dialogs Page (#182)
* root commit * dialog view * addition of dialog page * creation of dialogs page and updating navigator * dialog showcase additions * refactored dependencies * restored yarn.lock file * reverted changes to yarn.lock * updates to preview page * updated import statement
1 parent 7984752 commit 44aa2ab

File tree

2 files changed

+195
-0
lines changed

2 files changed

+195
-0
lines changed

‎src/navigation/RootNavigator.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import SocialIcons from '../views/social_icons';
2424
import Fonts from '../views/fonts';
2525
import BottomSheet from '../views/bottomsheet';
2626
import Tooltip from '../views/tooltip';
27+
import Dialogs from '../views/dialogs'
2728
import Overlay from '../views/overlay';
2829
import CheckBox from '../views/checkbox';
2930
import FAB from '../views/fab';
@@ -78,6 +79,7 @@ function RootNavigator() {
7879
<Drawer.Screen name="Cards" component={Cards} />
7980
<Drawer.Screen name="Checkbox" component={CheckBox} />
8081
<Drawer.Screen name="Chips" component={Chips} />
82+
<Drawer.Screen name="Dialogs" component={Dialogs} />
8183
<Drawer.Screen name="Divider" component={Divider} />
8284
<Drawer.Screen name="Circular Slider" component={CircularSlider} />
8385
<Drawer.Screen name="FAB" component={FAB} />

‎src/views/dialogs.tsx

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import React, { useState } from 'react';
2+
import {
3+
Button,
4+
Dialog,
5+
CheckBox,
6+
ListItem,
7+
Avatar,
8+
} from 'react-native-elements';
9+
import { View, Text, StyleSheet } from 'react-native';
10+
import { Header } from '../components/header';
11+
12+
type DialogComponentProps = {};
13+
14+
const Dialogs: React.FunctionComponent<DialogComponentProps> = () => {
15+
const [visible1, setVisible1] = useState(false);
16+
const [visible2, setVisible2] = useState(false);
17+
const [visible3, setVisible3] = useState(false);
18+
const [visible4, setVisible4] = useState(false);
19+
const [visible5, setVisible5] = useState(false);
20+
const [visible6, setVisible6] = useState(false);
21+
const [checked, setChecked] = useState(1);
22+
23+
const toggleDialog1 = () => {
24+
setVisible1(!visible1);
25+
};
26+
const toggleDialog2 = () => {
27+
setVisible2(!visible2);
28+
};
29+
const toggleDialog3 = () => {
30+
setVisible3(!visible3);
31+
};
32+
const toggleDialog4 = () => {
33+
setVisible4(!visible4);
34+
};
35+
const toggleDialog5 = () => {
36+
setVisible5(!visible5);
37+
};
38+
const toggleDialog6 = () => {
39+
setVisible6(!visible6);
40+
};
41+
42+
const userlist = [
43+
{
44+
name: 'Amy Farha',
45+
avatar_url: 'https://uifaces.co/our-content/donated/XdLjsJX_.jpg',
46+
subtitle: 'amy.farha@gmail.com',
47+
},
48+
{
49+
name: 'Chris Jackson',
50+
avatar_url: 'https://uifaces.co/our-content/donated/KtCFjlD4.jpg',
51+
subtitle: 'cjackson@gmail.com',
52+
},
53+
{
54+
name: 'Amanda Martin',
55+
avatar_url:
56+
'https://images.unsplash.com/photo-1498529605908-f357a9af7bf5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=047fade70e80ebb22ac8f09c04872c40',
57+
subtitle: 'amandam@gmail.com',
58+
},
59+
];
60+
61+
return (
62+
<View>
63+
<Header title="Dialogs" />
64+
<View style={styles.buttonContainer}>
65+
<Button
66+
title="Open Simple Dialog"
67+
onPress={toggleDialog1}
68+
buttonStyle={styles.button}
69+
/>
70+
<Button
71+
title="Open Mutli Action Dialog"
72+
onPress={toggleDialog2}
73+
buttonStyle={styles.button}
74+
/>
75+
<Button
76+
title="Open Loading Dialog"
77+
onPress={toggleDialog3}
78+
buttonStyle={styles.button}
79+
/>
80+
<Button
81+
title="Open Buttonless Dialog"
82+
onPress={toggleDialog4}
83+
buttonStyle={styles.button}
84+
/>
85+
<Button
86+
title="Open Custom Dialog 1"
87+
onPress={toggleDialog5}
88+
buttonStyle={styles.button}
89+
/>
90+
<Button
91+
title="Open Custom Dialog 2"
92+
onPress={toggleDialog6}
93+
buttonStyle={styles.button}
94+
/>
95+
</View>
96+
<Dialog
97+
isVisible={visible1}
98+
onBackdropPress={toggleDialog1}
99+
>
100+
<Dialog.Title title="Dialog Title"/>
101+
<Text>Dialog body text. Add relevant information here.</Text>
102+
</Dialog>
103+
<Dialog
104+
isVisible={visible2}
105+
onBackdropPress={toggleDialog2}
106+
>
107+
<Dialog.Title title="Dialog Title"/>
108+
<Text>Dialog body text. Add relevant information here.</Text>
109+
<Dialog.Actions>
110+
<Dialog.Button title="ACTION 1" onPress={() => console.log('Primary Action Clicked!')}/>
111+
<Dialog.Button title="ACTION 2" onPress={() => console.log('Secondary Action Clicked!')}/>
112+
</Dialog.Actions>
113+
</Dialog>
114+
<Dialog isVisible={visible3} onBackdropPress={toggleDialog3}>
115+
<Dialog.Loading />
116+
</Dialog>
117+
<Dialog
118+
isVisible={visible4}
119+
onBackdropPress={toggleDialog4}
120+
>
121+
<Dialog.Title title="Dialog Title"/>
122+
<Text>Dialog body text. Add relevant information here.</Text>
123+
</Dialog>
124+
<Dialog
125+
isVisible={visible5}
126+
onBackdropPress={toggleDialog5}
127+
>
128+
<Dialog.Title title="Select Preference"/>
129+
{['Option 1', 'Option 2', 'Option 3'].map((l, i) => (
130+
<CheckBox
131+
key={i}
132+
title={l}
133+
containerStyle={{ backgroundColor: 'white', borderWidth: 0 }}
134+
checkedIcon="dot-circle-o"
135+
uncheckedIcon="circle-o"
136+
checked={checked === i + 1}
137+
onPress={() => setChecked(i + 1)}
138+
/>
139+
))}
140+
141+
<Dialog.Actions>
142+
<Dialog.Button
143+
title="CONFIRM"
144+
onPress={() => {
145+
console.log(`Option ${checked} was selected!`);
146+
toggleDialog5();
147+
}}
148+
/>
149+
<Dialog.Button title="CANCEL" onPress={toggleDialog5} />
150+
</Dialog.Actions>
151+
</Dialog>
152+
<Dialog
153+
isVisible={visible6}
154+
onBackdropPress={toggleDialog6}
155+
>
156+
<Dialog.Title title="Choose Account"/>
157+
{userlist.map((l, i) => (
158+
<ListItem
159+
key={i}
160+
containerStyle={{
161+
marginHorizontal: -10,
162+
borderRadius: 8,
163+
}}
164+
onPress={toggleDialog6}
165+
>
166+
<Avatar rounded source={{ uri: l.avatar_url }} />
167+
<ListItem.Content>
168+
<ListItem.Title style={{ fontWeight: '700' }}>
169+
{l.name}
170+
</ListItem.Title>
171+
<ListItem.Subtitle>{l.subtitle}</ListItem.Subtitle>
172+
</ListItem.Content>
173+
</ListItem>
174+
))}
175+
</Dialog>
176+
</View>
177+
);
178+
};
179+
180+
const styles = StyleSheet.create({
181+
button: {
182+
borderRadius: 6,
183+
width: 220,
184+
margin: 20,
185+
},
186+
buttonContainer: {
187+
margin: 20,
188+
justifyContent: 'center',
189+
alignItems: 'center',
190+
},
191+
});
192+
193+
export default Dialogs;

0 commit comments

Comments
 (0)