@redocly/theme
Version:
Shared UI components lib
102 lines (99 loc) • 4.4 kB
JavaScript
;
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeContainer = CodeContainer;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const contexts_1 = require("../../../core/contexts");
const CodeBlockContainer_1 = require("../../../components/CodeBlock/CodeBlockContainer");
function CodeContainer({ highlightedCode, toolbar, }) {
const { activeStep } = (0, react_1.useContext)(contexts_1.CodeWalkthroughStepsContext);
const [isHovered, setIsHovered] = (0, react_1.useState)(false);
const compRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
// useEffect executed before DOM is updated due to re-render called before "painting" phase.
setTimeout(() => {
if (compRef.current) {
const highlightedLines = Array.from(compRef.current.querySelectorAll('span.line.highlighted'));
const { bottom: panelBottom, top: panelTop } = compRef.current.getBoundingClientRect();
const linesBelow = [];
const linesAbove = [];
for (const highlightedLine of highlightedLines) {
const { bottom: lineBottom, top: lineTop } = highlightedLine.getBoundingClientRect();
const below = lineBottom > panelBottom;
const above = lineTop < panelTop;
if (below) {
linesBelow.push(highlightedLine);
}
else if (above) {
linesAbove.push(highlightedLine);
}
}
if ((linesBelow.length && linesAbove.length) || linesAbove.length) {
linesAbove[0].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
}
else if (linesBelow.length) {
linesBelow[linesBelow.length - 1].scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'start',
});
}
}
}, 200);
}, [activeStep]);
return (react_1.default.createElement(CodeContainerWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeContainer", ref: compRef, hideCodeColors: !isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { dangerouslySetInnerHTML: { __html: highlightedCode } }),
toolbar));
}
const CodeContainerWrapper = styled_components_1.default.div `
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 0;
pre {
display: grid;
grid-auto-rows: min-content;
min-height: 0;
overflow: scroll;
margin: 0 !important;
height: 100%;
padding-left: 0 !important;
span.line::before {
color: var(--code-panel-line-numbering-color);
}
${({ hideCodeColors }) => hideCodeColors &&
(0, styled_components_1.css) `
.line.greyed-out {
color: var(--text-color-helper) !important;
* {
color: var(--text-color-helper) !important;
}
}
`}
}
`;
//# sourceMappingURL=CodeContainer.js.map