implement notifications

2026-09-15 02:54:07 +00:00 · 2020-04-20 13:57:58 -05:00
parent cf5d801a9a
commit b1e99e0582
12 changed files with 258 additions and 18 deletions
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Collapse } from 'react-bootstrap';
+import { connect } from 'react-redux';
+import { TransitionGroup } from 'react-transition-group';
+import { RootState } from '../reducers';
+import { NotificationList } from '../reducers/notification';
+import Notification from './Notification';
+
+interface StateProps {
+    list: NotificationList;
+}
+
+type NotificationStackProps = StateProps;
+
+class NotificationStack extends React.Component<NotificationStackProps> {
+    render(): JSX.Element {
+        return (
+            <div aria-live="polite" aria-atomic="true" style={{ position: 'relative' }}>
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: '10px',
+                        right: '10px',
+                        minWidth: '350px',
+                        zIndex: 999,
+                    }}
+                >
+                    <TransitionGroup>
+                        {this.props.list.map((n) => (
+                            <Collapse key={n.id} in={true}>
+                                <Notification
+                                    id={n.id}
+                                    style={n.style}
+                                    message={n.message}
+                                />
+                            </Collapse>
+                        ))}
+                    </TransitionGroup>
+                </div>
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state: RootState): StateProps => ({
+    list: state.notification.list,
+});
+
+export default connect(mapStateToProps)(NotificationStack);