react-notification-center - npm Package Compare versions

Comparing version 0.2.5 to 1.0.0

lib/index.js

 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.notify = undefined;
+exports.default = undefined;
 
-var _NotificationCenter = require('./NotificationCenter');
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _NotificationCenter2 = _interopRequireDefault(_NotificationCenter);
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _emitter = require('./emitter');
 
+var _Item = require('./Item');
+
+var _Item2 = _interopRequireDefault(_Item);
+
+var _header = require('./header');
+
+var _header2 = _interopRequireDefault(_header);
+
+var _content = require('./content');
+
+var _content2 = _interopRequireDefault(_content);
+
+var _footer = require('./footer');
+
+var _footer2 = _interopRequireDefault(_footer);
+
+var _utils = require('./utils');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _NotificationCenter2.default;
-var notify = exports.notify = _emitter.EEmitter;
+function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var ReduxnotificationCenter = function (_Component) {
+    _inherits(ReduxnotificationCenter, _Component);
+
+    function ReduxnotificationCenter(props) {
+        _classCallCheck(this, ReduxnotificationCenter);
+
+        var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+        _this.state = {
+            notifications: _this.props.notifications,
+            showNotification: false,
+            showNotificationMessage: false,
+            current: null
+        };
+
+        _this.isChildOf = _this.isChildOf.bind(_this);
+        _this.mapOptions = _this.mapOptions.bind(_this);
+        _this.getUnreadLength = _this.getUnreadLength.bind(_this);
+        _this.renderNotificationItem = _this.renderNotificationItem.bind(_this);
+        _this.toggleNotification = _this.toggleNotification.bind(_this);
+        return _this;
+    }
+
+    ReduxnotificationCenter.prototype.componentDidMount = function componentDidMount() {
+        var _this2 = this;
+
+        _emitter.EE.on('add/notification', function (data) {
+            _this2.setState({
+                notifications: [data].concat(_toConsumableArray(_this2.state.notifications))
+            });
+        });
+        _emitter.EE.on('clear/all', function () {
+            _this2.setState({
+                notifications: [],
+                showNotification: false,
+                current: null
+            });
+        });
+
+        if (document) {
+            document.addEventListener('click', this.toggleNotification);
+        }
+    };
+
+    ReduxnotificationCenter.prototype.componentDidUpdate = function componentDidUpdate() {};
+
+    ReduxnotificationCenter.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+        if (nextProps.notifications.length !== this.state.notifications.length) {
+            this.setState({
+                notifications: nextProps.notifications
+            });
+        }
+    };
+
+    ReduxnotificationCenter.prototype.componentWillUnmount = function componentWillUnmount() {
+        _emitter.EE.off('add/notification');
+        _emitter.EE.off('clear/all');
+        if (document) {
+            document.removeEventListener('click', this.toggleNotification);
+        }
+    };
+
+    ReduxnotificationCenter.prototype.getUnreadLength = function getUnreadLength() {
+        var _this3 = this;
+
+        return this.state.notifications.filter(function (item) {
+            return !item[_this3.mapOptions().new];
+        }).length;
+    };
+
+    ReduxnotificationCenter.prototype.toggleNotification = function toggleNotification(e) {
+        if (e.target == this.refs.notificationIcon && !this.state.showNotification) {
+            this.setState({
+                showNotification: true
+            });
+            if (this.props.onNotificationOpen) {
+                this.props.onNotificationOpen(this.state.notifications);
+            }
+        } else if (this.state.showNotification && !this.isChildOf(e.target, this.refs.notificationHolder)) {
+            this.setState({
+                showNotification: false,
+                showNotificationMessage: false,
+                current: null
+            });
+            if (this.props.onNotificationClose) {
+                this.props.onNotificationClose(this.state.notifications);
+            }
+        }
+    };
+
+    ReduxnotificationCenter.prototype.isChildOf = function isChildOf(child, parent) {
+        if (child.parentNode === parent) {
+            return true;
+        } else if (child.parentNode === null) {
+            return false;
+        } else {
+            return this.isChildOf(child.parentNode, parent);
+        }
+    };
+
+    ReduxnotificationCenter.prototype.mapOptions = function mapOptions() {
+        return {
+            id: this.props.mapToItem.id || 'id',
+            title: this.props.mapToItem.title || 'title',
+            message: this.props.mapToItem.message || 'message',
+            date: this.props.mapToItem.date || 'date',
+            new: this.props.mapToItem.new || 'new'
+        };
+    };
+
+    ReduxnotificationCenter.prototype.onItemClick = function onItemClick(item) {
+        var _this4 = this;
+
+        this.setState({
+            notifications: this.state.notifications.map(function (notification) {
+                if (!notification[_this4.mapOptions().id]) {
+                    console.error('React Notification ERROR: For more information about this issue http://localhost:4001/');
+                    return notification;
+                }
+
+                if (notification[_this4.mapOptions().id] == item[_this4.mapOptions().id]) {
+                    notification[_this4.mapOptions().new] = true;
+                }
+                return notification;
+            }),
+            showNotificationMessage: true,
+            current: item
+        });
+        if (this.props.onItemClick) {
+            this.props.onItemClick(item, this.state.notifications);
+        }
+    };
+
+    ReduxnotificationCenter.prototype.back = function back() {
+        this.setState({
+            showNotificationMessage: false
+        });
+    };
+
+    ReduxnotificationCenter.prototype.renderNotificationItem = function renderNotificationItem(item, i) {
+        if (this.props.customItemComponent) {
+            return _react2.default.createElement(this.props.customItemComponent, _extends({ key: i }, item));
+        }
+        return _react2.default.createElement(_Item2.default, _extends({
+            key: i, onClick: this.onItemClick.bind(this, item),
+            options: this.mapOptions()
+        }, item));
+    };
+
+    ReduxnotificationCenter.prototype.render = function render() {
+        var _this5 = this;
+
+        return _react2.default.createElement(
+            'div',
+            { className: (0, _classnames2.default)('react-notification-center', 'light-theme', { hide: !this.props.visible }) },
+            _react2.default.createElement(
+                'div',
+                { className: (0, _classnames2.default)('r-notifications-icon', { active: this.getUnreadLength() }), ref: 'notificationIcon' },
+                this.getUnreadLength() > 0 && this.getUnreadLength()
+            ),
+            this.state.showNotification && _react2.default.createElement(
+                'div',
+                { className: (0, _classnames2.default)('rr-wrapper', this.props.position), ref: 'notificationHolder' },
+                _react2.default.createElement(
+                    'div',
+                    { className: 'notification-holder' },
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'r-notifications' },
+                        _react2.default.createElement(
+                            _header2.default,
+                            null,
+                            (0, _utils.cutString)(this.props.notificationTitle, 30)
+                        ),
+                        _react2.default.createElement(
+                            _content2.default,
+                            this.props,
+                            this.state.notifications.length == 0 && _react2.default.createElement(
+                                'div',
+                                { className: 'no-rn' },
+                                this.props.noNotificationText
+                            ),
+                            this.state.notifications && _react2.default.createElement(
+                                'ul',
+                                { className: 'rn-ul' },
+                                this.state.notifications.map(function (item, i) {
+                                    return _this5.renderNotificationItem(item, i);
+                                })
+                            )
+                        ),
+                        _react2.default.createElement(_footer2.default, null)
+                    ),
+                    _react2.default.createElement(
+                        'div',
+                        { className: (0, _classnames2.default)('r-notification', { active: this.state.showNotificationMessage }) },
+                        _react2.default.createElement(
+                            _header2.default,
+                            null,
+                            this.state.current && this.state.current[this.mapOptions().title]
+                        ),
+                        _react2.default.createElement(
+                            _content2.default,
+                            this.props,
+                            _react2.default.createElement(
+                                'div',
+                                { className: 'desc' },
+                                this.state.current && this.state.current[this.mapOptions().message]
+                            )
+                        ),
+                        _react2.default.createElement(
+                            _footer2.default,
+                            null,
+                            _react2.default.createElement(
+                                'button',
+                                { type: 'button', onClick: this.back.bind(this) },
+                                _react2.default.createElement('div', { className: 'back' })
+                            )
+                        )
+                    )
+                )
+            )
+        );
+    };
+
+    return ReduxnotificationCenter;
+}(_react.Component);
+
+ReduxnotificationCenter.displayName = 'ReduxNotofication';
+ReduxnotificationCenter.propTypes = {
+    notifications: _react.PropTypes.array,
+    mapToItem: _react.PropTypes.object,
+    onItemClick: _react.PropTypes.func,
+    customItemComponent: _react.PropTypes.func,
+    onNotificationOpen: _react.PropTypes.func,
+    onNotificationClose: _react.PropTypes.func,
+    onScrollBottom: _react.PropTypes.func,
+    position: _react.PropTypes.string,
+    wordsInItem: _react.PropTypes.number,
+    noNotificationText: _react.PropTypes.string
+};
+ReduxnotificationCenter.defaultProps = {
+    notificationTitle: 'React notification center',
+    position: 'left',
+    wordsInItem: 50,
+    noNotificationText: 'No data available, enjoy your day',
+    mapToItem: {},
+    notifications: []
+};
+exports.default = ReduxnotificationCenter;

lib/Item.js

@@ -52,3 +52,3 @@ 'use strict';
             'li',
-            { className: (0, _classnames2.default)('rn-item', { read: this.props[this.props.options.read] }), onClick: this.handleOnClick.bind(this) },
+            { className: (0, _classnames2.default)('rn-item', { new: this.props[this.props.options.new] }), onClick: this.handleOnClick.bind(this) },
             _react2.default.createElement(
@@ -55,0 +55,0 @@ 'p',

package.json

 {
   "name": "react-notification-center",
-  "version": "0.2.5",
+  "version": "1.0.0",
   "description": "react-notification-center keep all your notification in a single place",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -15,3 +15,3 @@ ## NOTE:
 ```
-import ReactNotificationCenter, {notify} from 'react-notification-center';
+import ReactNotificationCenter from 'react-notification-center';
 
@@ -22,24 +22,16 @@ export default class App extends Component {
 
-        this.notifications = [{
-            id: 1,
-            title: 'some title', // not required
-            message: 'The notification text', 
-            read: false, // if the user has read the notification
-            tags: [{ // not required
-                type: 'success',
-                text: 'text'
-            }],
-            date: '09/12/2016' // not required
-        }];
+        this.state = {
+            notifications = [{
+                id: 1,
+                title: 'some title', // not required
+                message: 'The notification text', 
+                new: false, // if the user has read the notification
+                tags: [{ // not required
+                    type: 'success',
+                    text: 'text'
+                }],
+                date: '09/12/2016' // not required
+            }];
+        };
     }
-    
-    componentDidMount() {
-        /* In case you wanna push a notification
-         * without update your component state
-         * you can use the `notify` method.
-         */
-        setTimeout(() => {
-           notify.add({...}); 
-        }, 1000);
-    }
    
@@ -51,3 +43,3 @@ render() {
 	             <ReactNotificationCenter
-	                 notifications={this.notifications}
+	                 notifications={this.state.notifications}
                      notificationTitle={'React notification center'}
@@ -58,4 +50,4 @@ noNotificationText={'No notifications. Go home!'}
                      onItemClick={item => console.log('## item clicked', item)}
-                     onNotificatioOpen={items => console.log('## all notifications', items)}
-                     onNotificatioClose={items => console.log('## all notifications', items)}
+                     onNotificationOpen={items => console.log('## all notifications', items)}
+                     onNotificationClose={items => console.log('## all notifications', items)}
                      onScroll={e => console.log('You are scrolling', e)}
@@ -94,4 +86,4 @@ customItemComponent={ReactComponent} // In case you don't wanna use the default item component
 #### You still don't get it `o.O`
-In case I fail to explain you on how to set up in your project!
 
+
 ```
@@ -98,0 +90,0 @@ git clone https://github.com/diegoddox/react-notification-center.git

src/index.js

@@ -1,5 +0,219 @@
-import ReactNotificationCenter from './NotificationCenter';
-import {EEmitter} from './emitter';
+import React, {Component, PropTypes} from 'react';
+import cn from 'classnames';
+import {EE} from './emitter';
+import NotificationItem from './Item';
+import Header from './header';
+import Content from './content';
+import Footer from './footer';
+import {cutString} from './utils';
 
-export default ReactNotificationCenter;
-export const notify = EEmitter;
+export default class ReduxnotificationCenter extends Component {
+    static displayName = 'ReduxNotofication';
+
+    static propTypes = {
+        notifications: PropTypes.array,
+        mapToItem: PropTypes.object,
+        onItemClick: PropTypes.func,
+        customItemComponent: PropTypes.func,
+        onNotificationOpen: PropTypes.func,
+        onNotificationClose: PropTypes.func,
+        onScrollBottom: PropTypes.func,
+        position: PropTypes.string,
+        wordsInItem: PropTypes.number,
+        noNotificationText: PropTypes.string
+    };
+
+    static defaultProps = {
+        notificationTitle: 'React notification center',
+        position: 'left',
+        wordsInItem: 50,
+        noNotificationText: 'No data available, enjoy your day',
+        mapToItem: {},
+        notifications: []
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            notifications: this.props.notifications,
+            showNotification: false,
+            showNotificationMessage: false,
+            current: null
+        };
+
+        this.isChildOf = this.isChildOf.bind(this);
+        this.mapOptions = this.mapOptions.bind(this);
+        this.getUnreadLength = this.getUnreadLength.bind(this);
+        this.renderNotificationItem = this.renderNotificationItem.bind(this);
+        this.toggleNotification = this.toggleNotification.bind(this);
+    }
+
+    componentDidMount() {
+        EE.on('add/notification', (data) => {
+            this.setState({
+                notifications: [
+                    data,
+                    ...this.state.notifications
+                ]
+            });
+        });
+        EE.on('clear/all', () => {
+            this.setState({
+                notifications: [],
+                showNotification: false,
+                current: null
+            });
+        });
+
+        if (document) {
+            document.addEventListener('click', this.toggleNotification);
+        }
+    }
+
+    componentDidUpdate() {
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.notifications.length !== this.state.notifications.length) {
+            this.setState({
+                notifications: nextProps.notifications
+            });
+        }
+    }
+
+    componentWillUnmount() {
+        EE.off('add/notification');
+        EE.off('clear/all');
+        if (document) {
+            document.removeEventListener('click', this.toggleNotification);
+        }
+    }
+
+    getUnreadLength() {
+        return this.state.notifications.filter(item => !item[this.mapOptions().new]).length;
+    }
+
+    toggleNotification(e) {
+        if (e.target == this.refs.notificationIcon && !this.state.showNotification) {
+            this.setState({
+                showNotification: true
+            });
+            if (this.props.onNotificationOpen) {
+                this.props.onNotificationOpen(this.state.notifications);
+            }
+        } else if (this.state.showNotification && !this.isChildOf(e.target, this.refs.notificationHolder)) {
+            this.setState({
+                showNotification: false,
+                showNotificationMessage: false,
+                current: null
+            });
+            if (this.props.onNotificationClose) {
+                this.props.onNotificationClose(this.state.notifications);
+            }
+        }
+    }
+
+    isChildOf(child, parent) {
+        if (child.parentNode === parent) {
+            return true;
+        } else if (child.parentNode === null) {
+            return false;
+        } else {
+            return this.isChildOf(child.parentNode, parent);
+        }
+    }
+
+    mapOptions() {
+        return {
+            id: this.props.mapToItem.id || 'id',
+            title: this.props.mapToItem.title || 'title',
+            message: this.props.mapToItem.message || 'message',
+            date: this.props.mapToItem.date || 'date',
+            new: this.props.mapToItem.new || 'new'
+        };
+    }
+
+    onItemClick(item) {
+        this.setState({
+            notifications: this.state.notifications.map(notification => {
+                if (!notification[this.mapOptions().id]) {
+                    console.error('React Notification ERROR: For more information about this issue http://localhost:4001/');
+                    return notification;
+                }
+
+                if (notification[this.mapOptions().id] == item[this.mapOptions().id]) {
+                    notification[this.mapOptions().new] = true;
+                }
+                return notification;
+            }),
+            showNotificationMessage: true,
+            current: item
+        });
+        if (this.props.onItemClick) {
+            this.props.onItemClick(item, this.state.notifications);
+        }
+    }
+
+    back() {
+        this.setState({
+            showNotificationMessage: false
+        });
+    }
+
+    renderNotificationItem(item, i) {
+        if (this.props.customItemComponent) {
+            return <this.props.customItemComponent key={i} {...item} />;
+        }
+        return (
+            <NotificationItem
+                key={i} onClick={this.onItemClick.bind(this, item)}
+                options={this.mapOptions()}
+                {...item}/>
+        );
+    }
+
+    render() {
+        return (
+            <div className={cn('react-notification-center', 'light-theme', {hide: !this.props.visible})}>
+                <div className={cn('r-notifications-icon', {active: this.getUnreadLength()})} ref="notificationIcon">
+                    {this.getUnreadLength() > 0 && this.getUnreadLength()}
+                </div>
+                {this.state.showNotification &&
+                    <div className={cn('rr-wrapper', this.props.position)} ref="notificationHolder">
+                        <div className="notification-holder">
+                            <div className="r-notifications">
+                                <Header>{cutString(this.props.notificationTitle, 30)}</Header>
+                                <Content {...this.props}>
+                                    {this.state.notifications.length == 0 &&
+                                        <div className="no-rn">{this.props.noNotificationText}</div>
+                                    }
+                                    {this.state.notifications &&
+                                        <ul className="rn-ul">
+                                            {this.state.notifications.map((item, i) => {
+                                                return this.renderNotificationItem(item, i);
+                                            })}
+                                        </ul>
+                                    }
+                                </Content>
+                                <Footer></Footer>
+                            </div>
+
+                            <div className={cn('r-notification', {active: this.state.showNotificationMessage})}>
+                                <Header>{this.state.current && this.state.current[this.mapOptions().title]}</Header>
+                                <Content {...this.props}>
+                                    <div className="desc">
+                                        {this.state.current && this.state.current[this.mapOptions().message]}
+                                    </div>
+                                </Content>
+                                <Footer>
+                                    <button type="button" onClick={this.back.bind(this)}>
+                                        <div className="back"></div>
+                                    </button>
+                                </Footer>
+                            </div>
+                        </div>
+                    </div>}
+            </div>
+        );
+    }
+}

src/Item.js

@@ -25,3 +25,3 @@ import React, {Component, PropTypes} from 'react';
         return (
-            <li className={cn('rn-item', {read: this.props[this.props.options.read]})} onClick={this.handleOnClick.bind(this)}>
+            <li className={cn('rn-item', {new: this.props[this.props.options.new]})} onClick={this.handleOnClick.bind(this)}>
                 <p className="short-desc">
@@ -28,0 +28,0 @@ {this.props.tags && this.props.tags.map((item, i) => <Tag key={i} {...item}>{item.text}</Tag>)}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69277

increased by20.39%

Lines of code

1189

increased by25.03%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Number of package files

26

decreased by-3.7%

Number of lines in readme file

95

decreased by-7.77%

No dependency changes