qrcode-studio/dist/esm/components/shared/ArrayFieldEditor.js

A comprehensive Capacitor plugin for QR code and barcode scanning/generation. Supports 22+ QR data types and 14+ barcode formats (EAN, UPC, Code 128, etc.), with customizable designs, analytics, and React components. Works seamlessly across web, iOS, and

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
export const ArrayFieldEditor = ({ fieldName: _fieldName, label, value = [], onChange, itemTemplate, renderItem, }) => {
    const [collapsed, setCollapsed] = useState(false);
    const handleAddItem = () => {
        const newItem = Object.assign(Object.assign({}, itemTemplate), { id: Date.now() });
        onChange([...value, newItem]);
    };
    const handleUpdateItem = (index, newItem) => {
        const updated = [...value];
        updated[index] = newItem;
        onChange(updated);
    };
    const handleRemoveItem = (index) => {
        const updated = value.filter((_, i) => i !== index);
        onChange(updated);
    };
    return (_jsxs("div", { className: "array-field-editor", children: [_jsxs("div", { className: "array-field-header", children: [_jsx("label", { children: label }), _jsxs("div", { className: "array-field-actions", children: [_jsxs("span", { className: "item-count", children: [value.length, " items"] }), _jsx("button", { type: "button", className: "toggle-button", onClick: () => setCollapsed(!collapsed), children: collapsed ? '▸' : '▾' })] })] }), !collapsed && (_jsxs("div", { className: "array-field-content", children: [value.length === 0 ? (_jsxs("p", { className: "empty-message", children: ["No ", label.toLowerCase(), " added yet"] })) : (_jsx("div", { className: "array-items", children: value.map((item, index) => (_jsxs("div", { className: "array-item", children: [_jsxs("div", { className: "item-header", children: [_jsx("span", { className: "item-number", children: index + 1 }), _jsx("button", { type: "button", className: "remove-button", onClick: () => handleRemoveItem(index), children: "\u2715" })] }), _jsx("div", { className: "item-content", children: renderItem(item, index, (newItem) => handleUpdateItem(index, newItem), () => handleRemoveItem(index)) })] }, item.id || index))) })), _jsxs("button", { type: "button", className: "add-item-button", onClick: handleAddItem, children: ["+ Add ", label.slice(0, -1)] })] }))] }));
};
// Specific array field renderers
export const renderImageItem = (item, _index, onChange) => (_jsxs(_Fragment, { children: [_jsx("input", { type: "url", placeholder: "Image URL", value: item.url || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { url: e.target.value })) }), _jsx("input", { type: "text", placeholder: "Caption (optional)", value: item.caption || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { caption: e.target.value })) })] }));
export const renderLinkItem = (item, _index, onChange) => (_jsxs(_Fragment, { children: [_jsx("input", { type: "text", placeholder: "Link title", value: item.title || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { title: e.target.value })) }), _jsx("input", { type: "url", placeholder: "URL", value: item.url || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { url: e.target.value })) }), _jsx("input", { type: "url", placeholder: "Icon URL (optional)", value: item.icon || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { icon: e.target.value })) })] }));
export const renderMenuCategory = (category, index, onChange) => (_jsxs("div", { className: "menu-category", children: [_jsx("input", { type: "text", placeholder: "Category name", value: category.name || '', onChange: (e) => onChange(Object.assign(Object.assign({}, category), { name: e.target.value })) }), _jsx(ArrayFieldEditor, { fieldName: `items_${index}`, label: "Items", value: category.items || [], onChange: (items) => onChange(Object.assign(Object.assign({}, category), { items })), itemTemplate: { name: '', description: '', price: '' }, renderItem: renderMenuItem })] }));
export const renderMenuItem = (item, _index, onChange) => (_jsxs(_Fragment, { children: [_jsx("input", { type: "text", placeholder: "Item name", value: item.name || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { name: e.target.value })) }), _jsx("input", { type: "text", placeholder: "Description (optional)", value: item.description || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { description: e.target.value })) }), _jsx("input", { type: "text", placeholder: "Price", value: item.price || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { price: e.target.value })) }), _jsx("input", { type: "url", placeholder: "Image URL (optional)", value: item.image || '', onChange: (e) => onChange(Object.assign(Object.assign({}, item), { image: e.target.value })) })] }));
//# sourceMappingURL=ArrayFieldEditor.js.map