Merge pull request #12 from MakerXStudio/validation-indicator

Validation indicator
MakerXStudio · Mar 30, 2023 · d396d4b · d396d4b
2 parents ef550b3 + ddead19
commit d396d4b
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 55 deletions.
diff --git a/.changeset/polite-ears-carry.md b/.changeset/polite-ears-carry.md
@@ -0,0 +1,5 @@
+---
+'@makerx/forms-core': minor
+---
+
+Expose helper.formContext
diff --git a/packages/core/src/components/ValidatedFormFactory.tsx b/packages/core/src/components/ValidatedFormFactory.tsx
@@ -39,7 +39,7 @@ export const ValidatedFormFactory =
     TSchema extends Record<string, unknown>,
     K extends FormFieldHelperBase<TSchema>
   >(
-    formFieldHelperFactory: new () => K
+    formFieldHelperFactory: new (formContext: UseFormReturn<TSchema>) => K
   ) =>
   ({
     className,
@@ -65,7 +65,7 @@ export const ValidatedFormFactory =
             onSubmit={onSubmit && formContext.handleSubmit(onSubmit)}
           >
             {typeof children === 'function'
-              ? children(new formFieldHelperFactory())
+              ? children(new formFieldHelperFactory(formContext))
               : children}
           </form>
         </FormProvider>

diff --git a/packages/core/src/util/FormFieldHelperBase.tsx b/packages/core/src/util/FormFieldHelperBase.tsx
@@ -1,6 +1,11 @@
+import { UseFormReturn } from 'react-hook-form';
+
 export class FormFieldHelperBase<TSchema extends Record<string, any>> {
   private readonly fieldPrefix: string;
-  constructor({ fieldPrefix }: { fieldPrefix?: string } = {}) {
+  constructor(
+    public formContext: UseFormReturn<TSchema>,
+    { fieldPrefix }: { fieldPrefix?: string } = {}
+  ) {
     this.fieldPrefix = fieldPrefix ? `${fieldPrefix}.` : '';
   }
 

diff --git a/packages/ionic-example/index.html b/packages/ionic-example/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>@makerx/forms-ionic</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/ionic-example/public/favicon.svg b/packages/ionic-example/public/favicon.svg
diff --git a/packages/ionic-example/src/App.css b/packages/ionic-example/src/App.css
diff --git a/packages/ionic-example/src/App.tsx b/packages/ionic-example/src/App.tsx
@@ -1,5 +1,13 @@
-import { IonCol, IonContent, IonGrid, IonPage, IonRow } from '@ionic/react';
+import {
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonIcon,
+  IonPage,
+  IonRow,
+} from '@ionic/react';
 import { ValidatedForm, z, zfd } from '@makerx/forms-ionic';
+import { checkmarkCircle, closeCircle } from 'ionicons/icons';
 
 /**
  * Define schema
@@ -47,8 +55,31 @@ function App() {
                       label: 'This is not required',
                       field: 'myOptionalParagraph',
                     })}
-
-                    {helper.submitButton({ label: 'Submit' })}
+                    <IonGrid>
+                      <IonRow class="ion-align-items-center">
+                        <IonCol size="auto">
+                          {helper.submitButton({ label: 'Submit' })}
+                        </IonCol>
+                        <IonCol>
+                          {helper.formContext.formState.isSubmitted &&
+                            (helper.formContext.formState.isSubmitSuccessful ? (
+                              <IonIcon
+                                style={{ marginTop: 6 }}
+                                icon={checkmarkCircle}
+                                size="large"
+                                color="success"
+                              />
+                            ) : (
+                              <IonIcon
+                                style={{ marginTop: 6 }}
+                                icon={closeCircle}
+                                size="large"
+                                color="danger"
+                              />
+                            ))}
+                        </IonCol>
+                      </IonRow>
+                    </IonGrid>
                   </div>
                 )}
               </ValidatedForm>

diff --git a/packages/mui-example/index.html b/packages/mui-example/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>@makerx/forms-mui</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/mui-example/public/favicon.svg b/packages/mui-example/public/favicon.svg
diff --git a/packages/mui-example/public/vite.svg b/packages/mui-example/public/vite.svg
diff --git a/packages/mui-example/src/App.tsx b/packages/mui-example/src/App.tsx
@@ -1,5 +1,7 @@
 import { ValidatedForm, z, zfd } from '@makerx/forms-mui';
-import { Container, Grid, Typography } from '@mui/material';
+import FailIcon from '@mui/icons-material/Cancel';
+import SuccessIcon from '@mui/icons-material/CheckCircle';
+import { Container, Grid, Stack, Typography } from '@mui/material';
 import { formatISO, parseISO } from 'date-fns';
 
 /**
@@ -63,7 +65,15 @@ function App() {
               })}
             </Grid>
             <Grid item xs={12}>
-              {helper.submitButton({ label: 'Submit' })}
+              <Stack direction="row" spacing={1} alignItems="center">
+                {helper.submitButton({ label: 'Submit' })}
+                {helper.formContext.formState.isSubmitted &&
+                  (helper.formContext.formState.isSubmitSuccessful ? (
+                    <SuccessIcon color="success" />
+                  ) : (
+                    <FailIcon color="error" />
+                  ))}
+              </Stack>
             </Grid>
           </Grid>
         </Container>