react-event-injector/dist/es5/Injector.js

React way to addEventListener

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var tiny_invariant_1 = require("tiny-invariant");
var eventManager_1 = require("./eventManager");
var propTypes_1 = require("./propTypes");
;
function pick(names, data, options) {
    return names.reduce(function (acc, name) {
        acc.push({ name: name, options: options, cb: data[name] });
        return acc;
    }, []);
}
var EventInjector = (function (_super) {
    __extends(EventInjector, _super);
    function EventInjector() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.ref = null;
        _this.state = {
            injectedEvents: []
        };
        _this.setRef = function (ref) {
            var _a = _this.props.settings, settings = _a === void 0 ? {} : _a;
            if (ref !== _this.ref) {
                if (_this.ref) {
                    eventManager_1.detach(_this.ref, pick(eventManager_1.getEventNames(_this.props), _this.props, settings));
                    eventManager_1.detach(_this.ref, _this.state.injectedEvents);
                }
                _this.ref = ref;
                if (_this.ref) {
                    tiny_invariant_1.default(_this.ref.addEventListener, 'React-event-injector: Target should be EventTarget compatible, or any DOM Element');
                    eventManager_1.attach(_this.ref, pick(eventManager_1.getEventNames(_this.props), _this.props, settings));
                    eventManager_1.attach(_this.ref, _this.state.injectedEvents);
                }
            }
        };
        _this.dispatchEvent = function () { return false; };
        _this.addEventListener = function (name, cb, options) {
            var onName = "on" + name;
            _this.setState(function (_a) {
                var injectedEvents = _a.injectedEvents;
                return ({
                    injectedEvents: injectedEvents.concat([{ name: onName, cb: cb, options: options }])
                });
            });
        };
        _this.removeEventListener = function (name, cb, options) {
            var onName = "on" + name;
            _this.setState(function (_a) {
                var injectedEvents = _a.injectedEvents;
                return ({
                    injectedEvents: injectedEvents.filter(function (c) { return !(c.name === onName && c.cb === cb && c.options === options); })
                });
            });
        };
        return _this;
    }
    EventInjector.prototype.componentWillUnmount = function () {
        if (this.ref) {
            eventManager_1.detach(this.ref, pick(eventManager_1.getEventNames(this.props), this.props, this.props.settings));
            eventManager_1.detach(this.ref, this.state.injectedEvents);
        }
    };
    EventInjector.prototype.componentDidUpdate = function (oldProps, oldState) {
        var _this = this;
        var props = this.props;
        var pure = props.pure;
        if (!(pure && pure === oldProps.pure)) {
            var _a = oldProps.settings, oldSettings = _a === void 0 ? {} : _a;
            var toRemove = eventManager_1.getEventNames(oldProps).filter(function (name) { return oldProps[name] !== props[name] && oldProps[name]; });
            if (this.ref) {
                eventManager_1.detach(this.ref, pick(toRemove, oldProps, oldSettings));
            }
            var _b = this.props.settings, settings = _b === void 0 ? {} : _b;
            var toAdd = eventManager_1.getEventNames(props).filter(function (name) { return oldProps[name] !== props[name] && props[name]; });
            if (this.ref) {
                eventManager_1.attach(this.ref, pick(toAdd, props, settings));
            }
        }
        if (this.ref) {
            if (oldState !== this.state) {
                var toRemove = oldState.injectedEvents.filter(function (x) { return _this.state.injectedEvents.indexOf(x) < 0; });
                eventManager_1.detach(this.ref, toRemove);
                var toAdd = this.state.injectedEvents.filter(function (x) { return oldState.injectedEvents.indexOf(x) < 0; });
                eventManager_1.attach(this.ref, toAdd);
            }
        }
    };
    EventInjector.prototype.render = function () {
        var children = this.props.children;
        return typeof children === 'function'
            ? children(this.setRef)
            : React.cloneElement(React.Children.only(children), { ref: this.setRef });
    };
    EventInjector.propTypes = __assign({}, propTypes_1.eventTypes, propTypes_1.injectorTypes);
    return EventInjector;
}(React.Component));
exports.EventInjector = EventInjector;