@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 vote down vote up
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 vote down vote up
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 vote down vote up
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>
    </>
  )
}