render()

in packages/sanddance-app/src/dataSourcePicker.tsx [185:278]
94 lines of code
7 McCabe index (conditional complexity)

    render() {
        const closeDialog = () => {
            this.setState({ dialogMode: null });
        };
        let shortcut: string;
        if (this.state.url && !invalidUrlError(this.state.url) && !this.state.urlError) {
            shortcut = this.getUrlShortcut(this.state.url, this.state.urlType);
        }
        return [(
            <controls.Dialog
                key='local'
                hidden={!(this.state.dialogMode === 'local')}
                onDismiss={closeDialog}
                dialogContentProps={{
                    className: `sanddance-dialog ${this.props.theme}`,
                    type: base.fluentUI.DialogType.normal,
                    title: strings.dialogTitleLocal,
                    subText: strings.dialogSubtextLocal
                }}
            >
                <input
                    type="file"
                    onChange={e => this.upload(e)}
                    disabled={this.state.working}
                />
                {this.state.uploadFormatError && (
                    <div className="error">{this.state.uploadFormatError}</div>
                )}
            </controls.Dialog>
        ), (
            <controls.Dialog
                key='url'
                hidden={!(this.state.dialogMode === 'url')}
                onDismiss={closeDialog}
                dialogContentProps={{
                    className: `sanddance-dialog ${this.props.theme}`,
                    type: base.fluentUI.DialogType.normal,
                    title: strings.dialogTitleUrl
                }}
                buttons={[
                    (
                        <base.fluentUI.PrimaryButton
                            key={0}
                            onClick={e => this.loadUrl()}
                            iconProps={{ iconName: 'CloudDownload' }}
                            text={strings.dialogLoadButton}
                            disabled={this.state.working}
                        />
                    )
                ]}
            >
                <section>
                    <base.fluentUI.TextField
                        label={strings.labelUrl}
                        placeholder={strings.urlInputPlaceholder}
                        onKeyUp={e => e.keyCode === 13 && this.loadUrl()}
                        onChange={(e, url) =>
                            this.setState({ url, urlError: '' })
                        }
                        value={this.state.url}
                        disabled={this.state.working}
                    />
                    {this.state.urlError && (
                        <div className="error">{this.state.urlError}</div>
                    )}
                </section>
                <section>
                    <base.fluentUI.ChoiceGroup
                        options={
                            DataSourcePicker.urlTypes.map((urlType, i) => {
                                return {
                                    key: `${i}`,
                                    text: urlType,
                                    disabled: this.state.working,
                                    checked: i === 0
                                } as FluentUITypes.IChoiceGroupOption;
                            })
                        }
                        onChange={(ev: React.FormEvent<HTMLInputElement>, option: FluentUITypes.IChoiceGroupOption) =>
                            this.setState({ urlType: option.text as DataFileType, urlError: '' })
                        }
                        label={strings.labelDataFormat}
                    />
                </section>
                <section className='tip' style={{ visibility: !invalidUrlError(this.state.url) && !this.state.urlError ? 'visible' : 'hidden' }} >
                    {strings.labelDataUrlShortcut} <a
                        href={shortcut}
                        title={strings.labelLinkDescription}
                        aria-label={strings.labelLinkDescription}
                    >{strings.labelLink}</a>
                </section>
            </controls.Dialog>
        )];
    }