rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

add react-places-autocomplete to the new design

Browse Source
This commit is contained in:
Michael Fatemi 2021-06-07 20:01:29 -04:00
parent fcaaf44457
commit 479ce77c82
1 changed files with 125 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/NewUI/Event.tsx
View File

@ -1,4 +1,5 @@
import { useState } from 'react';
import PlacesAutocomplete from 'react-places-autocomplete';
const green = '#60f760';
const lightgrey = '#e0e0e0';
@ -16,6 +17,8 @@ export default function Event({
}) {
const [needRideThere, setNeedRideThere] = useState(false);
const [needRideBack, setNeedRideBack] = useState(false);
const [rideThereLocation, setRideThereLocation] = useState('');
const [rideBackLocation, setRideBackLocation] = useState('');
return (
<div
@ -118,17 +121,67 @@ export default function Event({
</div>
{needRideThere && (
<>
<input
type="text"
<PlacesAutocomplete
onChange={(address) => setRideThereLocation(address)}
value={rideThereLocation}
>
{({
getInputProps,
getSuggestionItemProps,
suggestions,
loading,
}) => (
<div
style={{
width: '100%',
display: 'flex',
flexDirection: 'column',
}}
>
<input
{...getInputProps({
style: {
marginTop: '0.5em',
padding: '0.5em',
fontSize: '1.25rem',
borderRadius: '0.5em',
border: '0px',
}}
placeholder="Where would you be picked up?"
zIndex: 1,
},
placeholder: 'Where would you be picked up?',
})}
/>
{loading
? 'Loading'
: suggestions.length > 0 && (
<div
style={{
marginTop: '-1em',
paddingTop: '2em',
paddingBottom: '1em',
paddingLeft: '1em',
paddingRight: '1em',
borderBottomLeftRadius: '0.5em',
borderBottomRightRadius: '0.5em',
backgroundColor: 'white',
}}
>
{suggestions.map((suggestion) => (
<div
{...getSuggestionItemProps(suggestion)}
style={{
cursor: 'pointer',
}}
key={suggestion.placeId}
>
{suggestion.description}
</div>
))}
</div>
)}
</div>
)}
</PlacesAutocomplete>
<input
type="time"
style={{
@ -144,17 +197,67 @@ export default function Event({
)}
{needRideBack && (
<>
<input
type="text"
<PlacesAutocomplete
onChange={(address) => setRideBackLocation(address)}
value={rideBackLocation}
>
{({
getInputProps,
getSuggestionItemProps,
suggestions,
loading,
}) => (
<div
style={{
width: '100%',
display: 'flex',
flexDirection: 'column',
}}
>
<input
{...getInputProps({
style: {
marginTop: '0.5em',
padding: '0.5em',
fontSize: '1.25rem',
borderRadius: '0.5em',
border: '0px',
}}
placeholder="Where would you be dropped off?"
zIndex: 1,
},
placeholder: 'Where would you be dropped off?',
})}
/>
{loading
? 'Loading'
: suggestions.length > 0 && (
<div
style={{
marginTop: '-1em',
paddingTop: '2em',
paddingBottom: '1em',
paddingLeft: '1em',
paddingRight: '1em',
borderBottomLeftRadius: '0.5em',
borderBottomRightRadius: '0.5em',
backgroundColor: 'white',
}}
>
{suggestions.map((suggestion) => (
<div
{...getSuggestionItemProps(suggestion)}
style={{
cursor: 'pointer',
}}
key={suggestion.placeId}
>
{suggestion.description}
</div>
))}
</div>
)}
</div>
)}
</PlacesAutocomplete>
<input
type="time"
style={{