From 5d8eda9a88fafec320f6481ca890ce38549f76f0 Mon Sep 17 00:00:00 2001 From: ramnreddy15 Date: Wed, 3 Mar 2021 20:11:31 -0800 Subject: [PATCH] Added modal --- package.json | 1 + src/components/Contact.js | 50 ++++++++++------ src/components/assets/StyledContactForm.js | 70 ++++++++++++++++++++++ src/components/assets/contact.scss | 31 ++++++++++ yarn.lock | 5 ++ 5 files changed, 140 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 4c7b4d1..7b23909 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "popper.js": "^1.16.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-icons": "^4.2.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.0", "styled-components": "^5.2.1", diff --git a/src/components/Contact.js b/src/components/Contact.js index 8414777..c6bd3f6 100644 --- a/src/components/Contact.js +++ b/src/components/Contact.js @@ -2,8 +2,8 @@ import React, {Component} from "react"; import emailjs from "emailjs-com"; import {createGlobalStyle} from 'styled-components'; import {Spring} from 'react-spring/renderprops' -import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet} from "./assets/StyledContactForm.js"; -import './assets/contact.scss' +import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet, Modal} from "./assets/StyledContactForm.js"; +import './assets/contact.scss'; // If you need anything for this ask Ram Reddy. @@ -24,12 +24,14 @@ class ContactForm extends Component { constructor(props) { super(props); + this.state = { name: '', email: '', subject: '', message: '', - error:'' + error:'', + show:false }; this.handleNameChange = this.handleNameChange.bind(this); @@ -38,8 +40,18 @@ class ContactForm extends Component { this.handleMessageChange = this.handleMessageChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.scrollDown = this.scrollDown.bind(this); + this.showModal = this.showModal.bind(this); + this.hideModal = this.hideModal.bind(this); } + showModal = () => { + this.setState({ show: true }); + }; + + hideModal = () => { + this.setState({ show: false }); + }; + handleNameChange(event) { this.setState({ name: event.target.value @@ -76,20 +88,16 @@ class ContactForm extends Component { } this.setState({error: ``}); - alert('You will get and email from us shortly!'); - alert('These are the details you have submitted!'); - alert(this.state.name); - alert(this.state.email); - alert(this.state.subject); - alert(this.state.message); + this.showModal() + // emailjs.sendForm('service_5ggwj8d', 'template_jirc6zm', event.target, 'user_XtSzEFFNtc4C6IEpGN9JS') + // .then((result) => { + // console.log(result.text); + // }, (error) => { + // console.log(error.text); + // }); + // event.target.reset(); + - emailjs.sendForm('service_5ggwj8d', 'template_jirc6zm', event.target, 'user_XtSzEFFNtc4C6IEpGN9JS') - .then((result) => { - console.log(result.text); - }, (error) => { - console.log(error.text); - }); - event.target.reset(); } scrollDown(id) { @@ -140,7 +148,15 @@ class ContactForm extends Component { Send Message - + +

We have recieved your message!

+

You will recieve an email from us shortly.

+

Below are the details you have submitted:

+

Name: {this.state.name}

+

Email: {this.state.email}

+

Subject: {this.state.subject}

+

Message: {this.state.message}

+
{ + const showHideClassName = show ? "modal display-block" : "modal display-none"; + + return ( +
+ + + {children} + + + +
+ ); +}; export default StyledFormWrapper; @@ -96,4 +165,5 @@ export { StyledButton, StyledError, StyledTextAreaSubject, + Modal }; \ No newline at end of file diff --git a/src/components/assets/contact.scss b/src/components/assets/contact.scss index 0ecbbef..6191fa9 100644 --- a/src/components/assets/contact.scss +++ b/src/components/assets/contact.scss @@ -4,6 +4,37 @@ $medium: 800px; button { cursor:pointer; } +p { + word-break: break-all; + white-space: normal; + margin-block: 5%; +} +.modal { + position: fixed; + top: 0; + left: 0; + width:100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); +} + +.modal-main { + position:fixed; + background: white; + width: 80%; + height: auto; + top:50%; + left:50%; + transform: translate(-50%,-50%); +} + +.display-block { + display: block; +} + +.display-none { + display: none; +} body { padding: 0; diff --git a/yarn.lock b/yarn.lock index 141fbf4..fba18c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9881,6 +9881,11 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== +react-icons@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0" + integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ== + react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"