@engagebay/engagebay-form-module 1.0.2-beta.2 → 1.0.2-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.2-beta.2",
+    "version": "1.0.2-beta.4",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

package/src/form/formfields/DatePickerField.tsx

@@ -8,7 +8,7 @@ import { handleChange, registerFormField } from "../util";
 import moment from "moment";
 
 const DatePicker: React.FC<FormFieldComponentPropSchema> = (
-  props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema,
 ) => {
   const formContext = useContext(FormContext);
   const initialDate = formContext.getValues(props.fieldConfig.name)
@@ -25,13 +25,13 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
     ) {
       formContext.setValue(
         props.fieldConfig.name,
-        props.fieldConfig.defaultValue
+        props.fieldConfig.defaultValue,
       );
     }
   }, [props.fieldConfig.forceUpdate]);
 
   let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-
+  //registerOptions.valueAsDate = true;
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
 
   function getInput() {

package/src/form/formfields/NumberField.tsx

@@ -1,61 +1,62 @@
-import React, {useContext} from "react";
-import {RegisterOptions} from "react-hook-form";
-import {FormContext} from "../context/FormContext";
-import {FormFieldComponentPropSchema} from "../schema/FormFieldSchema";
-import {handleChange, registerFormField} from "../util";
+import React, { useContext } from "react";
+import { RegisterOptions } from "react-hook-form";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { handleChange, registerFormField } from "../util";
 import RenderFormField from "../util/RenderFormField";
 
 const NumberField: React.FC<FormFieldComponentPropSchema> = (
-    props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema,
 ) => {
-    const formContext = useContext(FormContext);
+  const formContext = useContext(FormContext);
 
-    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
-
-    let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
-
-    function getInput() {
-        return (
-            <input
-                type="number"
-                {...hookProps}
-                placeholder={props.fieldConfig?.placeholder}
-                readOnly={props.fieldConfig?.readOnly}
-                disabled={props.fieldConfig?.disabled}
-                autoComplete={props.fieldConfig?.autoComplete}
-                min={props.fieldConfig?.min}
-                max={props.fieldConfig?.max}
-                step={props.fieldConfig.decimalAllowed ? 0.01 : 1}
-                defaultValue={props.fieldConfig.defaultValue as string}
-                className={`form-input ${
-                    props.fieldConfig.customClassNames?.fieldClassName || "flex-1 !w-60"
-                }`}
-                onKeyDown={(e) => {
-                    props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
-                }}
-                onChange={(e) => {
-                    let value = e.target.value;
-                    let numericValue = parseFloat(value);
-                    if (props.fieldConfig.max !== undefined && numericValue > props.fieldConfig.max) {
-                        numericValue = props.fieldConfig.max;
-                    }
-                    if (props.fieldConfig.min !== undefined && numericValue < props.fieldConfig.min) {
-                        numericValue = props.fieldConfig.min;
-                    }
-                    value = numericValue.toString();
-                    handleChange(
-                        value,
-                        formContext,
-                        props.fieldConfig,
-                        props.onChange
-                    );
-                }}
-            />
-        );
-    }
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  registerOptions.valueAsNumber = true;
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
 
+  function getInput() {
     return (
-        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+      <input
+        type="number"
+        {...hookProps}
+        placeholder={props.fieldConfig?.placeholder}
+        readOnly={props.fieldConfig?.readOnly}
+        disabled={props.fieldConfig?.disabled}
+        autoComplete={props.fieldConfig?.autoComplete}
+        min={props.fieldConfig?.min}
+        max={props.fieldConfig?.max}
+        step={props.fieldConfig.decimalAllowed ? 0.01 : 1}
+        defaultValue={props.fieldConfig.defaultValue as string}
+        className={`form-input ${
+          props.fieldConfig.customClassNames?.fieldClassName || "flex-1 !w-60"
+        }`}
+        onKeyDown={(e) => {
+          props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
+        }}
+        onChange={(e) => {
+          let value = e.target.value;
+          let numericValue = parseFloat(value);
+          if (
+            props.fieldConfig.max !== undefined &&
+            numericValue > props.fieldConfig.max
+          ) {
+            numericValue = props.fieldConfig.max;
+          }
+          if (
+            props.fieldConfig.min !== undefined &&
+            numericValue < props.fieldConfig.min
+          ) {
+            numericValue = props.fieldConfig.min;
+          }
+          value = numericValue.toString();
+          handleChange(value, formContext, props.fieldConfig, props.onChange);
+        }}
+      />
     );
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
 };
 export default NumberField;