All files / src/components/elements CombinedSearchBar.tsx

0% Statements 0/28
0% Branches 0/16
0% Functions 0/7
0% Lines 0/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107                                                                                                                                                                                                                     
import { useState } from "react";
import styled from "styled-components";
import { Box, Button, Input, Flex } from "rimble-ui";
import { getNftIdentifiersFromUrl } from "../../utils";
import { baseColors, colors } from "../../themes";
import { DropDown } from "./DropDown/DropDown";
import { SearchIcon } from "./Icons";
 
const StyledWrap = styled(Flex)`
  &:focus-within {
    border-color: ${colors.primary.base};
  }
`;
 
const StyledInput = styled(Input)`
  border-radius: 0 4px 4px 0;
  border: none !important;
  box-shadow: none !important;
  padding-right: 40px;
  width: 100%;
`;
 
export interface CombinedSearchBarProps {
  placeholderText?: string;
  onSearch(value: string): void;
  onNftVerify(contractAddress: string, tokenID: string): void;
  onVcVerify(vc: string): void;
}
 
const options = [
  { name: "Search", value: "1" },
  { name: "NFTs", value: "2" },
  { name: "VCs", value: "3" },
];
 
export const CombinedSearchBar: React.FunctionComponent<CombinedSearchBarProps> = (props) => {
  const urlParams = new URLSearchParams(window.location.search);
  const contract = urlParams.get("contract");
  const vc = urlParams.get("vc");
  let startingState;
  if (contract) {
    startingState = "2";
  } else if (vc) {
    startingState = "3";
  } else {
    startingState = "1";
  }
 
  const [dropDownState, setDropDownState] = useState<string>(startingState);
  const [search, setSearch] = useState<string>("");
 
  function onKeyDown(event: any) {
    if (event.code === "Enter") {
      doSearch();
    }
  }
 
  function doSearch() {
    if (dropDownState === "1") {
      props.onSearch(search);
    } else if (dropDownState === "2") {
      const nftIdentifiers = getNftIdentifiersFromUrl(search);
      props.onNftVerify(nftIdentifiers.contractAddress, nftIdentifiers.tokenId);
    } else {
      props.onVcVerify(search);
    }
  }
 
  return (
    <StyledWrap bg={baseColors.white} border={4} borderRadius={1} position="relative" width="100%">
      <Box width="182px">
        <DropDown
          onChange={(value) => {
            setDropDownState(value);
            setSearch("");
          }}
          options={options}
          defaultSelectedValue={startingState}
          combinedSearch
          arrowColor={colors.primary.base}
        />
      </Box>
      <Box bg={colors.lightGray} my={2} width="1px" />
      <Flex flexGrow="1">
        <StyledInput
          onChange={(event: any) => setSearch(event.target.value)}
          onKeyDown={(event: any) => onKeyDown(event)}
          placeholder={
            props.placeholderText ||
            (dropDownState === "1"
              ? "Domains & DIDs"
              : dropDownState === "2"
              ? "Search by NFT URL"
              : "Enter Verifiable Credential as JWT")
          }
          required
          type="text"
          value={search}
        />
        <Button.Text onClick={() => doSearch()} style={{ position: "absolute", top: 0, right: 0, zIndex: 9 }}>
          <SearchIcon size="20px" />
        </Button.Text>
      </Flex>
    </StyledWrap>
  );
};