arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 16:38:08 +00:00
Code Issues Releases Wiki Activity

Make header clickable

Browse Source
This commit is contained in:
Vladimir Volek 2018-09-26 23:07:47 +02:00
parent 8af4a487da
commit d199454485
2 changed files with 43 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Notification/NotificationGroups/components/Group/index.js
View File

@ -7,43 +7,62 @@ const Wrapper = styled.div``;
const Header = styled.div`
display: flex;
cursor: pointer;
background: ${colors.WHITE};
padding: 5px 10px;
border-bottom: 1px solid ${colors.BACKGROUND};
`;
const Body = styled.div`
`;
const Body = styled.div``;
const Title = styled.div`
color: ${props => props.color};
`;
class Group extends Component {
hide() {
constructor() {
super();
this.state = {
visibleCount: 1,
visible: true,
};
}
show() {
toggle = () => {
if (this.state.visible) {
this.setState({
visible: false,
visibleCount: 0,
});
} else {
this.setState({
visible: true,
visibleCount: this.props.groupNotifications.length,
});
}
}
render() {
const { type, groupNotifications, color } = this.props;
return (
<Wrapper>
<Header>
<Title color={color}>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}</Title>
<Header onClick={this.toggle}>
<Title
color={color}
>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
</Title>
</Header>
<Body>
{groupNotifications.map(notification => (
<Notification
key={notification.title}
type={notification.type}
title={notification.title}
message={notification.message}
/>
))}
{groupNotifications
.slice(0, this.state.visibleCount)
.map(notification => (
<Notification
key={notification.title}
type={notification.type}
title={notification.title}
message={notification.message}
/>
))}
</Body>
</Wrapper>
);

16
src/components/Notification/NotificationGroups/index.js
View File

@ -11,14 +11,14 @@ class NotificationsGroup extends Component {
constructor() {
super();
this.notifications = [
{ type: 'warning', title: 'aaa', message: 'aaaa' },
{ type: 'error', title: 'aaa', message: 'aaaa' },
{ type: 'info', title: 'aaa', message: 'aaaa' },
{ type: 'error', title: 'aaa', message: 'aaaa' },
{ type: 'warning', title: 'aaa', message: 'aaaa' },
{ type: 'success', title: 'aaa', message: 'aaaa' },
{ type: 'error', title: 'aaa', message: 'aaaa' },
{ type: 'error', title: 'aaa', message: 'aaaa' },
{ type: 'warning', title: 'adddaa', message: 'aaaa' },
{ type: 'error', title: 'aaddda', message: 'aaaa' },
{ type: 'info', title: 'aafffa', message: 'aaaa' },
{ type: 'error', title: 'aggaa', message: 'aaaa' },
{ type: 'warning', title: 'aasssa', message: 'aaaa' },
{ type: 'success', title: 'afaa', message: 'aaaa' },
{ type: 'error', title: 'aada', message: 'aaaa' },
{ type: 'error', title: 'aafffa', message: 'aaaa' },
];
}