@remotion/studio
Version:
APIs for interacting with the Remotion Studio
52 lines (51 loc) • 2.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineNumberField = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const InputDragger_1 = require("../NewComposition/InputDragger");
const timeline_field_utils_1 = require("./timeline-field-utils");
const TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, codeValue, }) => {
var _a, _b, _c;
const [dragValue, setDragValue] = (0, react_1.useState)(null);
const onValueChange = (0, react_1.useCallback)((newVal) => {
setDragValue(newVal);
onDragValueChange(field.key, newVal);
}, [onDragValueChange, field.key]);
const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
if (canUpdate && newVal !== codeValue) {
onSave(field.key, newVal).finally(() => {
setDragValue(null);
onDragEnd();
});
}
else {
setDragValue(null);
onDragEnd();
}
}, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
const onTextChange = (0, react_1.useCallback)((newVal) => {
if (canUpdate) {
const parsed = Number(newVal);
if (!Number.isNaN(parsed) && parsed !== codeValue) {
setDragValue(parsed);
onSave(field.key, parsed).catch(() => {
setDragValue(null);
});
}
}
}, [canUpdate, onSave, field.key, codeValue]);
const step = field.fieldSchema.type === 'number' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
const formatter = (0, react_1.useCallback)((v) => {
const num = Number(v);
const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
return digits === 0 ? String(num) : num.toFixed(digits);
}, [stepDecimals]);
return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
: -Infinity, max: field.fieldSchema.type === 'number'
? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
: Infinity, step: step, formatter: formatter, rightAlign: false }));
};
exports.TimelineNumberField = TimelineNumberField;