@chakra-ui/core#List JavaScript Examples
The following examples show how to use
@chakra-ui/core#List.
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: tech-volunteers.js From covid-19-website with MIT License | 5 votes |
|
TechVolunteers = () => {
return (
<Layout>
<SEO title="Tech Volunteers" />
<Section
backgroundColor={"purple"}
paddingY={[1,8]}
>
<Heading {...headerStyling}>Hello and welcome,<br/> fellow Technologists!</Heading>
<Text {...textStyling}>
The number of people who are volunteering for this effort is fantastic, and we want to ensure this energy gets directed to the right place and optimised.
</Text>
<Text {...textStyling}>
So tell us what skills you have and your realistic availability, and we'll add you to the Slack group to get you started!
</Text>
</Section>
<Section
fontSize={[16, 16, 24]}
paddingY={[1,8]}
>
<Text paddingY={5}>
So you’re a:
</Text>
<List>
<ListItem>• Developer</ListItem>
<ListItem>• Data Scientist</ListItem>
<ListItem>• Designer</ListItem>
<ListItem>• Product / Project Manager</ListItem>
<ListItem>• Content Creator, Writer</ListItem>
<ListItem>• Marketing / PR / Marketplace Specialist</ListItem>
</List>
<Text>etc!</Text>
<Text paddingY={[5]}>...and you want to help in the Covid19 crisis?</Text>
<Text>This is what you can find here:</Text>
<List>
<ListItem>• Offer your skills to existing projects by code4covid group</ListItem>
<ListItem>• Ask for tech resources for your project to code4covid group</ListItem>
<ListItem>• Check the Coronavirus Tech Handbook by TechForUK group</ListItem>
<ListItem>• Explore List Of Existing Tech Communities</ListItem>
</List>
<Link to="/tech-volunteers-form/">
<Button {...buttonStyling}>CLICK TO START!</Button>
</Link>
</Section>
</Layout>
)
}
Example #2
| Source File: MailboxList.js From CubeMail with MIT License | 4 votes |
|
MailboxList = () => {
const { getMessages, setCurrentLabel } = useContext(EmailContext);
const [active, setActive] = useState("INBOX");
const handleClick = (e) => {
const categoryId = e.target.id;
setActive(categoryId);
setCurrentLabel(categoryId);
// Get Messages using clicked category
getMessages(categoryId);
};
return (
<Box
w='16%'
h='100%'
bg='white'
border='1px'
borderColor='gray.200'
borderTopLeftRadius='md'
borderBottomLeftRadius='md'
>
<List>
{/* Send Model */}
<ListItem p='0.5rem 1rem 1rem'>
<SendModel />
</ListItem>
{/* Labels Buttons */}
<ListItem>
<Button
id='INBOX'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdInbox}
variantColor='blue'
variant={active === "INBOX" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Inbox
</Button>
</ListItem>
<ListItem>
<Button
id='STARRED'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdStar}
variantColor='blue'
variant={active === "STARRED" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Starred
</Button>
</ListItem>
<ListItem>
<Button
id='IMPORTANT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdLabel}
variantColor='blue'
variant={active === "IMPORTANT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Important
</Button>
</ListItem>
<ListItem>
<Button
id='SENT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={FiSend}
variantColor='blue'
variant={active === "SENT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Sent
</Button>
</ListItem>
<ListItem>
<Button
id='DRAFT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={FiFile}
variantColor='blue'
variant={active === "DRAFT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Drafts
</Button>
</ListItem>
<ListItem>
<Button
id='TRASH'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon='delete'
variantColor='blue'
variant={active === "TRASH" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Trash
</Button>
</ListItem>
<ListItem>
<Button
id='CATEGORY_SOCIAL'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdPeople}
variantColor='blue'
variant={active === "CATEGORY_SOCIAL" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Social
</Button>
</ListItem>
<ListItem>
<Button
id='CATEGORY_PROMOTIONS'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdLoyalty}
variantColor='blue'
variant={active === "CATEGORY_PROMOTIONS" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Promotions
</Button>
</ListItem>
</List>
</Box>
);
}
Example #3
| 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>
</>
)
}
