2018-04-17 07:24:02 +02:00
|
|
|
// @flow
|
2017-12-21 22:08:54 +01:00
|
|
|
import React from 'react';
|
2018-03-26 23:32:43 +02:00
|
|
|
import Button from 'component/button';
|
2017-05-23 09:21:21 +02:00
|
|
|
|
2018-04-17 07:24:02 +02:00
|
|
|
type Props = {
|
|
|
|
removeSnack: any => void,
|
|
|
|
snacks: {
|
|
|
|
linkTarget: ?string,
|
|
|
|
linkText: ?string,
|
|
|
|
message: string,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
class SnackBar extends React.PureComponent<Props> {
|
|
|
|
constructor(props: Props) {
|
2017-05-23 09:21:21 +02:00
|
|
|
super(props);
|
|
|
|
|
2018-04-17 07:24:02 +02:00
|
|
|
this.displayTime = 5; // in seconds
|
|
|
|
this.hideTimeout = null;
|
2017-05-23 09:21:21 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-08-30 14:48:32 +02:00
|
|
|
const { snacks, removeSnack } = this.props;
|
2017-05-23 09:21:21 +02:00
|
|
|
|
|
|
|
if (!snacks.length) {
|
2018-04-17 07:24:02 +02:00
|
|
|
this.hideTimeout = null; // should be unmounting anyway, but be safe?
|
2017-05-23 09:21:21 +02:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
const snack = snacks[0];
|
2017-06-06 23:19:12 +02:00
|
|
|
const { message, linkText, linkTarget } = snack;
|
2017-05-23 09:21:21 +02:00
|
|
|
|
2018-04-17 07:24:02 +02:00
|
|
|
if (this.hideTimeout === null) {
|
|
|
|
this.hideTimeout = setTimeout(() => {
|
|
|
|
this.hideTimeout = null;
|
2017-06-06 23:19:12 +02:00
|
|
|
removeSnack();
|
2018-04-17 07:24:02 +02:00
|
|
|
}, this.displayTime * 1000);
|
2017-05-23 09:21:21 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="snack-bar">
|
2018-04-17 07:24:02 +02:00
|
|
|
<div className="snack-bar__message">
|
|
|
|
<div>ⓘ</div>
|
|
|
|
<div>{message}</div>
|
|
|
|
</div>
|
2017-06-06 23:19:12 +02:00
|
|
|
{linkText &&
|
2017-11-24 15:31:05 +01:00
|
|
|
linkTarget && (
|
2018-03-26 23:32:43 +02:00
|
|
|
<Button navigate={linkTarget} className="snack-bar__action" label={linkText} />
|
2017-11-24 15:31:05 +01:00
|
|
|
)}
|
2017-05-23 09:21:21 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-06-06 06:21:55 +02:00
|
|
|
export default SnackBar;
|