Method render

packages/sanddance-app/src/snapshots.tsx:200–256

()

    }

    render() {
        let shortcut: string;
        if (this.props.dataSource.dataSourceType !== 'local' && this.state.url && !invalidUrlError(this.state.url) && !this.state.urlError) {
            shortcut = this.getUrlShortcut();
        }
        return (
            <div>
                <controls.Dialog
                    hidden={false}
                    onDismiss={this.props.onDismiss}
                    dialogContentProps={{
                        className: `sanddance-dialog ${this.props.theme}`,
                        type: base.fluentUI.DialogType.normal,
                        title: strings.dialogTitleSnapshotsUrl,
                    }}
                    buttons={[
                        (
                            <base.fluentUI.PrimaryButton
                                disabled={!this.state.url || !!this.state.urlError}
                                key={0}
                                onClick={e => this.loadUrl()}
                                iconProps={{ iconName: 'CloudDownload' }}
                                text={strings.dialogLoadButton}
                            />
                        ),
                    ]}
                >
                    <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>
                    {this.props.dataSource.dataSourceType !== 'local'
                        && (
                            <section className='tip' style={{ visibility: !invalidUrlError(this.state.url) && !this.state.urlError ? 'visible' : 'hidden' }} >
                                {strings.labelSnapshotsShortcut} <a
                                    href={shortcut}
                                    title={strings.labelLinkDescription}
                                    aria-label={strings.labelLinkDescription}
                                >{strings.labelShare}</a>
                            </section>
                        )
                    }
                </controls.Dialog>
            </div>
        );
    }
}