87 lines
3.5 KiB
JavaScript
87 lines
3.5 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.OverrideInputPropsModal = void 0;
|
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
const react_1 = require("react");
|
|
const remotion_1 = require("remotion");
|
|
const colors_1 = require("../helpers/colors");
|
|
const modals_1 = require("../state/modals");
|
|
const Button_1 = require("./Button");
|
|
const DismissableModal_1 = require("./NewComposition/DismissableModal");
|
|
const RemTextarea_1 = require("./NewComposition/RemTextarea");
|
|
const layout_1 = require("./layout");
|
|
const style = {
|
|
padding: 12,
|
|
width: 500,
|
|
};
|
|
const label = {
|
|
color: colors_1.LIGHT_TEXT,
|
|
fontSize: 14,
|
|
marginBottom: 10,
|
|
};
|
|
const textAreaStyle = {
|
|
fontFamily: 'monospace',
|
|
minHeight: 200,
|
|
};
|
|
const codeSnippet = {
|
|
fontSize: 14,
|
|
color: colors_1.BLUE,
|
|
fontFamily: 'monospace',
|
|
};
|
|
const row = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
};
|
|
const isValidJSON = (value) => {
|
|
try {
|
|
JSON.parse(value);
|
|
return true;
|
|
}
|
|
catch (_a) {
|
|
return false;
|
|
}
|
|
};
|
|
const Inner = () => {
|
|
const [value, setValue] = (0, react_1.useState)(() => {
|
|
const override = remotion_1.Internals.getInputPropsOverride();
|
|
if (override) {
|
|
return JSON.stringify(override, null, 2);
|
|
}
|
|
return null;
|
|
});
|
|
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
|
|
const valid = (0, react_1.useMemo)(() => {
|
|
if (!value)
|
|
return true;
|
|
return isValidJSON(value);
|
|
}, [value]);
|
|
const onChange = (0, react_1.useCallback)((newValue) => {
|
|
if (newValue.trim() === '') {
|
|
setValue(null);
|
|
remotion_1.Internals.setInputPropsOverride(null);
|
|
return;
|
|
}
|
|
setValue(newValue);
|
|
if (!isValidJSON(newValue)) {
|
|
return;
|
|
}
|
|
remotion_1.Internals.setInputPropsOverride(JSON.parse(newValue));
|
|
}, [setValue]);
|
|
const onReset = (0, react_1.useCallback)(() => {
|
|
onChange('');
|
|
}, [onChange]);
|
|
const onReloadPage = (0, react_1.useCallback)(() => {
|
|
window.location.reload();
|
|
}, []);
|
|
const onDone = (0, react_1.useCallback)(() => {
|
|
setSelectedModal(null);
|
|
}, [setSelectedModal]);
|
|
return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: [(0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Enter a valid JSON to override the value that", ' ', (0, jsx_runtime_1.jsx)("code", { style: codeSnippet, children: "getInputProps()" }), " returns to preview a composition with different props. The Studio must be reloaded to see the changes."] }), (0, jsx_runtime_1.jsx)(RemTextarea_1.RemTextarea, { onChange: (e) => onChange(e.target.value), value: value !== null && value !== void 0 ? value : '', status: valid ? 'ok' : 'error', style: textAreaStyle }), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onReset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onReloadPage, children: "Reload page" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onDone, children: "Done" })] })] }));
|
|
};
|
|
const OverrideInputPropsModal = () => {
|
|
return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(Inner, {}) }));
|
|
};
|
|
exports.OverrideInputPropsModal = OverrideInputPropsModal;
|