public render()

in gui/frontend/src/components/ui/Tabview/Tabview.tsx [199:369]
156 lines of code
16 McCabe index (conditional complexity)

    public render(): ComponentChild {
        const {
            tabPosition, stretchTabs, hideSingleTab, pages, tabBorderWidth, style, contentSeparatorWidth, selectedId,
            showTabs, canReorderTabs, auxillary,
        } = this.props;

        const className = this.getEffectiveClassNames([
            "tabview",
            tabPosition,
        ]);

        const tabs = pages.map((page: ITabviewPage) => {
            let buttonClassName = "tabItem" + (page.auxiliary ? " hasAuxillary" : "");
            if (page.id === selectedId) {
                buttonClassName += " selected";
            }

            return (
                <Button
                    data-tooltip={page.tooltip}
                    id={page.id}
                    key={page.id}
                    tabIndex={-1}
                    className={buttonClassName}
                    focusOnClick={false}
                    draggable={canReorderTabs}
                    onClick={this.selectTab}
                    onContextMenu={this.showTabMenu}
                    onDragEnter={this.handleTabItemDragEnter}
                    onDrop={this.handleTabItemDrop}
                >
                    {page.icon && <Icon src={page.icon} data-tooltip="inherit" />}
                    {page.caption && <Label data-tooltip="inherit">{page.caption}</Label>}
                    {page.auxiliary && <span id="auxillary">{page.auxiliary}</span>}
                </Button>
            );
        });

        let content;
        const index = pages.findIndex((page: ITabviewPage) => {
            return page.id === selectedId;
        });

        if (index > -1) {
            content = pages[index].content;
        }

        let orientation: Orientation;
        let tabOrientation: Orientation;
        switch (tabPosition) {
            case TabPosition.Top: {
                orientation = Orientation.TopDown;
                tabOrientation = Orientation.LeftToRight;
                break;
            }

            case TabPosition.Right: {
                orientation = Orientation.RightToLeft;
                tabOrientation = Orientation.TopDown;
                break;
            }

            case TabPosition.Bottom: {
                orientation = Orientation.BottomUp;
                tabOrientation = Orientation.LeftToRight;
                break;
            }

            default: {
                orientation = Orientation.LeftToRight;
                tabOrientation = Orientation.TopDown;
                break;
            }
        }

        const newStyle = {
            ...style, ...{
                // eslint-disable-next-line @typescript-eslint/naming-convention
                "--tabItem-border-width": convertPropValue(tabBorderWidth ?? 0),
                // eslint-disable-next-line @typescript-eslint/naming-convention
                "--content-separator-width": convertPropValue(contentSeparatorWidth ?? 0),
            },
        };

        const tabAreaClassName = "tabArea" + (stretchTabs ? " stretched" : "");

        return (
            <Container
                orientation={orientation}
                className={className}
                style={newStyle}
                {...this.unhandledProperties}
            >
                {
                    (showTabs && (!hideSingleTab || tabs.length > 1)) && (
                        <Container
                            orientation={tabOrientation}
                            className="tabAreaContainer"
                            fixedScrollbars={false}
                        >
                            <div className="scrollable"
                                onWheel={this.handleWheel}
                            >
                                <Container
                                    innerRef={this.tabAreaRef}
                                    className={tabAreaClassName}
                                    orientation={tabOrientation}
                                    fixedScrollbars={false}
                                    onDragOver={this.handleTabviewDragOver}
                                    onDrop={this.handleTabItemDrop}
                                >
                                    {tabs}
                                </Container>
                                <div className="scrollbar">
                                    <div
                                        className="slider"
                                        ref={this.sliderRef}
                                        onPointerDown={this.handleSliderDown}
                                        onPointerMove={this.handleSliderMove}
                                        onPointerUp={this.handleSliderUp}
                                    />
                                </div>
                            </div>
                            {auxillary && <span className="auxillary">{auxillary}</span>}
                            {this.props.closeTabs && (
                                <Menu
                                    id="tabMenu"
                                    ref={this.tabMenuRef}
                                    placement={ComponentPlacement.BottomLeft}
                                    onItemClick={this.handleContextMenuClick}
                                >
                                    <MenuItem
                                        id={CloseMenuItem.CloseTab}
                                        command={{ title: "Close", command: CloseMenuItem.CloseTab }}
                                        disabled={this.state.closeTabDisabled}
                                    />
                                    <MenuItem
                                        id={CloseMenuItem.CloseOthers}
                                        command={{ title: "Close Others", command: CloseMenuItem.CloseOthers }}
                                        disabled={this.state.closeOthersDisabled}
                                    />
                                    <MenuItem
                                        id={CloseMenuItem.CloseRight}
                                        command={{ title: "Close to the Right", command: CloseMenuItem.CloseRight }}
                                        disabled={this.state.closeRightDisabled}
                                    />
                                    <MenuItem
                                        id={CloseMenuItem.CloseAll}
                                        command={{ title: "Close All", command: CloseMenuItem.CloseAll }}
                                        disabled={this.state.closeAllDisabled}
                                    />
                                </Menu>
                            )}
                        </Container>
                    )
                }
                <Container
                    innerRef={this.contentRef}
                    orientation={Orientation.TopDown}
                    className="tabContent"

                    onDrop={this.handleTabviewDrop}
                    onDragEnter={this.handleTabviewDragEnter}
                    onDragLeave={this.handleTabviewDragLeave}
                    onDragOver={this.handleTabviewDragOver}
                >
                    {content}
                </Container>
            </Container>
        );
    }