render()

in packages/eui/src/components/context_menu/context_menu_panel.tsx [414:486]

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

  render() {
    const {
      stylesMemoizer,
      children,
      className,
      onClose,
      title,
      onHeightChange,
      transitionType,
      transitionDirection,
      onTransitionComplete,
      onUseKeyboardToNavigate,
      items,
      initialFocusedItemIndex,
      showNextPanel,
      showPreviousPanel,
      size,
      ...rest
    } = this.props;

    const classes = classNames('euiContextMenuPanel', className);

    const styles = stylesMemoizer(euiContextMenuPanelStyles);
    const cssStyles = [
      styles.euiContextMenuPanel,
      transitionDirection &&
        transitionType &&
        styles[transitionDirection][transitionType],
    ];

    const panelTitle = title && (
      <EuiContextMenuItem
        css={styles.euiContextMenuPanel__title}
        className="euiContextMenuPanel__title"
        onClick={onClose}
        buttonRef={(node: HTMLButtonElement) => {
          if (onClose) this.backButton = node;
        }}
        data-test-subj={
          onClose ? 'contextMenuPanelTitleButton' : 'contextMenuPanelTitle'
        }
        icon={onClose && 'arrowLeft'}
      >
        {title}
      </EuiContextMenuItem>
    );

    const content =
      items && items.length
        ? items.map((MenuItem) => {
            const cloneProps: Partial<EuiContextMenuItemProps> = {};
            if (size) {
              cloneProps.size = size;
            }
            return MenuItem.type === EuiContextMenuItem
              ? cloneElement(MenuItem, cloneProps)
              : MenuItem;
          })
        : children;

    return (
      <div
        ref={this.panelRef}
        css={cssStyles}
        className={classes}
        onKeyDown={this.onKeyDown}
        tabIndex={-1}
        onAnimationEnd={this.onTransitionComplete}
        {...rest}
      >
        {panelTitle}

        <EuiResizeObserver onResize={() => this.updateHeight()}>