-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
FixedBottomNavigation.tsx
126 lines (117 loc) · 3.82 KB
/
FixedBottomNavigation.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import RestoreIcon from '@material-ui/icons/Restore';
import FavoriteIcon from '@material-ui/icons/Favorite';
import ArchiveIcon from '@material-ui/icons/Archive';
import Typography from '@material-ui/core/Typography';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
const useStyles = makeStyles({
bottomNav: {
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
},
});
function getRandomInt(max: number) {
return Math.floor(Math.random() * Math.floor(max));
}
interface MessageExample {
primary: string;
secondary: string;
person: string;
}
const messageExamples: MessageExample[] = [
{
primary: 'Brunch this week?',
secondary:
"I'll be in the neighbourhood this week. Let's grab a bite to eat",
person: '/static/images/avatar/5.jpg',
},
{
primary: 'Birthday Gift',
secondary: `Do you have a suggestion for a good present for John on his work
anniversary. I am really confused & would love your thoughts on it.`,
person: '/static/images/avatar/1.jpg',
},
{
primary: 'Recipe to try',
secondary:
'I am try out this new BBQ recipe, I think this might be amazing',
person: '/static/images/avatar/2.jpg',
},
{
primary: 'Yes!',
secondary: 'I have the tickets to the ReactConf for this year.',
person: '/static/images/avatar/3.jpg',
},
{
primary: "Doctor's Appointment",
secondary:
'My appointment for the doctor was rescheduled for next Saturday.',
person: '/static/images/avatar/4.jpg',
},
{
primary: 'Discussion',
secondary: `Menus that are generated by the bottom app bar (such as a bottom
navigation drawer or overflow menu) open as bottom sheets at a higher elevation
than the bar.`,
person: '/static/images/avatar/5.jpg',
},
{
primary: 'Summer BBQ',
secondary: `Who wants to have a cookout this weekend? I just got some furniture
for my backyard and would love to fire up the grill.`,
person: '/static/images/avatar/1.jpg',
},
];
function refreshMessages(): MessageExample[] {
return Array.from(new Array(100)).map(
() => messageExamples[getRandomInt(messageExamples.length)],
);
}
export default function FixedBottomNavigation() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const [messages, setMessages] = React.useState(() => refreshMessages());
React.useEffect(() => {
setMessages(refreshMessages());
}, [value, setMessages]);
return (
<div>
<div style={{ marginBottom: 80 }}>
<Typography variant="h5" gutterBottom>
Threads
</Typography>
<List>
{messages.map(({ primary, secondary, person }, index) => (
<ListItem button key={index}>
<ListItemAvatar>
<Avatar alt="Profile Picture" src={person} />
</ListItemAvatar>
<ListItemText primary={primary} secondary={secondary} />
</ListItem>
))}
</List>
</div>
<BottomNavigation
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.bottomNav}
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Archive" icon={<ArchiveIcon />} />
</BottomNavigation>
</div>
);
}