feat: add min and max APIs to array fields

measuredco · Feb 26, 2024 · 53b7937 · 53b7937
1 parent 92750a2
commit 53b7937
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 1 deletion.
diff --git a/apps/demo/config/blocks/Hero/index.tsx b/apps/demo/config/blocks/Hero/index.tsx
@@ -87,6 +87,8 @@ export const Hero: ComponentConfig<HeroProps> = {
     description: { type: "textarea" },
     buttons: {
       type: "array",
+      min: 1,
+      max: 4,
       getItemSummary: (item) => item.label || "Button",
       arrayFields: {
         label: { type: "text" },

diff --git a/apps/docs/pages/docs/api-reference/configuration/fields/array.mdx b/apps/docs/pages/docs/api-reference/configuration/fields/array.mdx
@@ -10,6 +10,8 @@ Render a list of items with a subset of fields. Extends [Base](base).
     fields: {
       items: {
         type: "array",
+        min: 1,
+        max: 3,
         arrayFields: {
           title: { type: "text" },
         },
@@ -35,6 +37,8 @@ const config = {
       fields: {
         items: {
           type: "array",
+          min: 1,
+          max: 3,
           arrayFields: {
             title: { type: "text" },
           },
@@ -60,6 +64,8 @@ const config = {
 | ----------------------------------------------- | --------------------------------------------- | -------- | -------- |
 | [`type`](#type)                                 | `type: "array"`                               | "array"  | Required |
 | [`arrayFields`](#arrayfields)                   | `arrayFields: { title: { type: "text" } }`    | Object   | Required |
+| [`min`](#min)                                   | `min: 1`                                      | Number   | -        |
+| [`max`](#max)                                   | `max: 3`                                      | Number   | -        |
 | [`defaultItemProps`](#defaultitemprops)         | `defaultItemProps: { title: "Hello, world" }` | String   | -        |
 | [`getItemSummary()`](#getitemsummaryitem-index) | `getItemSummary: (item) => item.title`        | Function | -        |
 
@@ -113,6 +119,102 @@ const config = {
 
 ## Optional params
 
+### `min`
+
+Set the minimum amount of items allowed in the array
+
+```tsx {10-10} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        items: {
+          type: "array",
+          arrayFields: {
+            title: { type: "text" },
+          },
+          min: 1,
+        },
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      items: {
+        type: "array",
+        min: 1,
+        arrayFields: {
+          title: { type: "text" },
+        },
+      },
+    },
+    defaultProps: { items: [{ title: "Apple" }, { title: "Banana" }] },
+    render: ({ items }) => {
+      return (
+        <ul>
+          {items.map((item, i) => (
+            <li key={i}>{item.title}</li>
+          ))}
+        </ul>
+      );
+    },
+  }}
+/>
+
+### `max`
+
+Set the maximum amount of items allowed in the array
+
+```tsx {10-10} copy
+const config = {
+  components: {
+    Example: {
+      fields: {
+        items: {
+          type: "array",
+          arrayFields: {
+            title: { type: "text" },
+          },
+          max: 3,
+        },
+      },
+      // ...
+    },
+  },
+};
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      items: {
+        type: "array",
+        max: 3,
+        arrayFields: {
+          title: { type: "text" },
+        },
+      },
+    },
+    defaultProps: { items: [{ title: "Apple" }, { title: "Banana" }] },
+    render: ({ items }) => {
+      return (
+        <ul>
+          {items.map((item, i) => (
+            <li key={i}>{item.title}</li>
+          ))}
+        </ul>
+      );
+    },
+  }}
+/>
+
 ### `defaultItemProps`
 
 Set the default values when a new item is added to the array.

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -205,6 +205,11 @@ export const ArrayField = ({
                                 <div className={getClassNameItem("actions")}>
                                   <div className={getClassNameItem("action")}>
                                     <IconButton
+                                      disabled={
+                                        field.min !== undefined &&
+                                        field.min >=
+                                          localState.arrayState.items.length
+                                      }
                                       onClick={(e) => {
                                         e.stopPropagation();
 
@@ -288,6 +293,10 @@ export const ArrayField = ({
 
                 <button
                   className={getClassName("addButton")}
+                  disabled={
+                    field.max !== undefined &&
+                    localState.arrayState.items.length >= field.max
+                  }
                   onClick={() => {
                     const existingValue = value || [];
 
@@ -301,7 +310,7 @@ export const ArrayField = ({
                     onChange(newValue, mapArrayStateToUi(newArrayState));
                   }}
                 >
-                  <Plus size="21" />
+                  <Plus size={21} />
                 </button>
               </div>
             );

diff --git a/packages/core/types/Config.tsx b/packages/core/types/Config.tsx
@@ -50,6 +50,8 @@ export type ArrayField<
   };
   defaultItemProps?: Props[0];
   getItemSummary?: (item: Props[0], index?: number) => string;
+  max?: number;
+  min?: number;
 };
 
 export type ObjectField<