zod-form-kit/dist/components/fields/DiscriminatedUnionField.js

UI-agnostic form generation library based on Zod schemas with extensible adapter pattern

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FieldRenderer } from '../FieldRenderer';
export function DiscriminatedUnionField({ value = {}, onChange, error: _error, required, label, name, discriminator, variants, form, path }) {
    const currentVariant = value?.[discriminator];
    const variantOptions = Object.keys(variants);
    const handleVariantChange = (selectedVariant) => {
        const variantSchema = variants[selectedVariant];
        const newValue = {
            [discriminator]: selectedVariant,
            // Initialize with default values for the selected variant
            ...getDefaultValueForVariant(variantSchema)
        };
        onChange(newValue);
    };
    const getDefaultValueForVariant = (schema) => {
        if (schema.type === 'object' && schema.properties) {
            const defaults = {};
            Object.entries(schema.properties).forEach(([key, fieldSchema]) => {
                if (key !== discriminator) { // Don't override discriminator
                    defaults[key] = getDefaultValue(fieldSchema);
                }
            });
            return defaults;
        }
        return {};
    };
    const getDefaultValue = (schema) => {
        switch (schema.type) {
            case 'string': return '';
            case 'number': return 0;
            case 'boolean': return false;
            case 'array': return [];
            case 'object': return {};
            default: return null;
        }
    };
    const currentVariantSchema = currentVariant ? variants[currentVariant] : null;
    return (_jsxs("div", { className: "discriminated-union-field", children: [_jsxs("label", { className: "union-label", children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "variant-selector", children: [_jsx("label", { htmlFor: `${name}-variant`, children: "Type:" }), _jsxs("select", { id: `${name}-variant`, value: currentVariant || '', onChange: (e) => handleVariantChange(e.target.value), className: "variant-select", children: [_jsx("option", { value: "", children: "Select a type..." }), variantOptions.map((variant) => (_jsx("option", { value: variant, children: variant }, variant)))] }, `${name}-variant-${currentVariant || 'none'}`)] }), currentVariantSchema && (_jsx("div", { className: "variant-fields", children: _jsx(FieldRenderer, { schema: currentVariantSchema, form: form, path: path }) }))] }));
}