@remotion/studio
Version:
APIs for interacting with the Remotion Studio
49 lines (48 loc) • 2.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SchemaLabel = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../../../helpers/colors");
const layout_1 = require("../../layout");
const InlineRemoveButton_1 = require("../InlineRemoveButton");
const SchemaResetButton_1 = require("./SchemaResetButton");
const SchemaSaveButton_1 = require("./SchemaSaveButton");
const get_schema_label_1 = require("./get-schema-label");
const scroll_to_default_props_path_1 = require("./scroll-to-default-props-path");
const compactStyles = {
fontSize: 15,
color: colors_1.LIGHT_TEXT,
fontFamily: 'sans-serif',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
flex: 1,
};
const SchemaLabel = ({ jsonPath, isDefaultValue, onReset, onSave, showSaveButton, onRemove, saving, valid, saveDisabledByParent, suffix, handleClick, }) => {
const [clickableButtonHovered, setClickableButtonHovered] = (0, react_1.useState)(false);
const disableSave = saving || !valid || saveDisabledByParent;
const labelStyle = (0, react_1.useMemo)(() => {
return {
fontFamily: 'monospace',
fontSize: 14,
color: valid
? clickableButtonHovered
? 'white'
: colors_1.LIGHT_TEXT
: colors_1.FAIL_COLOR,
lineHeight: '24px',
};
}, [clickableButtonHovered, valid]);
const onClickablePointerEnter = (0, react_1.useCallback)(() => {
setClickableButtonHovered(true);
}, []);
const onClickablePointerLeave = (0, react_1.useCallback)(() => {
setClickableButtonHovered(false);
}, []);
const labelContent = ((0, jsx_runtime_1.jsxs)("span", { style: labelStyle, children: [(0, get_schema_label_1.getSchemaLabel)(jsonPath), " ", suffix ? suffix : null] }));
return ((0, jsx_runtime_1.jsxs)("div", { style: compactStyles, className: scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_CLASSNAME, "data-json-path": jsonPath.join('.'), children: [handleClick ? (
// Minus the padding that a button has (user agent padding-line-start)
(0, jsx_runtime_1.jsx)("button", { onPointerEnter: onClickablePointerEnter, onPointerLeave: onClickablePointerLeave, type: "button", onClick: handleClick, style: { border: 'none', padding: 0 }, children: labelContent })) : (labelContent), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), isDefaultValue ? null : (0, jsx_runtime_1.jsx)(SchemaResetButton_1.SchemaResetButton, { onClick: onReset }), isDefaultValue ? null : showSaveButton ? ((0, jsx_runtime_1.jsx)(SchemaSaveButton_1.SchemaSaveButton, { onClick: onSave, disabled: disableSave })) : null, onRemove ? (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: onRemove }) : null] }));
};
exports.SchemaLabel = SchemaLabel;