diff options
| author | Saúl Ibarra Corretgé <s@saghul.net> | 2018-08-20 09:19:46 +0200 |
|---|---|---|
| committer | Hristo Terezov <hristo@jitsi.org> | 2018-08-29 10:06:33 -0500 |
| commit | 639848e9101bd5bafcaace0b087b9cf426ce567f (patch) | |
| tree | ab176ec9176be2a0ede54dcc9c4d4a90481d216e | |
| parent | c50e6344f7d9e59a7e28411de8878ecaf9fc58f3 (diff) | |
Add placeholder for conference field
Also, create a couple of auxiliary functions so we save some indentation
in the main render function.
| -rw-r--r-- | app/features/welcome/components/Welcome.js | 74 |
1 files changed, 49 insertions, 25 deletions
diff --git a/app/features/welcome/components/Welcome.js b/app/features/welcome/components/Welcome.js index c9a35f8..c7759e2 100644 --- a/app/features/welcome/components/Welcome.js +++ b/app/features/welcome/components/Welcome.js @@ -90,35 +90,12 @@ class Welcome extends Component<Props, State> { * @returns {ReactElement} */ render() { - const { state } = this.props.location; - return ( <Page navigation = { <Navbar /> }> <AtlasKitThemeProvider mode = 'light'> <Wrapper> - <Header> - <SpotlightTarget name = 'conference-url'> - <Form onSubmit = { this._onFormSubmit }> - <FieldTextStateless - autoFocus = { true } - isInvalid = { state && state.error } - isLabelHidden = { true } - onChange = { this._onURLChange } - shouldFitContainer = { true } - type = 'text' - value = { this.state.url } /> - </Form> - </SpotlightTarget> - <Button - appearance = 'primary' - onClick = { this._onJoin } - type = 'button'> - GO - </Button> - </Header> - <Body> - <RecentList /> - </Body> + { this._renderHeader() } + { this._renderBody() } <Onboarding section = 'welcome-page' /> </Wrapper> </AtlasKitThemeProvider> @@ -191,6 +168,53 @@ class Welcome extends Component<Props, State> { url: event.currentTarget.value }); } + + /** + * Renders the body for the welcome page. + * + * @returns {ReactElement} + */ + _renderBody() { + return ( + <Body> + <RecentList /> + </Body> + ); + } + + /** + * Renders the header for the welcome page. + * + * @returns {ReactElement} + */ + _renderHeader() { + const locationState = this.props.location.state; + const locationError = locationState && locationState.error; + + return ( + <Header> + <SpotlightTarget name = 'conference-url'> + <Form onSubmit = { this._onFormSubmit }> + <FieldTextStateless + autoFocus = { true } + isInvalid = { locationError } + isLabelHidden = { true } + onChange = { this._onURLChange } + placeholder = 'Enter a name for your conference' + shouldFitContainer = { true } + type = 'text' + value = { this.state.url } /> + </Form> + </SpotlightTarget> + <Button + appearance = 'primary' + onClick = { this._onJoin } + type = 'button'> + GO + </Button> + </Header> + ); + } } export default connect()(Welcome); |