public render()

in legacy/src/Calendar/Views.tsx [307:439]


    public render(): JSX.Element {
        return (
            <div>
                {this.state.showMonthPicker && (
                    <Callout
                        isBeakVisible={false}
                        target={this.state.monthPickerTarget}
                        onDismiss={() => {
                            this.setState({ showMonthPicker: false });
                        }}>
                        <PickList
                            selectionMode={SelectionMode.single}
                            items={this.getMonthPickerOptions()}
                            getListItem={this.getMonthPickerListItem.bind(this)}
                            onSelectionChanged={selection => {
                                const selectedItem = selection.selectedItems[0] as MonthAndYear;
                                this.setState({ showMonthPicker: false, calendar: selection.selectedItems[0] });
                                this.calendarView.getCalendar().goTo(new Date(selectedItem.year, selectedItem.month, 1, 0, 0, 0));
                            }}
                            selectedItems={[this.state.calendar]}
                        />
                    </Callout>
                )}
                <Hub
                    hideFullScreenToggle={true}
                    hubViewState={this.hubViewState}
                    viewActions={[
                        {
                            key: "move-today",
                            name: "Today",
                            important: true,
                            onClick: this._onCommandClick,
                        },
                        {
                            key: "move-left",
                            name: "Prev",
                            important: true,
                            iconProps: {
                                iconName: "ChevronLeft",
                            },
                            onClick: this._onCommandClick,
                        },
                        {
                            key: "move-right",
                            name: "Next",
                            important: true,
                            iconProps: {
                                iconName: "ChevronRight",
                            },
                            onClick: this._onCommandClick,
                        },
                    ]}
                    commands={[
                        {
                            key: "new-item",
                            name: "New Item",
                            important: true,
                            iconProps: {
                                iconName: "Add",
                            },
                            onClick: this._onCommandClick,
                        },
                        {
                            key: "refresh",
                            name: "Refresh",
                            important: true,
                            iconProps: {
                                iconName: "Refresh",
                            },
                            onClick: this._onCommandClick,
                        },
                    ]}>
                    <HubHeader
                        breadcrumbItems={this.getHeaderItems()}
                        ref={header => {
                            this.header = header;
                        }}
                        headerItemPicker={{
                            isSearchable: true,
                            searchTextPlaceholder: "Filter...",
                            getItems: () => {
                                return new Promise<WebApiTeam[]>((resolve, reject) => {
                                    Tfs_Core_WebApi.getClient()
                                        .getTeams(VSS.getWebContext().project.id, 1000 as any)
                                        .then(result => {
                                            result.sort((a, b) => {
                                                return a.name.toUpperCase().localeCompare(b.name.toUpperCase());
                                            });
                                            resolve(result);
                                        }, reject);
                                });
                            },
                            getListItem: (item: WebApiTeam) => {
                                if (item) {
                                    return {
                                        name: item.name,
                                        key: item.id,
                                    };
                                }
                                return {
                                    name: "Select a team",
                                    key: "selectteammessage",
                                };
                            },
                            selectedItem: this.props.selectedTeam,
                            onSelectedItemChanged: (selectedTeam: WebApiTeam) => {
                                this.setSelectedTeam(selectedTeam);
                            },
                        }}
                    />
                    {this.props.selectedTeam && (
                        <PivotBarItem name="Calendar" itemKey="calendar">
                            <div
                                className="calendar-canvas"
                                id="calendarCanvas"
                                ref={elem => {
                                    if (elem) {
                                        this.calendarDiv = elem;
                                        if (this.needToEnhance) {
                                            this.enhanceControls();
                                            this.needToEnhance = false;
                                        } else {
                                            this.needToEnhance = true;
                                        }
                                    }
                                }}
                            />
                        </PivotBarItem>
                    )}
                </Hub>
            </div>
        );
    }