public render()

in sites/fast-component-explorer/app/explorer.tsx [97:221]
124 lines of code
3 McCabe index (conditional complexity)

    public render(): React.ReactNode {
        if (typeof this.state.componentName === "undefined") {
            return (
                <div>
                    <h1>404 - This page does not exist</h1>
                    <a href={"/"}>Go to a valid page</a>
                </div>
            );
        }

        return (
            <div className={this.getContainerClassNames()}>
                <div className={this.paneStartClassNames}>
                    <Logo
                        className={this.logoClassNames}
                        logo={FASTInlineLogo}
                        title={"Component Explorer"}
                    />
                    <NavigationMenu
                        className={this.navigationClassNames}
                        menu={menu}
                        expanded={true}
                        activeLocation={this.state.locationPathname}
                        onLocationUpdate={this.handleUpdateRoute}
                    />
                </div>
                <div className={this.canvasClassNames}>
                    {this.renderCanvasOverlay()}
                    <div className={this.menuBarClassNames}>
                        <div className={this.mobileMenuBarClassNames}>
                            {this.renderMobileNavigationTrigger()}
                            <Logo logo={FASTInlineLogo} />
                            {this.renderMobileFormTrigger()}
                        </div>
                        <div className={this.canvasMenuBarClassNames}>
                            <div className={this.menuItemRegionClassNames}>
                                {this.renderScenarioSelect()}
                            </div>
                            <div className={this.menuItemRegionClassNames}>
                                <TransparencyToggle
                                    id={"transparency-toggle"}
                                    transparency={this.state.transparentBackground}
                                    onUpdateTransparency={this.handleUpdateTransparency}
                                    disabled={!this.state.previewReady}
                                />
                                <DirectionSwitch
                                    id={"direction-switch"}
                                    direction={this.state.direction}
                                    onUpdateDirection={this.handleUpdateDirection}
                                    disabled={!this.state.previewReady}
                                />
                                <ThemeSelector
                                    id={"theme-selector"}
                                    theme={this.state.theme}
                                    onUpdateTheme={this.handleUpdateTheme}
                                    disabled={!this.state.previewReady}
                                />
                            </div>
                        </div>
                    </div>
                    <div
                        className={classNames(this.canvasContentClassNames, [
                            "canvas-content__dev-tools-hidden",
                            !this.state.devToolsVisible,
                        ])}
                    >
                        <div
                            ref={this.viewerContainerRef}
                            className={this.viewerClassNames}
                            style={{
                                padding: `${this.viewerContentAreaPadding}px`,
                            }}
                        >
                            <ModularViewer
                                iframeSrc={"/preview"}
                                width={this.state.viewerWidth}
                                height={this.state.viewerHeight}
                                onUpdateHeight={this.handleUpdateHeight}
                                onUpdateWidth={this.handleUpdateWidth}
                                responsive={true}
                                messageSystem={this.fastMessageSystem as MessageSystem}
                            />
                            {renderDevToolToggle(
                                this.state.devToolsVisible,
                                this.handleDevToolsToggle
                            )}
                        </div>
                        <div className={"dev-tools"}>
                            {renderDevToolsTabs({
                                codeRenderCallback: (e: HTMLElement) => {
                                    this.webComponentEditorContainerRef = e;
                                },
                                tabUpdateCallback: (
                                    e: React.ChangeEvent<HTMLElement>
                                ) => {
                                    (e as any)?.detail?.id
                                        ? this.handlePivotUpdate((e as any).detail.id)
                                        : void 0;
                                },
                                guidanceTabPanelContent: this.state.componentConfig
                                    .guidance,
                                definitionTabPanelContent: JSON.stringify(
                                    this.state.componentConfig.definition,
                                    null,
                                    2
                                ),
                                schemaTabPanelContent: JSON.stringify(
                                    this.state.componentConfig.schema,
                                    null,
                                    2
                                ),
                            })}
                        </div>
                    </div>
                </div>
                <div className={this.paneEndClassNames}>
                    <ModularForm
                        messageSystem={this.fastMessageSystem}
                        categories={componentCategories}
                    />
                </div>
                <Footer />
            </div>
        );
    }