react-feather#Check JavaScript Examples

The following examples show how to use react-feather#Check. 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: Transaction.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
export default function Transaction({ hash, pending }) {
  const { chainId } = useWeb3React()

  return (
    <TransactionWrapper key={hash}>
      <TransactionStatusWrapper>
        <Link href={getBlockscoutLink(chainId, hash, 'transaction')}>{hash} ↗ </Link>
        <Copy toCopy={hash} />
      </TransactionStatusWrapper>
      {pending ? (
        <ButtonWrapper pending={pending}>
          <Link href={getBlockscoutLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Spinner src={Circle} id="pending" />
              <TransactionStatusText>Pending</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      ) : (
        <ButtonWrapper pending={pending}>
          <Link href={getBlockscoutLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Check size="16" />
              <TransactionStatusText>Confirmed</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      )}
    </TransactionWrapper>
  )
}
Example #2
Source File: Info.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
export default function Info({ hash, pending }) {
  const { chainId } = useWeb3React()

  return (
    <TransactionWrapper key={hash}>
      <TransactionStatusWrapper>
        <Link href={getEtherscanLink(chainId, hash, 'transaction')}>{hash} ↗ </Link>
        <Copy />
      </TransactionStatusWrapper>
      {pending ? (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Spinner src={Circle} alt="loader" />
              <TransactionStatusText>Pending</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      ) : (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Check size="16" />
              <TransactionStatusText>Confirmed</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      )}
    </TransactionWrapper>
  )
}
Example #3
Source File: Transaction.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
export default function Transaction({ hash, pending }) {
  const { chainId } = useWeb3React()

  return (
    <TransactionWrapper key={hash}>
      <TransactionStatusWrapper>
        <Link href={getEtherscanLink(chainId, hash, 'transaction')}>{hash} ↗ </Link>
        <Copy toCopy={hash} />
      </TransactionStatusWrapper>
      {pending ? (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Spinner src={Circle} id="pending" />
              <TransactionStatusText>Pending</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      ) : (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Check size="16" />
              <TransactionStatusText>Confirmed</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      )}
    </TransactionWrapper>
  )
}
Example #4
Source File: Transaction.js    From swap-frontend with GNU General Public License v3.0 6 votes vote down vote up 
export default function Transaction({ hash, pending }) {
  const { chainId } = useWeb3React()

  return (
    <TransactionWrapper key={hash}>
      <TransactionStatusWrapper>
        <Link href={getEtherscanLink(chainId, hash, 'transaction')}>{hash} ↗ </Link>
        <Copy toCopy={hash} />
      </TransactionStatusWrapper>
      {pending ? (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Spinner src={Circle} id="pending" />
              <TransactionStatusText>Pending</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      ) : (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Check size="16" />
              <TransactionStatusText>Confirmed</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      )}
    </TransactionWrapper>
  )
}
Example #5
Source File: Info.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
export default function Info({ hash, pending }) {
  const { chainId } = useWeb3React()

  return (
    <TransactionWrapper key={hash}>
      <TransactionStatusWrapper>
        <Link href={getEtherscanLink(chainId, hash, 'transaction')}>{hash} ↗ </Link>
        <Copy />
      </TransactionStatusWrapper>
      {pending ? (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Spinner src={Circle} alt="loader" />
              <TransactionStatusText>Pending</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      ) : (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Check size="16" />
              <TransactionStatusText>Confirmed</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      )}
    </TransactionWrapper>
  )
}
Example #6
Source File: Transaction.js    From pine-interface with GNU General Public License v3.0 6 votes vote down vote up 
export default function Transaction({ hash, pending }) {
  const { chainId } = useWeb3React()

  return (
    <TransactionWrapper key={hash}>
      <TransactionStatusWrapper>
        <Link href={getEtherscanLink(chainId, hash, 'transaction')}>{hash} ↗ </Link>
        <Copy toCopy={hash} />
      </TransactionStatusWrapper>
      {pending ? (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Spinner src={Circle} id="pending" />
              <TransactionStatusText>Pending</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      ) : (
        <ButtonWrapper pending={pending}>
          <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
            <TransactionState pending={pending}>
              <Check size="16" />
              <TransactionStatusText>Confirmed</TransactionStatusText>
            </TransactionState>
          </Link>
        </ButtonWrapper>
      )}
    </TransactionWrapper>
  )
}
Example #7
Source File: DropDownItem.jsx    From vertx-web-site.github.io with Apache License 2.0 6 votes vote down vote up 
DropDownItem = (({ active, onClick, href, hasActiveSiblings = false, children }) => {
  let content = (
    <li className={classNames("dropdown-item", { active, "has-active-siblings": hasActiveSiblings })}
        onClick={onClick}>
      {active && <span className="dropdown-check-icon"><Check width="16" /></span>}{children}
      <style jsx>{styles}</style>
    </li>
  )

  if (href) {
    return (
      <Link href={href}><a>{content}</a></Link>
    )
  } else {
    return content
  }
})
Example #8
Source File: CustomTable.jsx    From CRM with Apache License 2.0 5 votes vote down vote up 
CustomTable = ({ columns, data, title }) => {
  const tableIcons = {
    Add: forwardRef((props, ref) => <Plus {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <X {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <Trash {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => (
      <ChevronRight {...props} ref={ref} />
    )),
    Edit: forwardRef((props, ref) => <Edit2 {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <Save {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => (
      <Filter {...props} ref={ref} strokeWidth={1.5} width={15} />
    )),
    FirstPage: forwardRef((props, ref) => (
      <ChevronsLeft {...props} ref={ref} />
    )),
    LastPage: forwardRef((props, ref) => (
      <ChevronsRight {...props} ref={ref} />
    )),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => (
      <ChevronLeft {...props} ref={ref} />
    )),
    ResetSearch: forwardRef((props, ref) => <X {...props} ref={ref} />),
    Search: forwardRef((props, ref) => (
      <Search {...props} ref={ref} strokeWidth={1.5} width={18} />
    )),
    SortArrow: forwardRef((props, ref) => (
      <ChevronsDown {...props} ref={ref} />
    )),
    ThirdStateCheck: forwardRef((props, ref) => (
      <XCircle {...props} ref={ref} />
    )),
    ViewColumn: forwardRef((props, ref) => <Eye {...props} ref={ref} />),
  };

  return (
    <React.Fragment>
      <MaterialTable
        icons={tableIcons}
        columns={columns}
        data={data}
        title={title}
        options={{
          filtering: true,
          sorting: true,
          grouping: true,
          exportButton: true,
          headerStyle: {
            backgroundColor: "#3358f4",
            background: "linear-gradient(90deg, #3358f4, #1d8cf8)",
            color: "#FFF",
            backgroundRepeat: "no-repeat",
            textTransform: "uppercase",
          },
          rowStyle: (rowData) => ({
            backgroundColor: "rgb(0,0,0,0)",
          }),
        }}
      />
    </React.Fragment>
  );
}
Example #9
Source File: map-selector.js    From covid19-dashboard with MIT License 4 votes vote down vote up 
MapSelector = ({selectedMapId, maps, selectMap, selectStat}) => {
  const selectedMap = maps.find(m => m.name === selectedMapId)

  const [isOpen, setIsOpen] = useState(false)

  const handleMap = useCallback(map => {
    const {name, property} = map
    selectStat(property)
    selectMap(name)
    setIsOpen(false)
  }, [selectMap, selectStat])

  const handleClick = useCallback(event => {
    event.stopPropagation()
    setIsOpen(!isOpen)
  }, [isOpen])

  return (
    <div className='switch'>
      <div className='header' onClick={handleClick}>
        <span>{selectedMap.name}</span> {isOpen ? <ChevronUp /> : <ChevronDown />}
      </div>
      {isOpen && (
        <div className='menu'>
          {maps.map(map => (
            <div
              key={map.name}
              className={`menu-item ${selectedMapId === map.name ? 'selected' : ''}`}
              onClick={() => handleMap(map)}
            >
              <span>{map.name}</span> {map.name === selectedMapId && <Check />}
            </div>
          ))}
        </div>
      )}

      <style jsx>{`
        .switch {
          display: flex;
          flex-direction: column;
          position: relative;
        }

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.5em;
        }

        .switch:hover {
          cursor: pointer;
        }

        .menu {
          position: absolute;
          display: flex;
          flex-direction: column;
          width: 100%;
          top: 100%;
          background-color: #000000aa;
        }

        .menu-item {
          display: flex;
          align-items: center;
          padding: 0.2em 0.5em;
        }

        .menu-item:hover {
          background-color: ${colors.lightGrey};
          color: #000;
        }

        .menu-item.selected:hover {
          background-color: transparent;
          cursor: initial;
        }

        span {
          margin-right: 0.4em;
        }
        `}</style>
    </div>
  )
}
Example #10
Source File: Landing.js    From popper.js.org with MIT License 4 votes vote down vote up 
Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query LandingTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <MDXProvider components={components}>
      <SEO title="Home" />
      <Header siteTitle={data.site.siteMetadata.title} />
      <InstallBar />
      <CarbonAds
        css={css`
          ${media.lg} {
            position: absolute;
            top: 0;
            right: 15px;
            .carbonplaceholder,
            #carbonads {
              background-color: #ffffff4f;
              color: #632f45;
            }
          }
        `}
      />

      <Container maxWidth={1400}>
        <PlacementExample />
        <PreventOverflowExample />
        <FlipExample />
      </Container>

      <Section>
        <Container>
          <Crop size={50} stroke="#ffe69d" />
          <Heading>In a nutshell, Popper:</Heading>
          <Ul>
            <Li>
              <Check />
              <strong>
                Places your tooltip or popover relative to the reference
              </strong>{' '}
              taking into account their sizes, and positions its arrow centered
              to the reference.
            </Li>
            <Li>
              <Check />
              <strong>
                Takes into account the many different contexts it can live in
              </strong>{' '}
              relative to the reference (different offsetParents, different or
              nested scrolling containers).
            </Li>
            <Li>
              <Check />
              <strong>
                Keeps your tooltip or popover in view as best as possible
              </strong>
              . It prevents it from being clipped or cut off (overflow
              prevention) and changes the placement if the original does not fit
              (flipping).
            </Li>
          </Ul>
        </Container>
      </Section>

      <Section>
        <Container>
          <CloudLightning size={50} stroke="#ffe69d" />
          <Heading>Our Sponsors</Heading>
          <p>
            Popper is proudly sponsored by the following organizations,
            <br />
            join them on{' '}
            <ExternalLinkStyled to="https://opencollective.com/floating-ui">
              Open Collective
            </ExternalLinkStyled>{' '}
            to support us.
          </p>

          <Sponsors />
        </Container>
      </Section>

      <Section>
        <Container>
          <Layers size={50} stroke="#ffe69d" />
          <Heading>Granular configuration with sensible defaults</Heading>
          <p>
            Popper aims to "just work" without you needing to configure much. Of
            course, there are cases where you need to configure Popper beyond
            its defaults – in these cases, Popper shines by offering high
            granularity of configuration to fine-tune the position or behavior
            of your popper.
          </p>
          <p>
            You can extend Popper with your own modifiers (or plugins) to make
            your popper work for you, no matter how advanced the scenario.
          </p>
        </Container>
      </Section>

      <Section>
        <Container>
          <Check size={50} stroke="#ffe69d" />
          <Heading>No compromises</Heading>
          <Ul>
            <Li>
              <Check />
              <strong>No detachment</strong>. Position updates take less than a
              millisecond on average devices. Popper doesn't debounce the
              positioning updates of the tooltip to the point where it will{' '}
              <em>ever</em> detach from its reference, but this doesn't come at
              the cost of poor performance.
            </Li>
            <Li>
              <Check />
              <strong>
                You don't have to change the DOM context of your tooltip or
                popover element
              </strong>
              ; it will work no matter where your popper and reference elements
              live, even in the most complex scenarios like nested scrolling
              containers or alternative offsetParent contexts.
            </Li>
            <Li>
              <Check />
              <strong>Still lightweight</strong>. Handling all of this
              complexity is still done in an efficient manner. The base Popper
              is only 2 kB minzipped.
            </Li>
          </Ul>
        </Container>
      </Section>

      <Section>
        <Container>
          <Heart size={50} stroke="#ffe69d" />
          <Heading>Free open-source, used by millions</Heading>
          <p>
            Popper has billions of hits across the web, is trusted by millions
            of developers in production, and used in popular libraries like
            Bootstrap and Material UI.
          </p>
          <Button
            href="https://opencollective.com/floating-ui"
            target="_blank"
            rel="noopener noreferrer"
          >
            Support us
          </Button>
          <UsedByContainer>
            {USED_BY_LIST.map(({ logo, label, url }) => (
              <UsedByLogo href={url} src={logo} alt={label} key={url} />
            ))}
          </UsedByContainer>
        </Container>
      </Section>

      <Section>
        <Container>
          <ChevronRight size={50} stroke="#ffe69d" />
          <Heading>Ready to start?</Heading>
          <p>
            Start reading{' '}
            <LinkStyled to="/docs/">Popper's documentation</LinkStyled>!
          </p>
        </Container>
      </Section>

      <Footer>
        <Container>
          <p>© {new Date().getFullYear()} MIT License</p>
        </Container>
      </Footer>
    </MDXProvider>
  );
}