@redocly/theme
Version:
Shared UI components lib
91 lines • 7.38 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeBlockControls = CodeBlockControls;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const CodeBlockTabs_1 = require("../../components/CodeBlock/CodeBlockTabs");
const CopyButton_1 = require("../../components/Buttons/CopyButton");
const TooltipWrapper_1 = require("../../components/Tooltip/TooltipWrapper");
const hooks_1 = require("../../core/hooks");
const DeselectIcon_1 = require("../../icons/DeselectIcon/DeselectIcon");
const MaximizeIcon_1 = require("../../icons/MaximizeIcon/MaximizeIcon");
const MinimizeIcon_1 = require("../../icons/MinimizeIcon/MinimizeIcon");
const SelectIcon_1 = require("../../icons/SelectIcon/SelectIcon");
const WarningSquareIcon_1 = require("../../icons/WarningSquareIcon/WarningSquareIcon");
const Button_1 = require("../../components/Button/Button");
function CodeBlockControls({ children, className, title, controls, tabs, }) {
var _a, _b, _c, _d, _e;
const { codeSnippet } = (0, hooks_1.useThemeConfig)();
const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
const otelTelemetry = useOtelTelemetry();
const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.elementFormat) || 'icon';
const { copy, expand, collapse, select, deselect, report } = controls || {
copy: null,
expand: null,
collapse: null,
select: null,
deselect: null,
report: null,
};
const defaultControls = controls ? (react_1.default.createElement(react_1.default.Fragment, null,
title && react_1.default.createElement(Title, null, title),
tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
react_1.default.createElement(ControlsWrapper, null,
report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.report.tooltipText", placement: "top" },
react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all'))) : null,
collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all'))) : null,
select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipTranslationKey: "codeSnippet.copy.tooltipText", placement: "top" },
react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
var _a;
// If there already is a click handler, events should be handled there, cause they pass additional data
if (copy === null || copy === void 0 ? void 0 : copy.onClick) {
(_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
}
else {
otelTelemetry.send({
type: 'openapi_docs.copy_code_snippet.clicked',
payload: { snippet_type: 'copy' },
});
}
} }))) : null))) : null;
return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
}
const ContainerWrapper = styled_components_1.default.div `
display: grid;
justify-content: end;
font-size: var(--code-block-controls-font-size);
font-family: var(--code-block-controls-font-family);
background-color: var(--code-block-controls-bg-color);
padding: var(--code-block-controls-padding);
border-bottom: var(--code-block-controls-border);
line-height: var(--line-height-lg);
min-height: var(--control-height-base);
grid-template-columns: 1fr auto;
`;
const Title = styled_components_1.default.span `
display: flex;
align-items: center;
color: var(--code-block-controls-text-color);
width: 100%;
font-weight: var(--code-block-controls-font-weight);
`;
const ControlsWrapper = styled_components_1.default.div `
display: flex;
text-align: right;
align-items: center;
gap: var(--spacing-xxs);
justify-content: end;
margin-left: var(--spacing-sm);
`;
const ControlButton = (0, styled_components_1.default)(Button_1.Button) `
& + & {
margin-left: 0;
}
`;
//# sourceMappingURL=CodeBlockControls.js.map