Function ArrayField

packages/editor-app/src/components/PropertyInspector.tsx:1176–1316

({
    label,
    value,
    itemType,
    minLength = 0,
    maxLength = 100,
    reorderable = true,
    readOnly,
    onChange
}: ArrayFieldProps)

}

function ArrayField({
    label,
    value,
    itemType,
    minLength = 0,
    maxLength = 100,
    reorderable = true,
    readOnly,
    onChange
}: ArrayFieldProps) {
    const { t } = useLocale();
    const [isExpanded, setIsExpanded] = useState(true);
    const [dragIndex, setDragIndex] = useState<number | null>(null);

    const safeValue = Array.isArray(value) ? value : [];
    const canAdd = !readOnly && safeValue.length < maxLength;
    const canRemove = !readOnly && safeValue.length > minLength;

    const handleAdd = () => {
        if (!canAdd) return;
        let defaultValue: any = '';
        if (itemType?.type === 'number') defaultValue = 0;
        if (itemType?.type === 'boolean') defaultValue = false;
        onChange([...safeValue, defaultValue]);
    };

    const handleRemove = (index: number) => {
        if (!canRemove) return;
        const newValue = [...safeValue];
        newValue.splice(index, 1);
        onChange(newValue);
    };

    const handleItemChange = (index: number, newItemValue: any) => {
        const newValue = [...safeValue];
        newValue[index] = newItemValue;
        onChange(newValue);
    };

    const handleDragStart = (index: number) => {
        if (!reorderable || readOnly) return;
        setDragIndex(index);
    };

    const handleDragOver = (e: React.DragEvent, index: number) => {
        e.preventDefault();
        if (dragIndex === null || dragIndex === index) return;

        const newValue = [...safeValue];
        const [removed] = newValue.splice(dragIndex, 1);
        newValue.splice(index, 0, removed);
        onChange(newValue);
        setDragIndex(index);
    };

    const handleDragEnd = () => {
        setDragIndex(null);
    };