site-builder/craft/src/panels/right/styles/ArrayItemFields.tsx

import React, { useEffect, useRef } from 'react';
import { useEditor } from '@craftjs/core';
import { CollapsibleSection, ArrayPropEditor, smallInputStyle } from './shared';
import { useLayerFocus } from '../../left/LayerFocusContext';

/* ---------- Shared array-item field editor ----------
   Extracted from SectionTypePanel and GenericPropsEditor, which both had a
   near-byte-identical per-item field renderer for generic array props
   (features/items/plans/testimonials/etc.). Infers an input type per field:
   boolean -> checkbox, number -> number, /color/ -> color swatch, long
   string -> textarea, else text. Fields are derived from Object.keys(items[0]).
   Callers keep their own special-casing (e.g. SectionTypePanel routes
   key === 'features' to FeaturesEditor instead of using this component). */
export const ArrayItemFieldsEditor: React.FC<{ selectedId: string; propKey: string; items: any[] }> = ({
  selectedId, propKey, items,
}) => {
  const { actions } = useEditor();
  const arrayItems = items;
  const sampleItem = arrayItems[0] || {};
  const itemFields = typeof sampleItem === 'object' && sampleItem !== null ? Object.keys(sampleItem) : [];

  // Layers panel -> array editor "scroll to this item" hookup. The outer
  // <div ref={rootRef}> wraps ArrayPropEditor's rendered cards (the actual
  // per-item background box lives in shared.tsx's ArrayPropEditor, which is
  // also used by MediaStylePanel/FormStylePanel -- rather than touch that
  // shared component for one consumer, the data-array-item tag below goes
  // on the content renderItem returns, which is enough for scrollIntoView
  // to bring the right card into the viewport.
  const { focus } = useLayerFocus();
  const rootRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!focus || focus.prop !== propKey) return;
    const card = rootRef.current?.querySelector(`[data-array-item="${propKey}:${focus.index}"]`);
    card?.scrollIntoView?.({ block: 'nearest', behavior: 'smooth' });
    // `focus.nonce` is in the dep list so clicking the SAME row twice
    // re-scrolls (the request object is otherwise identical).
  }, [focus?.nonce, focus?.prop, focus?.index, propKey]);

  return (
    <div ref={rootRef}>
    <CollapsibleSection title={propKey.replace(/([A-Z])/g, ' $1').trim()}>
      <ArrayPropEditor
        selectedId={selectedId}
        propKey={propKey}
        items={arrayItems}
        renderItem={(item: any, index: number) => {
          if (typeof item !== 'object' || item === null) {
            return (
              <input
                type="text"
                data-array-item={`${propKey}:${index}`}
                value={String(item)}
                onChange={(e) => {
                  actions.setProp(selectedId, (props: any) => {
                    const updated = [...(props[propKey] || [])];
                    updated[index] = e.target.value;
                    props[propKey] = updated;
                  });
                }}
                style={smallInputStyle}
              />
            );
          }
          return (
            <div data-array-item={`${propKey}:${index}`} style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
              {itemFields.map((field) => {
                const fieldVal = item[field];
                if (typeof fieldVal === 'boolean') {
                  return (
                    <label key={field} style={{ fontSize: 10, color: '#71717a', display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer' }}>
                      <input type="checkbox" checked={fieldVal} onChange={(e) => {
                        actions.setProp(selectedId, (props: any) => {
                          const updated = [...(props[propKey] || [])];
                          updated[index] = { ...updated[index], [field]: e.target.checked };
                          props[propKey] = updated;
                        });
                      }} />
                      {field}
                    </label>
                  );
                }
                if (typeof fieldVal === 'number') {
                  return (
                    <div key={field}>
                      <label style={{ fontSize: 9, color: '#52525b', textTransform: 'capitalize' }}>{field}</label>
                      <input type="number" value={fieldVal} onChange={(e) => {
                        actions.setProp(selectedId, (props: any) => {
                          const updated = [...(props[propKey] || [])];
                          updated[index] = { ...updated[index], [field]: parseFloat(e.target.value) || 0 };
                          props[propKey] = updated;
                        });
                      }} style={smallInputStyle} />
                    </div>
                  );
                }
                // color fields
                if (/color/i.test(field) && typeof fieldVal === 'string') {
                  return (
                    <div key={field} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                      <label style={{ fontSize: 9, color: '#52525b', textTransform: 'capitalize', width: 50 }}>{field}</label>
                      <input type="color" value={fieldVal || '#000000'} onChange={(e) => {
                        actions.setProp(selectedId, (props: any) => {
                          const updated = [...(props[propKey] || [])];
                          updated[index] = { ...updated[index], [field]: e.target.value };
                          props[propKey] = updated;
                        });
                      }} style={{ width: 24, height: 20, border: 'none', cursor: 'pointer', background: 'none', padding: 0 }} />
                    </div>
                  );
                }
                // long text
                const strVal = String(fieldVal ?? '');
                const isLongField = strVal.length > 50 || field === 'description' || field === 'text' || field === 'content';
                return (
                  <div key={field}>
                    <label style={{ fontSize: 9, color: '#52525b', textTransform: 'capitalize' }}>{field}</label>
                    {isLongField ? (
                      <textarea value={strVal} onChange={(e) => {
                        actions.setProp(selectedId, (props: any) => {
                          const updated = [...(props[propKey] || [])];
                          updated[index] = { ...updated[index], [field]: e.target.value };
                          props[propKey] = updated;
                        });
                      }} rows={2} style={{ ...smallInputStyle, resize: 'vertical' }} />
                    ) : (
                      <input type="text" value={strVal} onChange={(e) => {
                        actions.setProp(selectedId, (props: any) => {
                          const updated = [...(props[propKey] || [])];
                          updated[index] = { ...updated[index], [field]: e.target.value };
                          props[propKey] = updated;
                        });
                      }} style={smallInputStyle} />
                    )}
                  </div>
                );
              })}
            </div>
          );
        }}
        emptyItem={typeof sampleItem === 'object' && sampleItem !== null
          ? Object.fromEntries(itemFields.map((f) => [f, typeof sampleItem[f] === 'number' ? 0 : typeof sampleItem[f] === 'boolean' ? false : '']))
          : ''
        }
      />
    </CollapsibleSection>
    </div>
  );
};