@react-mdc/base - npm Package Compare versions

Comparing version 0.1.9 to 0.1.10

lib/NativeDOMAdapter.d.ts

@@ -16,3 +16,3 @@ /// <reference types="react" />
     attributes?: Attributes;
-    children?: React.ReactElement<any>;
+    children: React.ReactElement<any>;
 };
@@ -31,10 +31,12 @@ /**
     private lastDOMNode;
-    render(): React.ReactElement<any> | null;
+    render(): React.ReactElement<any>;
     componentDidMount(): void;
     componentDidUpdate(origPrevProps: Props): void;
     private internalProps(props);
-    private getDOMNode();
+    private mergeEvents(eventListeners, props);
     private removeCssVariables(dom, toRemove);
     private addCssVariables(dom, toAdd);
     private updateCssVariables(dom, prev, next);
+    private filterReactEventConvertibles(eventListeners);
+    private filterNativeEvents(eventListeners);
     private removeEventListeners(dom, toRemove);
@@ -46,2 +48,4 @@ private addEventListeners(dom, toAdd);
     private updateAttributes(dom, prev, next);
+    private updateNode(prevNode, nextNode, prevProps, props);
+    private handleRef;
 }

lib/NativeDOMAdapter.js

@@ -25,2 +25,3 @@ "use strict";
 var ReactDOM = require("react-dom");
+var event_1 = require("./event");
 /**
@@ -33,13 +34,20 @@ * High order components that adds native DOM properties
     function NativeDOMAdapter() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleRef = function (ref) {
+            var props = _this.internalProps(_this.props);
+            var prevNode = _this.lastDOMNode;
+            var nextNode = ReactDOM.findDOMNode(ref);
+            _this.updateNode(prevNode, nextNode, props, props);
+            _this.lastDOMNode = nextNode;
+        };
+        return _this;
     }
     NativeDOMAdapter.prototype.render = function () {
-        return this.props.children || null;
+        var child = this.props.children;
+        var reactConvertibles = this.filterReactEventConvertibles(this.props.eventListeners || {});
+        var merged = this.mergeEvents(reactConvertibles, child.props);
+        return React.cloneElement(child, __assign({ ref: this.handleRef }, merged));
     };
     NativeDOMAdapter.prototype.componentDidMount = function () {
-        var props = this.internalProps(this.props);
-        this.lastDOMNode = this.getDOMNode();
-        this.addCssVariables(this.lastDOMNode, props.cssVariables);
-        this.addEventListeners(this.lastDOMNode, props.eventListeners);
-        this.addAttributes(this.lastDOMNode, props.attributes);
+        this.lastDOMNode = ReactDOM.findDOMNode(this);
     };
@@ -49,21 +57,3 @@ NativeDOMAdapter.prototype.componentDidUpdate = function (origPrevProps) {
         var prevProps = this.internalProps(origPrevProps);
-        var node = this.getDOMNode();
-        if (node !== this.lastDOMNode) {
-            // Remove from previous DOM node
-            this.removeCssVariables(this.lastDOMNode, prevProps.cssVariables);
-            this.removeEventListeners(this.lastDOMNode, prevProps.eventListeners);
-            this.removeAttributes(this.lastDOMNode, props.attributes);
-            // Add to new DOM node
-            this.addCssVariables(node, props.cssVariables);
-            this.addEventListeners(node, props.eventListeners);
-            this.addAttributes(node, props.attributes);
-            // Update current DOM node
-            this.lastDOMNode = node;
-        }
-        else {
-            // Update
-            this.updateCssVariables(node, prevProps.cssVariables, props.cssVariables);
-            this.updateEventListeners(node, prevProps.eventListeners, props.eventListeners);
-            this.updateAttributes(node, prevProps.attributes, props.attributes);
-        }
+        this.updateNode(this.lastDOMNode, ReactDOM.findDOMNode(this), prevProps, props);
     };
@@ -78,5 +68,40 @@ NativeDOMAdapter.prototype.internalProps = function (props) {
     };
-    // Get root DOM node of element
-    NativeDOMAdapter.prototype.getDOMNode = function () {
-        return ReactDOM.findDOMNode(this);
+    NativeDOMAdapter.prototype.mergeEvents = function (eventListeners, props) {
+        var merged = __assign({}, props);
+        forEach(eventListeners, function (listeners, eventType) {
+            var eventProp = event_1.EVENT_MAP[eventType];
+            if (eventProp == null) {
+                return;
+            }
+            var givenEvent;
+            if (eventProp in merged) {
+                givenEvent = merged[eventProp];
+            }
+            else {
+                givenEvent = function () { };
+            }
+            var listener = function (event) {
+                var nativeEvent = event.nativeEvent;
+                var proxiedEvent = {};
+                for (var key in nativeEvent) {
+                    if (key.slice(0, 1) !== "_") {
+                        proxiedEvent[key] = nativeEvent[key];
+                    }
+                }
+                proxiedEvent.stopPropagation = function () {
+                    event.stopPropagation();
+                    nativeEvent.stopPropagation();
+                };
+                givenEvent(event);
+                if (event.defaultPrevented) {
+                    return;
+                }
+                listeners.every(function (nativeListener) {
+                    nativeListener(proxiedEvent);
+                    return !nativeEvent.defaultPrevented;
+                });
+            };
+            merged[eventProp] = listener;
+        });
+        return merged;
     };
@@ -115,4 +140,22 @@ // Manage CSS variables
     // Manage event listeners
+    NativeDOMAdapter.prototype.filterReactEventConvertibles = function (eventListeners) {
+        var nativeListeners = {};
+        forEach(eventListeners, function (listeners, eventType) {
+            if (eventType in event_1.EVENT_MAP) {
+                nativeListeners[eventType] = listeners;
+            }
+        });
+        return nativeListeners;
+    };
+    NativeDOMAdapter.prototype.filterNativeEvents = function (eventListeners) {
+        var nativeListeners = {};
+        forEach(eventListeners, function (listeners, eventType) {
+            if (!(eventType in event_1.EVENT_MAP)) {
+                nativeListeners[eventType] = listeners;
+            }
+        });
+        return nativeListeners;
+    };
     NativeDOMAdapter.prototype.removeEventListeners = function (dom, toRemove) {
-        forEach(toRemove, function (listeners, event) {
+        forEach(this.filterNativeEvents(toRemove), function (listeners, event) {
             listeners.forEach(function (listener) {
@@ -124,3 +167,3 @@ dom.removeEventListener(event, listener);
     NativeDOMAdapter.prototype.addEventListeners = function (dom, toAdd) {
-        forEach(toAdd, function (listeners, event) {
+        forEach(this.filterNativeEvents(toAdd), function (listeners, event) {
             listeners.forEach(function (listener) {
@@ -193,2 +236,22 @@ dom.addEventListener(event, listener);
     };
+    NativeDOMAdapter.prototype.updateNode = function (prevNode, nextNode, prevProps, props) {
+        if (prevNode === nextNode) {
+            // Update
+            this.updateCssVariables(nextNode, prevProps.cssVariables, props.cssVariables);
+            this.updateEventListeners(nextNode, prevProps.eventListeners, props.eventListeners);
+            this.updateAttributes(nextNode, prevProps.attributes, props.attributes);
+        }
+        else {
+            if (prevNode != null) {
+                // Remove from previous DOM node
+                this.removeCssVariables(prevNode, props.cssVariables);
+                this.removeEventListeners(prevNode, props.eventListeners);
+                this.removeAttributes(prevNode, props.attributes);
+            }
+            // Add to new DOM node
+            this.addCssVariables(nextNode, props.cssVariables);
+            this.addEventListeners(nextNode, props.eventListeners);
+            this.addAttributes(nextNode, props.attributes);
+        }
+    };
     return NativeDOMAdapter;
@@ -195,0 +258,0 @@ }(React.Component));

package.json

 {
   "name": "@react-mdc/base",
   "description": "Core library of @react-mdc components",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "license": "MIT",
@@ -37,3 +37,3 @@ "main": "lib/index",
     "tslint-react": "^3.0.0",
-    "typescript": "^2.3.2"
+    "typescript": "^2.3.4"
   },
@@ -40,0 +40,0 @@ "scripts": {

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

Improved metrics

Total package byte prevSize

42447

increased by29.9%

Number of package files

28

increased by12%

Lines of code

767

increased by37.95%

No dependency changes