@redocly/theme/lib/markdoc/components/CodeGroup/CodeGroup.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 () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeGroup = CodeGroup;
const React = __importStar(require("react"));
const CodeBlock_1 = require("../../../components/CodeBlock/CodeBlock");
const utils_1 = require("../../../core/utils");
const contexts_1 = require("../../../core/contexts");
function CodeGroup(props) {
    const mode = props.mode || 'tabs';
    const isTabsMode = mode === 'tabs';
    const rawSnippets = React.useMemo(() => parseSnippetsFromChildren(props.children), [props.children]);
    const groupId = React.useMemo(() => generateGroupId(rawSnippets, mode), [rawSnippets, mode]);
    const [activeSnippetId, setActiveSnippetId] = (0, contexts_1.useActiveCodeSnippetId)(groupId, rawSnippets);
    const snippets = React.useMemo(() => {
        const items = createItemsFromSnippets(rawSnippets, isTabsMode);
        const itemsProps = {
            items,
            onChange: (id) => setActiveSnippetId(id),
            value: activeSnippetId,
        };
        return Object.fromEntries(rawSnippets.map((snippet) => {
            const snippetProps = Object.assign(Object.assign(Object.assign({}, snippet.props), { header: Object.assign(Object.assign({}, snippet.props.header), { title: isTabsMode ? undefined : snippet.name }) }), (isTabsMode ? { tabs: itemsProps } : { dropdown: itemsProps }));
            return [snippet.id, snippetProps];
        }));
    }, [rawSnippets, activeSnippetId, isTabsMode, setActiveSnippetId]);
    const activeSnippet = snippets[activeSnippetId];
    if (!activeSnippet) {
        return null;
    }
    return React.createElement(CodeBlock_1.CodeBlock, Object.assign({}, activeSnippet));
}
function generateContentHash(content) {
    let hash = 0;
    for (let i = 0; i < content.length; i++) {
        hash = content.charCodeAt(i) + ((hash << 5) - hash);
    }
    return Math.abs(hash);
}
// Generate unique group ID for CodeGroup instance
// Examples: "dropdown-8901234", "tabs-1234567"
function generateGroupId(rawSnippets, mode) {
    const content = rawSnippets.map((s) => s.id + (s.props.source || '')).join('|') + `|${mode}`;
    const hash = generateContentHash(content);
    return `${mode}-${hash}`;
}
function getTabName(props, idx) {
    var _a;
    const fallbackName = `Tab ${idx + 1}`;
    return String(((_a = props.header) === null || _a === void 0 ? void 0 : _a.title) || props.file || (0, utils_1.langToName)(props.lang || '') || fallbackName);
}
function parseSnippetsFromChildren(children) {
    return React.Children.toArray(children).map((child, idx) => {
        const childProps = child;
        const props = childProps.props;
        return {
            name: getTabName(props, idx),
            languageName: String((0, utils_1.langToName)(props.lang || 'Default') || ''),
            lang: props.lang || '',
            props,
            id: `${props.lang || ''}-${idx}`,
        };
    });
}
function createItemsFromSnippets(snippets, isTabsMode) {
    return snippets.map((snippet) => ({
        name: isTabsMode ? snippet.name : snippet.languageName || '',
        lang: snippet.lang,
        id: snippet.id,
    }));
}
//# sourceMappingURL=CodeGroup.js.map