@remotion/studio
Version:
APIs for interacting with the Remotion Studio
70 lines (69 loc) • 3.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZodNumberEditor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const InputDragger_1 = require("../../NewComposition/InputDragger");
const Fieldset_1 = require("./Fieldset");
const SchemaLabel_1 = require("./SchemaLabel");
const ZodFieldValidation_1 = require("./ZodFieldValidation");
const local_state_1 = require("./local-state");
const fullWidth = {
width: '100%',
};
const getMinValue = (schema) => {
const minCheck = schema._def.checks.find((c) => c.kind === 'min');
if (!minCheck) {
return -Infinity;
}
if (minCheck.kind !== 'min') {
throw new Error('Expected min check');
}
if (!minCheck.inclusive) {
return -Infinity;
}
return minCheck.value;
};
const getMaxValue = (schema) => {
const maxCheck = schema._def.checks.find((c) => c.kind === 'max');
if (!maxCheck) {
return Infinity;
}
if (maxCheck.kind !== 'max') {
throw new Error('Expected max check');
}
if (!maxCheck.inclusive) {
return Infinity;
}
return maxCheck.value;
};
const getStep = (schema) => {
const multipleStep = schema._def.checks.find((c) => c.kind === 'multipleOf');
if (!multipleStep) {
return undefined;
}
if (multipleStep.kind !== 'multipleOf') {
throw new Error('Expected multipleOf check');
}
return multipleStep.value;
};
const ZodNumberEditor = ({ jsonPath, value, schema, setValue, onSave, defaultValue, onRemove, showSaveButton, saving, saveDisabledByParent, mayPad, }) => {
const { localValue, onChange: setLocalValue, reset, } = (0, local_state_1.useLocalState)({
unsavedValue: value,
schema,
setValue,
savedValue: defaultValue,
});
const onNumberChange = (0, react_1.useCallback)((newValue) => {
setLocalValue(() => newValue, false, false);
}, [setLocalValue]);
const isDefault = localValue.value === defaultValue;
const onTextChange = (0, react_1.useCallback)((newValue) => {
setLocalValue(() => Number(newValue), false, false);
}, [setLocalValue]);
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: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { handleClick: null, isDefaultValue: isDefault, jsonPath: jsonPath, onReset: reset, onSave: save, showSaveButton: showSaveButton, onRemove: onRemove, saving: saving, valid: localValue.zodValidation.success, saveDisabledByParent: saveDisabledByParent, suffix: null }), (0, jsx_runtime_1.jsxs)("div", { style: fullWidth, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: 'number', value: localValue.value, style: fullWidth, status: localValue.zodValidation.success ? 'ok' : 'error', placeholder: jsonPath.join('.'), onTextChange: onTextChange, onValueChange: onNumberChange, min: getMinValue(schema), max: getMaxValue(schema), step: getStep(schema), rightAlign: false }), (0, jsx_runtime_1.jsx)(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, localValue: localValue })] })] }));
};
exports.ZodNumberEditor = ZodNumberEditor;