@redocly/theme/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.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.CatalogTableViewRow = void 0;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogOwnersCell");
const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
const hooks_1 = require("../../../core/hooks");
const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
const Link_1 = require("../../../components/Link/Link");
const baseColumns = [
    {
        key: 'entity',
        title: 'Entity',
        render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
        width: '3fr',
        minWidth: '250px',
        sortable: true,
        sortKey: 'title',
    },
    {
        key: 'type',
        title: 'Type',
        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
        width: '2fr',
        minWidth: '120px',
        sortable: true,
        sortKey: 'type',
    },
    {
        key: 'domains',
        title: 'Domains',
        render: (entity) => {
            var _a;
            return (react_1.default.createElement(CatalogDomainsCell_1.CatalogDomainsCell, { domains: ((_a = entity.domains) === null || _a === void 0 ? void 0 : _a.map((domain) => domain.title)) || [] }));
        },
        width: '2fr',
        minWidth: '150px',
    },
    {
        key: 'owners',
        title: 'Owners',
        render: (entity) => {
            var _a;
            return (react_1.default.createElement(CatalogOwnersCell_1.CatalogOwnersCell, { owners: ((_a = entity.owners) === null || _a === void 0 ? void 0 : _a.map((owner) => owner.title)) || [] }));
        },
        width: '2fr',
        minWidth: '150px',
    },
    {
        key: 'tags',
        title: 'Tags',
        render: (entity) => react_1.default.createElement(CatalogTagsCell_1.CatalogTagsCell, { entity: entity }),
        width: '2fr',
        minWidth: '120px',
    },
];
const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, columns = baseColumns, onRowClick = () => { }, }) => {
    const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
        catalogConfig,
        entitiesCatalogConfig,
        revision: entity.revision,
        version: entity.version,
    });
    const link = getEntityDetailsLink({ key: entity.key, type: entity.type });
    return (react_1.default.createElement(TableRow, { key: entity.id, "$columnsWidths": columns.map((column) => column.width || '1fr'), "$columnsMinWidths": columns.map((column) => column.minWidth || 'auto'), to: link, onClick: () => onRowClick(entity), style: { color: 'var(--catalog-page-wrapper-text-color)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
};
exports.CatalogTableViewRow = CatalogTableViewRow;
const TableRow = (0, styled_components_1.default)(Link_1.Link) `
  display: grid;
  grid-template-columns: ${({ $columnsWidths, $columnsMinWidths }) => $columnsWidths
    .map((width, index) => $columnsMinWidths[index] !== 'auto'
    ? `minmax(${$columnsMinWidths[index]}, ${width})`
    : width)
    .join(' ')};
  border-bottom: 1px solid var(--catalog-table-border-color);
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background-color: var(--catalog-table-row-hover-bg-color);
  }
`;
const TableCell = styled_components_1.default.div `
  padding: var(--catalog-table-cell-padding);
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  overflow: hidden;

  &.tooltip-cell-container {
    overflow: visible;
  }

  height: 52px;
`;
//# sourceMappingURL=CatalogTableViewRow.js.map