render()

in desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx [312:406]
90 lines of code
11 McCabe index (conditional complexity)

  render() {
    const {
      element,
      id,
      level,
      selected,
      focused,
      style,
      even,
      matchingSearchQuery,
      decorateRow,
      forwardedRef,
    } = this.props;
    const hasChildren = element.children && element.children.length > 0;

    let arrow;
    if (hasChildren) {
      arrow = (
        <span
          onClick={this.onDoubleClick}
          role="button"
          tabIndex={-1}
          style={{
            color: theme.textColorSecondary,
            fontSize: '8px',
          }}>
          {element.expanded ? <DownOutlined /> : <RightOutlined />}
        </span>
      );
    }

    const attributes = element.attributes
      ? element.attributes.map((attr) => (
          <ElementsRowAttribute
            key={attr.name}
            name={attr.name}
            value={attr.value}
            matchingSearchQuery={matchingSearchQuery}
            selected={selected}
          />
        ))
      : [];

    const decoration = decorateRow
      ? decorateRow(element)
      : defaultDecorateRow(element);

    // when we hover over or select an expanded element with children, we show a line from the
    // bottom of the element to the next sibling
    let line;
    const shouldShowLine =
      (selected || this.state.hovered) && hasChildren && element.expanded;
    if (shouldShowLine) {
      line = <ElementsLine childrenCount={this.props.childrenCount} />;
    }

    return (
      <Dropdown
        key={id}
        overlay={this.getContextMenu}
        trigger={contextMenuTrigger}>
        <ElementsRowContainer
          level={level}
          ref={forwardedRef}
          selected={selected}
          focused={focused}
          matchingSearchQuery={matchingSearchQuery}
          even={even}
          onClick={this.onClick}
          onDoubleClick={this.onDoubleClick}
          onMouseEnter={this.onMouseEnter}
          onMouseLeave={this.onMouseLeave}
          isQueryMatch={this.props.isQueryMatch}
          style={style}>
          <ElementsRowDecoration>
            {line}
            {arrow}
          </ElementsRowDecoration>
          <NoShrinkText
            style={{
              fontWeight: theme.bold,
              color: selected ? theme.primaryColor : theme.textColorPrimary,
            }}>
            {decoration}
            <PartialHighlight
              content={element.name}
              highlighted={matchingSearchQuery}
              selected={selected}
            />
          </NoShrinkText>
          {attributes}
        </ElementsRowContainer>
      </Dropdown>
    );
  }