@remotion/studio
Version:
APIs for interacting with the Remotion Studio
71 lines (70 loc) • 3.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZodDiscriminatedUnionEditor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Checkmark_1 = require("../../../icons/Checkmark");
const get_zod_if_possible_1 = require("../../get-zod-if-possible");
const ComboBox_1 = require("../../NewComposition/ComboBox");
const create_zod_values_1 = require("./create-zod-values");
const Fieldset_1 = require("./Fieldset");
const SchemaLabel_1 = require("./SchemaLabel");
const zod_schema_type_1 = require("./zod-schema-type");
const zod_schema_type_2 = require("./zod-schema-type");
const ZodObjectEditor_1 = require("./ZodObjectEditor");
const ZodDiscriminatedUnionEditor = ({ schema, setValue, value, mayPad, jsonPath, onRemove }) => {
const z = (0, get_zod_if_possible_1.useZodIfPossible)();
if (!z) {
throw new Error('expected zod');
}
const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
const discriminator = (0, zod_schema_type_2.getDiscriminator)(schema);
const options = (0, react_1.useMemo)(() => (0, zod_schema_type_2.getDiscriminatedOptionKeys)(schema), [schema]);
const comboBoxValues = (0, react_1.useMemo)(() => {
return options.map((option) => {
return {
value: option,
label: option,
id: option,
keyHint: null,
leftItem: option === value[discriminator] ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
onClick: () => {
const optionSchema = (0, zod_schema_type_2.getDiscriminatedOption)(schema, option);
if (!optionSchema) {
throw new Error(`No schema found for discriminator value: ${option}`);
}
const val = (0, create_zod_values_1.createZodValues)(optionSchema, z, zodTypes);
setValue(() => val, { shouldSave: true });
},
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
};
});
}, [options, setValue, discriminator, schema, value, z, zodTypes]);
const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
const discriminatedUnionReplacement = (0, react_1.useMemo)(() => {
return {
discriminator,
markup: (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: [...jsonPath, discriminator], onRemove: onRemove, suffix: null, valid: zodValidation.success }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[discriminator] })
] }, 'replacement')),
};
}, [
comboBoxValues,
jsonPath,
mayPad,
onRemove,
discriminator,
value,
zodValidation.success,
]);
const currentOptionSchema = (0, zod_schema_type_2.getDiscriminatedOption)(schema, value[discriminator]);
if (!currentOptionSchema) {
throw new Error('No matching option found for discriminated union');
}
return (jsx_runtime_1.jsx(ZodObjectEditor_1.ZodObjectEditor
// Re-render the object editor when the discriminator changes
, { jsonPath: jsonPath, mayPad: mayPad, onRemove: onRemove, schema: currentOptionSchema, setValue: setValue, value: value, discriminatedUnionReplacement: discriminatedUnionReplacement }, value[discriminator]));
};
exports.ZodDiscriminatedUnionEditor = ZodDiscriminatedUnionEditor;