Merge pull request #29 from Yuyz0112/feat/form-windlike

Feat/form windlike
webzard-io · Sep 13, 2022 · a18a2d7 · a18a2d7
2 parents ed26d62 + 6dbca75
commit a18a2d7
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 36 deletions.
diff --git a/src/_internal/atoms/themes/CloudTower/components/SummaryList.tsx b/src/_internal/atoms/themes/CloudTower/components/SummaryList.tsx
@@ -141,20 +141,28 @@ export type Item = {
   removable?: boolean;
 };
 
+export type Label = {
+  type: "Label";
+  label: string;
+  icon?: IconTypes;
+};
+
 export type Group = {
   title: string;
-  children: (Item | SubHeading | Object)[];
+  children: (Item | SubHeading | Object | Label)[];
 };
 
 function SummaryItem(props: Item) {
   return (
     <ItemDiv>
-      <ItemContent title={`${props.label} : ${props.value}`}>
-        <Label className={Typo.Label.l4_regular}>
-          {props.label}&nbsp;:&nbsp;
-        </Label>
-        <Value className={Typo.Label.l4_regular}>{props.value || ""}</Value>
-      </ItemContent>
+      {props.label ? (
+        <ItemContent title={`${props.label} : ${props.value}`}>
+          <Label className={Typo.Label.l4_regular}>
+            {props.label}&nbsp;:&nbsp;
+          </Label>
+          <Value className={Typo.Label.l4_regular}>{props.value || ""}</Value>
+        </ItemContent>
+      ) : null}
       {props.removable ? (
         <CloseIcon>
           <Icon type="1-xmark-remove-16-secondary" />
@@ -164,7 +172,22 @@ function SummaryItem(props: Item) {
   );
 }
 
-function Field(props: Item | Object | SubHeading) {
+function SummaryLabel(props: Omit<Label, "type">) {
+  return (
+    <ItemDiv>
+      <ItemContent title={props.label}>
+        {props.icon ? (
+          <ObjectIcon>
+            <Icon type={props.icon}></Icon>
+          </ObjectIcon>
+        ) : null}
+        <Label className={Typo.Label.l4_regular}>{props.label}</Label>
+      </ItemContent>
+    </ItemDiv>
+  );
+}
+
+function Field(props: Item | Object | SubHeading | Label) {
   if (props.type === "Item") {
     return <SummaryItem {...props}></SummaryItem>;
   } else if (props.type === "SubHeading") {
@@ -174,21 +197,14 @@ function Field(props: Item | Object | SubHeading) {
   } else if (props.type === "Object") {
     return (
       <>
-        <ItemDiv>
-          <ItemContent title={props.label}>
-            {props.icon ? (
-              <ObjectIcon>
-                <Icon type={props.icon}></Icon>
-              </ObjectIcon>
-            ) : null}
-            <Label className={Typo.Label.l4_regular}>{props.label}</Label>
-          </ItemContent>
-        </ItemDiv>
+        {props.label ? <SummaryLabel {...props}></SummaryLabel> : null}
         {props.items.map((item) => (
           <SummaryItem key={item.label} {...item}></SummaryItem>
         ))}
       </>
     );
+  } else if (props.type === "Label") {
+    return <SummaryLabel {...props}></SummaryLabel>;
   }
 
   return null;
@@ -198,7 +214,7 @@ type Props = {
   title: string;
   defaultWidth?: string;
   groups?: Group[];
-  items?: (Item | Object | SubHeading)[];
+  items?: (Item | Object | SubHeading | Label)[];
 };
 
 function SummaryList(props: Props) {

diff --git a/src/_internal/molecules/AutoForm/SpecField.tsx b/src/_internal/molecules/AutoForm/SpecField.tsx
@@ -76,6 +76,11 @@ const FormItemStyle = css`
   .dovetail-ant-form-item-extra {
     margin-top: 5px;
   }
+
+  &.dovetail-ant-form-item-has-error .ant-select-selector,
+  &.dovetail-ant-form-item-has-error .ant-input {
+    border-color: #f0483e !important;
+  }
 `;
 
 const FormItemLabelStyle = css`

diff --git a/src/_internal/molecules/InputNumber.tsx b/src/_internal/molecules/InputNumber.tsx
@@ -28,7 +28,7 @@ const InputNumber = (props: Props) => {
         `${props.subKey ? `${props.subKey}${props.field?.key ? '-' : ''}` : ""}${props.field?.key || ""}`
       );
     }
-  }, [props.onChange]);
+  }, [props.onChange, stringValue]);
 
   return (
     <AntdInput

diff --git a/src/_internal/organisms/KubectlApplyForm/useSummary.tsx b/src/_internal/organisms/KubectlApplyForm/useSummary.tsx
@@ -3,6 +3,7 @@ import type {
   Item,
   Object,
   SubHeading,
+  Label,
 } from "../../atoms/themes/CloudTower/components/SummaryList";
 import { Layout, Field } from "./KubectlApplyForm";
 import { get } from "lodash";
@@ -24,10 +25,10 @@ function getValueByPath(formData: Record<string, any>, path: string) {
 function getListItems(
   fields: Field[],
   formData: Record<string, any>
-): (Item | Object | SubHeading)[] {
+): (Item | Object | SubHeading | Label)[] {
   return fields
     .map((field) => {
-      const items: (Item | Object | SubHeading)[] = [];
+      const items: (Item | Object | SubHeading | Label)[] = [];
 
       if (field.sectionTitle) {
         items.push({
@@ -36,9 +37,16 @@ function getListItems(
         });
       }
 
-      const value = getValueByPath(formData, field.path);
+      const path = field.path.replace(/(.\$add)|(.\$i)/g, (substring)=> {
+        if (substring === '.$add') {
+          return ''; 
+        } else {
+          return '.0';
+        }
+      });
+      const value = getValueByPath(formData, path);
 
-      if (value instanceof Array && field.label) {
+      if (value instanceof Array) {
         if (typeof value[0] !== "object") {
           items.push({
             type: "Item" as const,
@@ -47,8 +55,12 @@ function getListItems(
           });
         }
 
-        value.forEach((item) => {
+        value.forEach((item, index) => {
           if (item && typeof item === "object") {
+            items.push({
+              type: "Label" as const,
+              label: field.widgetOptions?.title + ' ' + (index + 1),
+            });
             items.push({
               type: "Object" as const,
               icon: field.widgetOptions?.icon,
@@ -69,10 +81,10 @@ function getListItems(
             });
           }
         });
-      } else if (value && typeof value === "object" && field.label) {
+      } else if (value && typeof value === "object") {
         items.push({
           type: "Object" as const,
-          label: field.label,
+          label: field.label || field.widgetOptions?.title,
           icon: field.widgetOptions?.icon,
           items: field.fields?.length
             ? (getListItems(field.fields, value) as Item[])

diff --git a/src/sunmao/components/KubectlApplyForm.tsx b/src/sunmao/components/KubectlApplyForm.tsx
@@ -275,15 +275,13 @@ export const KubectlApplyForm = implementRuntimeComponent({
     });
     useEffect(() => {
       subscribeMethods({
-        setField({ fieldPath, value }) {
-          setValues((prevValues) => {
-            set(prevValues, fieldPath, value);
-            const newValues = [...prevValues];
-            mergeState({
-              value: newValues,
-            });
-            return newValues;
+        setField({ fieldPath, value: fieldValue }) {
+          const newValues = set(values, fieldPath, fieldValue);
+
+          mergeState({
+            value: newValues,
           });
+          setValues(newValues);
         },
         nextStep() {
           mergeState({
@@ -292,7 +290,7 @@ export const KubectlApplyForm = implementRuntimeComponent({
           setStep(step + 1);
         }
       });
-    }, [step]);
+    }, [step, subscribeMethods, mergeState]);
 
     return (
       <_KubectlApplyForm