render()

in src/table/row.tsx [124:201]

• 70 lines of code
• 11 McCabe index (conditional complexity)

  render() {
    const {
      item,
      columns: columnProps,
      selectable,
      selected,
      showFocus,
      draggable,
      alwaysShowDragHandle,
      dragHandleTitle,
      level,
      collapsible,
      parentCollapsible,
      collapsed,
      onCollapse,
      onExpand,
      showDisabledSelection,
      onSelect,
      checkboxTooltip,
      innerRef,
      focused,
      autofocus,
      onFocusReset,
      onFocusRestore,
      onHover,
      className,
      metaColumnClassName,
      cellClassName,
      'data-test': dataTest,
      ...restProps
    } = this.props;

    const classes = classNames(className, {
      [style.row]: true,
      [style.rowFocused]: showFocus,
      [style.rowSelected]: selected,
    });

    const testAttrs = {
      'data-test-focused': showFocus || undefined,
      'data-test-selected': selected || undefined,
    };

    const metaColumnClasses = classNames(metaColumnClassName, style.metaColumn);

    const SUBITEM_OFFSET = 30;
    const COLLAPSIBLE_PARENT_OFFSET = 20;
    const gap = level * SUBITEM_OFFSET + (parentCollapsible ? COLLAPSIBLE_PARENT_OFFSET : 0);
    const metaColumnStyle = {
      paddingLeft: `${gap}px`,
    };

    const metaColumn = (
      <div className={metaColumnClasses} style={metaColumnStyle}>
        {draggable && <DragHandle alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} />}

        {selectable && (
          <Tooltip title={checkboxTooltip}>
            <Checkbox
              aria-labelledby={this.id}
              className={showFocus ? 'ring-checkbox_focus' : ''}
              checked={selected}
              onFocus={this.onCheckboxFocus}
              onChange={this.onCheckboxChange}
              tabIndex={-1}
            />
          </Tooltip>
        )}

        {!selectable && showDisabledSelection && (
          <Tooltip title={checkboxTooltip}>
            <Checkbox aria-labelledby={this.id} checked={selected} disabled />
          </Tooltip>
        )}

        {collapsible && collapsed && (
          <Button className={style.rowCollapseExpandButton} icon={chevronRightIcon} onClick={() => onExpand(item)} />
        )}