@chakra-ui/core#InputRightElement JavaScript Examples
The following examples show how to use
@chakra-ui/core#InputRightElement.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Login.js From allay-fe with MIT License | 4 votes |
|
Login = ({ login, isLoading, history }) => {
const { handleSubmit, errors, register, formState } = useForm()
const [show, setShow] = React.useState(false)
const handleClick = () => setShow(!show)
function validateEmail(value) {
let error
if (!value) {
error = 'email is required'
} else if (value.length < 5) {
error = 'email needed'
}
return error || true
}
function validatePassword(value) {
let error
if (!value) {
error = 'Password is required'
} else if (value.length < 8) {
error = 'Password must be at least 8 characters'
}
return error || true
}
const submitForm = (creds) => {
// action function here
login(creds).then(() => history.push('/dashboard'))
ReactGA.event({
category: 'User',
action: `Button Login`,
})
}
const gaSignup = () => {
ReactGA.event({
category: 'User',
action: `Link Don't have an account`,
})
}
if (isLoading) {
return (
<Flex justify="center" align="center" w="100%" h="100vh">
<Flex>
<CustomSpinner />
</Flex>
</Flex>
)
}
return (
<Flex className="LoginSplash" w="100%" minH="100vh" justify="center">
<Flex maxW="1440px" w="100%">
<Stack
wrap="wrap"
w="60%"
ml="6.5%"
mb="15%"
justify="center"
align="center"
>
<Text
as="h1"
w="100%"
fontFamily="Poppins"
fontSize="80px"
fontWeight="bold"
>
Allay
</Text>
<Text w="100%" fontFamily="Poppins" fontSize="52px" fontWeight="bold">
We're stronger together.
</Text>
</Stack>
<Flex
w="40%"
mb="10%"
mr="8%"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="473px"
h="480px"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex
as="h2"
fontSize="36px"
fontFamily="Poppins"
justify="center"
mx="1"
my="2%"
>
Welcome back!
</Flex>
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isInvalid={errors.email}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Email
</FormLabel>
<SignupLoginInput
mb="30px"
type="text"
name="email"
label="email"
placeholder="lambda1"
autoCapitalize="none"
ref={register({ validate: validateEmail })}
/>
<FormErrorMessage>
{errors.email && errors.email.message}
</FormErrorMessage>
</FormControl>
<FormControl isInvalid={errors.password}>
<Flex flexDir="column">
<FormLabel
color="#131C4D"
fontSize="18px"
fontFamily="Muli"
>
Password
</FormLabel>
<InputGroup>
<SignupLoginInput
mb="30px"
type={show ? 'text' : 'password'}
name="password"
label="Password"
placeholder="********"
autoCapitalize="none"
ref={register({ validate: validatePassword })}
/>
<InputRightElement width="4.5rem" py="32px">
<Button
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
<FormErrorMessage>
{errors.password && errors.password.message}
</FormErrorMessage>
</Flex>
</FormControl>
<Flex width="100%" justify="center">
<Button
width="85%"
mb="30px"
border="none"
rounded="50px"
h="58px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="loginSubmit"
>
Login
</Button>
</Flex>
</Flex>
<Flex m="15px" justify="center" fontWeight="light">
<Text fontSize="16px" color="#17171B" fontFamily="Muli">
Don't have an account?{' '}
<Link
to="/signup"
onClick={gaSignup}
data-cy="signupLink"
style={{
textDecoration: 'none',
fontWeight: 'bold',
color: '#344CD0',
fontSize: '16px',
}}
>
Sign up here!
</Link>
</Text>
</Flex>
</Flex>
</form>
</Flex>
</Flex>
</Flex>
)
}
Example #2
| Source File: Signup.js From allay-fe with MIT License | 4 votes |
|
Signup = ({ signup, isLoading, history }) => {
const { handleSubmit, errors, register, formState } = useForm()
const [show, setShow] = useState(false)
const [moreInfo, setMoreInfo] = useState(false)
const handleClick = () => setShow(!show)
//location state
const [location, setLocation] = useState({})
const [newLocation, setNewLocation] = useState({})
const stateHelper = (value) => {
setLocation(value)
}
const [profile_image, setProfile_Image] = useState('')
const [profile_resume, setProfile_resume] = useState('')
//validation
function validateFirstName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'First Name is required'
} else if (value.length < 2) {
error = 'First Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'First Name can only contain letters'
}
return error || true
}
function validateLastName(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (!value) {
error = 'Last Name is required'
} else if (value.length < 2) {
error = 'Last Name must be at least 2 characters'
} else if (nameRegex.test(value)) {
error = 'Last Name can only contain letters'
}
return error || true
}
function validateEmail(value) {
let error
if (!value) {
error = 'Email is required'
} else if (!value.includes('@')) {
error = 'Must be a valid email'
}
return error || true
}
function validateTrack(value) {
let error
if (!value) {
error = 'Lambda track is required'
}
return error || true
}
function validateCohort(value) {
let error
if (!value) {
error = 'Cohort is required'
}
return error || true
}
function validatePassword(value) {
let error
if (!value) {
error = 'Password is required'
} else if (value.length < 8) {
error = 'Password must be at least 8 characters'
}
return error || true
}
function validateFieldOfStudy(value) {
let error
let nameRegex = /^[0-9*#+]+$/
if (nameRegex.test(value)) {
error = 'Field of study can only contain letters'
}
return error || true
}
// end validation
//add image to cloudinary
const uploadImage = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
setProfile_Image(...profile_image, file.secure_url)
}
//upload resume to cloudinary
const uploadResume = async (e) => {
const files = e.target.files
const data = new FormData()
data.append('file', files[0])
data.append('upload_preset', 'upload')
const res = await fetch(
' https://api.cloudinary.com/v1_1/takija/image/upload',
{
method: 'POST',
body: data,
}
)
const file = await res.json()
console.log('here', file)
setProfile_resume(...profile_resume, file.secure_url)
}
const submitForm = (creds) => {
// correcting grad date format
let graduated = null
if (creds.gradMonth && creds.gradYear) {
graduated = `${creds.gradYear}-${creds.gradMonth}-01`
}
// correcting employed date format
let employed_start = null
if (creds.workMonth && creds.workYear) {
employed_start = `${creds.workYear}-${creds.workMonth}-01`
}
if (creds.confirmPassword === creds.password) {
// formatting the signup state to match the back end columns
signup({
email: creds.email,
password: creds.password,
track_id: Number(creds.track_id),
first_name: creds.firstName,
last_name: creds.lastName,
cohort: creds.cohort,
contact_email: creds.contact_email || null,
location: newLocation
? `${newLocation.myCity} ${newLocation.myState}`
: null,
graduated: graduated,
highest_ed: creds.highest_ed || null,
field_of_study: creds.field_of_study || null,
prior_experience: creds.prior_experience
? JSON.parse(creds.prior_experience)
: false,
tlsl_experience: creds.tlsl_experience
? JSON.parse(creds.tlsl_experience)
: false,
employed_company: creds.employed_company || null,
employed_title: creds.employed_title || null,
employed_remote: creds.employed_remote
? JSON.parse(creds.employed_remote)
: false,
employed_start: employed_start,
resume: profile_resume || null,
linked_in: creds.linked_in || null,
slack: creds.slack || null,
github: creds.github || null,
dribble: creds.dribble || null,
profile_image: profile_image || null,
portfolio: creds.portfolio_URL || null,
}).then(() => history.push('/dashboard'))
} else {
alert('Your Passwords must match!')
}
ReactGA.event({
category: 'User',
action: `Button Sign Up`,
})
}
const switchMoreInfo = () => {
setMoreInfo(!moreInfo)
}
const gaLogin = () => {
ReactGA.event({
category: 'User',
action: `Link Already have an account`,
})
}
if (isLoading) {
return (
<Flex justify="center" align="center" w="100vh" h="100vh">
<Flex>
<CustomSpinner />
</Flex>
</Flex>
)
}
return (
<Flex className="RegisterSplash" w="100%" minH="100vh" justify="center">
<Flex maxW="1440px" w="100%">
<Flex
w="833px"
mx="auto"
justify="center"
align="center"
flexDir="column"
>
<form onSubmit={handleSubmit(submitForm)}>
<Flex
w="833px"
// h='825px'
p="6"
flexDir="column"
background="#FDFDFF"
justify="center"
>
<Flex
as="h2"
w="653"
fontSize="36px"
fontWeight="600"
fontFamily="Poppins"
justify="center"
my="68px"
>
Let's get started!
</Flex>
{/* FIRST NAME, LAST NAME */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
First Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
mr="17px"
type="text"
name="firstName"
label="firstName"
placeholder="John"
autoCapitalize="none"
ref={register({ validate: validateFirstName })}
/>
<FormErrorMessage>
{errors.firstName && errors.firstName.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Last Name
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="lastName"
label="lastName"
placeholder="Doe"
autoCapitalize="none"
ref={register({ validate: validateLastName })}
/>
<FormErrorMessage>
{errors.lastName && errors.lastName.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* EMAIL */}
<Flex wrap="wrap" w="653" justify="center">
<FormControl isRequired isInvalid={errors.email}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Email
</FormLabel>
<SignupLoginInput
w="653px"
mb="30px"
type="email"
name="email"
label="email"
placeholder="[email protected]"
autoCapitalize="none"
ref={register({ validate: validateEmail })}
/>
<FormErrorMessage>
{errors.email && errors.email.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* TRACK */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isRequired isInvalid={errors.track_name}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Track
</FormLabel>
<Select
mb="30px"
mr="17px"
h="68px"
py="16px"
w="318px"
rounded="2px"
variant="outline"
backgroundColor="#FDFDFF"
focusBorderColor="#344CD0"
borderColor="#EAF0FE"
color="#BBBDC6"
_focus={{ color: '#17171B' }}
_hover={{ borderColor: '#BBBDC6' }}
name="track_id"
label="track_id"
ref={register({ validate: validateTrack })}
>
<option fontFamily="Muli" value="">
Select Your Lambda Track
</option>
<option fontFamily="Muli" value={1}>
Android
</option>
<option fontFamily="Muli" value={2}>
DS
</option>
<option fontFamily="Muli" value={3}>
WEB
</option>
<option fontFamily="Muli" value={4}>
IOS
</option>
<option fontFamily="Muli" value={5}>
UX
</option>
</Select>
<FormErrorMessage>
{errors.track_id && errors.track_id.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired isInvalid={errors.username}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Cohort
</FormLabel>
<SignupLoginInput
w="318px"
mb="30px"
type="text"
name="cohort"
label="cohort"
placeholder="Ex: FT 1 or PT 1"
autoCapitalize="none"
ref={register({ validate: validateCohort })}
/>
<FormErrorMessage>
{errors.cohort && errors.cohort.message}
</FormErrorMessage>
</FormControl>
</Flex>
{/* PASSWORD, CONFIRM PASSWORD */}
<Flex wrap="wrap" w="411px%" justify="center">
<FormControl isRequired isInvalid={errors.password}>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Password
</FormLabel>
<InputGroup>
<SignupLoginInput
w="318px"
// mb='30px'
mr="17px"
type={show ? 'text' : 'password'}
name="password"
label="Password"
placeholder="********"
autoCapitalize="none"
ref={register({ validate: validatePassword })}
/>
<InputRightElement width="4.5rem" pr="22px" py="32px">
<Button
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
<FormHelperText mb="45px" color="#9194A8">
Must be at least 8 characters
</FormHelperText>
<FormErrorMessage>
{errors.password && errors.password.message}
</FormErrorMessage>
</FormControl>
<FormControl isRequired>
<FormLabel color="#131C4D" fontSize="18px" fontFamily="Muli">
Confirm Password
</FormLabel>
<InputGroup>
<SignupLoginInput
w="318px"
mb="30px"
type={show ? 'text' : 'password'}
name="confirmPassword"
label="Confirm Password"
placeholder="********"
autoCapitalize="none"
ref={register}
/>
<InputRightElement width="4.5rem" py="32px">
<Button
data-cy="registerSubmit"
h="1.75rem"
color="rgba(72, 72, 72, 0.1)"
border="none"
size="sm"
backgroundColor="#FDFDFF"
onClick={handleClick}
>
{show ? 'Hide' : 'Show'}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
</Flex>
{/* CLICK FOR LONGFORM SIGNUP */}
<Flex
wrap="wrap"
w="653px"
mx="auto"
mb={moreInfo ? '0' : '55px'}
cursor="pointer"
justify="flex-start"
data-cy="longFormDropdown"
onClick={switchMoreInfo}
>
<Flex justify="flex-start">
{moreInfo ? (
<Icon
fontWeight="bold"
name="chevron-down"
textAlign="left"
size="30px"
mr="5px"
ml="-8px"
pt="3px"
/>
) : (
<Icon
fontWeight="bold"
name="chevron-right"
textAlign="left"
size="30px"
mr="5px"
ml="-8px"
pt="3px"
/>
)}
<Text fontWeight="bold" fontSize="20px" fontFamily="Muli">
{' '}
Add Additional Information
</Text>
</Flex>
</Flex>
{/* ADDITIONAL INFO COMPONENT */}
{moreInfo ? (
<SignupAdditional
profile_resume={profile_resume}
profile_image={profile_image}
uploadImage={uploadImage}
uploadResume={uploadResume}
register={register}
errors={errors}
location={location}
newLocation={newLocation}
setNewLocation={setNewLocation}
stateHelper={stateHelper}
validateFieldOfStudy={validateFieldOfStudy}
/>
) : null}
<Flex w="100%" justify="center">
<Button
mb="30px"
border="none"
rounded="50px"
h="58px"
w="653px"
my="2%"
size="lg"
color="white"
backgroundColor="#344CD0"
_hover={{ backgroundColor: '#4254BA', cursor: 'pointer' }}
isLoading={formState.isSubmitting}
type="submit"
data-cy="registerSubmit"
>
Sign up
</Button>
</Flex>
<Flex m="15px" justify="center" fontWeight="light">
<Text fontSize="16px" color="#17171B" fontFamily="Muli">
Already have an account?{' '}
<Link
to="/"
onClick={gaLogin}
style={{
textDecoration: 'none',
fontWeight: 'bold',
color: '#344CD0',
fontSize: '16px',
}}
>
Sign in here!
</Link>
</Text>
</Flex>
</Flex>
</form>
</Flex>
</Flex>
</Flex>
)
}
Example #3
| Source File: NavBar.js From allay-fe with MIT License | 4 votes |
|
function NavBar({
history,
isLoading,
isBlocked,
setSearchResults,
trackFilters,
setTrackFilters,
typeFilters,
setTypeFilters,
getUser,
userData,
}) {
const userId = window.localStorage.getItem('userId')
// use to navigate to review form
const navToReviewForm = () => {
history.push('/dashboard/add-review')
ReactGA.event({
category: 'Review',
action: `Add new review`,
})
}
// image helper
const [imageTimeout, setImageTimeout] = useState(true)
useEffect(() => {
setTimeout(function () {
setImageTimeout(false)
}, 1500)
}, [])
const logout = () => {
localStorage.clear('token')
localStorage.clear('userId')
history.push('/')
}
const handleInputChange = (event) => {
event.preventDefault()
setSearchResults(event.target.value.toLowerCase())
}
// We could get this fronm the DB if we had endpoints
const types = [
{ id: 1, criteria: 'type', name: 'Interview' },
{ id: 2, criteria: 'type', name: 'Company' },
]
const tracks = [
{ id: 1, criteria: 'track', name: 'WEB' },
{ id: 2, criteria: 'track', name: 'UX' },
{ id: 3, criteria: 'track', name: 'DS' },
{ id: 4, criteria: 'track', name: 'iOS' },
{ id: 5, criteria: 'track', name: 'Android' },
]
//track badge colors and background color picker
const trackFontColor = (trackName) => {
switch (trackName) {
case 'DS':
return '#35694F'
break
case 'WEB':
return '#474EA7'
break
case 'iOS' || 'IOS':
return '#8E3D19'
break
case 'Android':
return '#4B3569'
break
case 'UX':
return '#9F3A5A'
break
default:
return
}
}
const trackColorPicker = (trackName) => {
switch (trackName) {
case 'DS':
return '#D3F2CD'
break
case 'WEB':
return '#DBEBFD'
break
case 'iOS' || 'IOS':
return '#F4E6BE'
break
case 'Android':
return '#E9D9FF'
break
case 'UX':
return '#F9E3DE'
break
default:
return
}
}
///
//// handle type filter and state for the badge / show
const [type, setType] = useState([])
const handleType = (name) => {
if (typeFilters.includes(name)) {
setTypeFilters(typeFilters.filter((item) => item !== name))
setType(type.filter((x) => x !== name))
} else {
setTypeFilters(typeFilters.filter((item) => item !== name))
setTypeFilters([...typeFilters, name])
setType([...type, name])
}
}
const typeBadge = (name) => {
return name.map((typeName, index) => (
<Badge
key={`ReviewBadge-${index}`}
backgroundColor="#E2E2E2"
color="#131C4D"
fontFamily="Muli"
fontWeight="normal"
p="5px 15px"
m="5px"
style={{ borderRadius: '50px' }}
variantColor="green"
>
{typeName}
</Badge>
))
}
//// handle track filter and state for the badge color / show
const [track, setTrack] = useState([])
const handleTrack = (name) => {
if (trackFilters.includes(name)) {
setTrackFilters(trackFilters.filter((item) => item !== name))
setTrack(track.filter((x) => x !== name))
} else {
setTrackFilters(trackFilters.filter((item) => item !== name))
setTrackFilters([...trackFilters, name])
setTrack([...track, name])
}
}
const trackBadge = (name) => {
return name
.map((typeName, index) => {
if (index < 2) {
return (
<Badge
key={`TrackBadge-${index}`}
p="5px 15px"
m="2px"
fontFamily="Muli"
fontWeight="normal"
backgroundColor={trackColorPicker(typeName)}
color={trackFontColor(typeName)}
style={{ borderRadius: '50px' }}
variantColor="green"
>
{typeName}
</Badge>
)
} else {
return (
<Badge
key={`TrackBadge-${index}`}
backgroundColor="#E2E2E2"
color="#131C4D"
fontFamily="Muli"
fontWeight="normal"
p="5px 15px"
m="2px"
style={{ borderRadius: '50px' }}
variantColor="green"
>
. . .
</Badge>
)
}
})
.filter((item, index) => index < 3)
}
useEffect(() => {
getUser(userId)
}, [getUser, userId])
return (
<Flex
maxW="1440px"
w="100%"
background="#FFFFFF"
top="0"
position="fixed"
zIndex="999"
direction="column"
>
<Flex
align="center"
justify="space-between"
py="28px"
mb="4%"
h="100px"
borderBottom="1px solid #EAF0FE"
>
<Flex color="#344CD0" align="center" pl="40px">
<h1 fontFamily="Poppins" fontWeight="600" fontSize="32px">
Allay
</h1>
</Flex>
{/* Search bar*/}
<InputGroup w="40%">
<InputRightElement>
<Icon name="search-2" color="#344CD0" />
</InputRightElement>
<Input
width="100%"
placeholder="Search for company or position..."
name="searchbar"
type="text"
rounded="20px"
borderColor="rgba(149, 149, 149, 0.2)"
borderWidth="1px"
onChange={handleInputChange}
/>
</InputGroup>
{/* Profile Icon and user menu*/}
<Flex pr="40px">
<Menu position="absolute" height="226px">
{imageTimeout ? (
<Spinner />
) : (
<MenuButton
data-cy="profileButton"
as={Image}
size="58px"
cursor="pointer"
style={{
borderRadius: '50%',
}}
src={userData.profile_image}
fallbackSrc={require('../../icons/user.svg')}
/>
)}
<MenuList>
<MenuItem
border="none"
backgroundColor="#FFF"
onClick={() => history.push(`/profile/${userId}`)}
data-cy="profileLink"
>
Profile
</MenuItem>
<MenuItem
border="none"
backgroundColor="#FFF"
onClick={() => history.push(`/profile/${userId}/edit`)}
data-cy="editProfileMenuOption"
>
Account settings
</MenuItem>
<MenuItem
border="none"
backgroundColor="#FFF"
onClick={logout}
data-cy="signOut"
>
Log out
</MenuItem>
</MenuList>
</Menu>
</Flex>
</Flex>
<Box>
{/* Filtered Search Buttons */}
<Flex
align="center"
width="100%"
margin="0 auto"
justify="space-between"
px="40px"
>
<Heading
as="h1"
fontSize="36px"
fontFamily="Poppins"
fontWeight="600"
color="#131C4D"
>
Reviews
</Heading>
<Flex>
<Menu margin="3%" closeOnSelect={false}>
<MenuButton
outline="none"
w="309px"
h="65px"
bg="#FFFFFF"
mr="20px"
border="2px solid #EAF0FE"
rounded="32px"
fontFamily="Muli"
fontSize="20px"
fontWeight="bold"
>
<Flex
justify="space-between"
align="center"
pl={track.length > 0 ? '10px' : '30px'}
pr="18px"
>
<Flex w="100%">
{type.length > 0
? typeBadge(type)
: 'Filter by review type'}
</Flex>
<Icon name="triangle-down" color="#344CD0" fontSize="16px" />
</Flex>
</MenuButton>
<MenuList minWidth="240px">
{types.map((type) => (
<MenuOptionGroup
key={type.name}
defaultValue={typeFilters}
type="checkbox"
>
<MenuItemOption
border="none"
backgroundColor="#FFF"
value={type.name}
onClick={() => handleType(type.name)}
>
{type.name}
</MenuItemOption>
</MenuOptionGroup>
))}
</MenuList>
</Menu>
<Menu closeOnSelect={false}>
<MenuButton
outline="none"
w="260px"
h="65px"
bg="#FFFFFF"
border="2px solid #EAF0FE"
rounded="32px"
fontFamily="Muli"
fontSize="20px"
fontWeight="bold"
>
<Flex
justify="space-between"
align="center"
pl={track.length > 0 ? '10px' : '30px'}
pr="18px"
>
<Flex w="100%">
{track.length > 0 ? trackBadge(track) : 'Filter by field'}
</Flex>
<Icon name="triangle-down" color="#344CD0" fontSize="16px" />
</Flex>
</MenuButton>
<MenuList minWidth="240px">
{tracks.map((track) => (
<MenuOptionGroup
key={track.name}
defaultValue={trackFilters}
type="checkbox"
>
<MenuItemOption
border="none"
backgroundColor="#FFF"
value={track.name}
onClick={() => handleTrack(track.name)}
>
{track.name}
</MenuItemOption>
</MenuOptionGroup>
))}
</MenuList>
</Menu>
</Flex>
{isBlocked ? (
<Blocked />
) : (
<Button
background="#344CD0"
color="#FDFDFF"
_hover={{ bg: '#4254BA', cursor: 'pointer' }}
fontFamily="Muli"
fontWeight="bold"
fontSize="20px"
rounded="35px"
p="19px 20px"
w="180px"
h="63px"
border="none"
size="lg"
isLoading={isLoading}
onClick={navToReviewForm}
data-cy="addReviewButton"
>
Write a review
</Button>
)}
</Flex>
</Box>
</Flex>
)
}
Example #4
| Source File: index.js From here-covid-19-tracker with MIT License | 4 votes |
|
Combobox = ({ items = [] }) => {
const updateMapFocus = useMapFocus(state => state.updateMapFocus)
const [inputItems, setInputItems] = useState(items)
const {
isOpen,
// selectedItem,
// getToggleButtonProps,
// getLabelProps,
getMenuProps,
getInputProps,
getComboboxProps,
highlightedIndex,
getItemProps,
inputValue,
setInputValue,
} = useCombobox({
items: inputItems,
onSelectedItemChange: ({selectedItem}) => {
if (selectedItem && selectedItem.simpleLabel) {
fetch(`${geoCodeBaseUrl}?apiKey=${apiKey}&locationId=${selectedItem.locationId}`)
.then(d => d.json())
.then(d => {
const coordinates = d.Response.View[0].Result[0].Location.DisplayPosition
updateMapFocus([coordinates.Latitude, coordinates.Longitude], null, 7)
})
setInputValue(selectedItem.simpleLabel.replace(/<[^>]*>/g, ""))
} else {
setInputValue("")
}
},
onInputValueChange: ({ inputValue }) => {
fetch(`${baseUrl}?apiKey=${apiKey}&language=en&maxresults=10&matchLevel=city&query=${inputValue.split(" ").join("+")}&beginHighlight=<strong>&endHighlight=</strong>`)
.then(d => d.json())
.then(d => {
if (d.suggestions) {
setInputItems(d.suggestions.filter(d => d.matchLevel === "city").map(d => {
return {
...d,
simpleLabel: d.address.city
? `${d.address.city}${d.address.state ? ", " + d.address.state : ""}, ${d.address.country}`
: d.address.country
}
}))
} else {
setInputItems([])
}
})
},
})
return (
<>
<Box position="relative">
<Box {...getComboboxProps()}>
<InputGroup boxShadow="lg" size="lg">
<Input
{...getInputProps({ placeholder: "Search the map", className: "main-combobox" })}
style={{ WebkitAppearance: "none" }}
borderColor="transparent"
borderRadius="md"
_hover={{ borderColor: "transparent" }}
_focus={{ borderColor: "rgba(236,97,14, 1)", boxShadow: `0 0 0 0.0625rem rgba(236,97,14, 1), 0 0 0 0.25rem rgba(236,97,14, 0.25)` }}
_placeholder={{ color: "gray.500" }}
/>
<InputRightElement>
{
inputValue ? (
<IconButton
icon="close"
isRound
size="sm"
aria-label={"toggle menu"}
onClick={() => setInputValue("")}
/>
) : (
<Icon name="search" color="gray.500" />
)
}
</InputRightElement>
</InputGroup>
</Box>
{
isOpen && inputItems.length ?
<Box
position="absolute"
top="100%"
left={0}
right={0}
mt="0.5rem"
bg="white"
borderRadius="md"
shadow="md"
maxHeight="14rem"
overflow="scroll"
py="0.75rem"
>
<List {...getMenuProps()}>
{!inputItems.length
? (
<ListItem py="0.5rem" px="1rem" color="gray.500" alignItems="center" display="flex">
<Icon name="not-allowed" mr="0.25rem" />{ "Address not found" }
</ListItem>
)
: null}
{inputItems.map((item, index) => {
const val = item.simpleLabel
return (
<ListItem
isTruncated
key={`${val}${index}`}
style={{
backgroundColor: highlightedIndex === index ? colors.orange[50] : "transparent",
}}
py="0.5rem"
px="1rem"
{...getItemProps({ item: val, index })}
dangerouslySetInnerHTML={{ __html: val }}
/>
)
})
}
</List>
</Box> : null
}
</Box>
</>
)
}
