public render()

in src/AddEditDaysOffDialog.tsx [118:207]
90 lines of code
5 McCabe index (conditional complexity)

    public render(): JSX.Element {
        return (
            <>
                <CustomDialog onDismiss={this.props.onDismiss}>
                    <PanelHeader
                        onDismiss={this.props.onDismiss}
                        showCloseButton={false}
                        titleProps={{ size: TitleSize.Small, text: this.props.event ? "Edit days off" : "Add days off" }}
                    />
                    <PanelContent>
                        <div className="flex-grow flex-column event-dialog-content">
                            <Observer message={this.message}>
                                {(props: { message: string }) => {
                                    return props.message !== "" ? (
                                        <MessageCard className="flex-self-stretch" severity={MessageCardSeverity.Info}>
                                            {props.message}
                                        </MessageCard>
                                    ) : null;
                                }}
                            </Observer>
                            <div className="input-row flex-row">
                                <span>Start Date</span>
                                <div className="bolt-textfield column-2">
                                    <input
                                        className="bolt-textfield-input input-date"
                                        defaultValue={formatDate(this.startDate, "YYYY-MM-DD")}
                                        onChange={this.onInputStartDate}
                                        type="date"
                                    />
                                </div>
                            </div>
                            <div className="input-row flex-row">
                                <span>End Date</span>
                                <div className="bolt-textfield column-2">
                                    <input
                                        className="bolt-textfield-input input-date"
                                        defaultValue={formatDate(this.endDate, "YYYY-MM-DD")}
                                        onChange={this.onInputEndDate}
                                        type="date"
                                    />
                                </div>
                            </div>
                            <div className="input-row flex-row">
                                <span>Team Member</span>
                                <Dropdown
                                    className="column-2"
                                    items={this.teamMembers}
                                    onSelect={this.onSelectTeamMember}
                                    selection={this.memberSelection}
                                />
                            </div>
                        </div>
                    </PanelContent>
                    <PanelFooter>
                        <div className="flex-grow flex-row">
                            {this.props.event && <Button onClick={this.onDeleteClick} subtle={true} text="Delete days off" />}
                            <ButtonGroup className="bolt-panel-footer-buttons flex-grow">
                                <Button onClick={this.props.onDismiss} text="Cancel" />
                                <Observer enabled={this.okButtonEnabled}>
                                    {(props: { enabled: boolean }) => {
                                        return <Button disabled={!props.enabled} onClick={this.onOKClick} primary={true} text="Ok" />;
                                    }}
                                </Observer>
                            </ButtonGroup>
                        </div>
                    </PanelFooter>
                </CustomDialog>
                <Observer isDialogOpen={this.isConfirmationDialogOpen}>
                    {(props: { isDialogOpen: boolean }) => {
                        return props.isDialogOpen ? (
                            <MessageDialog
                                message="Are you sure you want to delete the days off?"
                                onConfirm={() => {
                                    this.props.eventSource.deleteEvent(this.props.event!, this.props.event!.iterationId!).then(() => {
                                        this.props.calendarApi.refetchEvents();
                                    });
                                    this.isConfirmationDialogOpen.value = false;
                                    this.props.onDismiss();
                                }}
                                onDismiss={() => {
                                    this.isConfirmationDialogOpen.value = false;
                                }}
                                title="Delete days off"
                            />
                        ) : null;
                    }}
                </Observer>
            </>
        );
    }