├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── README.md
├── build
├── webpack.config.js
└── webpack
│ ├── base.js
│ ├── development.js
│ └── production.js
├── config
└── index.js
├── development
├── client.js
└── index.less
├── package.json
└── src
├── Item.js
├── Notificaton.js
├── Tag.js
├── content.js
├── footer.js
├── header.js
├── index.js
├── less
├── index.less
├── notification.less
└── notifications.less
└── utils.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "syntax-class-properties",
4 | "transform-class-properties",
5 | "transform-decorators-legacy",
6 | "transform-es2015-arrow-functions",
7 | "transform-es2015-block-scoping",
8 | ["transform-es2015-classes", {"loose": true}],
9 | "transform-proto-to-assign"
10 | ],
11 | "presets": ["stage-0", "react", "es2015"]
12 | }
13 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | lib
2 | node_modules
3 | demo
4 | .DS_Store
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "env": {
4 | "browser": true,
5 | "node": true
6 | },
7 | "ecmaFeatures": {
8 | "jsx": true
9 | },
10 | "plugins": [
11 | "react"
12 | ],
13 | "rules": {
14 | "comma-dangle": [2, "never"],
15 | "no-cond-assign": 2,
16 | "no-constant-condition": 2,
17 | "no-control-regex": 2,
18 | "no-debugger": 2,
19 | "no-dupe-keys": 2,
20 | "no-empty": 2,
21 | "no-empty-character-class": 2,
22 | "no-ex-assign": 2,
23 | "no-extra-boolean-cast": 2,
24 | "no-extra-parens": 0,
25 | "no-extra-semi": 2,
26 | "no-func-assign": 2,
27 | "no-inner-declarations": 2,
28 | "no-invalid-regexp": 2,
29 | "no-irregular-whitespace": 2,
30 | "no-negated-in-lhs": 2,
31 | "no-obj-calls": 2,
32 | "no-regex-spaces": 2,
33 | "no-reserved-keys": 0,
34 | "no-sparse-arrays": 2,
35 | "no-unreachable": 2,
36 | "strict": [2, "global"],
37 | "no-catch-shadow": 2,
38 | "no-delete-var": 2,
39 | "no-label-var": 2,
40 | "no-shadow": 2,
41 | "no-shadow-restricted-names": 2,
42 | "no-undef": 2,
43 | "no-undef-init": 2,
44 | "no-undefined": 2,
45 | "no-unused-vars": 2,
46 | "no-use-before-define": 2,
47 | "indent": [2, 4, {
48 | "SwitchCase": 1
49 | }],
50 | "brace-style": 2,
51 | "camelcase": 0,
52 | "comma-spacing": 2,
53 | "comma-style": 2,
54 | "consistent-this": 0,
55 | "eol-last": 2,
56 | "func-names": 0,
57 | "func-style": 0,
58 | "key-spacing": [2, {
59 | "beforeColon": false,
60 | "afterColon": true
61 | }],
62 | "max-nested-callbacks": 0,
63 | "new-cap": 2,
64 | "new-parens": 2,
65 | "no-array-constructor": 2,
66 | "no-inline-comments": 0,
67 | "no-lonely-if": 2,
68 | "no-mixed-spaces-and-tabs": 2,
69 | "no-nested-ternary": 2,
70 | "no-new-object": 2,
71 | "semi-spacing": [2, {
72 | "before": false,
73 | "after": true
74 | }],
75 | "no-spaced-func": 2,
76 | "no-ternary": 0,
77 | "no-trailing-spaces": 2,
78 | "no-multiple-empty-lines": 2,
79 | "no-underscore-dangle": 0,
80 | "one-var": 0,
81 | "operator-assignment": [2, "always"],
82 | "padded-blocks": 0,
83 | "quotes": [2, "single"],
84 | "quote-props": [2, "as-needed"],
85 | "semi": [2, "always"],
86 | "sort-vars": [2, {"ignoreCase": true}],
87 | "space-before-blocks": 2,
88 | "object-curly-spacing": [2, "never"],
89 | "array-bracket-spacing": [2, "never"],
90 | "space-in-parens": 2,
91 | "space-infix-ops": 2,
92 | "keyword-spacing": 2,
93 | "space-unary-ops": 2,
94 | "spaced-comment": 2,
95 | "wrap-regex": 0,
96 | "use-isnan": 2,
97 | "valid-jsdoc": 0,
98 | "valid-typeof": 2,
99 | "react/display-name": 1,
100 | "react/jsx-no-undef": 1,
101 | "react/jsx-uses-react": 1,
102 | "react/jsx-uses-vars": 1
103 | }
104 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | 0.*
4 | 1.*
5 | lib
6 | fonts/
7 | dist
8 | typings/
9 | tsconfig.json
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .*.swp
2 | ._*
3 | .DS_Store
4 | .git
5 | .hg
6 | .npmrc
7 | .lock-wscript
8 | .svn
9 | .wafpickle-*
10 | config.gypi
11 | CVS
12 | npm-debug.log
13 | src
14 | CHANGELOG.md
15 | build/
16 | config/
17 | node_modules
18 | .babelrc
19 | .eslintrc
20 | .tsconfig.json
21 | .gitignore
22 | .eslintigore
23 | dist/
24 | typings/
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/diegoddox/react-notification-center/d9ba5ef33c7e5bc4378a50e59e4810f9543e18bd/CHANGELOG.md
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # NOT MAINTAINED.
2 | ## NOTE:
3 | This is not well documented but it will give you an idea on how to start
4 | ## `react-notification-center` [demo](http://diegoddox.github.io/react-notification-center/)
5 |
6 | ### Implementation Guide
7 |
8 | #### 1: Installation
9 | `npm install --save react-notification-center`
10 |
11 | #### 2: Import the less file to your project
12 | `import 'react-notification-center/src/less/index.less'`
13 |
14 | #### 3 Add the notification component
15 | ```
16 | import ReactNotificationCenter from 'react-notification-center';
17 |
18 | export default class App extends Component {
19 | constructor(props) {
20 | super(props);
21 |
22 | this.state = {
23 | notifications = [{
24 | id: 1,
25 | title: 'some title', // not required
26 | message: 'The notification text',
27 | new: false, // if the user has read the notification
28 | tags: [{ // not required
29 | type: 'success',
30 | text: 'text'
31 | }],
32 | date: '09/12/2016' // not required
33 | }];
34 | };
35 | }
36 |
37 | render() {
38 | return (
39 |
40 |
41 | console.log('You are on the bottom babay :D')}
46 | onScroll={() => console.log('You are scrolling on the list')}
47 | onItemClick={item => console.log('## item clicked', item)}
48 | onNotificationOpen={items => console.log('## all notifications', items)}
49 | onNotificationClose={items => console.log('## all notifications', items)}
50 | onScroll={e => console.log('You are scrolling', e)}
51 |
52 |
98 |
99 |
100 |
101 |
7
102 |
103 |
104 |
105 | Just include the notification-icon where you want config and you're ready to go!
106 |
107 |
108 |
109 |
110 | console.log('Notification has open')}
113 | onNotificationClose={() => console.log('Notification has close')}
114 | onItemClick={() => console.log('The item has been clicked')}
115 | onScroll={() => console.log('You are scrolling')}
116 | onScrollBottom={() => console.log('you are on the bottom')}
117 | mapToItem={this.notificationOptions}/>
118 |
119 |
125 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
27 | {this.props.tags && this.props.tags.map((item, i) => {item.text})}
28 | {this.props[this.props.options.title] && {this.props[this.props.options.title]} }
29 | {this.props[this.props.options.message] && cutString(this.props[this.props.options.message], 50)}
30 | {this.props[this.props.options.date] && {this.props[this.props.options.date]}}
31 |
32 |
33 | );
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/Notificaton.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import Header from './header';
3 | import Content from './content';
4 | import Footer from './footer';
5 |
6 | export default class Notification extends Component {
7 | static displayName = 'Notification';
8 |
9 | constructor(props) {
10 | super(props);
11 | }
12 |
13 | render() {
14 | return (
15 |
16 |
{this.state.current && this.state.current[this.mapOptions().title]}
17 |
18 |
19 | {this.props.notification}
20 |
21 |
22 |
27 |
32 | {this.props.children}
33 |
34 | );
35 | }
36 | }
37 |
38 | NotificationContent.displayName = 'NotificationContent';
39 | NotificationContent.proptypes = {
40 | children: React.PropTypes.node.isRequired
41 | };
42 |
--------------------------------------------------------------------------------
/src/footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const NotificationFooter = props => {props.children}
;
4 |
5 | NotificationFooter.displayName = 'NotificationHeader';
6 | NotificationFooter.proptypes = {
7 | children: React.PropTypes.node.isRequired
8 | };
9 | export default NotificationFooter;
10 |
--------------------------------------------------------------------------------
/src/header.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const NotificationHeader = props => (
4 |
5 |
{props.children}
6 |
7 | );
8 |
9 | NotificationHeader.displayName = 'NotificationHeader';
10 | NotificationHeader.proptypes = {
11 | children: React.PropTypes.node.isRequired
12 | };
13 | export default NotificationHeader;
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, {Component, PropTypes} from 'react';
2 | import cn from 'classnames';
3 | import elementClass from 'element-class';
4 | import NotificationItem from './Item';
5 | import Header from './header';
6 | import Content from './content';
7 | import Footer from './footer';
8 | import {cutString} from './utils';
9 |
10 | export default class ReduxnotificationCenter extends Component {
11 | static displayName = 'ReduxNotofication';
12 |
13 | static propTypes = {
14 | notifications: PropTypes.array,
15 | mapToItem: PropTypes.object,
16 | onItemClick: PropTypes.func,
17 | customItemComponent: PropTypes.func,
18 | onNotificationOpen: PropTypes.func,
19 | onNotificationClose: PropTypes.func,
20 | onScrollBottom: PropTypes.func,
21 | position: PropTypes.string,
22 | wordsInItem: PropTypes.number,
23 | noNotificationText: PropTypes.string
24 | };
25 |
26 | static defaultProps = {
27 | notificationTitle: 'React notification center',
28 | position: 'left',
29 | wordsInItem: 50,
30 | noNotificationText: 'No data available, enjoy your day',
31 | mapToItem: {},
32 | notifications: []
33 | };
34 |
35 | constructor(props) {
36 | super(props);
37 | this.state = {
38 | notifications: this.props.notifications,
39 | showNotification: false,
40 | showNotificationMessage: false,
41 | current: null
42 | };
43 |
44 | this.isChildOf = this.isChildOf.bind(this);
45 | this.mapOptions = this.mapOptions.bind(this);
46 | this.getUnreadLength = this.getUnreadLength.bind(this);
47 | this.toggleNotification = this.toggleNotification.bind(this);
48 | this.timeout = null;
49 | }
50 |
51 | componentDidMount() {
52 | if (document) {
53 | document.addEventListener('click', this.toggleNotification);
54 | }
55 | }
56 |
57 | componentWillReceiveProps(nextProps) {
58 | if (nextProps.notifications.length !== this.state.notifications.length) {
59 | elementClass(this.refs.notificationIcon).add('pulse');
60 |
61 | this.timeout = setTimeout(() => {
62 | elementClass(this.refs.notificationIcon).remove('pulse');
63 | }, 1200);
64 | this.setState({notifications: nextProps.notifications});
65 | }
66 | }
67 |
68 | componentWillUnmount() {
69 | if (this.timeout) {
70 | clearTimeout(this.timeout);
71 | }
72 | if (document) {
73 | document.removeEventListener('click', this.toggleNotification);
74 | }
75 | }
76 |
77 | getUnreadLength() {
78 | return this.state.notifications.filter(item => item[this.mapOptions().new]).length;
79 | }
80 |
81 | toggleNotification(e) {
82 | if (e.target == this.refs.notificationIcon && !this.state.showNotification) {
83 | this.setState({
84 | showNotification: true
85 | });
86 | if (this.props.onNotificationOpen) {
87 | this.props.onNotificationOpen(this.state.notifications);
88 | }
89 | } else if (this.state.showNotification && !this.isChildOf(e.target, this.refs.notificationHolder)) {
90 | this.setState({
91 | showNotification: false,
92 | showNotificationMessage: false,
93 | current: null
94 | });
95 | if (this.props.onNotificationClose) {
96 | this.props.onNotificationClose(this.state.notifications);
97 | }
98 | }
99 | }
100 |
101 | isChildOf(child, parent) {
102 | if (child.parentNode === parent) {
103 | return true;
104 | } else if (child.parentNode === null) {
105 | return false;
106 | } else {
107 | return this.isChildOf(child.parentNode, parent);
108 | }
109 | }
110 |
111 | mapOptions() {
112 | return {
113 | id: this.props.mapToItem.id || 'id',
114 | title: this.props.mapToItem.title || 'title',
115 | message: this.props.mapToItem.message || 'message',
116 | date: this.props.mapToItem.date || 'date',
117 | new: this.props.mapToItem.new || 'new'
118 | };
119 | }
120 |
121 | onItemClick(item) {
122 | this.setState({
123 | notifications: this.state.notifications.map(notification => {
124 | if (!notification[this.mapOptions().id]) {
125 | console.error('React Notification ERROR: You need an id');
126 | return notification;
127 | }
128 |
129 | if (notification[this.mapOptions().id] == item[this.mapOptions().id]) {
130 | notification[this.mapOptions().new] = false;
131 | }
132 | return notification;
133 | }),
134 | showNotificationMessage: true,
135 | current: item
136 | });
137 | if (this.props.onItemClick) {
138 | this.props.onItemClick(item, this.state.notifications);
139 | }
140 | }
141 |
142 | back() {
143 | this.setState({
144 | showNotificationMessage: false
145 | });
146 | }
147 |
148 | render() {
149 | return (
150 |
151 |
152 | {this.getUnreadLength() > 0 && this.getUnreadLength()}
153 |
154 | {this.state.showNotification &&
155 |
156 |
157 |
158 |
{cutString(this.props.notificationTitle, 30)}
159 |
160 | {this.state.notifications.length == 0 &&
161 | {this.props.noNotificationText}
162 | }
163 |
164 | {this.state.notifications.map((item, i) => {
165 | return (
166 |
170 | );
171 | })}
172 |
173 |
174 |
175 |
176 |
177 |
178 |
{this.state.current && this.state.current[this.mapOptions().title]}
179 |
180 |
181 | {this.state.current && this.state.current[this.mapOptions().message]}
182 |
183 |
184 |
189 |
190 |
191 |
}
192 |