@zendesk/retrace/cjs/visualizer/components/SpanLaneHeader.js

define and capture Product Operation Traces along with computed metrics with an optional friendly React beacon API

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpanLaneHeader = SpanLaneHeader;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_theming_1 = require("@zendeskgarden/react-theming");
const HeaderContainer = styled_components_1.default.div `
  display: flex;
  align-items: center;
  padding: 4px 8px;
  padding-left: ${({ depth }) => depth * 16 + 8}px;
  background-color: ${({ theme }) => (0, react_theming_1.getColor)({ theme, variable: 'background.default' })};
  border-bottom: 1px solid
    ${({ theme }) => (0, react_theming_1.getColor)({ theme, variable: 'border.default' })};
  user-select: none;
  cursor: pointer;

  &:hover {
    background-color: ${({ theme }) => (0, react_theming_1.getColor)({ theme, variable: 'background.subtle' })};
  }
`;
const ExpandCollapseIcon = styled_components_1.default.button `
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: ${({ theme }) => (0, react_theming_1.getColor)({ theme, variable: 'foreground.subtle' })};

  &:hover {
    color: ${({ theme }) => (0, react_theming_1.getColor)({ theme, variable: 'foreground.default' })};
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;
const SpanName = styled_components_1.default.span `
  font-size: 14px;
  font-weight: 500;
  color: ${({ theme }) => (0, react_theming_1.getColor)({ theme, variable: 'foreground.default' })};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;
const HierarchyConnector = styled_components_1.default.div `
  position: absolute;
  left: ${({ depth }) => depth * 16 - 8}px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: ${({ theme }) => (0, react_theming_1.getColor)({ theme, variable: 'border.subtle' })};

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 1px;
    background-color: ${({ theme }) => (0, react_theming_1.getColor)({ theme, variable: 'border.subtle' })};
  }
`;
function SpanLaneHeader({ span, isExpanded, onToggleExpansion, depth, }) {
    const hasChildren = span.children.length > 0;
    const handleToggle = () => {
        if (hasChildren) {
            onToggleExpansion(span.span.id);
        }
    };
    const handleKeyDown = (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            handleToggle();
        }
    };
    return (react_1.default.createElement(HeaderContainer, { depth: depth, onClick: handleToggle, onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-expanded": hasChildren ? isExpanded : undefined, "aria-label": `${span.span.name} span ${hasChildren ? (isExpanded ? 'expanded' : 'collapsed') : ''}` },
        depth > 0 && react_1.default.createElement(HierarchyConnector, { depth: depth }),
        react_1.default.createElement(ExpandCollapseIcon, { isExpanded: isExpanded, disabled: !hasChildren, "aria-hidden": "true" }, hasChildren ? (isExpanded ? '−' : '+') : '•'),
        react_1.default.createElement(SpanName, null, span.span.name)));
}
//# sourceMappingURL=SpanLaneHeader.js.map