@remotion/studio
Version:
APIs for interacting with the Remotion Studio
61 lines (60 loc) • 2.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tab = exports.Tabs = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../../helpers/colors");
const z_index_1 = require("../../state/z-index");
const tabsContainer = {
display: 'flex',
flexDirection: 'row',
};
const Tabs = ({ children, style }) => {
const definiteStyle = (0, react_1.useMemo)(() => {
return {
...tabsContainer,
...style,
};
}, [style]);
return jsx_runtime_1.jsx("div", { style: definiteStyle, children: children });
};
exports.Tabs = Tabs;
const selectorButton = {
border: 'none',
flex: 1,
padding: 4,
height: 40,
paddingLeft: 16,
display: 'flex',
flexDirection: 'row',
fontSize: 14,
color: 'inherit',
alignItems: 'center',
cursor: 'default',
userSelect: 'none',
WebkitUserSelect: 'none',
};
const Tab = ({ children, onClick, style, selected }) => {
const [hovered, setHovered] = (0, react_1.useState)(false);
const { tabIndex } = (0, z_index_1.useZIndex)();
const onPointerEnter = (0, react_1.useCallback)(() => {
setHovered(true);
}, []);
const onPointerLeave = (0, react_1.useCallback)(() => {
setHovered(false);
}, []);
const definiteStyle = (0, react_1.useMemo)(() => ({
...selectorButton,
backgroundColor: selected
? colors_1.BACKGROUND
: hovered
? colors_1.CLEAR_HOVER
: colors_1.INPUT_BACKGROUND,
color: selected ? 'white' : colors_1.LIGHT_TEXT,
borderTop: selected ? '2px solid ' + colors_1.BLUE : '2px solid transparent',
boxShadow: selected ? 'none' : undefined,
...style,
}), [hovered, selected, style]);
return (jsx_runtime_1.jsx("div", { style: definiteStyle, role: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
};
exports.Tab = Tab;