@redocly/theme
Version:
Shared UI components lib
118 lines (117 loc) • 8.89 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 Tooltip_1 = require("../../components/Tooltip/Tooltip");
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");
const CodeBlockDropdown_1 = require("../../components/CodeBlock/CodeBlockDropdown");
function CodeBlockControls({ children, className, title, controls, tabs, dropdown, }) {
var _a, _b, _c, _d, _e;
const { codeSnippet } = (0, hooks_1.useThemeConfig)();
const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
const { translate } = useTranslate();
const telemetry = useTelemetry();
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 isEmptyTitle = !title && !tabs && !dropdown;
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,
dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top", arrowPosition: "right" },
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, "aria-label": "Report a problem" }, 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(Tooltip_1.Tooltip, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top", arrowPosition: "right" },
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, "aria-label": "Expand all", 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(Tooltip_1.Tooltip, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top", arrowPosition: "right" },
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, "aria-label": "Collapse all" }, 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(Tooltip_1.Tooltip, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top", arrowPosition: "right" },
react_1.default.createElement(StyledCopyButton, { 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 {
telemetry.sendCopyCodeSnippetClickedMessage([
{ object: 'code_snippet', snippetType: 'copy' },
]);
}
} }))) : null))) : null;
return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className, "$isEmptyTitle": isEmptyTitle }, children ? children : defaultControls)) : null;
}
const ContainerWrapper = styled_components_1.default.div `
display: grid;
flex-direction: row;
align-items: center;
gap: var(--spacing-sm);
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;
z-index: 1;
${({ $isEmptyTitle }) => $isEmptyTitle &&
`
position: absolute;
right: 0;
width: auto;
border: none;
background-color: transparent;
grid-template-columns: 1fr;
margin: 0;
`}
`;
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);
padding-left: var(--spacing-xs);
`;
const ControlsWrapper = styled_components_1.default.div `
display: flex;
text-align: right;
align-items: center;
gap: var(--spacing-xxs);
justify-content: end;
`;
const ControlButton = (0, styled_components_1.default)(Button_1.Button) `
--button-icon-size: 16px; /* increase icon size for code blocks */
--button-icon-padding: 3px;
--button-backdrop-filter: blur(8px); /* backdrop filter when there is text under the button */
& + & {
margin-left: 0;
}
`;
const StyledCopyButton = (0, styled_components_1.default)(CopyButton_1.CopyButton) `
--button-icon-size: 16px; /* increase icon size for code blocks */
--button-icon-padding: 3px;
--button-backdrop-filter: blur(8px);
`;
//# sourceMappingURL=CodeBlockControls.js.map