@danderson00/react-forms 0.0.29 → 0.0.32

package/dist/Form.js

@@ -101,11 +101,13 @@ var Form = function Form(ContextProvider) {
     };
 
     var onSubmit = function onSubmit(e, additionalValues) {
+      var submitOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      var validate = submitOptions.validate;
       fieldValidators.forEach(function (setFieldValidated) {
         return setFieldValidated();
       });
 
-      if (form.current.checkValidity() && props.onSubmit) {
+      if ((validate === false || form.current.checkValidity()) && props.onSubmit) {
         setError(undefined);
         var interactiveElements = form.current.querySelectorAll('input,button,textarea,select');
 

package/dist/submit.js

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _excluded = ["onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "valid", "disableInvalid"];
+var _excluded = ["onSubmit", "registerFieldValidator", "setFieldValue", "getFieldValue", "getFieldValues", "valid", "validate", "disableInvalid", "values"];
 
 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); }
 
@@ -21,10 +21,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -37,9 +33,25 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+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 _default = function _default(render) {
   return function Submit(props) {
-    if (!props.onSubmit) throw new Error('Button components must be contained within a Form component'); // TODO: set executing when form is triggered by enter key
+    if (!props.onSubmit) throw new Error('Button components must be contained within a Form component');
+
+    var onSubmit = props.onSubmit,
+        registerFieldValidator = props.registerFieldValidator,
+        setFieldValue = props.setFieldValue,
+        getFieldValue = props.getFieldValue,
+        getFieldValues = props.getFieldValues,
+        valid = props.valid,
+        validate = props.validate,
+        disableInvalid = props.disableInvalid,
+        values = props.values,
+        propsToPass = _objectWithoutProperties(props, _excluded); // TODO: set executing when form is triggered by enter key
+
 
     var _useState = (0, _react.useState)(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -47,7 +59,9 @@ var _default = function _default(render) {
         setExecuting = _useState2[1];
 
     var onClick = function onClick(e) {
-      var result = props.onSubmit(e);
+      var result = onSubmit(e, values, {
+        validate: validate
+      });
 
       if (result && result["finally"] && typeof result["finally"] === 'function') {
         setExecuting(true);
@@ -57,18 +71,9 @@ var _default = function _default(render) {
       }
     };
 
-    var onSubmit = props.onSubmit,
-        registerFieldValidator = props.registerFieldValidator,
-        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: props.disabled || executing || props.disableInvalid && !props.valid
+      disabled: props.disabled || executing || disableInvalid && !valid
     });
 
     return render(finalProps);

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@danderson00/react-forms",
-  "version": "0.0.29",
+  "version": "0.0.32",
   "description": "Ultra simple, stateless, validated forms for use in React function components",
   "main": "dist/index.js",
   "module": "src/index.js",
   "scripts": {
     "test": "jest",
     "build": "babel src --out-dir dist",
-    "prepare": "babel src --source-maps false --out-dir dist"
+    "prepare": "babel src --out-dir dist"
   },
   "dependencies": {
     "object-path-immutable": "^4.1.1"
@@ -21,9 +21,9 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "babel-jest": "26.6.0",
+    "babel-jest": "26.6.3",
     "enzyme": "^3.9.0",
-    "jest": "26.6.0",
+    "jest": "26.6.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

package/src/Form.js

@@ -27,10 +27,12 @@ const Form = (ContextProvider, additionalContext = {}, ErrorMessage) => (
       setValid(form.current.checkValidity())
     }
 
-    const onSubmit = (e, additionalValues) => {
+    const onSubmit = (e, additionalValues, submitOptions = {}) => {
+      const { validate } = submitOptions
+
       fieldValidators.forEach(setFieldValidated => setFieldValidated())
 
-      if(form.current.checkValidity() && props.onSubmit) {
+      if((validate === false || form.current.checkValidity()) && props.onSubmit) {
         setError(undefined)
 
         const interactiveElements = form.current.querySelectorAll('input,button,textarea,select')

package/src/submit.js

@@ -3,26 +3,26 @@ import React, { useState } from 'react'
 export default render => function Submit(props) {
   if(!props.onSubmit) throw new Error('Button components must be contained within a Form component')
 
+  const {
+    onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
+    valid, validate, disableInvalid, values, ...propsToPass
+  } = props
+
   // TODO: set executing when form is triggered by enter key
   const [executing, setExecuting] = useState(false)
 
   const onClick = e => {
-    const result = props.onSubmit(e)
+    const result = onSubmit(e, values, { validate })
     if(result && result.finally && typeof result.finally === 'function') {
       setExecuting(true)
       result.finally(() => setExecuting(false))
     }
   }
 
-  const {
-    onSubmit, registerFieldValidator, setFieldValue, getFieldValue, getFieldValues,
-    valid, disableInvalid, ...propsToPass
-  } = props
-
   const finalProps = {
     ...propsToPass,
     onClick,
-    disabled: props.disabled || executing || (props.disableInvalid && !props.valid)
+    disabled: props.disabled || executing || (disableInvalid && !valid)
   }
 
   return render(finalProps)

package/dist/fields.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Text = exports.RadioButton = exports.Radio = exports.Checkbox = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = require("./index");
-
-var _excluded = ["label", "className"],
-    _excluded2 = ["values", "labels"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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; }
-
-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 base = function base(type, render) {
-  return function (_ref) {
-    var label = _ref.label,
-        className = _ref.className,
-        inputProps = _objectWithoutProperties(_ref, _excluded);
-
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(type, " ").concat(className)
-    }, /*#__PURE__*/_react["default"].createElement("label", null, label), render(inputProps));
-  };
-};
-
-var Text = base('Text', function (props) {
-  return props.multiline ? /*#__PURE__*/_react["default"].createElement(_index.Textarea, props) : /*#__PURE__*/_react["default"].createElement(_index.Input, props);
-});
-exports.Text = Text;
-var Checkbox = base('Checkbox', function (props) {
-  return /*#__PURE__*/_react["default"].createElement(_index.Input, _extends({}, props, {
-    type: "checkbox"
-  }));
-});
-exports.Checkbox = Checkbox;
-var RadioButton = base('RadioButton', function (props) {
-  return /*#__PURE__*/_react["default"].createElement(_index.Input, _extends({}, props, {
-    type: "radio"
-  }));
-});
-exports.RadioButton = RadioButton;
-var Radio = base('Radio', function (_ref2) {
-  var values = _ref2.values,
-      labels = _ref2.labels,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  return values.map(function (value, index) {
-    return /*#__PURE__*/_react["default"].createElement(RadioButton, _extends({}, props, {
-      value: value,
-      label: labels && labels[index] || value
-    }));
-  });
-}); //
-// export const Select = base('Select', ({ values, labels, ...props }) =>
-//   <Select {...props}>
-//     {values.map((value, index) => <option value={value}>{(labels && labels[index]) || value}</option>)}
-//   </Select>
-// )
-//
-
-exports.Radio = Radio;

package/dist/keyPath.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.keyPath = keyPath;
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function keyPath(path, target) {
-  if (!target) return;
-  var index = path.indexOf('.');
-  return index === -1 ? target[path] : keyPath(path.substring(index + 1), target[path.substring(0, index)]);
-}
-
-keyPath.set = function (path, target, value) {
-  if (!target) return;
-  var index = path.indexOf('.');
-
-  if (index === -1) {
-    target[path] = value;
-  } else {
-    var targetProperty = path.substring(0, index);
-    var remainder = path.substring(index + 1);
-    var targetObject = target[targetProperty];
-
-    if (!targetObject || _typeof(targetObject) !== 'object') {
-      targetObject = {};
-      target[targetProperty] = targetObject;
-    }
-
-    keyPath.set(remainder, targetObject, value);
-  }
-
-  return target;
-};

package/src/fields.js

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Input, Select, Textarea } from './index'
-
-const base = (type, render) => ({ label, className, ...inputProps }) => (
-  <div className={`${type} ${className}`}>
-    <label>{label}</label>
-    {render(inputProps)}
-  </div>
-)
-
-export const Text = base('Text', props => props.multiline ? <Textarea {...props} /> : <Input {...props} />)
-export const Checkbox = base('Checkbox', props => <Input {...props} type="checkbox" />)
-export const RadioButton = base('RadioButton', props => <Input {...props} type="radio" />)
-
-export const Radio = base('Radio', ({ values, labels, ...props }) =>
-  values.map((value, index) =>
-    <RadioButton {...props} value={value} label={(labels && labels[index]) || value} />
-  )
-)
-//
-// export const Select = base('Select', ({ values, labels, ...props }) =>
-//   <Select {...props}>
-//     {values.map((value, index) => <option value={value}>{(labels && labels[index]) || value}</option>)}
-//   </Select>
-// )
-//