react-notification-system/example/src/scripts/App.jsx at master · igorprado/react-notification-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
varReact=require('react');
varReactDOM=require('react-dom');
varNotificationSystem=require('NotificationSystem');
varconstants=require('constants');
varNotificationGenerator=require('./NotificationGenerator');
constshowcase=require('./showcase');

var_getRandomPosition=function(){
varpositions=Object.keys(constants.positions);
returnpositions[Math.floor(Math.random()*((positions.length-1)+1))+0];
};

// Styles
require('styles/base');

classNotificationSystemExampleextendsReact.Component{
constructor(){
super();
this._notificationSystem=React.createRef();
this._magicCount=0;

this.state={
allowHTML: false,
newOnTop: false,
viewHeight: null
};
}

_notificationSystemInstance(){
returnthis._notificationSystem.current;
}

_allowHTML(allow){
this.setState({allowHTML: allow});
}

_newOnTop(newOnTop){
this.setState({ newOnTop });
}

_showTheMagic(){
showcase.forEach((notification)=>{
var_notification=notification;
if(this._magicCount>0){
_notification.position=_getRandomPosition();
}

this._notificationSystemInstance().addNotification(_notification);
});
this._magicCount+=1;
}

componentDidMount(){
this.setState({viewHeight: window.innerHeight});
}

render(){
return(
<divclassName="app-container">
<headerstyle={{minHeight: this.state.viewHeight}}className="header gradient">
<divclassName="overlay"/>
<divclassName="content">
<h1className="title">React Notification System</h1>
<h2className="subtitle">A complete and totally customizable component for notifications in React.</h2>
<h3className="versions">(For React 15, 0.14 and 0.13)</h3>

<divclassName="btn-show-magic-holder">
<buttonclassName="btn btn-outline btn-show-magic"onClick={this._showTheMagic.bind(this)}>
 Show me what it can do!
</button>
<spanclassName="width-warning">Better experience in larger screens</span>
<smallclassName="more-magic">Click twice for more awesomeness!</small>
</div>
<divclassName="github-buttons">
<aclassName="github-button"href="https://github.com/igorprado/react-notification-system"data-size="large"data-icon="octicon-star"data-count-href="/igorprado/react-notification-system/stargazers"data-show-count="true"data-count-aria-label="# stargazers on GitHub"aria-label="Star igorprado/react-notification-system on GitHub">Star</a>
<aclassName="github-button"href="https://github.com/igorprado/react-notification-system/fork"data-size="large"data-icon="octicon-repo-forked"data-count-href="/igorprado/react-notification-system/network"data-show-count="true"data-count-aria-label="# forks on GitHub"aria-label="Fork igorprado/react-notification-system on GitHub">Fork</a>
</div>
</div>
</header>
<divclassName="wrapper">
<NotificationGeneratornotifications={()=>this._notificationSystemInstance()}allowHTML={this._allowHTML.bind(this)}newOnTop={this._newOnTop.bind(this)}/>
</div>
<footerclassName="footer gradient">
<divclassName="overlay"/>
<divclassName="wrapper">
<p>Made in Brasília, Brazil by <ahref="http://igorprado.com"target="_blank">Igor Prado</a>.</p>
</div>
</footer>
<NotificationSystemref={this._notificationSystem}allowHTML={this.state.allowHTML}newOnTop={this.state.newOnTop}/>
</div>
);
}
}

ReactDOM.render(React.createElement(NotificationSystemExample),document.getElementById('app'));