Phone Input (#33)

Co-authored-by: sajmalyousef <[email protected]>
SimplQ · Apr 25, 2020 · d41a404 · d41a404
1 parent a23c315
commit d41a404
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 10 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/simplQ-frontend.iml b/.idea/simplQ-frontend.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/simplq/package-lock.json b/simplq/package-lock.json
diff --git a/simplq/package.json b/simplq/package.json
@@ -14,6 +14,8 @@
     "react": "^16.13.1",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.1",
+    "react-phone-input-2": "^2.13.3",
+    "react-phone-number-input": "^3.0.22",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1"
   },

diff --git a/simplq/src/components/page/JoinQueue.jsx b/simplq/src/components/page/JoinQueue.jsx
@@ -1,9 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import CentralSection from "../CentralSection";
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/material.css';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+    textField: {
+      marginTop: theme.spacing(2)
+    }
+  }));
 
 function JoinQueue(props) {
+    const [value, setValue] = useState();
+    const classes = useStyles();
+
     return <CentralSection heading="Join Queue">
         <TextField
             placeholder="Your Name"
@@ -14,17 +26,23 @@ function JoinQueue(props) {
                 shrink: true,
             }}
             variant="outlined"
+            inputStyle="material"
         />
-        <TextField
+        <PhoneInput
+            containerClass={classes.textField}
             placeholder="Contact Number"
-            fullWidth
-            required
-            margin="normal"
-            InputLabelProps={{
-                shrink: true,
+            country={'in'}
+            value={value}
+            inputProps={{
+                name: 'phone',
+                required: true,
+                autoFocus: true
+
             }}
-            variant="outlined"
-        />
+            inputStyle={{
+                width: '100%'
+            }}
+            onChange={setValue} />
         <div style={{ display: "flex", justifyContent: 'flex-end' }}>
             <Button variant="contained" color="primary" style={{
                 marginTop: 30,

diff --git a/simplq/src/index.js b/simplq/src/index.js
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import Layout from './components/Layout';
 import * as serviceWorker from './serviceWorker';
-import Routes from './components/Routes';
 import {
   BrowserRouter as Router
 } from "react-router-dom";