react-notification-center/lib/NotificationCenter.js

react-notification-center keep all your notification in a single place

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = undefined;

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 _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 }; }

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 ReduxModal = function (_Component) {
    _inherits(ReduxModal, _Component);

    function ReduxModal(props) {
        _classCallCheck(this, ReduxModal);

        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;
    }

    ReduxModal.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);
        }
    };

    ReduxModal.prototype.componentDidUpdate = function componentDidUpdate() {};

    ReduxModal.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
        if (nextProps.notifications.length !== this.state.notifications.length) {
            this.setState({
                notifications: nextProps.notifications
            });
        }
    };

    ReduxModal.prototype.componentWillUnmount = function componentWillUnmount() {
        _emitter.EE.off('add/notification');
        _emitter.EE.off('clear/all');
        if (document) {
            document.removeEventListener('click', this.toggleNotification);
        }
    };

    ReduxModal.prototype.getUnreadLength = function getUnreadLength() {
        var _this3 = this;

        return this.state.notifications.filter(function (item) {
            return !item[_this3.mapOptions().read];
        }).length;
    };

    ReduxModal.prototype.toggleNotification = function toggleNotification(e) {
        if (e.target == this.refs.notificationIcon && !this.state.showNotification) {
            this.setState({
                showNotification: true
            });
            if (this.props.onNotificatioOpen) {
                this.props.onNotificatioOpen(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.onNotificatioClose) {
                this.props.onNotificatioClose(this.state.notifications);
            }
        }
    };

    ReduxModal.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);
        }
    };

    ReduxModal.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',
            read: this.props.mapToItem.read || 'read'
        };
    };

    ReduxModal.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().read] = true;
                }
                return notification;
            }),
            showNotificationMessage: true,
            current: item
        });
        if (this.props.onItemClick) {
            this.props.onItemClick(item, this.state.notifications);
        }
    };

    ReduxModal.prototype.back = function back() {
        this.setState({
            showNotificationMessage: false
        });
    };

    ReduxModal.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));
    };

    ReduxModal.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 ReduxModal;
}(_react.Component);

ReduxModal.displayName = 'ReduxNotofication';
ReduxModal.propTypes = {
    notifications: _react.PropTypes.array,
    mapToItem: _react.PropTypes.object,
    onItemClick: _react.PropTypes.func,
    customItemComponent: _react.PropTypes.func,
    onNotificatioOpen: _react.PropTypes.func,
    onNotificatioClose: _react.PropTypes.func,
    onScrollBottom: _react.PropTypes.func,
    position: _react.PropTypes.string,
    wordsInItem: _react.PropTypes.number,
    noNotificationText: _react.PropTypes.string
};
ReduxModal.defaultProps = {
    notificationTitle: 'React notification center',
    position: 'left',
    wordsInItem: 50,
    noNotificationText: 'No data available, enjoy your day',
    mapToItem: {},
    notifications: []
};
exports.default = ReduxModal;