feat(forms): include value parsing from type prop

Author: assisrafael

demo/FormExamples.jsx

@@ -36,7 +36,7 @@ export function FormExamples() {
       onCancel={() => console.log('onCancel')}
       customValidation={true}
       validations={{
-        textField3: [
+        numberField: [
           {
             message: 'Must be filled if textField is not empty',
             validate(value, formData) {
@@ -46,9 +46,9 @@ export function FormExamples() {
         ],
         autocompleteField1: [
           {
-            message: 'Must be filled if textField3 is empty',
+            message: 'Must be filled if numberField is empty',
             validate(value, formData) {
-              return formData.textField3 || value;
+              return formData.numberField || value;
             },
           },
         ],
@@ -102,7 +102,10 @@ export function FormExamples() {
           <FormGroupInput name="textField2" label="Text field 2" required placeholder="Fill some value" />
         </div>
         <div className="col">
-          <FormGroupInput name="textField3" label="Text field 3" type="number" />
+          <FormGroupInput name="numberField" label="Number field" type="number" />
+        </div>
+        <div className="col">
+          <FormGroupInput name="dateField" label="Date field " type="datetime-local" />
         </div>
       </div>
 

src/forms/FormInput.jsx

@@ -3,18 +3,18 @@ import PropTypes from 'prop-types';
 import { useFormControl } from './helpers/useFormControl';
 
 export function FormInput({ id, type, name, placeholder, required, minLength, maxLength, min, max, pattern, step }) {
-  const { getValue, handleOnChange, register } = useFormControl(name);
+  const { getValue, handleOnChange, register } = useFormControl(name, type);
   const registerRef = useCallback(register, []);
 
-  return (
-    <input
-      {...{ required, name, id, placeholder, type, minLength, maxLength, min, max, pattern, step }}
-      className="form-control"
-      onChange={handleOnChange}
-      value={getValue()}
-      ref={registerRef}
-    />
-  );
+  const attrs = { required, name, id, placeholder, type, minLength, maxLength, min, max, pattern, step };
+
+  if (type === 'datetime-local') {
+    attrs.defaultValue = getValue();
+  } else {
+    attrs.value = getValue();
+  }
+
+  return <input {...attrs} className="form-control" onChange={handleOnChange} ref={registerRef} />;
 }
 
 FormInput.defaultProps = {

src/forms/helpers/useFormControl.js

@@ -9,21 +9,10 @@ export function useFormControl(name, type) {
   }
 
   return {
-    getValue: () => formState.getValue(name) || getEmptyValue(type),
+    getValue: () => encode(formState.getValue(name) || getEmptyValue(type), type),
     setValue,
     handleOnChange: ({ target }) => {
-      let value = target.type === 'checkbox' ? target.checked : target.value;
-
-      if (target.type === 'select-one') {
-        if (value && ['{', '['].includes(value[0])) {
-          try {
-            value = JSON.parse(value);
-          } catch (error) {
-            // eslint-disable-next-line no-console
-            console.error(error);
-          }
-        }
-      }
+      const value = getTargetValue(target);
 
       setValue(value);
     },
@@ -48,3 +37,36 @@ function getEmptyValue(type) {
       return '';
   }
 }
+
+function encode(value, type) {
+  if (type === 'datetime-local') {
+    return value && value.toISOString().slice(0, 16);
+  }
+
+  return value;
+}
+
+function getTargetValue(target) {
+  let value = target.type === 'checkbox' ? target.checked : target.value;
+
+  if (target.type === 'number') {
+    value = target.valueAsNumber;
+  }
+
+  if (target.type === 'datetime-local') {
+    value = new Date(Date.parse(target.value));
+  }
+
+  if (target.type === 'select-one') {
+    if (value && ['{', '['].includes(value[0])) {
+      try {
+        value = JSON.parse(value);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    }
+  }
+
+  return value;
+}