Snip2Code is shutting down.
It has been quite a ride, since 2013 when we launched our first prototype: thanks to the effort of you guys we collected more than 3 million snippets!
We are very proud to help all our users to be more efficient in their jobs, and to be the central point to share programming knowledge for everyone.
Our basic service is free, so we always survived on our own resources to give you Snip2Code.
Unfortunately, we are no more in the financial position to sustain this effort, and therefore we are announcing here our permanent shut down,
which will take place on August 1st, 2020.
Please save your private snippets using our backup function in the settings, here.
IF YOU WANT TO SAVE SNIP2CODE, PLEASE CONSIDER DOING A DONATION!
This will allow us to pay for the servers and the infrastructure. If you want to donate, Contact Us!
by
3 7
0
3
335
0
Top 10% !
Popular
Specified
No tags for this snippet yet.
LanguageJavaScript
SourceGitHub
SourceMyGists

material-ui NotificationCenter

material-ui NotificationCenter: 
NotificationCenter.js
Copy Embed Code
<iframe id="embedFrame" style="width:600px; height:300px;"
src="https://www.snip2code.com/Embed/2897450/material-ui-NotificationCenter?startLine=0"></iframe>
Click on the embed code to copy it into your clipboard Width Height
Leave empty to retrieve all the content Start End
// @flow import Queue from 'es-collections/Queue' import Snackbar from '@alienfast/material-ui/Snackbar' import PropTypes from 'prop-types' import React, {Component} from 'react' import Logger from './util/Logger' import Performance from './util/Performance' import Button from './Button' // if test, shorten duration for multiple messages - saves ~9 seconds on reset_password.feature const DefaultDuration = __TEST__ ? 750 : 3000 type Props = {} type State = { queueSize: number, status: 'queueSizeChanged' | 'exited' } type Notification = { message: string, duration?: number, delay?: number, action?: string, onAction?: Function } const EmptyNotification = { message: '' } class NotificationCenter extends Component<void, Props, State> { static contextTypes = { eventBus: PropTypes.object.isRequired } props: Props state: State = { queueSize: 0, status: 'exited' } subscriptions: Array<EmitterSubscription> queue: Queue notification: ?Notification = EmptyNotification componentWillMount () { log.debug('componentWillMount') this.queue = new Queue() const { eventBus } = this.context // eventBus.registerEvent('NotificationCenter', 'notification') this.subscriptions = eventBus.subscribe('notification', this.handleNotification) } componentWillUnmount () { log.debug('componentWillUnmount') const { eventBus } = this.context eventBus.unsubscribe(this.subscriptions) } shouldComponentUpdate (nextProps: Props, nextState: State, nextContext: any) { //log.debug('shouldComponentUpdate', this.queue.size) // check to see if we are still showing the current notification const peek = this.queue.peek() //log.debug('compare notifications', this.notification === peek, this.notification, peek) if (this.notification === peek) { return false } return Performance.shouldComponentUpdate(this, nextProps, nextState, nextContext, true) } updateQueueSize () { this.setState({ queueSize: this.queue.size, status: 'queueSizeChanged' }) } handleNotification = (notification: Notification) => { const { delay } = notification const enqueue = () => { this.queue.enqueue(notification) log.debug('handleNotification', this.queue.size, notification) this.updateQueueSize() } if (delay) { setTimeout(enqueue, delay) } else { enqueue() } } handleRequestClose = (event: ?SyntheticUIEvent, reason: string, onAction?: Function) => { log.debug('handleRequestClose', reason, onAction, this.notification) const { duration } = (this.notification ? this.notification : {}) // wacky flow maybe type if (reason === 'clickaway' && !duration === 0) { // allow clickaway on duration 0 log.debug(reason) } else { if (onAction) { onAction() } this.queue.dequeue() this.updateQueueSize() } } handleExited = () => { log.debug('handleExited', this.notification) this.setState({ status: 'exited' }) } render () { const { status } = this.state const size = this.queue.size let open let shownNotification: ?Notification if (size === 0) { // We must render the snackbar with an empty notification and close it so // that we still achieve the ease out effect. shownNotification = this.notification this.notification = EmptyNotification open = false } else if (status === 'queueSizeChanged' && this.notification !== EmptyNotification) { // allow this message to exit shownNotification = this.notification open = false } else { // ready to display a new message from the queue shownNotification = this.notification = this.queue.peek() open = true } const { message, action: actionString, duration, onAction } = (shownNotification || {}) // from the action string, create a button to trigger the action and dismiss the snackbar let action if (actionString) { action = [ <Button key={actionString} color='accent' dense onClick={() => onAction ? onAction() : null} > {actionString} </Button> ] } const snackbarProps = { open, autoHideDuration: (duration === undefined ? DefaultDuration : duration) } log.debug('render Queue size:', size, ' status: ', status, message, snackbarProps) return ( <Snackbar key={message} {...snackbarProps} action={action} onRequestClose={this.handleRequestClose} onExited={this.handleExited} SnackbarContentProps={{ 'aria-describedby': 'message-id' }} message={<span id='message-id'>{message}</span>} /> ) } } const log = Logger.get('NotificationCenter') log.debug('DefaultDuration', DefaultDuration, __TEST__) export default NotificationCenter
If you want to be updated about similar snippets, Sign in and follow our Channels

blog comments powered by Disqus