react-two-cents - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/react-two-cents.js

@@ -1,2 +0,2 @@
-var t,r=require("react"),e=(t=r)&&"object"==typeof t&&"default"in t?t.default:t,o=Object.assign||function(t){for(var r=arguments,e=1;e<arguments.length;e++){var o=r[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},n=r.createContext({touched:!1,focused:!1,error:!1,controlId:null,register:function(){return function(){}}});function u(t){return function(r){return e.createElement(n.Consumer,null,function(n){return e.createElement(t,o({register:n.register},r))})}}var i=function(t){function r(r){t.call(this,r),this.register=this.register.bind(this),this.focus=this.focus.bind(this),this.blur=this.blur.bind(this),this.state={touched:!1,focused:!1,error:null,controlId:null,register:this.register,focus:this.focus,blur:this.blur,setError:this.setError}}return t&&(r.__proto__=t),(r.prototype=Object.create(t&&t.prototype)).constructor=r,r.prototype.register=function(t){var r,e=this;return function(o){e.setState("error"===t?function(t){return{error:!t.error}}:((r={})[t+"Id"]=o,r))}},r.prototype.focus=function(){this.setState({focused:!0,touched:!0})},r.prototype.blur=function(){this.setState({focused:!1})},r.prototype.render=function(){var t=this;return e.createElement(n.Provider,{value:this.state},e.createElement(n.Consumer,null,function(r){return t.props.children(r)}))},r}(e.Component),c=Object.assign||function(t){for(var r=arguments,e=1;e<arguments.length;e++){var o=r[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t};var s=u(function(t){function r(){t.apply(this,arguments)}return t&&(r.__proto__=t),(r.prototype=Object.create(t&&t.prototype)).constructor=r,r.prototype.componentDidMount=function(){var t=this.props,r=t.id;(0,t.register)("control")(r)},r.prototype.render=function(){var t=this.props,r=t.onBlur,o=t.onFocus,u=function(t,r){var e={};for(var o in t)r.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}(t,["id","onBlur","onFocus"]);return e.createElement(n.Consumer,null,function(t){var n=t.focus,i=t.blur;return e.createElement("input",c({id:t.controlId,onFocus:function(){n(),o&&o()},onBlur:function(){i(),r&&r()},"aria-invalid":!!t.error},u))})},r}(e.Component)),p=Object.assign||function(t){for(var r=arguments,e=1;e<arguments.length;e++){var o=r[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},l=u(function(t){function r(){t.apply(this,arguments)}return t&&(r.__proto__=t),(r.prototype=Object.create(t&&t.prototype)).constructor=r,r.prototype.componentDidMount=function(){var t=this.props;(0,t.register)("error")(!0)},r.prototype.componentWillUnmount=function(){(0,this.props.register)("error")(!1)},r.prototype.render=function(){return this.props.children},r}(e.Component));exports.Label=function(t){return e.createElement(n.Consumer,null,function(r){return e.createElement("label",p({htmlFor:r.controlId},t))})},exports.Control=s,exports.Field=i,exports.Error=l;
+var t,r=require("react"),e=(t=r)&&"object"==typeof t&&"default"in t?t.default:t,o=Object.assign||function(t){for(var r=arguments,e=1;e<arguments.length;e++){var o=r[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},n=r.createContext({touched:!1,focused:!1,error:!1,controlId:null,register:function(){return function(){}}});function i(t){return function(r){return e.createElement(n.Consumer,null,function(n){return e.createElement(t,o({register:n.register},r))})}}var u=function(t){function r(r){t.call(this,r),this.register=this.register.bind(this),this.focus=this.focus.bind(this),this.blur=this.blur.bind(this),this.state={touched:!1,focused:!1,error:null,controlId:null,register:this.register,focus:this.focus,blur:this.blur,setError:this.setError}}return t&&(r.__proto__=t),(r.prototype=Object.create(t&&t.prototype)).constructor=r,r.prototype.register=function(t){var r,e=this;return function(o){e.setState("error"===t?function(t){return{error:!t.error}}:((r={})[t+"Id"]=o,r))}},r.prototype.focus=function(){this.setState({focused:!0,touched:!0})},r.prototype.blur=function(){this.setState({focused:!1})},r.prototype.render=function(){var t=this;return e.createElement(n.Provider,{value:this.state},e.createElement(n.Consumer,null,function(r){return t.props.children(r)}))},r}(e.Component),c=Object.assign||function(t){for(var r=arguments,e=1;e<arguments.length;e++){var o=r[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t};var s=i(function(t){function r(){t.apply(this,arguments)}return t&&(r.__proto__=t),(r.prototype=Object.create(t&&t.prototype)).constructor=r,r.prototype.componentDidMount=function(){var t=this.props,r=t.id;(0,t.register)("control")(r)},r.prototype.render=function(){var t=this.props,r=t.children,o=t.onBlur,i=t.onFocus,u=function(t,r){var e={};for(var o in t)r.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}(t,["children","id","onBlur","onFocus"]);return e.createElement(n.Consumer,null,function(t){var n=t.focus,s=t.blur,p={id:t.controlId,onFocus:function(){n(),i&&i()},onBlur:function(){s(),o&&o()},"aria-invalid":!!t.error};return r?r(p):e.createElement("input",c({},p,u))})},r}(e.Component)),p=Object.assign||function(t){for(var r=arguments,e=1;e<arguments.length;e++){var o=r[e];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(t[n]=o[n])}return t},l=i(function(t){function r(){t.apply(this,arguments)}return t&&(r.__proto__=t),(r.prototype=Object.create(t&&t.prototype)).constructor=r,r.prototype.componentDidMount=function(){var t=this.props;(0,t.register)("error")(!0)},r.prototype.componentWillUnmount=function(){(0,this.props.register)("error")(!1)},r.prototype.render=function(){return this.props.children},r}(e.Component));exports.Label=function(t){return e.createElement(n.Consumer,null,function(r){return e.createElement("label",p({htmlFor:r.controlId},t))})},exports.Control=s,exports.Field=u,exports.Error=l;
 //# sourceMappingURL=react-two-cents.js.map

package.json

 {
   "name": "react-two-cents",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "My input on input fields in React",
@@ -12,2 +12,3 @@ "main": "dist/react-two-cents.js",
   "scripts": {
+    "test": "echo \"No tests yet you lazy bum\"",
     "babel": "babel --presets=react --plugins=transform-object-rest-spread --no-babelrc -d build src",
@@ -14,0 +15,0 @@ "build": "npm run -s babel && microbundle",

src/Field/Control.js

@@ -11,9 +11,9 @@ import React from 'react';
   render() {
-    const { id, onBlur, onFocus, ...props } = this.props;
+    const { children, id, onBlur, onFocus, ...props } = this.props;
     return (
       <FieldContext.Consumer>
-        {({ focus, blur, error, controlId, helpId, register }) => (
-          <input
-            id={controlId}
-            onFocus={() => {
+        {({ focus, blur, error, controlId, register }) => {
+          const inputProps = {
+            id: controlId,
+            onFocus: () => {
               focus();
@@ -23,4 +23,4 @@ if (onFocus) {
               }
-            }}
-            onBlur={() => {
+            },
+            onBlur: () => {
               blur();
@@ -30,7 +30,12 @@ if (onBlur) {
               }
-            }}
-            aria-invalid={!!error}
-            {...props}
-          />
-        )}
+            },
+            'aria-invalid': !!error,
+          };
+
+          return children ? (
+            children(inputProps)
+          ) : (
+            <input {...inputProps} {...props} />
+          );
+        }}
       </FieldContext.Consumer>
@@ -37,0 +42,0 @@ );

New alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8629

increased by2.68%

Lines of code

145

increased by2.84%

Worsened metrics

Number of low quality alerts

4

increased by33.33%

No dependency changes