@redocly/theme/lib/components/Search/SearchItem.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.SearchItem = SearchItem;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const HttpTag_1 = require("../../components/Tags/HttpTag");
const Link_1 = require("../../components/Link/Link");
const Image_1 = require("../../components/Image/Image");
const SearchHighlight_1 = require("../../components/Search/SearchHighlight");
const Badge_1 = require("../../components/Badge/Badge");
const utils_1 = require("../../core/utils");
const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
function SearchItem({ onClick, item, className, product, innerRef, }) {
    var _a, _b, _c, _d;
    const ref = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        var _a;
        if (item.active) {
            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
        }
    }, [item.active]);
    const { document, highlight } = item;
    const parameter = highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
    const shouldShowPath = document.path && ((_a = document.path) === null || _a === void 0 ? void 0 : _a.length) > 1;
    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: (el) => {
            ref.current = el;
            if (!innerRef)
                return;
            if (typeof innerRef === 'function') {
                innerRef(el);
            }
            else {
                innerRef.current = el;
            }
        }, "data-component-name": "Search/SearchItem" },
        react_1.default.createElement(SearchItemContent, null,
            react_1.default.createElement(SearchItemHeader, null,
                product && (react_1.default.createElement(SearchItemProductTag, { "data-testid": "search-item-product-tag" },
                    react_1.default.createElement(Image_1.Image, { src: product.icon }),
                    product.name)),
                document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
                    react_1.default.createElement(SearchItemOperationTag, { color: document.httpMethod }, document.httpMethod.toUpperCase()),
                    highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
                react_1.default.createElement(SearchItemTitleWrapper, null,
                    react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),
                    document.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
                    document.badges
                        ? document.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
                        : null),
                react_1.default.createElement(SearchItemDescription, null, highlight.text ? (0, SearchHighlight_1.searchHighlight)(highlight.text) : (0, utils_1.trimText)(document.text))),
            parameter ? (react_1.default.createElement(SearchItemPlace, null,
                react_1.default.createElement("div", null,
                    (0, SearchHighlight_1.searchHighlight)(parameter.place),
                    ` → `,
                    ((_b = parameter.path) === null || _b === void 0 ? void 0 : _b.length) ? (0, SearchHighlight_1.searchHighlight)((_c = parameter.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : '',
                    (0, SearchHighlight_1.searchHighlight)(parameter.name)),
                react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
                ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
                : (_d = document.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))),
        react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" })));
}
const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
  display: flex;
  padding: var(--search-item-padding);
  color: var(--search-item-text-color);
  background-color: var(--search-item-bg-color);
  transition: background-color 0.3s ease;
  text-decoration: none;
  white-space: normal;
  outline: none;
  border-top: 1px solid var(--search-item-border-color);
  border-bottom: 1px solid var(--search-item-border-color);

  ${ReturnKeyIcon_1.ReturnKeyIcon} {
    align-self: center;
    opacity: 0;
  }

  &:hover,
  &:focus {
    color: var(--search-item-text-color-hover);
    background-color: var(--search-item-bg-color-hover);

    ${ReturnKeyIcon_1.ReturnKeyIcon} {
      opacity: 1;
    }
  }

  &:focus {
    border-top: 1px solid var(--search-item-border-color-focused);
    border-bottom: 1px solid var(--search-item-border-color-focused);
  }
`;
const SearchItemContent = styled_components_1.default.section `
  flex: 1 1 auto;
`;
const SearchItemHeader = styled_components_1.default.div `
  position: relative;
`;
const SearchItemTitleWrapper = styled_components_1.default.div `
  display: flex;
  align-items: center;
`;
const SearchItemTitle = styled_components_1.default.div `
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--search-item-title-text-color);
  padding: var(--search-item-title-padding);
  font-size: var(--search-item-title-font-size);
  font-weight: var(--search-item-title-font-weight);
  line-height: var(--search-item-title-line-height);
`;
const SearchItemBadge = (0, styled_components_1.default)(Badge_1.Badge) `
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
`;
const SearchItemOperation = styled_components_1.default.div `
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  color: var(--search-item-path-text-color);
  gap: var(--search-item-gap);
`;
const SearchItemDescription = styled_components_1.default.div `
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-regular);
`;
const SearchItemPath = styled_components_1.default.div `
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  margin-top: var(--spacing-sm);
`;
const SearchItemPlace = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  margin-top: var(--spacing-sm);

  &:first-child {
    padding-top: 0;
  }
`;
const SearchItemProductTag = styled_components_1.default.div `
  position: absolute;
  display: flex;
  align-items: center;
  right: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-regular);
  padding: var(--search-item-title-padding);
  gap: var(--spacing-xs);

  img {
    width: var(--search-item-product-icon-size);
    height: var(--search-item-product-icon-size);
  }
`;
const SearchItemOperationTag = (0, styled_components_1.default)(HttpTag_1.HttpTag) `
  --http-tag-width: auto;
  --http-tag-font-weight: var(--font-weight-semibold);
`;
//# sourceMappingURL=SearchItem.js.map