chore: allow read-only setting of array fields via dot-notation

measuredco · Oct 31, 2023 · ac4543f · ac4543f
1 parent a051000
commit ac4543f
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -288,7 +288,7 @@ Dynamic prop resolution allows developers to resolve props for components withou
 #### Response
 
 - **props** (`object`): the resolved props for your component. Will not be stored in the Puck data
-- **readOnly** (`object`): an object describing which fields on the component are currently read-only
+- **readOnly** (`object`): an object describing which fields on the component are currently read-only. Can also make array fields read-only by using a dot-notation accessor, like `array[0].text`.
   - **[prop]** (`boolean`): boolean describing whether or not the prop field is read-only
 
 #### Examples

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx b/packages/core/components/InputOrGroup/fields/ArrayField/index.tsx
@@ -1,5 +1,4 @@
 import getClassNameFactory from "../../../../lib/get-class-name-factory";
-import inputStyles from "../../styles.module.css";
 import styles from "./styles.module.css";
 import { List, Plus, Trash } from "react-feather";
 import { FieldLabelInternal, InputOrGroup, type InputProps } from "../..";
@@ -14,7 +13,6 @@ import { DragIcon } from "../../../DragIcon";
 import { ArrayState, ItemWithId } from "../../../../types/Config";
 import { useAppContext } from "../../../Puck/context";
 
-const getClassNameInput = getClassNameFactory("Input", inputStyles);
 const getClassName = getClassNameFactory("ArrayField", styles);
 const getClassNameItem = getClassNameFactory("ArrayFieldItem", styles);
 
@@ -25,6 +23,7 @@ export const ArrayField = ({
   name,
   label,
   readOnly,
+  readOnlyFields = {},
 }: InputProps) => {
   const [arrayFieldId] = useState(generateId("ArrayField"));
 
@@ -177,11 +176,19 @@ export const ArrayField = ({
                                     const subField =
                                       field.arrayFields![fieldName];
 
+                                    const subFieldName = `${name}[${i}].${fieldName}`;
+                                    const zeroIndexSubFieldName =
+                                      subFieldName.replace(/\[\d\]/g, "[0]");
+
                                     return (
                                       <InputOrGroup
-                                        key={`${name}_${i}_${fieldName}`}
-                                        name={`${name}_${i}_${fieldName}`}
+                                        key={subFieldName}
+                                        name={subFieldName}
                                         label={subField.label || fieldName}
+                                        readOnly={
+                                          readOnlyFields[zeroIndexSubFieldName]
+                                        }
+                                        readOnlyFields={readOnlyFields}
                                         field={subField}
                                         value={data[fieldName]}
                                         onChange={(val) =>

diff --git a/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css b/packages/core/components/InputOrGroup/fields/ArrayField/styles.module.css
@@ -81,7 +81,7 @@
   overflow: hidden;
 }
 
-.ArrayFieldItem--readOnly .ArrayFieldItem-summary {
+.ArrayFieldItem--readOnly > .ArrayFieldItem-summary {
   background-color: var(--puck-color-grey-11);
   color: var(--puck-color-grey-5);
 }

diff --git a/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx b/packages/core/components/InputOrGroup/fields/ExternalField/index.tsx
@@ -4,8 +4,6 @@ import { FieldLabelInternal, type InputProps } from "../..";
 import { ExternalInput } from "../../../ExternalInput";
 import { Link } from "react-feather";
 
-const getClassName = getClassNameFactory("Input", styles);
-
 export const ExternalField = ({
   field,
   onChange,

diff --git a/packages/core/components/InputOrGroup/index.tsx b/packages/core/components/InputOrGroup/index.tsx
@@ -82,6 +82,7 @@ export type InputProps = {
   label?: string;
   onChange: (value: any) => void;
   readOnly?: boolean;
+  readOnlyFields?: Record<string, boolean | undefined>;
 };
 
 export const InputOrGroup = (props: InputProps) => {

diff --git a/packages/core/components/Puck/index.tsx b/packages/core/components/Puck/index.tsx
@@ -655,6 +655,7 @@ export function Puck({
                                   name={fieldName}
                                   label={field.label}
                                   readOnly={readOnly[fieldName]}
+                                  readOnlyFields={readOnly}
                                   value={selectedItem.props[fieldName]}
                                   onChange={onChange}
                                 />
@@ -669,6 +670,7 @@ export function Puck({
                                   name={fieldName}
                                   label={field.label}
                                   readOnly={readOnly[fieldName]}
+                                  readOnlyFields={readOnly}
                                   value={data.root[fieldName]}
                                   onChange={onChange}
                                 />