feat(examples): update react form examples

ovh · Jul 29, 2024 · 2687545 · 2687545
1 parent 8daa730
commit 2687545
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 24 deletions.
diff --git a/packages/examples/react-webpack/src/app/App.tsx b/packages/examples/react-webpack/src/app/App.tsx
@@ -1,13 +1,13 @@
 import React, { type ReactElement } from 'react';
-// import { FormFormik } from './components/formFormik/FormFormik';
-import { FormNative } from './components/formNative/FormNative';
+import { FormFormik } from './components/formFormik/FormFormik';
+// import { FormNative } from './components/formNative/FormNative';
 import './app.scss';
 
 function App(): ReactElement {
   return (
     <>
-      {/*<FormFormik />*/}
-      <FormNative />
+      <FormFormik />
+      {/*<FormNative />*/}
     </>
   );
 }

diff --git a/packages/examples/react-webpack/src/app/components/formFormik/FormFormik.tsx b/packages/examples/react-webpack/src/app/components/formFormik/FormFormik.tsx
@@ -1,13 +1,13 @@
 import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
-import { OdsCheckbox, OdsDatepicker, OdsInput, OdsPassword, OdsPhoneNumber, OdsQuantity, OdsRadio, OdsSelect, OdsSwitch, OdsSwitchItem, OdsTextarea } from '@ovhcloud/ods-components/react';
+import { OdsCheckbox, OdsDatepicker, OdsInput, OdsPassword, OdsPhoneNumber, OdsQuantity, OdsRadio, OdsSelect, OdsSwitch, OdsSwitchItem, OdsTextarea, OdsTimepicker } from '@ovhcloud/ods-components/react';
 import { useFormik } from 'formik';
 import React, { type ReactElement } from 'react';
 import * as yup from 'yup';
 import styles from './formFormik.scss';
 
 const validationSchema = yup.object({
   checkbox: yup.string().nullable(),//.required(),
-  date: yup.date().nullable(),//.required(),
+  datepicker: yup.date().nullable(),//.required(),
   inputNumber: yup.number().nullable(),//.required(),
   inputText: yup.string().nullable().required(),
   password: yup.string().nullable().required(),
@@ -17,13 +17,14 @@ const validationSchema = yup.object({
   select: yup.string().nullable().required(),
   switch: yup.string().nullable().required(),
   textarea: yup.string().nullable().required(),
+  timepicker: yup.string().nullable().required(),
 });
 
 function FormFormik(): ReactElement {
   const formik = useFormik({
     initialValues: {
       checkbox: null,
-      date: new Date(),
+      datepicker: new Date(),
       inputNumber: null,
       inputText: 'input text',
       password: 'password',
@@ -33,6 +34,7 @@ function FormFormik(): ReactElement {
       select: 'cat',
       switch: 'option1',
       textarea: 'textarea',
+      timepicker: '12:34',
     },
     onSubmit: (values) => {
       console.log('Formik values', values);
@@ -67,14 +69,14 @@ function FormFormik(): ReactElement {
       {/* OK */}
       <OdsDatepicker
         // @ts-ignore IDE try to match another react specific attribute
-        defaultValue={ formik.initialValues.date }
-        hasError={ formik.touched.date && !!formik.errors.date }
+        defaultValue={ formik.initialValues.datepicker }
+        hasError={ formik.touched.datepicker && !!formik.errors.datepicker }
         isClearable={ true }
         isRequired={ true }
-        name="date"
+        name="datepicker"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
-        value={ formik.values.date }
+        value={ formik.values.datepicker }
       />
 
       {/* KO? reset to "" instead of null */}
@@ -222,10 +224,16 @@ function FormFormik(): ReactElement {
         value={ formik.values.textarea }
       />
 
-      {/*<input*/}
-      {/*  name="hidden-input"*/}
-      {/*  type="hidden"*/}
-      {/*  value="should be present in form data" />*/}
+      {/* OK */}
+      <OdsTimepicker
+        defaultValue={ formik.initialValues.timepicker }
+        hasError={ formik.touched.timepicker && !!formik.errors.timepicker }
+        isRequired={ true }
+        name="timepicker"
+        onOdsBlur={ formik.handleBlur }
+        onOdsChange={ formik.handleChange }
+        value={ formik.values.timepicker }
+      />
 
       <p>
         Errors?

diff --git a/packages/examples/react-webpack/src/app/components/formNative/FormNative.tsx b/packages/examples/react-webpack/src/app/components/formNative/FormNative.tsx
@@ -1,10 +1,10 @@
 import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
-import { OdsCheckbox, OdsDatepicker, OdsInput, OdsPassword, OdsPhoneNumber, OdsQuantity, OdsRadio, OdsSelect, OdsSwitch, OdsSwitchItem, OdsTextarea } from '@ovhcloud/ods-components/react';
+import { OdsCheckbox, OdsDatepicker, OdsInput, OdsPassword, OdsPhoneNumber, OdsQuantity, OdsRadio, OdsSelect, OdsSwitch, OdsSwitchItem, OdsTextarea, OdsTimepicker } from '@ovhcloud/ods-components/react';
 import React, { type ReactElement, useRef, useState } from 'react';
 import styles from './formNative.scss';
 
 function FormNative(): ReactElement {
-  const checkboxRef = useRef<HTMLOdsCheckboxElement>(null);
+  // const checkboxRef = useRef<HTMLOdsCheckboxElement>(null);
   const datepickerRef = useRef<HTMLOdsDatepickerElement>(null);
   const formRef = useRef<HTMLFormElement>(null);
   const inputNumberRef = useRef<HTMLOdsInputElement>(null);
@@ -16,6 +16,7 @@ function FormNative(): ReactElement {
   const selectRef = useRef<HTMLOdsSelectElement>(null);
   const switchRef = useRef<HTMLOdsSwitchElement>(null);
   const textareaRef = useRef<HTMLOdsTextareaElement>(null);
+  const timepickerRef = useRef<HTMLOdsTimepickerElement>(null);
 
   const [error, setError] = useState({
     checkbox: false,
@@ -29,13 +30,14 @@ function FormNative(): ReactElement {
     select: false,
     // switch: false, // no error state on this component
     textarea: false,
+    timepicker: false,
   });
 
   async function onSubmit(e: any) {
     e.preventDefault();
     e.stopPropagation();
 
-    await validateField(checkboxRef.current);
+    // await validateField(checkboxRef.current);
     // await validateField(datepickerRef.current);
     // await validateField(inputNumberRef.current);
     // await validateField(inputTextRef.current);
@@ -46,6 +48,7 @@ function FormNative(): ReactElement {
     // await validateField(selectRef.current);
     // await validateField(switchRef.current);
     // await validateField(textareaRef.current);
+    await validateField(timepickerRef.current);
 
     const formData = new FormData(formRef.current!);
     console.log(formData)
@@ -59,7 +62,7 @@ function FormNative(): ReactElement {
     }
 
     const validity = await element.getValidity();
-
+// console.log(validity)
     if (validity !== undefined) {
       setError({
         ...error,
@@ -75,14 +78,22 @@ function FormNative(): ReactElement {
       ref={ formRef }
     >
       <div>
-        {/* Not sure about the expected formData for checkbox, need to test native one*/}
-        {/* TODO test multiple checkbox with same name */}
+        {/* OKish no validity method but required is managed by browser directly */}
         <OdsCheckbox
           // isRequired={ true }
           inputId="checkbox"
           name="checkbox"
+          value="checkbox"
         />
         <label htmlFor="checkbox">Checked</label>
+
+        <OdsCheckbox
+          // isRequired={ true }
+          inputId="checkbox2"
+          name="checkbox"
+          value="checkbox2"
+        />
+        <label htmlFor="checkbox2">Checked 2</label>
       </div>
 
       {/* KO? reset to "" instead of null */}
@@ -121,8 +132,7 @@ function FormNative(): ReactElement {
         type={ ODS_INPUT_TYPE.text }
       />
 
-      {/* KO default value not in formData on immediate submit */}
-      {/* KO style different */}
+      {/* KO style width different */}
       <OdsPassword
         defaultValue="pass"
         hasError={ error.password }
@@ -134,7 +144,7 @@ function FormNative(): ReactElement {
       />
 
       {/* KO default value not in formData on immediate submit */}
-      {/* KO style different */}
+      {/* KO style width different */}
       <OdsPhoneNumber
         defaultValue="+33123456789"
         hasError={ error.phoneNumber }
@@ -223,6 +233,18 @@ function FormNative(): ReactElement {
         ref={ textareaRef }
       />
 
+      {/* KO value not in formData when no default */}
+      {/* KO value in formData not updated when default */}
+      <OdsTimepicker
+        defaultValue="12:34"
+        hasError={ error.timepicker }
+        isRequired={ true }
+        name="timepicker"
+        onOdsChange={ () => validateField(timepickerRef.current) }
+        ref={ timepickerRef }
+      />
+
+      {/* OK */}
       <input
         name="hidden-input"
         type="hidden"