@remotion/studio
Version:
APIs for interacting with the Remotion Studio
51 lines (50 loc) • 3.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZodOrNullishEditor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../../../helpers/colors");
const Checkbox_1 = require("../../Checkbox");
const get_zod_if_possible_1 = require("../../get-zod-if-possible");
const layout_1 = require("../../layout");
const Fieldset_1 = require("./Fieldset");
const SchemaLabel_1 = require("./SchemaLabel");
const ZodSwitch_1 = require("./ZodSwitch");
const create_zod_values_1 = require("./create-zod-values");
const local_state_1 = require("./local-state");
const labelStyle = {
fontFamily: 'sans-serif',
fontSize: 14,
color: colors_1.LIGHT_TEXT,
};
const checkBoxWrapper = {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginTop: '5px',
};
const ZodOrNullishEditor = ({ jsonPath, schema, setValue, onSave, defaultValue, value, showSaveButton, onRemove, nullishValue, saving, saveDisabledByParent, mayPad, innerSchema, }) => {
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 isChecked = value === nullishValue;
const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
schema,
setValue,
unsavedValue: value,
savedValue: defaultValue,
});
const onCheckBoxChange = (0, react_1.useCallback)((e) => {
const val = e.target.checked
? nullishValue
: (0, create_zod_values_1.createZodValues)(innerSchema, z, zodTypes);
setLocalValue(() => val, false, false);
}, [innerSchema, nullishValue, setLocalValue, z, zodTypes]);
const save = (0, react_1.useCallback)(() => {
onSave(() => value, false, false);
}, [onSave, value]);
return ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: localValue.zodValidation.success, children: [localValue.value === nullishValue ? ((0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: localValue.value === defaultValue, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null })) : ((0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { value: localValue.value, setValue: setLocalValue, jsonPath: jsonPath, schema: innerSchema, defaultValue: defaultValue, onSave: onSave, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, saveDisabledByParent: saveDisabledByParent, mayPad: false })), (0, jsx_runtime_1.jsxs)("div", { style: checkBoxWrapper, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isChecked, onChange: onCheckBoxChange, disabled: false, name: jsonPath.join('.') }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: String(nullishValue) })] })] }));
};
exports.ZodOrNullishEditor = ZodOrNullishEditor;