@redocly/theme/lib/components/Catalog/CatalogHighlight.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.HighlightContext = void 0;
exports.CatalogHighlight = CatalogHighlight;
const react_1 = __importDefault(require("react"));
const highlight_words_core_1 = require("highlight-words-core");
const styled_components_1 = __importDefault(require("styled-components"));
exports.HighlightContext = react_1.default.createContext([]);
function CatalogHighlight(props) {
    const { children } = props;
    const searchWords = react_1.default.useContext(exports.HighlightContext);
    if (!searchWords.length) {
        return children ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
    }
    function highlight(str, childIdx = 0) {
        const chunks = (0, highlight_words_core_1.findAll)({
            searchWords,
            textToHighlight: str,
        });
        return (react_1.default.createElement("span", { "data-component-name": "Catalog/CatalogHighlight", key: childIdx }, chunks.map((chunk, idx) => {
            const { end, highlight, start } = chunk;
            const text = str.substr(start, end - start);
            if (highlight) {
                return react_1.default.createElement(HighlightedText, { key: idx }, text);
            }
            else {
                return text;
            }
        })));
    }
    if (typeof children === 'string') {
        return highlight(children);
    }
    else if (Array.isArray(children)) {
        return (react_1.default.createElement(react_1.default.Fragment, null, children.map((child, idx) => typeof children === 'string' ? highlight(child, idx) : child || null)));
    }
    else {
        return react_1.default.createElement(react_1.default.Fragment, null, children);
    }
}
const HighlightedText = styled_components_1.default.span `
  background-color: var(--catalog-highlight-bg-color);
  color: var(--catalog-highlight-text-color);
`;
//# sourceMappingURL=CatalogHighlight.js.map