@danderson00/react-forms 0.0.25 → 0.0.28

package/dist/Form.js

@@ -41,7 +41,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var _default = function _default(ContextProvider) {
+var Form = function Form(ContextProvider) {
   var additionalContext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var ErrorMessage = arguments.length > 2 ? arguments[2] : undefined;
   return function (_ref) {
@@ -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);
@@ -189,4 +194,5 @@ var _default = function _default(ContextProvider) {
   };
 };
 
+var _default = Form;
 exports["default"] = _default;

package/dist/Group.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var _excluded = ["name"],
+    _excluded2 = ["groups"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Group = function Group(formContext) {
+  return function (_ref) {
+    var name = _ref.name,
+        props = _objectWithoutProperties(_ref, _excluded);
+
+    if (!name) throw new Error("You must provide a name prop to form components");
+
+    var _useContext = (0, _react.useContext)(formContext),
+        _useContext$groups = _useContext.groups,
+        groups = _useContext$groups === void 0 ? [] : _useContext$groups,
+        context = _objectWithoutProperties(_useContext, _excluded2);
+
+    return /*#__PURE__*/(0, _react.createElement)(formContext.Provider, _objectSpread(_objectSpread({}, props), {}, {
+      value: _objectSpread(_objectSpread({}, context), {}, {
+        groups: groups.concat(name)
+      })
+    }));
+  };
+};
+
+var _default = Group;
+exports["default"] = _default;

package/dist/fields.js

@@ -14,7 +14,7 @@ var _excluded = ["label", "className"],
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/index.js

@@ -10,12 +10,14 @@ Object.defineProperty(exports, "FormProvider", {
     return _Form["default"];
   }
 });
-exports.wrapSubmit = exports.wrapInput = exports.useFormValues = exports.createRawConsumer = exports.context = exports.Textarea = exports.Submit = exports.Select = exports.Input = void 0;
+exports.wrapSubmit = exports.wrapInput = exports.useFormValues = exports.createRawConsumer = exports.context = exports.Textarea = exports.Submit = exports.Select = exports.Input = exports.Group = void 0;
 
 var _react = require("react");
 
 var _Form = _interopRequireDefault(require("./Form"));
 
+var _Group = _interopRequireDefault(require("./Group"));
+
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 
 var _submit = _interopRequireDefault(require("./submit"));
@@ -71,6 +73,8 @@ var createRawConsumer = function createRawConsumer(ConsumerComponent) {
 exports.createRawConsumer = createRawConsumer;
 var Form = (0, _Form["default"])(context.Provider, {}, _ErrorMessage["default"]);
 exports.Form = Form;
+var Group = (0, _Group["default"])(context);
+exports.Group = Group;
 var Submit = createConsumer((0, _submit["default"])(function (props) {
   return /*#__PURE__*/(0, _react.createElement)('button', props);
 }));

package/dist/input.js

@@ -15,7 +15,7 @@ var _inputTypes = _interopRequireDefault(require("./inputTypes"));
 
 var _throttle2 = _interopRequireDefault(require("./throttle"));
 
-var _excluded = ["type", "name", "value", "checked", "defaultValue", "numeric", "onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "submitOnChange", "submitOnBlur", "selectOnFocus", "throttle", "valid"];
+var _excluded = ["type", "value", "checked", "defaultValue", "numeric", "onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "submitOnChange", "submitOnBlur", "selectOnFocus", "throttle", "valid"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -69,12 +69,16 @@ var _default = function _default(render) {
 
     var previousValueProp = (0, _usePrevious["default"])(props.value); // this is currently broken :-\
 
-    var throttle = props.throttle,
+    var _props$groups = props.groups,
+        groups = _props$groups === void 0 ? [] : _props$groups,
+        throttle = props.throttle,
         onSubmit = props.onSubmit;
+    var name = groups.map(function (group) {
+      return group + '.';
+    }) + props.name;
     var submitHandler = throttle && onSubmit ? (0, _throttle2["default"])(onSubmit, isNaN(throttle) ? 200 : throttle) : onSubmit;
     (0, _react.useEffect)(function () {
-      var name = props.name,
-          getFieldValue = props.getFieldValue,
+      var getFieldValue = props.getFieldValue,
           setFieldValue = props.setFieldValue,
           registerFieldValidator = props.registerFieldValidator;
 
@@ -101,8 +105,7 @@ var _default = function _default(render) {
     // this probably introduces some redundancy with the onChange handler below
 
     (0, _useUpdate["default"])(function () {
-      var name = props.name,
-          value = props.value,
+      var value = props.value,
           setFieldValue = props.setFieldValue;
 
       var _types2 = (0, _inputTypes["default"])(props, options),
@@ -111,7 +114,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++) {
@@ -119,8 +122,7 @@ var _default = function _default(render) {
       }
 
       var event = args[0];
-      var name = props.name,
-          setFieldValue = props.setFieldValue,
+      var setFieldValue = props.setFieldValue,
           onChange = props.onChange,
           submitOnChange = props.submitOnChange;
       var valueFromEvent = options.valueFromEvent;
@@ -196,6 +198,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
@@ -212,7 +233,6 @@ var _default = function _default(render) {
           getValueProps = _types4.getValueProps;
 
       var type = props.type,
-          name = props.name,
           value = props.value,
           checked = props.checked,
           defaultValue = props.defaultValue,
@@ -250,7 +270,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 = {
@@ -100,7 +100,7 @@ var _default = function _default(props, options) {
         var set = _ref9.set,
             element = _ref9.element;
         set(value || defaultValue || props.options && props.options.length > 0 && props.options[0] || // this probably should come out - is it the right behavior for all browsers? it's here to keep 1 unit test happy?
-        element && element.value // this *should* work in all browsers (except jsdom)...
+        element && element.value || '' // this *should* work in all browsers (except jsdom)...
         );
       }
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danderson00/react-forms",
-  "version": "0.0.25",
+  "version": "0.0.28",
   "description": "Ultra simple, stateless, validated forms for use in React function components",
   "main": "dist/index.js",
   "module": "src/index.js",
@@ -13,7 +13,7 @@
     "object-path-immutable": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^17.0.1"
+    "react": "*"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",
@@ -24,8 +24,8 @@
     "babel-jest": "26.6.0",
     "enzyme": "^3.9.0",
     "jest": "26.6.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "jest": {
     "moduleNameMapper": {

package/src/Form.js

@@ -1,7 +1,7 @@
-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) => (
+const Form = (ContextProvider, additionalContext = {}, ErrorMessage) => (
   ({ resetOnSubmit, row, gap, ...props }) => {
     const [fieldValues, setFieldValues] = useState(props.values || {})
     const [fieldValidators, registerFieldValidator] = useReducer((validators, validator) => [...validators, validator], [])
@@ -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(
@@ -109,4 +115,5 @@ export default (ContextProvider, additionalContext = {}, ErrorMessage) => (
       })
     )
   }
-)
+)
+export default Form

package/src/Group.js

@@ -0,0 +1,15 @@
+import { createElement, useContext } from 'react'
+
+const Group = formContext => ({ name, ...props }) => {
+  if (!name) throw new Error("You must provide a name prop to form components")
+  const { groups = [], ...context } = useContext(formContext)
+
+  return createElement(formContext.Provider, {
+    ...props,
+    value: {
+      ...context,
+      groups: groups.concat(name)
+    }
+  })
+}
+export default Group

package/src/index.js

@@ -1,5 +1,6 @@
 import { createContext, createElement } from 'react'
 import FormProvider from './Form'
+import GroupProvider from './Group'
 import ErrorMessage from './ErrorMessage'
 import submit from './submit'
 import input from './input'
@@ -23,6 +24,7 @@ export const createRawConsumer = ConsumerComponent => (
 )
 
 export const Form = FormProvider(context.Provider, {}, ErrorMessage)
+export const Group = GroupProvider(context)
 export const Submit = createConsumer(submit(props => createElement('button', props)))
 
 export const Input = createConsumer(input(props => createElement('input', props)))

package/src/input.js

@@ -16,11 +16,12 @@ export default (render, options = {}) => function Input(props) {
   const previousValueProp = usePrevious(props.value)
 
   // this is currently broken :-\
-  const {  throttle, onSubmit } = props
+  const { groups = [], throttle, onSubmit } = props
+  const name = groups.map(group => group + '.') + props.name
   const submitHandler = (throttle && onSubmit) ? createThrottled(onSubmit, isNaN(throttle) ? 200 : throttle) : onSubmit
 
   useEffect(() => {
-    const { name, getFieldValue, setFieldValue, registerFieldValidator } = props
+    const { getFieldValue, setFieldValue, registerFieldValidator } = props
     const { setInitialValue, applyValueTransforms } = types(props, options)
 
     // don't override values that were set from passing a values prop to the form
@@ -43,7 +44,7 @@ export default (render, options = {}) => function Input(props) {
   // ensure form values are updated to reflect passed `value` prop
   // this probably introduces some redundancy with the onChange handler below
   useUpdate(() => {
-    const { name, value, setFieldValue } = props
+    const { value, setFieldValue } = props
     const { applyValueTransforms } = types(props, options)
 
     if(value !== previousValueProp) {
@@ -51,9 +52,10 @@ 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
+    const { setFieldValue, onChange, submitOnChange } = props
     const { valueFromEvent } = options
     const { getOutputValue, applyValueTransforms } = types(props, options)
 
@@ -110,6 +112,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
@@ -122,7 +139,7 @@ export default (render, options = {}) => function Input(props) {
     const { getValueProps } = types(props, options)
 
     const {
-      type, name, value, checked, defaultValue, numeric,
+      type, value, checked, defaultValue, numeric,
       onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
       submitOnChange, submitOnBlur, selectOnFocus, throttle, valid,
       ...passThroughProps
@@ -136,7 +153,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 }) => {
@@ -53,7 +53,7 @@ export default (props, options) => {
       setInitialValue: ({ set, element }) => {
         set(value || defaultValue ||
           (props.options && props.options.length > 0 && props.options[0]) || // this probably should come out - is it the right behavior for all browsers? it's here to keep 1 unit test happy?
-          element && element.value // this *should* work in all browsers (except jsdom)...
+          element && element.value || '' // this *should* work in all browsers (except jsdom)...
         )
       }
     }