@danderson00/react-forms 0.0.15 → 0.0.19

package/dist/ErrorMessage.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.extractErrorMessage = void 0;
+exports.extractErrorMessage = exports["default"] = void 0;
 
 var _react = require("react");
 

package/dist/Form.js

@@ -67,6 +67,11 @@ var _default = function _default(ContextProvider) {
         error = _useState4[0],
         setError = _useState4[1];
 
+    var _useState5 = (0, _react.useState)(),
+        _useState6 = _slicedToArray(_useState5, 2),
+        valid = _useState6[0],
+        setValid = _useState6[1];
+
     var form = /*#__PURE__*/(0, _react.createRef)();
 
     var getFieldValue = function getFieldValue(path) {
@@ -84,9 +89,10 @@ var _default = function _default(ContextProvider) {
     };
 
     var setFieldValue = function setFieldValue(path, value) {
-      return setFieldValues(function (previousValues) {
+      setFieldValues(function (previousValues) {
         return (0, _objectPathImmutable.set)(previousValues, path, value);
       });
+      setValid(form.current.checkValidity());
     };
 
     var onSubmit = function onSubmit(e, additionalValues) {
@@ -165,7 +171,8 @@ var _default = function _default(ContextProvider) {
           setFieldValue: setFieldValue,
           getFieldValue: getFieldValue,
           getFieldValues: getFieldValues,
-          onSubmit: onSubmit
+          onSubmit: onSubmit,
+          valid: valid
         }, mergedAdditionalContext)
       })), error && /*#__PURE__*/(0, _react.createElement)(ErrorMessage, {
         key: 'error',

package/dist/fields.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Radio = exports.RadioButton = exports.Checkbox = exports.Text = void 0;
+exports.Text = exports.RadioButton = exports.Radio = exports.Checkbox = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/index.js

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.Form = void 0;
 Object.defineProperty(exports, "FormProvider", {
   enumerable: true,
   get: function get() {
     return _Form["default"];
   }
 });
-exports.useFormValues = exports.wrapSubmit = exports.wrapInput = exports.Select = exports.Textarea = exports.Input = exports.Submit = exports.Form = exports.createRawConsumer = exports.context = void 0;
+exports.wrapSubmit = exports.wrapInput = exports.useFormValues = exports.createRawConsumer = exports.context = exports.Textarea = exports.Submit = exports.Select = exports.Input = void 0;
 
 var _react = require("react");
 

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", "throttle"];
+var _excluded = ["type", "name", "value", "checked", "defaultValue", "numeric", "onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "submitOnChange", "submitOnBlur", "selectOnFocus", "throttle", "valid"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -170,6 +170,32 @@ var _default = function _default(render) {
       }
     };
 
+    var onFocus = function onFocus() {
+      var selectOnFocus = props.selectOnFocus,
+          onFocus = props.onFocus;
+
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+
+      var event = args[0];
+      var element = event.target;
+
+      var selectText = function selectText() {
+        element.selectionStart = 0;
+        element.selectionEnd = element.value.length;
+      };
+
+      if (selectOnFocus) {
+        selectText();
+        setTimeout(selectText);
+      }
+
+      if (onFocus) {
+        onFocus.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
@@ -198,7 +224,9 @@ var _default = function _default(render) {
           getFieldValues = props.getFieldValues,
           submitOnChange = props.submitOnChange,
           submitOnBlur = props.submitOnBlur,
+          selectOnFocus = props.selectOnFocus,
           _throttle = props.throttle,
+          valid = props.valid,
           passThroughProps = _objectWithoutProperties(props, _excluded);
 
       var valueProps = getValueProps({
@@ -218,6 +246,7 @@ var _default = function _default(render) {
         className: className
       }, passThroughProps), valueProps), typeProps), errorProps), {}, {
         onChange: onChange,
+        onFocus: onFocus,
         onBlur: onBlur
       });
 

package/dist/submit.js

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _excluded = ["onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues"];
+var _excluded = ["onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "valid", "disableInvalid"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -62,11 +62,13 @@ var _default = function _default(render) {
         setFieldValue = props.setFieldValue,
         getFieldValue = props.getFieldValue,
         getFieldValues = props.getFieldValues,
+        valid = props.valid,
+        disableInvalid = props.disableInvalid,
         propsToPass = _objectWithoutProperties(props, _excluded);
 
     var finalProps = _objectSpread(_objectSpread({}, propsToPass), {}, {
       onClick: onClick,
-      disabled: executing
+      disabled: executing || props.disableInvalid && !props.valid
     });
 
     return render(finalProps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danderson00/react-forms",
-  "version": "0.0.15",
+  "version": "0.0.19",
   "description": "Ultra simple, stateless, validated forms for use in React function components",
   "main": "dist/index.js",
   "module": "src/index.js",
@@ -32,7 +32,7 @@
       "\\.css$": "<rootDir>/test/setup/styleMock.js"
     },
     "setupFilesAfterEnv": [
-      "<rootDir>test/setup/beforeAll.js"
+      "<rootDir>test/setup/enzyme.js"
     ]
   },
   "babel": {
@@ -49,7 +49,7 @@
     "component"
   ],
   "author": "danderson00",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },

package/src/Form.js

@@ -6,6 +6,7 @@ export default (ContextProvider, additionalContext = {}, ErrorMessage) => (
     const [fieldValues, setFieldValues] = useState(props.values || {})
     const [fieldValidators, registerFieldValidator] = useReducer((validators, validator) => [...validators, validator], [])
     const [error, setError] = useState()
+    const [valid, setValid] = useState()
     const form = createRef()
 
     const getFieldValue = path => get(fieldValues, path)
@@ -15,7 +16,10 @@ export default (ContextProvider, additionalContext = {}, ErrorMessage) => (
       {}
     )
 
-    const setFieldValue = (path, value) => setFieldValues(previousValues => set(previousValues, path, value))
+    const setFieldValue = (path, value) => {
+      setFieldValues(previousValues => set(previousValues, path, value))
+      setValid(form.current.checkValidity())
+    }
 
     const onSubmit = (e, additionalValues) => {
       fieldValidators.forEach(setFieldValidated => setFieldValidated())
@@ -88,6 +92,7 @@ export default (ContextProvider, additionalContext = {}, ErrorMessage) => (
               getFieldValue,
               getFieldValues,
               onSubmit,
+              valid,
               ...mergedAdditionalContext
             }
           }),

package/src/input.js

@@ -91,6 +91,25 @@ export default (render, options = {}) => function Input(props) {
     }
   }
 
+  const onFocus = (...args) => {
+    const { selectOnFocus, onFocus } = props
+    const [event] = args
+    const element = event.target
+
+    const selectText = () => {
+      element.selectionStart = 0
+      element.selectionEnd = element.value.length
+    }
+
+    if(selectOnFocus) {
+      selectText()
+      setTimeout(selectText)
+    }
+    if(onFocus) {
+      onFocus.apply(element, args)
+    }
+  }
+
   const updateValidationState = () => {
     setFieldValidated(true)
     // this is a little hacky, but the simplest way I could think of to determine the
@@ -105,7 +124,7 @@ export default (render, options = {}) => function Input(props) {
     const {
       type, name, value, checked, defaultValue, numeric,
       onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
-      submitOnChange, submitOnBlur, throttle,
+      submitOnChange, submitOnBlur, selectOnFocus, throttle, valid,
       ...passThroughProps
     } = props
     const valueProps = getValueProps({ currentValue: getFieldValue(name) })
@@ -116,7 +135,7 @@ export default (render, options = {}) => function Input(props) {
     const finalProps = {
       id, name, className,
       ...passThroughProps, ...valueProps, ...typeProps, ...errorProps,
-      onChange, onBlur
+      onChange, onFocus, onBlur
     }
 
     return render(finalProps)

package/src/submit.js

@@ -14,12 +14,15 @@ export default render => function Submit(props) {
     }
   }
 
-  const { onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues, ...propsToPass } = props
+  const {
+    onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
+    valid, disableInvalid, ...propsToPass
+  } = props
 
   const finalProps = {
     ...propsToPass,
     onClick,
-    disabled: executing
+    disabled: executing || (props.disableInvalid && !props.valid)
   }
 
   return render(finalProps)