1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/multiple-notifications/multiple-notifications.component.js

53 lines
1.2 KiB
JavaScript
Raw Normal View History

import React, { PureComponent } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
export default class MultipleNotifications extends PureComponent {
static defaultProps = {
children: [],
classNames: [],
};
static propTypes = {
children: PropTypes.array,
classNames: PropTypes.array,
};
state = {
showAll: false,
};
2020-11-03 00:41:28 +01:00
render() {
const { showAll } = this.state;
const { children, classNames } = this.props;
const childrenToRender = children.filter(Boolean);
if (childrenToRender.length === 0) {
return null;
}
return (
<div
className={classnames(...classNames, {
'home-notification-wrapper--show-all': showAll,
'home-notification-wrapper--show-first': !showAll,
})}
>
2020-11-03 00:41:28 +01:00
{childrenToRender}
<div
className="home-notification-wrapper__i-container"
onClick={() => this.setState({ showAll: !showAll })}
>
{childrenToRender.length > 1 ? (
<i
className={classnames('fa fa-sm fa-sort-amount-asc', {
2020-11-03 00:41:28 +01:00
flipped: !showAll,
})}
/>
) : null}
</div>
</div>
);
}
}