@remotion/studio
Version:
APIs for interacting with the Remotion Studio
88 lines (87 loc) • 5.64 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.EnvInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const layout_1 = require("../layout");
const RemInput_1 = require("../NewComposition/RemInput");
const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
const InlineEyeIcon_1 = require("./InlineEyeIcon");
const InlineRemoveButton_1 = require("./InlineRemoveButton");
const layout_2 = require("./layout");
const input = {
flex: 1,
width: '100%',
};
const validationStyle = {
paddingLeft: layout_2.optionRow.paddingLeft,
paddingRight: layout_2.optionRow.paddingRight,
};
const EnvInput = ({ onEnvKeyChange, onEnvValChange, envKey, envVal, onDelete, index, autoFocus, isDuplicate, }) => {
const [showInPlainText, setShowInPlainText] = react_1.default.useState(false);
const [initialWarningKeyMissing, setKeyWarningEligible] = react_1.default.useState(() => {
return envKey.trim() === '' && envVal.trim() !== '';
});
const [initialWarningValMissing, setValueWarningEligible] = react_1.default.useState(() => {
return envKey.trim() !== '' && envVal.trim() === '';
});
const isKeyMissing = envKey.trim() === '' && initialWarningKeyMissing && envVal.trim() !== '';
const isValMissing = envVal.trim() === '' && initialWarningValMissing && envKey.trim() !== '';
const handleDelete = (0, react_1.useCallback)(() => {
onDelete(index);
}, [index, onDelete]);
const togglePlainText = (0, react_1.useCallback)(() => {
setShowInPlainText((prev) => !prev);
}, []);
const handleKeyChange = (0, react_1.useCallback)((e) => {
onEnvKeyChange(index, e.target.value);
}, [index, onEnvKeyChange]);
const handleValueChange = (0, react_1.useCallback)((e) => {
onEnvValChange(index, e.target.value);
}, [index, onEnvValChange]);
const makeKeyWarningEligible = (0, react_1.useCallback)(() => {
setKeyWarningEligible(true);
}, []);
const makeValueWarningEligible = (0, react_1.useCallback)(() => {
setValueWarningEligible(true);
}, []);
const isNodeEnvKey = envKey.trim() === 'NODE_ENV';
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsxs(layout_1.Row, { align: "center", style: layout_2.optionRow, children: [
jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: isNodeEnvKey || isDuplicate || isKeyMissing ? 'warning' : 'ok', type: "text", placeholder: "Key", style: input, value: envKey, onBlur: makeKeyWarningEligible, autoFocus: autoFocus, onChange: handleKeyChange, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: isValMissing ? 'warning' : 'ok', placeholder: "Value", type: showInPlainText ? 'text' : 'password', style: input, value: envVal, onBlur: makeValueWarningEligible, onChange: handleValueChange, rightAlign: false }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 }), jsx_runtime_1.jsx(InlineEyeIcon_1.InlineEyeButton, { enabled: !showInPlainText, onClick: togglePlainText }), jsx_runtime_1.jsx(InlineRemoveButton_1.InlineRemoveButton, { onClick: handleDelete })
] }), isNodeEnvKey ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "NODE_ENV will be overwritten by Remotion during the render process." }) })) : null, isDuplicate ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: `${envKey.toUpperCase()} is already defined.` }) })) : null, isKeyMissing ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Key is missing." }) })) : null, isValMissing ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Value is missing." }) })) : null] }));
};
exports.EnvInput = EnvInput;