@remotion/studio
Version:
APIs for interacting with the Remotion Studio
88 lines (87 loc) • 4.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SchemaEditor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const document_title_1 = require("../../../helpers/document-title");
const use_keybinding_1 = require("../../../helpers/use-keybinding");
const is_menu_item_1 = require("../../Menu/is-menu-item");
const get_zod_if_possible_1 = require("../../get-zod-if-possible");
const SchemaErrorMessages_1 = require("./SchemaErrorMessages");
const ZodObjectEditor_1 = require("./ZodObjectEditor");
const deep_equal_1 = require("./deep-equal");
const local_state_1 = require("./local-state");
const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
const scrollable = {
display: 'flex',
flexDirection: 'column',
overflowY: 'auto',
};
const SchemaEditor = ({ schema, unsavedDefaultProps, setValue, zodValidationResult, savedDefaultProps, onSave, showSaveButton, saving, saveDisabledByParent, }) => {
const keybindings = (0, use_keybinding_1.useKeybinding)();
const [revision, setRevision] = (0, react_1.useState)(0);
const revisionState = (0, react_1.useMemo)(() => {
return {
childResetRevision: revision,
};
}, [revision]);
(0, react_1.useEffect)(() => {
const bumpRevision = () => {
setRevision((old) => old + 1);
};
window.addEventListener(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, bumpRevision);
return () => {
window.removeEventListener(remotion_1.Internals.PROPS_UPDATED_EXTERNALLY, bumpRevision);
};
}, []);
const z = (0, get_zod_if_possible_1.useZodIfPossible)();
if (!z) {
throw new Error('expected zod');
}
const hasChanged = (0, react_1.useMemo)(() => {
return !(0, deep_equal_1.deepEqual)(savedDefaultProps, unsavedDefaultProps);
}, [savedDefaultProps, unsavedDefaultProps]);
(0, react_1.useEffect)(() => {
(0, document_title_1.setUnsavedProps)(hasChanged);
}, [hasChanged]);
const onQuickSave = (0, react_1.useCallback)(() => {
if (hasChanged && showSaveButton) {
onSave(() => {
return unsavedDefaultProps;
});
}
}, [hasChanged, onSave, showSaveButton, unsavedDefaultProps]);
(0, react_1.useEffect)(() => {
const save = keybindings.registerKeybinding({
event: 'keydown',
key: 's',
commandCtrlKey: true,
callback: onQuickSave,
preventDefault: true,
triggerIfInputFieldFocused: true,
keepRegisteredWhenNotHighestContext: true,
});
return () => {
save.unregister();
};
}, [keybindings, onQuickSave, onSave]);
const def = schema._def;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const typeName = def.typeName;
const reset = (0, react_1.useCallback)(() => {
setValue(savedDefaultProps);
}, [savedDefaultProps, setValue]);
if (!zodValidationResult.success) {
const defaultPropsValid = schema.safeParse(savedDefaultProps);
if (!defaultPropsValid.success) {
return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidDefaultProps, { zodValidationResult: zodValidationResult });
}
return ((0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.InvalidSchema, { reset: reset, zodValidationResult: zodValidationResult }));
}
if (typeName !== z.ZodFirstPartyTypeKind.ZodObject) {
return (0, jsx_runtime_1.jsx)(SchemaErrorMessages_1.TopLevelZodValue, { typeReceived: typeName });
}
return ((0, jsx_runtime_1.jsx)("div", { ref: scroll_to_default_props_path_1.defaultPropsEditorScrollableAreaRef, style: scrollable, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(local_state_1.RevisionContext.Provider, { value: revisionState, children: (0, jsx_runtime_1.jsx)(ZodObjectEditor_1.ZodObjectEditor, { discriminatedUnionReplacement: null, unsavedValue: unsavedDefaultProps, setValue: setValue, jsonPath: [], schema: schema, savedValue: savedDefaultProps, onSave: onSave, showSaveButton: showSaveButton, onRemove: null, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: true }) }) }));
};
exports.SchemaEditor = SchemaEditor;