@redocly/theme/lib/markdoc/components/CodeWalkthrough/CodePanel.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodePanel = CodePanel;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const hooks_1 = require("../../../core/hooks");
const contexts_1 = require("../../../core/contexts");
const CodePanelHeader_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelHeader");
const CodePanelPreview_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelPreview");
const CodeContainer_1 = require("../../../markdoc/components/CodeWalkthrough/CodeContainer");
const CodePanelToolbar_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelToolbar");
function CodePanel({ files, downloadAssociatedFiles, preview, }) {
    const { activeFile, handleTabSwitch, highlightedCode } = (0, hooks_1.useCodePanel)(files);
    const { handleDownloadCode } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
    return (react_1.default.createElement(CodePanelWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanel" },
        preview ? (react_1.default.createElement(CodePanelPreview_1.CodePanelPreview, null, preview.map((element, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, element))))) : null,
        react_1.default.createElement(CodePanelHeader_1.CodePanelHeader, { files: files, activeTabName: (activeFile === null || activeFile === void 0 ? void 0 : activeFile.path) || '', handleTabSwitch: handleTabSwitch, onDownloadCode: () => handleDownloadCode([...files, ...downloadAssociatedFiles]) }),
        react_1.default.createElement(CodeContainer_1.CodeContainer, { key: (activeFile === null || activeFile === void 0 ? void 0 : activeFile.path) || '', highlightedCode: highlightedCode, toolbar: react_1.default.createElement(CodePanelToolbar_1.CodePanelToolbar, { file: activeFile }) })));
}
const CodePanelWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  align-self: flex-start;

  min-height: 144px;
  min-width: 0;
  height: 100%;
  word-wrap: break-word;

  background-color: var(--code-panel-bg-color);
  border: 1px solid var(--code-panel-border-color);
  border-radius: var(--code-panel-border-radius);
  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
  position: sticky;
  top: calc(var(--navbar-height) + var(--spacing-xl));
`;
//# sourceMappingURL=CodePanel.js.map