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