it works

Author: Yofriadi Yahya

lowcoder-comp-stone-parcel-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comp-stone-parcel-input",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "license": "MIT",
   "dependencies": {

lowcoder-comp-stone-parcel-input/src/StoneParcelComp.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   antd,
   styleControl,
@@ -97,24 +97,59 @@ let StoneParcelComp = new UICompBuilder(
       { ...initValue },
     ]);
 
+    useEffect(() => {
+      console.log(props.data.value);
+      if (props.data.length) {
+        setParcelValues(props.data.value);
+      }
+    }, [props.data, parcelValues]);
+
+    // convenient function, so that we don't need to pass index to child component
+    const closureHandleChange =
+      (i: number, parcelValue: StoneValue) => (k: string, v: string | number) =>
+        handleChange(i, { ...parcelValue, [k]: v });
     const handleChange = (key: number, value: StoneValue) => {
       setParcelValues((parcelValues: StoneValue[]): StoneValue[] => {
-        return parcelValues.map(
+        const newParcelValues = parcelValues.map(
           (parcelValue: StoneValue, i: number): StoneValue => {
             if (i === key) {
               return value;
             }
             return parcelValue;
           },
         );
+        props.data.onChange(newParcelValues);
+        props.onEvent("change");
+        return newParcelValues;
+      });
+    };
+
+    const handleAdd = () => {
+      setParcelValues((parcelValues: StoneValue[]) => {
+        const newParcelValues = [...parcelValues, initValue];
+        props.data.onChange(newParcelValues);
+        props.onEvent("change");
+        return newParcelValues;
       });
-      props.data.onChange(parcelValues);
-      props.onEvent("change");
     };
-    const handleClose = (i: number) => {
-      setParcelValues(parcelValues.toSpliced(i, 1));
-      props.data.onChange(parcelValues);
-      props.onEvent("change");
+
+    // convenient function, so that we don't need to pass index to child component
+    const closureHandleClose = (i: number) => () => handleClose(i);
+    const handleClose = (key: number) => {
+      setParcelValues((parcelValues: StoneValue[]): StoneValue[] => {
+        const newParcelValues = parcelValues.reduce(
+          (acc: StoneValue[], curr: StoneValue, i: number): StoneValue[] => {
+            if (i !== key) {
+              acc.push(curr);
+            }
+            return acc;
+          },
+          [],
+        );
+        props.data.onChange(newParcelValues);
+        props.onEvent("change");
+        return newParcelValues;
+      });
     };
 
     const [dimensions, setDimensions] = useState({ width: 480, height: 280 });
@@ -141,17 +176,15 @@ let StoneParcelComp = new UICompBuilder(
         {parcelValues.map((parcelValue, i) => (
           <StoneParcel
             key={i}
-            i={i}
-            parcelValue={parcelValue}
-            handleChange={handleChange}
-            handleClose={handleClose}
+            handleChange={closureHandleChange(i, parcelValue)}
+            handleClose={closureHandleClose(i)}
           />
         ))}
         <antd.Button
           type="primary"
           shape="circle"
           icon={<PlusOutlined />}
-          onClick={() => setParcelValues([...parcelValues, initValue])}
+          onClick={handleAdd}
         ></antd.Button>
       </Container>
     );

lowcoder-comp-stone-parcel-input/src/vendors/StoneParcel.tsx

@@ -9,15 +9,11 @@ interface Option {
 }
 
 function StoneParcel({
-  i,
-  parcelValue,
   handleChange,
   handleClose,
 }: {
-  i: number;
-  parcelValue: StoneValue;
-  handleChange: (i: number, parcelValue: StoneValue) => void;
-  handleClose: (i: number) => void;
+  handleChange: (k: string, v: string | number) => void;
+  handleClose: () => void;
 }) {
   return (
     <Row>
@@ -37,9 +33,7 @@ function StoneParcel({
               .toLowerCase()
               .localeCompare((optB?.label ?? "").toLowerCase())
           }
-          onChange={(v: string) =>
-            handleChange(i, { ...parcelValue, parcel: v })
-          }
+          onChange={(v: string) => handleChange("parcel", v)}
           options={[
             {
               value: "Not Identified",
@@ -74,10 +68,8 @@ function StoneParcel({
           style={{ margin: 3 }}
           min={1}
           max={10}
-          defaultValue={parcelValue.pieces}
-          onChange={(v: number) =>
-            handleChange(i, { ...parcelValue, pieces: v })
-          }
+          defaultValue={0}
+          onChange={(v: number) => handleChange("pieces", v)}
         />
       </Wrapper>
       <Wrapper>
@@ -86,17 +78,15 @@ function StoneParcel({
           style={{ margin: 3 }}
           min={1}
           max={10}
-          defaultValue={parcelValue.carat}
-          onChange={(v: number) =>
-            handleChange(i, { ...parcelValue, carat: v })
-          }
+          defaultValue={0}
+          onChange={(v: number) => handleChange("carat", v)}
         />
       </Wrapper>
       <antd.Button
         type="primary"
         shape="circle"
         icon={<CloseOutlined />}
-        onClick={() => handleClose(i)}
+        onClick={() => handleClose()}
       ></antd.Button>
     </Row>
   );