diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-12-11 21:33:43 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-11 21:35:17 +0800 |
commit | 27bf0d8a165783f8deeba9fdf47d203bf603ed37 (patch) | |
tree | 487c36635c7c5cd6f5cf512db58f692675aa4f2d /packages/website/ts/@next/components/newsletterForm.tsx | |
parent | b5372ade3c2c40989877e13d817b4b49efe1173d (diff) | |
download | dexon-0x-contracts-27bf0d8a165783f8deeba9fdf47d203bf603ed37.tar dexon-0x-contracts-27bf0d8a165783f8deeba9fdf47d203bf603ed37.tar.gz dexon-0x-contracts-27bf0d8a165783f8deeba9fdf47d203bf603ed37.tar.bz2 dexon-0x-contracts-27bf0d8a165783f8deeba9fdf47d203bf603ed37.tar.lz dexon-0x-contracts-27bf0d8a165783f8deeba9fdf47d203bf603ed37.tar.xz dexon-0x-contracts-27bf0d8a165783f8deeba9fdf47d203bf603ed37.tar.zst dexon-0x-contracts-27bf0d8a165783f8deeba9fdf47d203bf603ed37.zip |
Add form handler
Diffstat (limited to 'packages/website/ts/@next/components/newsletterForm.tsx')
-rw-r--r-- | packages/website/ts/@next/components/newsletterForm.tsx | 98 |
1 files changed, 82 insertions, 16 deletions
diff --git a/packages/website/ts/@next/components/newsletterForm.tsx b/packages/website/ts/@next/components/newsletterForm.tsx index 972183b00..ab962f046 100644 --- a/packages/website/ts/@next/components/newsletterForm.tsx +++ b/packages/website/ts/@next/components/newsletterForm.tsx @@ -3,47 +3,78 @@ import styled from 'styled-components'; import { colors } from 'ts/style/colors'; +interface Props { +} + interface InputProps { + isSubmitted: boolean; name: string; label: string; type: string; } -interface Props { +interface ArrowProps { + isSubmitted: boolean; } -const Input = (props: InputProps) => { +const Input: React.ReactNode = React.forwardRef((props: InputProps, ref) => { const { name, label, type } = props; const id = `input-${name}`; return ( - <> + <InnerInputWrapper {...props}> <label className="visuallyHidden" htmlFor={id}>{label}</label> - <StyledInput id={id} placeholder={label} {...props} /> - </> + <StyledInput ref={ref} id={id} placeholder={label} {...props} /> + </InnerInputWrapper> ); }; export class NewsletterForm extends React.Component { - public submit = () => { - // submit this form - } - + public emailInput = React.createRef(); + public state = { + isSubmitted: false, + }; public render(): React.ReactNode { + const {isSubmitted} = this.state; + return ( - <StyledForm> + <StyledForm onSubmit={this._onSubmit.bind(this)}> <InputWrapper> - <Input name="email" type="email" label="Email Address" /> + <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required /> - <SubmitButton onClick={this.submit}> - <svg width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"> + <SubmitButton> + <Arrow isSubmitted={isSubmitted} width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/> - </svg> + </Arrow> </SubmitButton> + <SuccessText isSubmitted={isSubmitted}>🎉 Thank you for signing up!</SuccessText> </InputWrapper> <Text>Subscribe to our newsletter for updates in the 0x ecosystem</Text> </StyledForm> - ) + ); + } + + private async _onSubmit(e) { + e.preventDefault(); + + const email = this.emailInput.current.value; + + this.setState({ isSubmitted: true }); + + try { + const response = await fetch('/email', { + method: 'post', + headers: { + 'content-type': 'application/json; charset=utf-8', + }, + body: JSON.stringify({ email }), + }); + const json = await response.json(); + + console.log(response.json()); + } catch (e) { + console.log(e); + } } } @@ -60,7 +91,7 @@ const StyledInput = styled.input` background-color: transparent; border: 0; border-bottom: 1px solid #393939; - color: ${colors.textDarkSecondary}; + color: #B1B1B1; // #9D9D9D on light theme font-size: 1.294117647rem; padding: 15px 0; outline: none; @@ -71,6 +102,13 @@ const InputWrapper = styled.div` position: relative; `; +const InnerInputWrapper = styled.div<ArrowProps>` + opacity: ${props => props.isSubmitted && 0}; + visibility: ${props => props.isSubmitted && 'hidden'}; + transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; + transition-delay: 0.30s; +`; + const SubmitButton = styled.button` width: 44px; height: 44px; @@ -79,6 +117,12 @@ const SubmitButton = styled.button` position: absolute; right: 0; top: calc(50% - 22px); + overflow: hidden; + outline: 0; + + &:focus-within { + background-color: #eee; + } `; const Text = styled.p` @@ -88,3 +132,25 @@ const Text = styled.p` line-height: 1.2em; margin-top: 15px; `; + +const SuccessText = styled.p<ArrowProps>` + color: #B1B1B1; + font-size: 1rem; + font-weight: 300; + line-height: 1.2em; + padding-top: 25px; + position: absolute; + left: 0; + top: 0; + text-align: center; + right: 50px; + opacity: ${props => props.isSubmitted ? 1 : 0}; + visibility: ${props => props.isSubmitted ? 'visible' : 'hidden'}; + transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; + transition-delay: 0.55s; +`; + +const Arrow = styled.svg<ArrowProps>` + transform: ${props => props.isSubmitted && `translateX(44px)`}; + transition: transform 0.25s ease-in-out; +`; |