private _renderTimeline()

in src/PortfolioPlanning/Components/Plan/PlanTimeline.tsx [222:298]
75 lines of code
4 McCabe index (conditional complexity)

    private _renderTimeline(): JSX.Element {
        if (this.props.items.length > 0) {
            if (!this.defaultTimeStart || !this.defaultTimeEnd) {
                [this.defaultTimeStart, this.defaultTimeEnd] = this._getDefaultTimes(this.props.items);
            }

            return (
                <div className="plan-timeline-container">
                    <Timeline
                        groups={this.props.groups}
                        items={this.props.items}
                        defaultTimeStart={this.defaultTimeStart}
                        defaultTimeEnd={this.defaultTimeEnd}
                        visibleTimeStart={this.state.visibleTimeStart}
                        visibleTimeEnd={this.state.visibleTimeEnd}
                        onTimeChange={this._handleTimeChange}
                        canChangeGroup={false}
                        stackItems={true}
                        dragSnap={day}
                        minZoom={week}
                        canResize={"both"}
                        minResizeWidth={50}
                        onItemResize={this._onItemResize}
                        onItemMove={this._onItemMove}
                        moveResizeValidator={this._validateResize}
                        selected={[this.props.selectedItemId]}
                        lineHeight={50}
                        onItemSelect={itemId => this.props.onSetSelectedItemId(itemId)}
                        onCanvasClick={() => this.props.onSetSelectedItemId(undefined)}
                        itemRenderer={({ item, itemContext, getItemProps }) =>
                            this._renderItem(item, itemContext, getItemProps)
                        }
                        groupRenderer={group => this._renderGroup(group.group)}
                    >
                        <TimelineHeaders>
                            <div onClickCapture={this._onHeaderClick}>
                                <DateHeader
                                    unit="primaryHeader"
                                    intervalRenderer={({ getIntervalProps, intervalContext, data }) => {
                                        return (
                                            <div className="date-header" {...getIntervalProps()}>
                                                {intervalContext.intervalText}
                                            </div>
                                        );
                                    }}
                                />
                                <DateHeader
                                    labelFormat={this._renderDateHeader}
                                    style={{ height: 50 }}
                                    intervalRenderer={({ getIntervalProps, intervalContext, data }) => {
                                        return (
                                            <div className="date-header" {...getIntervalProps()}>
                                                {intervalContext.intervalText}
                                            </div>
                                        );
                                    }}
                                />
                            </div>
                        </TimelineHeaders>
                    </Timeline>
                </div>
            );
        } else {
            return (
                // TODO: Add zero data images
                <ZeroData
                    imagePath=""
                    imageAltText=""
                    primaryText="This plan is empty"
                    secondaryText="Use the &quot;+&quot; button to add items to this plan"
                    actionText="Add items"
                    actionType={ZeroDataActionType.ctaButton}
                    onActionClick={this.props.onZeroDataCtaClicked}
                />
            );
        }
    }