@redocly/theme/lib/components/SidebarActions/ChangeViewButton.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChangeViewButton = void 0;
const react_1 = __importDefault(require("react"));
const HorizontalViewIcon_1 = require("../../icons/HorizontalViewIcon/HorizontalViewIcon");
const VerticalViewIcon_1 = require("../../icons/VerticalViewIcon/VerticalViewIcon");
const SidebarActions_1 = require("../../components/SidebarActions/SidebarActions");
const hooks_1 = require("../../core/hooks");
const styled_1 = require("../../components/SidebarActions/styled");
const ChangeViewButton = ({ layout, onClick, collapsedSidebar, }) => {
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const isStacked = layout === SidebarActions_1.LayoutVariant.STACKED;
    const isThreePanel = layout === SidebarActions_1.LayoutVariant.THREE_PANEL;
    return (react_1.default.createElement(styled_1.StyledChangeViewButton, { onClick: onClick, collapsedSidebar: collapsedSidebar },
        react_1.default.createElement(styled_1.StyledChangeViewButtonWrap, { placement: collapsedSidebar ? 'right' : 'top', arrowPosition: collapsedSidebar ? 'center' : 'right', active: isStacked, tip: isStacked
                ? translate('sidebar.actions.singleColumn', 'Single column')
                : translate('sidebar.actions.changeToSingleColumn', 'Switch to single column') },
            react_1.default.createElement(HorizontalViewIcon_1.HorizontalViewIcon, { size: "14px", color: "--segmented-buttons-content-color" })),
        react_1.default.createElement(styled_1.StyledChangeViewButtonWrap, { active: isThreePanel, placement: collapsedSidebar ? 'right' : 'top', arrowPosition: collapsedSidebar ? 'center' : 'right', tip: isThreePanel
                ? translate('sidebar.actions.twoColumns', 'Two columns')
                : translate('sidebar.actions.changeToTwoColumns', 'Switch to two columns') },
            react_1.default.createElement(VerticalViewIcon_1.VerticalViewIcon, { size: "14px", color: "--segmented-buttons-content-color" }))));
};
exports.ChangeViewButton = ChangeViewButton;
//# sourceMappingURL=ChangeViewButton.js.map