@chakra-ui/core#IconButton JavaScript Examples

SearchBar = () => {
  const { getMessagesQuery, loading } = useContext(EmailContext);
  const [query, setQuery] = useState("");

  const handleOnChange = (e) => setQuery(e.target.value);

  const handleQuery = (e) => {
    if (!query) return;
    if (e.keyCode === 13 || e.type === "click") getMessagesQuery(query);
  };

  return (
    <Box py='5px' bg='white' border='1px' borderColor='gray.200'>
      <InputGroup size='lg'>
        <IconButton
          icon='search'
          variant='ghost'
          variantColor='blue'
          marginLeft='5px'
          aria-label='Search messages'
          onClick={handleQuery}
          isLoading={loading}
        />
        <Input
          type='text'
          placeholder='Search mail'
          borderWidth='0px'
          borderRadius='0px'
          focusBorderColor='white'
          value={query}
          onChange={handleOnChange}
          onKeyDown={handleQuery}
        />
      </InputGroup>
    </Box>
  );
}

DarkModeSwitch = () => {
    const { colorMode, toggleColorMode } = useColorMode()
    return (
        <IconButton
            aria-label="Toggle Dark Switch"
            icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
            onClick={toggleColorMode}
        />
    )
}

export default function MobileNav() {
  const { isOpen, onToggle, onClose } = useDisclosure();
  const btnRef = React.useRef();

  return (
    <>
      <IconButton
        aria-label="Navigation Menu"
        variant="ghost"
        display={['flex', null, 'none']}
        icon={<Menu h={5} />}
        onClick={onToggle}
        ref={btnRef}
      />
      <Drawer
        size="xs"
        isOpen={isOpen}
        onClose={onClose}
        finalFocusRef={btnRef}
        placement="left"
      >
        <DrawerOverlay zIndex="overlay" />
        <DrawerContent zIndex="drawer">
          <DrawerBody p={0}>
            <Sidebar w="full" />
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
}

export default function ThemeToggle(props) {
  const { toggleColorMode, newColorMode } = useColorMode();
  const Icon = useColorModeValue(
    <Moon h={5} color="gray.600" />,
    <Sun h={5} />
  );

  return (
    <IconButton
      data-testid="theme-toggle"
      variant="ghost"
      aria-label={`Toggle ${newColorMode} mode`}
      title={`Activated ${newColorMode} mode`}
      icon={Icon}
      onClick={toggleColorMode}
      {...props}
    />
  );
}

Header = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <Flex
      as="header"
      backgroundColor="white"
      paddingX={["1rem", "4.5rem"]}
      paddingY={[1,6]}
      justifyContent="space-between"
      alignItems="center"
    >
      <GatsbyLink to="/">
        <Code4Covid width={200}/>
      </GatsbyLink>
      <IconButton
        display={["block", "block", "block", "block", "none"]} // Match this with the inverse of the buttons stack to use Chakra breakpoints
        variant="ghost"
        size="lg"
        aria-label="Navigation Button"
        icon="menu"
        onClick={onOpen}
      />
      <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
        <DrawerOverlay />
        <DarkMode>
          <DrawerContent backgroundColor="gray.700" color="white">
            <DrawerCloseButton />
            <DrawerBody>
              <Stack as="nav" direction="column" marginTop={16} spacing={8}>
                {PAGES.map(page => (
                  <NavLink
                    key={page.children + page.to}
                    fontSize={28}
                    color="white"
                    css={css`
                      [aria-current]& {
                        font-weight: 700;
                      }
                    `}
                    {...page}
                  />
                ))}
                <Link textAlign="center" href="https://twitter.com/code4covid" isExternal>
                  <TwitterIcon width="40px" style={{ display: "inline-block" }} />
                </Link>
              </Stack>
            </DrawerBody>
          </DrawerContent>
        </DarkMode>
      </Drawer>
    </Flex>
  )
}

AboutModal = () => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = useRef()

  return (
    <Box flex="none" display={["none", null, "block"]} ml="0.75rem">
      <IconButton
        size="lg"
        icon="info"
        isRound
        variant="outline"
        bg="white"
        shadow="lg"
        border="0.125rem solid"
        borderColor="transparent"
        _focus={{
          borderColor: "rgba(236,97,14, 1)",
          color: "rgba(236,97,14, 1)"
        }}
        onClick={onOpen}
        ref={btnRef}
      />

      <SlideIn in={isOpen}>
        {styles => (
          <Modal 
            finalFocusRef={btnRef}
            onClose={onClose}
            scrollBehavior="inside"
            isOpen={true}
            size={["calc(100% - 2rem)", null, "2xl"]}
          >
            <ModalOverlay opacity={styles.opacity} zIndex={99999999} />
            <ModalContent borderRadius="lg" {...styles} zIndex={99999999}>
              <ModalCloseButton />
              <ModalBody py="3rem" px="2.5rem">
                <AboutContent />
              </ModalBody>
            </ModalContent>
          </Modal>
        )}
      </SlideIn>

    </Box>
  )
}

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>
    </>
  )
}

Map = ({ points }) => {

  const currentDataType = useDataTypeStore(state => state.currentDataType)

  const updateCenter = useStore(state => state.updateCenter)
  const mapFocus = useMapFocus(state => state.mapFocus)
  const mapZoom = useMapFocus(state => state.mapZoom)
  const updateMapFocus = useMapFocus(state => state.updateMapFocus)
  const currentDate = useDataDate(state => state.currentDate)
  const [loadedMap, setLoadedMap] = useState(false)

  const mapRef = useRef()
  const Leaflet = useRef()
  const sceneRef = useRef()
  const leafletMap = useRef()

  useEffect(() => {
    if (typeof window === undefined || !points.length) return
    const L = require("leaflet")
    const Tangram = require("tangram")
    Leaflet.current = L

    if (leafletMap.current) {
      leafletMap.current.remove()
      leafletMap.current = null
      sceneRef.current = null
    }

    const popup = L.popup({ autoPan: false })

    const map = L.map(mapRef.current, {
      zoomControl: false,
      minZoom: 3,
      maxZoom: 8,
      scrollWheelZoom: true,
    })

    const layer = Tangram.leafletLayer({
      scene,
      attribution: "Loading map",
      webGLContextOptions: {
        antialias: false,
      },
      events: {
        click: selection => {
          if (!selection.feature || (!selection.feature && !selection.feature.properties)) {
            return
          }
          const { lat, long } = selection.feature.properties
          updateMapFocus([lat, long], selection.feature.properties)
        },
        hover: selection => {
          if (!selection.feature || (!selection.feature && !selection.feature.properties)) {
            mapRef.current.style.cursor = "default"
            map.closePopup()
            return
          }

          mapRef.current.style.cursor = "pointer"

          const coords = selection.leaflet_event.latlng
          const sceneDate = sceneRef.current.config.global.currentDate
          const sceneDataType = sceneRef.current.config.global.currentDataType
          const { prefix } = sceneRef.current.config.global

          const num = formatThousand(selection.feature.properties[prefix + sceneDate])

          const isChina = ["Mainland China", "Macau", "Hong Kong", "Taiwan"].includes(selection.feature.properties.countryregion)

          const label = sceneDataType === 0
            ? "Confirmed cases" : sceneDataType === 1 ? "Deaths" : "Recoveries"

          const value = num
            ? `
              <div>
                <div class="tt-address">
                  <p class="tt-zip-code-value">
                    ${selection.feature.properties.provincestate || selection.feature.properties.countryregion}
                  </p>
                  ${
                    selection.feature.properties.provincestate ? `
                      <p class="tt-zip-code-title">
                        ${isChina ? "China" : selection.feature.properties.countryregion}
                      </p>` : ""
                  }
                </div>
                <p class="tt-median-rent-title">${label}</p>
                <p class="tt-median-rent-value">
                  <span>${num}</span>
                </p>
              </div>
            `
            : ""

          popup
            .setLatLng([coords.lat, coords.lng])
            .setContent(`${value}`)
            .openOn(map)

        }
      },
    })

    map.on("move", () => {
      const { lat, lng } = map.getCenter()
      updateCenter([-lng, -lat])
    })

    layer.addTo(map)
    sceneRef.current = layer.scene    
    map.setView([30, 110], 4)
    leafletMap.current = map

    const geojsonData = {
      type: "FeatureCollection",
      features: points,
    }

    const ext = extent(points, d => {
      const headers = d.properties.headers.split(";;")
      const lastDate = headers[headers.length - 1]
      return parseInt(d.properties[lastDate])
    })

    layer.scene.subscribe({
      load: () => {
        layer.scene.config.global.max = ext[1]
        layer.scene.updateConfig()
        layer.scene.setDataSource("dynamic_data", {
          type: "GeoJSON",
          data: geojsonData,
        })
        setLoadedMap(true)
      },
    })

  }, [points])

  const cf = sceneRef.current && sceneRef.current.config

  useEffect(() => {
    if (!mapFocus) return
    leafletMap.current.flyTo(mapFocus, mapZoom || 5, { easeLinearity: 0.01, duration: 1.5 })
  }, [mapFocus, mapZoom])

  useEffect(() => {
    if (!currentDate || !sceneRef.current || !sceneRef.current.config) return
    if (currentDate === sceneRef.current.config.global.currentDate) return
    sceneRef.current.config.global.currentDate = currentDate
    sceneRef.current.updateConfig()
  }, [currentDate, cf])

  useEffect(() => {
    if (!sceneRef.current || !sceneRef.current.config) return
    sceneRef.current.config.global.currentDataType = currentDataType || 0
    sceneRef.current.config.global.prefix = currentDataType === 0
      ? ""
      : currentDataType === 1
        ? "deaths_"
        : "recoveries_"
    sceneRef.current.updateConfig()
  }, [currentDataType, cf])

  const handleZoomIn = () => {
    leafletMap.current.zoomIn()
  }

  const handleZoomOut = () => {
    leafletMap.current.zoomOut()
  }

  return (
    <>
      <Box
        ref={mapRef}
        top="0"
        left={[0, null, "25rem", "30rem"]}
        right="0"
        bottom="0"
        style={{ position: "fixed", transition: "opacity 500ms", opacity: loadedMap ? 1 : 0 }}
      />

      {
        !loadedMap ? (
          <Box
            position="fixed"
            top="50%"
            left={["50%", null, "calc((100% + 25rem) / 2)", "calc((100% + 30rem) / 2)"]}
            zIndex={9999}
            transform="translateX(-50%)"
          >
            <Icon
              name="spinner"
              size="2.5rem"
              color="gray.500"
              animation={`${rotate} 1s linear infinite`}
              mx="auto"
              display="block"
            />
            <Text textAlign="center" color="gray.500" mx="auto" fontSize="sm" mt="0.75rem">
              { "Loading map" }
            </Text>
          </Box>
        ) : null
      }
      
      <Box
        position="fixed"
        bottom={["6rem", "8rem", "5rem"]}
        left={["auto", null, "26.5rem", "32.5rem"]}
        right={["2.75rem", "3.75rem", "auto"]}
        zIndex={2}
        pointerEvents={["none", null, "all"]}
      >

        <Stack spacing="0.5rem" alignItems="center" mb={["6.5rem", null, "1.25rem"]}>
          <Text color="gray.600" width="2.5rem" textAlign="center" fontWeight={700} fontSize="xs" lineHeight="shorter">
            { "more cases" }
          </Text>
          <Box width="2.5rem" height="2.5rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
          <Box width="1.25rem" height="1.25rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
          <Box width="0.625rem" height="0.625rem" border="0.125rem solid" borderColor="gray.500" borderRadius="100%" />
          <Text color="gray.600" width="2.5rem" textAlign="center" fontWeight={700} fontSize="xs" lineHeight="shorter">
            { "fewer cases" }
          </Text>
        </Stack>

        <Stack display={["none", null, "block"]} spacing="1.25rem">
          <Flex justifyContent="center">
            <Flex alignItems="center" direction="column" shadow="lg" borderRadius="md">
              <IconButton 
                onClick={handleZoomIn}
                icon="add" bg="white"
                borderRadius="0.25rem 0.25rem 0 0"
                border="0.0625rem solid"
                borderColor="transparent"
                  _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" }}
              />
              <Box height="1px" width="100%" bg="gray.100" />
              <IconButton 
                onClick={handleZoomOut}
                icon="minus"
                bg="white"
                borderRadius="0 0 0.25rem 0.25rem"
                border="0.0625rem solid"
                borderColor="transparent"
                  _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" }}
              />
            </Flex>
          </Flex>
        </Stack>
      </Box>
    </>
  )
}