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