react-shadow - npm Package Compare versions

Comparing version 0.1.12 to 0.2.0

bower.json

 {
   "name": "react-shadow",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "homepage": "https://github.com/Wildhoney/ReactShadow",
@@ -5,0 +5,0 @@ "authors": [

component/ReactShadow.js

@@ -88,2 +88,9 @@ (function main($window, $document) {
 
+                    if (event.target.value) {
+
+                        // Update the original element's value.
+                        element.setAttribute('value', event.target.value);
+
+                    }
+
                     // Dispatch the event on the original component's element.
@@ -100,3 +107,3 @@ var customEvent = $document.createEvent('Events');
             var eventsList = ['click', 'dblclick', 'mouseup', 'mouseout', 'mouseover', 'mousedown', 'mouseenter',
-                              'mouseleave', 'contextmenu', 'keyup'];
+                              'mouseleave', 'contextmenu', 'keyup', 'keydown', 'change'];
 
@@ -103,0 +110,0 @@ eventsList.forEach(function forEach(eventName) {

dist/react-shadow.js

@@ -88,2 +88,9 @@ (function main($window, $document) {
 
+                    if (event.target.value) {
+
+                        // Update the original element's value.
+                        element.setAttribute('value', event.target.value);
+
+                    }
+
                     // Dispatch the event on the original component's element.
@@ -100,3 +107,3 @@ var customEvent = $document.createEvent('Events');
             var eventsList = ['click', 'dblclick', 'mouseup', 'mouseout', 'mouseover', 'mousedown', 'mouseenter',
-                              'mouseleave', 'contextmenu', 'keyup'];
+                              'mouseleave', 'contextmenu', 'keyup', 'keydown', 'change'];
 
@@ -103,0 +110,0 @@ eventsList.forEach(function forEach(eventName) {

dist/react-shadow.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"use strict";var n="data-reactid",o="main";t.ReactShadow={_shadowRoot:{},componentDidMount:function(){var t=this._shadowRoot=this.getDOMNode().parentNode.createShadowRoot(),n=e.createElement(o);this._attachCSSDocuments(t),t.appendChild(n),t.appendChild(n),React.render(this.render(),n),this._interceptEvents()},componentDidUpdate:function(){var t=this._shadowRoot.querySelector(o);React.render(this.render(),t)},_interceptEvents:function(){var t=this.getDOMNode().getAttribute(n),o=this.getDOMNode().parentNode,i=function(i){i.stopPropagation();var s=i.target.getAttribute(n);if(s){var c=s.replace(/\.[0-9]+/,t),a=o.querySelector("*["+n+'="'+c+'"]'),r=e.createEvent("Events");r.initEvent(i.type,!0,!1),a.dispatchEvent(r)}}.bind(this),s=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu","keyup"];s.forEach(function(t){this._shadowRoot.addEventListener(t,i)}.bind(this))},_attachCSSDocuments:function(t){if(this.cssDocuments){var n="function"==typeof this.cssDocuments,o=n?this.cssDocuments():this.cssDocuments;o.forEach(function(n){var o=e.createElement("style");o.innerHTML='@import "'+n+'"',t.appendChild(o)})}return t}}}(window,window.document);
+!function(t,e){"use strict";var n="data-reactid",o="main";t.ReactShadow={_shadowRoot:{},componentDidMount:function(){var t=this._shadowRoot=this.getDOMNode().parentNode.createShadowRoot(),n=e.createElement(o);this._attachCSSDocuments(t),t.appendChild(n),t.appendChild(n),React.render(this.render(),n),this._interceptEvents()},componentDidUpdate:function(){var t=this._shadowRoot.querySelector(o);React.render(this.render(),t)},_interceptEvents:function(){var t=this.getDOMNode().getAttribute(n),o=this.getDOMNode().parentNode,i=function(i){i.stopPropagation();var a=i.target.getAttribute(n);if(a){var s=a.replace(/\.[0-9]+/,t),r=o.querySelector("*["+n+'="'+s+'"]');i.target.value&&r.setAttribute("value",i.target.value);var c=e.createEvent("Events");c.initEvent(i.type,!0,!1),r.dispatchEvent(c)}}.bind(this),a=["click","dblclick","mouseup","mouseout","mouseover","mousedown","mouseenter","mouseleave","contextmenu","keyup","keydown","change"];a.forEach(function(t){this._shadowRoot.addEventListener(t,i)}.bind(this))},_attachCSSDocuments:function(t){if(this.cssDocuments){var n="function"==typeof this.cssDocuments,o=n?this.cssDocuments():this.cssDocuments;o.forEach(function(n){var o=e.createElement("style");o.innerHTML='@import "'+n+'"',t.appendChild(o)})}return t}}}(window,window.document);

example/js/App.jsx

@@ -35,3 +35,3 @@ (function main($react) {
         getInitialState: function getInitialState() {
-            return { refreshed: 0 };
+            return { refreshed: 0, value: '' };
         },
@@ -67,3 +67,3 @@
             clearInterval(this.state.interval);
-            this.setState({ refreshed: 0 });
+            this.setState({ refreshed: 0, value: this.state.value });
             this.startInterval();
@@ -74,6 +74,7 @@ },
          * @method updateName
+         * @param event {Object}
          * @return {void}
          */
-        updateName: function updateName() {
-
+        updateName: function updateName(event) {
+            this.setState({ value: event.target.value });
         },
@@ -86,7 +87,11 @@
         render: function render() {
+
+            var value = this.state.value;
+
             return <section onClick={this.resetCounter} title="Reset Counter">
-                       <h1 className="title">
+                       <h1 className="title" onClick={this.updateName}>
                            {this.state.refreshed}
                        </h1>
                    </section>
+
         }
@@ -93,0 +98,0 @@

gulpfile.js

@@ -58,3 +58,6 @@ (function main() {
     gulp.task('default', ['test', 'build']);
+    gulp.task('watch', function watch() {
+        gulp.watch('component/*.js', ['build']);
+    });
 
 })();

package.json

 {
   "name": "react-shadow",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "description": "Use Shadow DOM with React.js and CSS imports; write your component styles in CSS!",
@@ -5,0 +5,0 @@ "main": "dist/react-shadow.min.js",

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

23685

increased by3.67%

Lines of code

427

increased by3.39%

No dependency changes