@chakra-ui/icons#SearchIcon TypeScript Examples

function ImagesPanel() {
  return (
    <>
      <div style={{ padding: '1rem 2rem' }}>
        <InputGroup>
          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.300" />} />
          <Input style={{ background: '#fff' }} type="tel" placeholder="Search images" />
        </InputGroup>
      </div>
    </>
  )
}

function MusicPanel() {
  return (
    <>
      <div style={{ padding: '1rem 2rem' }}>
        <InputGroup>
          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.300" />} />
          <Input style={{ background: '#fff' }} type="tel" placeholder="Search music" />
        </InputGroup>
      </div>
    </>
  )
}

function TemplatesPanel() {
  return (
    <>
      <div style={{ padding: '1rem 2rem' }}>
        <InputGroup>
          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.300" />} />
          <Input style={{ background: '#fff' }} type="tel" placeholder="Search templates" />
        </InputGroup>
      </div>
    </>
  )
}

function VideosPanel() {
  return (
    <>
      <div style={{ padding: '1rem 2rem' }}>
        <InputGroup>
          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.300" />} />
          <Input style={{ background: '#fff' }} type="tel" placeholder="Search videos" />
        </InputGroup>
      </div>
    </>
  )
}

export default function TokenSearch({
  onChange,
}: {
  onChange: (value: string) => void;
}) {
  const [val, setVal] = useState("");

  // run onChange on value change
  useEffect(() => {
    onChange(val);
  }, [val, onChange]);

  const { t } = useTranslation();

  return (
    <Box>
      <InputGroup>
        <InputLeftElement
          pointerEvents="none"
          children={<SearchIcon color="#757575" />}
        />
        <Input
          variant="filled"
          value={val}
          color="#757575"
          onChange={({ target: { value } }) => setVal(value)}
          placeholder={t("Search Assets")}
          _placeholder={{ color: "gray.500", fontWeight: "bold" }}
          _focus={{ color: "#fff", background: "transparent" }}
        />
        {/* button to clear search */}
        {val === "" ? null : (
          <InputRightElement
            role="button"
            aria-label="Clear search"
            title="Clear search"
            cursor="pointer"
            onClick={() => setVal("")}
            children={<CloseIcon color="#757575" boxSize="12px" />}
          />
        )}
      </InputGroup>
    </Box>
  );
}

function ObjectsPanel() {
  const [search, setSearch] = useState('')
  const [objects, setObjects] = useState<any[]>([])
  const [value] = useDebounce(search, 1000)
  const { canvas } = useCanvasContext()

  useEffect(() => {
    getImages('love')
      .then((data: any) => setObjects(data))
      .catch(console.log)
  }, [])

  useEffect(() => {
    if (value) {
      getImages(value)
        .then((data: any) => setObjects(data))
        .catch(console.log)
    }
  }, [value])
  const renderItems = () => {
    return objects.map(obj => {
      return (
        <div className="object-item-container" onClick={() => downloadImage(obj.uuid)} key={obj.uuid}>
          <img className="object-item" src={obj.urls.thumb} />
        </div>
      )
    })
  }
  const downloadImage = uuid => {
    getImage(uuid)
      .then(url => {
        fabric.loadSVGFromURL(url, (objects, options) => {
          const object = fabric.util.groupSVGElements(objects, options)
          //@ts-ignore
          const workarea = canvas.getObjects().find(obj => obj.id === 'workarea')
          canvas.add(object)
          object.scaleToHeight(300)
          object.center()
          object.clipPath = workarea
          canvas.renderAll()
        })
      })
      .catch(console.log)
  }

  return (
    <>
      <div style={{ padding: '1rem 2rem' }}>
        <InputGroup>
          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.300" />} />
          <Input
            onChange={e => setSearch(e.target.value)}
            style={{ background: '#fff' }}
            type="tel"
            placeholder="Search objects"
          />
        </InputGroup>
      </div>
      <div style={{ padding: '0 2rem' }} className="objects-list">
        {renderItems()}
      </div>
    </>
  )
}

function TextPanel() {
  const { addObject } = useCoreHandler()
  const addHeading = () => {
    const options = {
      type: 'text',
      text: 'Add a heading',
      fontSize: 32,
      width: 320,
      fontWeight: 700,
      fontFamily: 'Lexend',
      textAlign: 'center',
    }
    addObject(options)
  }

  const addSubheading = () => {
    const options = {
      type: 'text',
      text: 'Add a subheading',
      fontSize: 24,
      width: 320,
      fontWeight: 500,
      fontFamily: 'Lexend',
      textAlign: 'center',
    }
    addObject(options)
  }

  const addTextBody = () => {
    const options = {
      type: 'text',
      text: 'Add a little bit of body text',
      fontSize: 18,
      width: 320,
      fontWeight: 300,
      fontFamily: 'Lexend',
      textAlign: 'center',
    }
    addObject(options)
  }
  return (
    <>
      <div className="panel-text" style={{ padding: '1rem 1.5rem' }}>
        <InputGroup>
          <InputLeftElement pointerEvents="none" children={<SearchIcon color="gray.600" />} />
          <Input style={{ background: '#fff' }} type="tel" placeholder="Search text" />
        </InputGroup>
        <div className="label">Click text to add to page</div>
        <div className="add-text-items">
          <div onClick={addHeading} className="add-text-item add-heading">
            Add a heading
          </div>
          <div onClick={addSubheading} className="add-text-item add-subheading">
            Add a subheading
          </div>
          <div onClick={addTextBody} className="add-text-item add-body-text">
            Add a litle bit of body text
          </div>
        </div>
      </div>
    </>
  )
}

TokenSelect = ({
  onSelectToken: _onSelectToken,
  onClose,
  mode,
}: {
  mode: Mode;
  onClose: () => any;
  onSelectToken: (symbol: string) => any;
}) => {
  const [searchNeedle, setSearchNeedle] = useState("");

  const poolType = usePoolType();

  const noSlippageCurrencies = useNoSlippageCurrencies(poolType);

  const tokenKeys = (() => {
    if (poolType === Pool.ETH) {
      return ["ETH"];
    }

    return searchNeedle === ""
      ? Object.keys(tokens).sort((a, b) => {
          // First items shown last, last items shown at the top!
          const priorityCurrencies = [
            "sUSD",
            "WETH",
            "ETH",
            "DAI",
            "mUSD",
            "USDT",
            "USDC",
          ];

          if (priorityCurrencies.indexOf(a) < priorityCurrencies.indexOf(b)) {
            return 1;
          }
          if (priorityCurrencies.indexOf(a) > priorityCurrencies.indexOf(b)) {
            return -1;
          }

          return 0;
        })
      : Object.keys(tokens).filter((symbol) =>
          symbol.toLowerCase().startsWith(searchNeedle.toLowerCase())
        );
  })();

  const { t } = useTranslation();

  return (
    <Fade>
      <ModalTitleWithCloseButton text={t("Select A Token")} onClose={onClose} />
      <ModalDivider />
      <Box px={4}>
        <InputGroup mb={2}>
          <InputLeftElement
            ml={-1}
            children={<SearchIcon color="gray.300" />}
          />
          <Input
            variant="flushed"
            roundedLeft="0"
            placeholder={t("Try searching for 'USDC'")}
            focusBorderColor="#FFFFFF"
            value={searchNeedle}
            onChange={(event) => setSearchNeedle(event.target.value)}
          />
        </InputGroup>
      </Box>

      <Box px={4}>
        No Slippage:{" "}
        <b>
          {!noSlippageCurrencies
            ? " Loading..."
            : noSlippageCurrencies.map((token: string, index: number) => {
                return (
                  token +
                  (index === (noSlippageCurrencies as string[]).length - 1
                    ? ""
                    : ", ")
                );
              })}
        </b>
      </Box>

      <Box
        pt={2}
        px={4}
        width="100%"
        height={{
          md: poolHasDivergenceRisk(poolType) ? "182px" : "157px",
          base: poolHasDivergenceRisk(poolType) ? "210px" : "170px",
        }}
      >
        <TokenList
          mode={mode}
          tokenKeys={tokenKeys}
          onClick={(symbol) => {
            _onSelectToken(symbol);
            onClose();
          }}
        />
      </Box>
    </Fade>
  );
}

Menu = () => {
  const [searchTerm, setSearchTerm] = useState('')

  return (
    <DarkMode>
      <Box
        maxH="calc(100vh - 3rem)"
        overflowY="auto"
        overflowX="visible"
        boxShadow="xl"
        flex="0 0 14rem"
        p={5}
        m={0}
        as="menu"
        backgroundColor="#2e3748"
        width="15rem"
      >
        <InputGroup size="sm" mb={4}>
          <Input
            value={searchTerm}
            color="gray.300"
            placeholder="Search component…"
            onChange={(event: ChangeEvent<HTMLInputElement>) =>
              setSearchTerm(event.target.value)
            }
            borderColor="rgba(255, 255, 255, 0.04)"
            bg="rgba(255, 255, 255, 0.06)"
            _hover={{
              borderColor: 'rgba(255, 255, 255, 0.08)',
            }}
            zIndex={0}
          />
          <InputRightElement zIndex={1}>
            {searchTerm ? (
              <IconButton
                color="gray.300"
                aria-label="clear"
                icon={<CloseIcon path="" />}
                size="xs"
                onClick={() => setSearchTerm('')}
              />
            ) : (
              <SearchIcon path="" color="gray.300" />
            )}
          </InputRightElement>
        </InputGroup>

        {(Object.keys(menuItems) as ComponentType[])
          .filter(c => c.toLowerCase().includes(searchTerm.toLowerCase()))
          .map(name => {
            const { children, soon } = menuItems[name] as MenuItem

            if (children) {
              const elements = Object.keys(children).map(childName => (
                <DragItem
                  isChild
                  key={childName}
                  label={childName}
                  type={childName as any}
                  id={childName as any}
                  rootParentType={menuItems[name]?.rootParentType || name}
                >
                  {childName}
                </DragItem>
              ))

              return [
                <DragItem
                  isMeta
                  soon={soon}
                  key={`${name}Meta`}
                  label={name}
                  type={`${name}Meta` as any}
                  id={`${name}Meta` as any}
                  rootParentType={menuItems[name]?.rootParentType || name}
                >
                  {name}
                </DragItem>,
                ...elements,
              ]
            }

            return (
              <DragItem
                soon={soon}
                key={name}
                label={name}
                type={name as any}
                id={name as any}
                rootParentType={menuItems[name]?.rootParentType || name}
              >
                {name}
              </DragItem>
            )
          })}
      </Box>
    </DarkMode>
  )
}