Merge remote-tracking branch 'origin/master' into feat/multi-chain

TradeTrust · Jan 5, 2022 · 0ef71b3 · 0ef71b3
2 parents 4a155bc + 9a5bb0d
commit 0ef71b3
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 22 deletions.
diff --git a/...mponents/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/DemoCreateFormItem.stories.tsx b/...mponents/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/DemoCreateFormItem.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { DemoCreateFormItem } from ".";
+import { data } from "../data";
 
 export default {
   title: "Demo/FormItem",
@@ -21,6 +22,7 @@ export const FormItemAccordion = () => {
       formItemName=""
       onChange={() => {}}
       formItemIndex={1}
+      data={data}
     />
   );
 };
@@ -36,6 +38,7 @@ export const FormItemWithLabel = () => {
       formItemName=""
       onChange={() => {}}
       formItemIndex={1}
+      data={data}
     />
   );
 };
@@ -51,6 +54,7 @@ export const FormItemWithoutLabel = () => {
       formItemName=""
       onChange={() => {}}
       formItemIndex={1}
+      data={data}
     />
   );
 };
@@ -66,6 +70,7 @@ export const FormItemUpload = () => {
       formItemName=""
       onChange={() => {}}
       formItemIndex={1}
+      data={data}
     />
   );
 };
diff --git a/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/index.tsx b/src/components/Demo/DemoCreate/DemoCreateForm/DemoCreateFormItem/index.tsx
@@ -4,21 +4,22 @@ import { FunctionComponent } from "react";
 import Dropzone from "react-dropzone";
 import { AccordionItem } from "../../../../UI/Accordion";
 import { getFormValue } from "../../utils";
-import { data } from "../data";
 import { FormItemSchema } from "../types";
 
 interface DemoCreateFormItemProps {
   onChange: (name: string, value: string) => void;
   formItem: FormItemSchema;
   formItemName: string;
   formItemIndex: number;
+  data: Record<string, any>;
 }
 
 export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
   formItem,
   formItemName,
   onChange,
   formItemIndex,
+  data,
 }) => {
   const renderProperties = () => {
     if (formItem.type === "object" && formItem.properties) {
@@ -33,6 +34,7 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
             formItemName={itemName}
             formItem={item}
             formItemIndex={index}
+            data={data}
           />
         );
       });
@@ -68,36 +70,40 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
     );
   };
 
-  const renderTextArea = () => {
+  const RenderTextArea = () => {
+    const [value, setValue] = useState(getFormValue(data, formItemName));
     if (formItem.type === "string") {
-      const defaultValue = getFormValue(data, formItemName);
-
       return (
         <textarea
           disabled={formItem.options?.readonly}
           data-testid="form-item-textarea"
           rows={4}
           className="w-full border rounded-md px-2 py-1 mb-0 focus:border-cloud-900 focus:outline-none placeholder-cloud-200 border-cloud-200"
-          defaultValue={defaultValue}
-          onChange={(e) => onChange(e.target.name, e.target.value)}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+            onChange(e.target.name, e.target.value);
+          }}
           name={formItemName}
           placeholder={formItem.uiType === "withoutLabel" ? formItem.title : undefined}
         />
       );
     }
   };
 
-  const renderInput = () => {
+  const RenderInput = () => {
+    const [value, setValue] = useState(getFormValue(data, formItemName));
     if (formItem.type === "string") {
-      const defaultValue = getFormValue(data, formItemName);
-
       return (
         <Input
           disabled={formItem.options?.readonly}
           data-testid="form-item-input"
           className="w-full"
-          defaultValue={defaultValue}
-          onChange={(e) => onChange(e.target.name, e.target.value)}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+            onChange(e.target.name, e.target.value);
+          }}
           name={formItemName}
           placeholder={formItem.uiType === "withoutLabel" ? formItem.title : undefined}
         />
@@ -119,7 +125,7 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
           accordionIndex={formItemIndex}
           setOpenIndex={setOpenIndex}
         >
-          {renderInput()}
+          {RenderInput()}
           {renderProperties()}
         </AccordionItem>
       );
@@ -129,21 +135,21 @@ export const DemoCreateFormItem: FunctionComponent<DemoCreateFormItemProps> = ({
           <h4 data-testid="form-item-label" className="mb-1">
             {formItem.title}
           </h4>
-          {renderInput()}
+          {RenderInput()}
           {renderProperties()}
         </div>
       );
     case "withoutLabel":
       return (
         <div className="mb-5">
-          {renderInput()}
+          {RenderInput()}
           {renderProperties()}
         </div>
       );
     case "textarea":
       return (
         <div className="mb-5">
-          {renderTextArea()}
+          {RenderTextArea()}
           {renderProperties()}
         </div>
       );

diff --git a/src/components/Demo/DemoCreate/DemoCreateForm/data.tsx b/src/components/Demo/DemoCreate/DemoCreateForm/data.tsx
@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-const issueDateTime = format(new Date(), "dd MMMM yyyy, K:mmaaa");
+const issueDateTime = format(new Date(), "dd MMMM yyyy, h:mmaaa");
 const actualDate = format(new Date(), "dd MMMM yyyy");
 export const data = {
   documentName: "Form for Free Trade Agreement",

diff --git a/src/components/Demo/DemoCreate/DemoCreateForm/index.tsx b/src/components/Demo/DemoCreate/DemoCreateForm/index.tsx
@@ -51,6 +51,7 @@ export const DemoCreateForm: FunctionComponent = () => {
               formItemName={formItemName}
               formItem={formItem as FormItemSchema}
               formItemIndex={index}
+              data={formValues}
             />
           );
         })}

diff --git a/src/components/Demo/DemoCreate/contexts/DemoFormContext/index.tsx b/src/components/Demo/DemoCreate/contexts/DemoFormContext/index.tsx
@@ -1,6 +1,5 @@
 import React, { createContext, ReactChildren, useState } from "react";
 import { data } from "../../DemoCreateForm/data";
-
 interface DemoFormContextProps {
   formValues: Record<string, any>;
   setFormValues: React.Dispatch<React.SetStateAction<any>>;

diff --git a/src/components/Demo/DemoCreate/index.tsx b/src/components/Demo/DemoCreate/index.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent, useContext, useState } from "react";
 import { ReactNode } from "react-markdown";
 import { DemoCreateContext } from "./contexts/DemoCreateContext";
-import { DemoFormProvider } from "./contexts/DemoFormContext";
 import { Prompt } from "react-router";
 import { useHistory } from "react-router-dom";
 import { Location } from "history";
@@ -59,7 +58,7 @@ export const DemoCreate: FunctionComponent = () => {
     <>
       <Prompt when={when} message={handlePrompt} />
       <DemoCreateHeader />
-      <DemoFormProvider>{components[activeStep]}</DemoFormProvider>
+      {components[activeStep]}
     </>
   );
 };
diff --git a/src/pages/demoCreate.tsx b/src/pages/demoCreate.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react";
 import { Helmet } from "react-helmet";
 import { DemoCreate } from "../components/Demo/DemoCreate";
 import { DemoCreateProvider } from "../components/Demo/DemoCreate/contexts/DemoCreateContext";
+import { DemoFormProvider } from "../components/Demo/DemoCreate/contexts/DemoFormContext";
 import { Page } from "../components/Layout/Page";
 import { DemoLayout } from "./demo";
 
@@ -22,9 +23,11 @@ export const DemoCreatePage: FunctionComponent = () => (
     </Helmet>
     <Page title="Demo">
       <DemoLayout>
-        <DemoCreateProvider>
-          <DemoCreate />
-        </DemoCreateProvider>
+        <DemoFormProvider>
+          <DemoCreateProvider>
+            <DemoCreate />
+          </DemoCreateProvider>
+        </DemoFormProvider>
       </DemoLayout>
     </Page>
   </>