arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +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` const Header = styled.div`
display: flex; display: flex;
cursor: pointer;
background: ${colors.WHITE}; background: ${colors.WHITE};
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid ${colors.BACKGROUND}; border-bottom: 1px solid ${colors.BACKGROUND};
`; `;
const Body = styled.div` const Body = styled.div``;
`;
const Title = styled.div` const Title = styled.div`
color: ${props => props.color}; color: ${props => props.color};
`; `;
class Group extends Component { 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() { render() {
const { type, groupNotifications, color } = this.props; const { type, groupNotifications, color } = this.props;
return ( return (
<Wrapper> <Wrapper>
<Header> <Header onClick={this.toggle}>
<Title color={color}>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}</Title> <Title
color={color}
>{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
</Title>
</Header> </Header>
<Body> <Body>
{groupNotifications.map(notification => ( {groupNotifications
<Notification .slice(0, this.state.visibleCount)
key={notification.title} .map(notification => (
type={notification.type} <Notification
title={notification.title} key={notification.title}
message={notification.message} type={notification.type}
/> title={notification.title}
))} message={notification.message}
/>
))}
</Body> </Body>
</Wrapper> </Wrapper>
); );

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

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