feat: add duplicate action to array field

measuredco · Nov 14, 2024 · 229cbdd · 229cbdd
1 parent ccec96e
commit 229cbdd
Showing 1 changed file with 30 additions and 1 deletion.
diff --git a/packages/core/components/AutoField/fields/ArrayField/index.tsx b/packages/core/components/AutoField/fields/ArrayField/index.tsx
@@ -1,6 +1,6 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
 import styles from "./styles.module.css";
-import { List, Plus, Trash } from "lucide-react";
+import { Copy, List, Plus, Trash } from "lucide-react";
 import { AutoFieldPrivate, FieldPropsInternal } from "../..";
 import { IconButton } from "../../../IconButton";
 import { reorder, replace } from "../../../../lib";
@@ -218,6 +218,35 @@ export const ArrayField = ({
                             <div className={getClassNameItem("rhs")}>
                               {!readOnly && (
                                 <div className={getClassNameItem("actions")}>
+                                  <div className={getClassNameItem("action")}>
+                                    <IconButton
+                                      type="button"
+                                      disabled={!!addDisabled}
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+
+                                        const existingValue = [
+                                          ...(value || []),
+                                        ];
+
+                                        existingValue.splice(
+                                          i,
+                                          0,
+                                          existingValue[i]
+                                        );
+
+                                        onChange(
+                                          existingValue,
+                                          mapArrayStateToUi(
+                                            regenerateArrayState(existingValue)
+                                          )
+                                        );
+                                      }}
+                                      title="Duplicate"
+                                    >
+                                      <Copy size={16} />
+                                    </IconButton>
+                                  </div>
                                   <div className={getClassNameItem("action")}>
                                     <IconButton
                                       type="button"