@remotion/studio
Version:
APIs for interacting with the Remotion Studio
84 lines (83 loc) • 4.21 kB
JavaScript
;
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 ComboBox_1 = require("../../NewComposition/ComboBox");
const get_zod_if_possible_1 = require("../../get-zod-if-possible");
const Fieldset_1 = require("./Fieldset");
const SchemaLabel_1 = require("./SchemaLabel");
const ZodObjectEditor_1 = require("./ZodObjectEditor");
const create_zod_values_1 = require("./create-zod-values");
const local_state_1 = require("./local-state");
const ZodDiscriminatedUnionEditor = ({ schema, setValue, showSaveButton, saving, value, defaultValue, saveDisabledByParent, onSave, 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 typedSchema = schema._def;
const options = (0, react_1.useMemo)(() => [...typedSchema.optionsMap.keys()], [typedSchema.optionsMap]);
const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
schema,
setValue,
unsavedValue: value,
savedValue: defaultValue,
});
const comboBoxValues = (0, react_1.useMemo)(() => {
return options.map((option) => {
return {
value: option,
label: option,
id: option,
keyHint: null,
leftItem: option === value[typedSchema.discriminator] ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
onClick: () => {
const val = (0, create_zod_values_1.createZodValues)(typedSchema.optionsMap.get(option), z, zodTypes);
setLocalValue(() => val, false, false);
},
quickSwitcherLabel: null,
subMenu: null,
type: 'item',
};
});
}, [
options,
setLocalValue,
typedSchema.discriminator,
typedSchema.optionsMap,
value,
z,
zodTypes,
]);
const save = (0, react_1.useCallback)(() => {
onSave(() => value, false, false);
}, [onSave, value]);
const discriminatedUnionReplacement = (0, react_1.useMemo)(() => {
return {
discriminator: typedSchema.discriminator,
markup: ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value[typedSchema.discriminator] ===
defaultValue[typedSchema.discriminator], jsonPath: [...jsonPath, typedSchema.discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[typedSchema.discriminator] })] }, 'replacement')),
};
}, [
comboBoxValues,
defaultValue,
jsonPath,
localValue.value,
localValue.zodValidation.success,
mayPad,
onRemove,
reset,
save,
saveDisabledByParent,
saving,
showSaveButton,
typedSchema.discriminator,
value,
]);
return ((0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor
// Re-render the object editor when the discriminator changes
, { jsonPath: jsonPath, mayPad: mayPad, savedValue: defaultValue, onRemove: onRemove, onSave: onSave, saveDisabledByParent: saveDisabledByParent, saving: saving, schema: typedSchema.optionsMap.get(value[typedSchema.discriminator]), setValue: setLocalValue, showSaveButton: showSaveButton, unsavedValue: value, discriminatedUnionReplacement: discriminatedUnionReplacement }, value[typedSchema.discriminator]));
};
exports.ZodDiscriminatedUnionEditor = ZodDiscriminatedUnionEditor;