Merge pull request #2 from billwatson017/react-form

simplify react-form so that base components and wrapper

Author: billwatson017

package.json

@@ -6,6 +6,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.8",
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-fontawesome": "^1.7.1",

src/components/input-container/index.js

@@ -1,15 +1,29 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useField, splitFormProps } from "react-form";
 import "../input-container/input-container.css";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamation } from '@fortawesome/free-solid-svg-icons'
 
 // input-container contains form layout, style and validation for app
-export const InputContainer =  React.forwardRef((props, ref) => {
-  const { Input, Icon, label, ...passThru } = props;
+export const InputContainer = (props) => {
+  const {Input, required, Icon, ...passThru} = props
+
+  let validate = props.validate;
+  if (required) {
+    validate = value => {
+      if (!value) {
+        return "Required";
+      }
+      if (props.validate) {
+        return props.validate(value);
+      }
+      return false;
+    };
+  }
 
   // get form-specific props
-  const [field, fieldOptions] = splitFormProps(props);
+  const [field, fieldOptions, rest] = splitFormProps({...passThru, validate});
 
   // get field state
   const {
@@ -21,7 +35,7 @@ export const InputContainer =  React.forwardRef((props, ref) => {
     <>
       <div className="input-container">
         <div className="input-label">
-          {label}
+          {props.label}
           <span className="required">*</span>
         </div>
         <div className="input-wrapper">
@@ -31,7 +45,7 @@ export const InputContainer =  React.forwardRef((props, ref) => {
             </div>
           : null}
           <div className="element-wrapper">
-            <Input {...{ref, ...passThru, getInputProps}} />
+            <Input {...{getInputProps, rest}} />
           </div>
           {error ? 
             <div className="icon-wrapper error">
@@ -51,10 +65,20 @@ export const InputContainer =  React.forwardRef((props, ref) => {
       </div>
     </>
   );
-});
+};
 
 InputContainer.defaultProps = {
-  //default props 
-}
+  field: '',
+  label: '',
+  defaultValue: '',
+  required: false
+};
+
+InputContainer.propTypes = {
+  field: PropTypes.string,
+  label: PropTypes.string,
+  defaultValue: PropTypes.string,
+  required: PropTypes.bool
+};
 
 export default InputContainer;

src/components/input-form/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useForm } from "react-form";
+import PropTypes from 'prop-types';
+
+export const InputForm = (props) => {
+      const { defaultValues, debugForm, validate, onSubmit} = props
+
+      const {
+        Form,
+        meta: { isSubmitting, isSubmitted, canSubmit, error }
+      } = useForm({ 
+        defaultValues,
+        validate: values => validate ? validate(values) : null,
+        onSubmit: async (values, instance) => onSubmit ? onSubmit(values, instance) : null,
+        debugForm: debugForm
+      });
+
+  return (
+    <>
+    <Form>
+      <div style={{width: "500px", marginLeft: "auto", marginRight: "auto"}}>
+        {props.children}
+
+        {isSubmitted ? <em>Thanks for submitting!</em> : null}
+
+        {error ? <strong>{error}</strong> : null}
+
+        {isSubmitting ? (
+          "Submitting..."
+        ) : (
+          <div>
+            <button type="submit" disable={!canSubmit ? 1 : 0}>Submit</button>
+          </div>
+        )}
+      </div>
+    </Form>
+    </>
+  );
+};
+
+InputForm.defaultProps = {
+  defaultValues: {},
+  debugForm: false,
+  validate: null,
+  onSubmit: null
+};
+
+InputForm.propTypes = {
+  defaultValues: PropTypes.object,
+  debugForm: PropTypes.bool,
+  validate: PropTypes.func,
+  onSubmit: PropTypes.func
+};
+
+export default InputForm;

src/components/input/numeric/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import "../numeric/numeric.css";
+
+ const InputText = React.forwardRef((props, ref) => {
+  const { getInputProps, passThru} = props;
+  return (
+    <>
+      <input type="number" className="input-numeric" autoComplete="off" {...passThru} { ...getInputProps({ ref })} />
+    </>
+  );
+});
+
+export default InputText;

src/components/input/numeric/numeric.css

@@ -0,0 +1,10 @@
+.input-numeric {
+    background-color: transparent !important;
+    border: 0 !important;
+    color: #000 !important;
+    font-size: 12pt;
+    height: 48px !important;
+    outline: 0 !important;
+    padding: 0 8px !important;
+    width: 100%;
+  }

src/components/input/text/index.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import "../text/text.css";
 
- const InputText = React.forwardRef(({getInputProps, ...passThro}, ref) => {
+ const InputText = (props) => {
+  const { getInputProps, rest} = props;
   return (
     <>
-      <input type="text" className="input-text" autocomplete="off" {...passThro} {...getInputProps({ ref })} />
+      <input type="text" className="input-text" autoComplete="off" {...getInputProps(rest)} />
     </>
   );
-});
+};
 
 export default InputText;

src/index.js

@@ -1,59 +1,46 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import InputContainer from "../src/components/input-container";
-import InputText from "../src/components/input/text";
-import { useForm } from "react-form";
-import { isRequired, isEmail } from "../src/libs/validation";
+import InputForm from "./components/input-form";
+import InputContainer from "./components/input-container";
+import InputText from "./components/input/text";
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 
-function App() {
-  // set default values
-  const defaultValues = React.useMemo(
-    () => ({
-      first_name: "",
-      last_name: "",
-      email_address: ""
-    }),
-    []
-  );
-  const {
-    Form,
-    meta: { isSubmitting, isSubmitted, canSubmit, error }
-  } = useForm({
-    defaultValues,
-    validate: values => {
-      // validate any combinations of field values here
-    },
-    onSubmit: async (values, instance) => {
-      await new Promise(resolve => setTimeout(resolve, 1000));
-    },
-    debugForm: true
-  });
+// object used to populate the default values for the entire form
+const defaultValues = {
+  first_name: "bill"
+}
+
+// function used to validate multiple fields at the same time
+const validate = (values) => {
+  if (values.first_name === "john") {
+    return "change default value";
+  }
+  return false;
+}
+
+// function used to hand form submit event
+const onSubmit  = async (values, instance) => {
+  await new Promise(resolve => setTimeout(resolve, 1000));
+}
 
+// field validation
+const fieldValidation= (value) => {
+  return value.length < 10 ? "name needs to be greater than 12 characters" : false
+}
+
+function App() {
   return (
-    <Form>
-      <div style={{width: "500px", marginLeft: "auto", marginRight: "auto"}}>
-      <InputContainer field="first_name" label="Given Name" Input={InputText} validate={isRequired} />
+    <>
+    <InputForm debugForm={true} onSubmit={onSubmit} validate={validate} defaultValues={defaultValues} >
+      <InputContainer field="first_name" label="Given Name" Input={InputText} required validate={fieldValidation}/>
       <br />
       <br />
-      <InputContainer field="last_name" label="Family Name" Input={InputText} validate={isRequired} />
+      <InputContainer field="last_name" label="Family Name" Input={InputText} defaultValue="watson" required />
       <br />
       <br />
-      <InputContainer field="email_address" label="Email" Input={InputText} Icon={faEnvelope} validate={isEmail} />
-
-      {isSubmitted ? <em>Thanks for submitting!</em> : null}
-
-      {error ? <strong>{error}</strong> : null}
-
-      {isSubmitting ? (
-        "Submitting..."
-      ) : (
-        <div>
-          <button type="submit" disable={!canSubmit}>Submit</button>
-        </div>
-      )}
-      </div>
-    </Form>
+      <InputContainer field="email_address" label="Email" Input={InputText} Icon={faEnvelope} />
+    </InputForm>
+    </>
   );
 }
 

src/libs/validation/index.js

@@ -1,6 +1,3 @@
-export const isRequired = (value) => {
-    return !value ? "Required" : false
-}
 
 export const isEmail = async value => {
     if (!value) {
@@ -9,7 +6,6 @@ export const isEmail = async value => {
       if (!validateEmail(value)) {
         return "Please enter a valid email addresss";
       }
-      console.log(`Checking email: ${value}...`);
       await new Promise(resolve => setTimeout(resolve, 2000));
 
       return value === "bill@gmail.com"