@danderson00/react-forms 0.0.25 → 0.0.26

package/dist/input.js

@@ -111,7 +111,7 @@ var _default = function _default(render) {
       if (value !== previousValueProp) {
         setFieldValue(name, applyValueTransforms(value));
       }
-    }, [props]);
+    }, [props]); // TODO: refactor bubbling to prop pattern
 
     var onChange = function onChange() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -196,6 +196,25 @@ var _default = function _default(render) {
       }
     };
 
+    var onKeyDown = function onKeyDown() {
+      var onKeyDown = props.onKeyDown;
+
+      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+        args[_key4] = arguments[_key4];
+      }
+
+      var event = args[0];
+      var element = event.target;
+
+      if (props.numeric && !/[0-9-]/.exec(event.key) && ![null, 0, 8, 9, 13, 27, 35, 36, 37, 39, 46].includes(event.keyCode)) {
+        event.preventDefault();
+      }
+
+      if (onKeyDown) {
+        onKeyDown.apply(element, args);
+      }
+    };
+
     var updateValidationState = function updateValidationState() {
       setFieldValidated(true); // this is a little hacky, but the simplest way I could think of to determine the
       // validity of the actual input element. :invalid is also not supported by enzyme
@@ -250,7 +269,8 @@ var _default = function _default(render) {
       }, passThroughProps), valueProps), numericProps), typeProps), errorProps), {}, {
         onChange: onChange,
         onFocus: onFocus,
-        onBlur: onBlur
+        onBlur: onBlur,
+        onKeyDown: onKeyDown
       });
 
       return render(finalProps);

package/dist/inputTypes.js

@@ -22,7 +22,7 @@ var _default = function _default(props, options) {
       defaultValue = props.defaultValue;
 
   var applyValueTransforms = function applyValueTransforms(value) {
-    return (props.type === 'number' || props.numeric) && !isNaN(+value) ? +value : value;
+    return (props.type === 'number' || props.numeric) && !isNaN(+value) && value !== '' ? +value : value;
   };
 
   var defaultType = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danderson00/react-forms",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Ultra simple, stateless, validated forms for use in React function components",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/input.js

@@ -51,6 +51,7 @@ export default (render, options = {}) => function Input(props) {
     }
   }, [props])
 
+  // TODO: refactor bubbling to prop pattern
   const onChange = (...args) => {
     const [event] = args
     const { name, setFieldValue, onChange, submitOnChange } = props
@@ -110,6 +111,21 @@ export default (render, options = {}) => function Input(props) {
     }
   }
 
+  const onKeyDown = (...args) => {
+    const { onKeyDown } = props
+    const [event] = args
+    const element = event.target
+      
+    if(props.numeric && !/[0-9-]/.exec(event.key) && ![null, 0, 8, 9, 13, 27, 35, 36, 37, 39, 46].includes(event.keyCode)) {
+      event.preventDefault()
+    }
+
+    if(onKeyDown) {
+      onKeyDown.apply(element, args)
+    }
+  }
+
+
   const updateValidationState = () => {
     setFieldValidated(true)
     // this is a little hacky, but the simplest way I could think of to determine the
@@ -136,7 +152,7 @@ export default (render, options = {}) => function Input(props) {
     const finalProps = {
       id, name, className,
       ...passThroughProps, ...valueProps, ...numericProps, ...typeProps, ...errorProps,
-      onChange, onFocus, onBlur
+      onChange, onFocus, onBlur, onKeyDown
     }
 
     return render(finalProps)

package/src/inputTypes.js

@@ -3,7 +3,7 @@ const resolveValue = (value, args) => typeof value === 'function' ? value.apply(
 export default (props, options) => {
   const { type, checked, value, defaultValue } = props
 
-  const applyValueTransforms = value => ((props.type === 'number' || props.numeric) && !isNaN(+value)) ? +value : value
+  const applyValueTransforms = value => ((props.type === 'number' || props.numeric) && !isNaN(+value) && value !== '') ? +value : value
 
   const defaultType = {
     setInitialValue: ({ set }) => {