@danderson00/react-forms 0.0.24 → 0.0.27

package/dist/Form.js

@@ -73,6 +73,11 @@ var _default = function _default(ContextProvider) {
         setValid = _useState6[1];
 
     var form = /*#__PURE__*/(0, _react.createRef)();
+    (0, _react.useEffect)(function () {
+      if (form.current) {
+        setValid(form.current.checkValidity());
+      }
+    }, [form.current]);
 
     var getFieldValue = function getFieldValue(path) {
       return (0, _objectPathImmutable.get)(fieldValues, path);

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
@@ -232,6 +251,9 @@ var _default = function _default(render) {
       var valueProps = getValueProps({
         currentValue: getFieldValue(name)
       });
+      var numericProps = numeric && {
+        type: 'number'
+      };
       var typeProps = type && {
         type: type
       };
@@ -240,14 +262,15 @@ var _default = function _default(render) {
       };
       var className = (fieldValidated ? 'validated ' : '') + (props.className || '') || undefined;
 
-      var finalProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      var finalProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
         id: id,
         name: name,
         className: className
-      }, passThroughProps), valueProps), typeProps), errorProps), {}, {
+      }, 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.24",
+  "version": "0.0.27",
   "description": "Ultra simple, stateless, validated forms for use in React function components",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/Form.js

@@ -1,4 +1,4 @@
-import { createElement, createRef, useReducer, useState } from 'react'
+import { createElement, createRef, useEffect, useReducer, useState } from 'react'
 import { get, set } from 'object-path-immutable'
 
 export default (ContextProvider, additionalContext = {}, ErrorMessage) => (
@@ -9,6 +9,12 @@ export default (ContextProvider, additionalContext = {}, ErrorMessage) => (
     const [valid, setValid] = useState()
     const form = createRef()
 
+    useEffect(() => {
+      if(form.current) {
+        setValid(form.current.checkValidity())
+      }
+    }, [form.current])
+
     const getFieldValue = path => get(fieldValues, path)
     const getFieldValues = () => fieldValues
     const mapFieldValues = target => Object.keys(target).reduce(

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
@@ -128,14 +144,15 @@ export default (render, options = {}) => function Input(props) {
       ...passThroughProps
     } = props
     const valueProps = getValueProps({ currentValue: getFieldValue(name) })
+    const numericProps = (numeric && { type: 'number' })
     const typeProps = (type && { type })
     const errorProps = (passErrorProp && { error })
     const className = ((fieldValidated ? 'validated ' : '') + (props.className || '') || undefined)
 
     const finalProps = {
       id, name, className,
-      ...passThroughProps, ...valueProps, ...typeProps, ...errorProps,
-      onChange, onFocus, onBlur
+      ...passThroughProps, ...valueProps, ...numericProps, ...typeProps, ...errorProps,
+      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 }) => {