react-bootstrap#Popover JavaScript Examples

The following examples show how to use react-bootstrap#Popover. 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: DeckStatus.jsx    From ashteki with GNU Affero General Public License v3.0 6 votes vote down vote up
DeckStatus = ({ status }) => {
    const { t } = useTranslation();

    let statusName;
    let className = classNames('deck-status', {
        invalid: !status.basicRules || !status.hasConjurations || !status.tenDice || !status.uniques,
        conjurations: !status.hasConjurations,
        valid: status.basicRules && status.hasConjurations && status.tenDice && status.uniques
    });

    if (!status.basicRules || !status.hasConjurations || !status.tenDice || !status.uniques) {
        statusName = t('Invalid');
    } else {
        statusName = t('Valid');
    }

    const popover = (
        <Popover id='deck-status-popover'>
            <Popover.Content>
                <div>
                    <DeckStatusSummary status={status} />
                </div>
            </Popover.Content>
        </Popover>
    );

    return (
        <OverlayTrigger placement='right' overlay={popover}>
            <span className={className}>{statusName}</span>
        </OverlayTrigger>
    );
}
Example #2
Source File: footer.js    From stacker.news with MIT License 6 votes vote down vote up
ChatPopover = (
  <Popover>
    <Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
      <a
        href='https://tribes.sphinx.chat/t/stackerzchat' className='text-dark d-inline-flex'
        target='_blank' rel='noreferrer'
      >
        sphinx
      </a>
      <span className='mx-2 text-dark'> \ </span>
      <a
        href='https://t.me/stackernews' className='text-dark d-inline-flex'
        target='_blank' rel='noreferrer'
      >
        telegram
      </a>
    </Popover.Content>
  </Popover>
)
Example #3
Source File: footer.js    From stacker.news with MIT License 6 votes vote down vote up
AnalyticsPopover = (
  <Popover>
    <Popover.Content style={{ fontWeight: 500, fontSize: '.9rem' }}>
      <a
        href='https://plausible.io/stacker.news' className='text-dark d-inline-flex'
        target='_blank' rel='noreferrer'
      >
        visitors
      </a>
      <span className='mx-2 text-dark'> \ </span>
      <Link href='/users/forever' passHref>
        <a className='text-dark d-inline-flex'>
          users
        </a>
      </Link>
    </Popover.Content>
  </Popover>
)
Example #4
Source File: upvote.js    From stacker.news with MIT License 6 votes vote down vote up
UpvotePopover = ({ target, show, handleClose }) => {
  const me = useMe()
  return (
    <Overlay
      show={show}
      target={target}
      placement='right'
    >
      <Popover id='popover-basic'>
        <Popover.Title className='d-flex justify-content-between alert-dismissible' as='h3'>Tipping
          <button type='button' className='close' onClick={handleClose}><span aria-hidden='true'>×</span><span className='sr-only'>Close alert</span></button>
        </Popover.Title>
        <Popover.Content>
          <div className='mb-2'>Press the bolt again to tip {me?.tipDefault || 1} more sat{me?.tipDefault > 1 ? 's' : ''}.</div>
          <div>Repeatedly press the bolt to tip more sats.</div>
        </Popover.Content>
      </Popover>
    </Overlay>
  )
}
Example #5
Source File: upvote.js    From stacker.news with MIT License 6 votes vote down vote up
TipPopover = ({ target, show, handleClose }) => (
  <Overlay
    show={show}
    target={target}
    placement='right'
  >
    <Popover id='popover-basic'>
      <Popover.Title className='d-flex justify-content-between alert-dismissible' as='h3'>Press and hold
        <button type='button' class='close' onClick={handleClose}><span aria-hidden='true'>×</span><span class='sr-only'>Close alert</span></button>
      </Popover.Title>
      <Popover.Content>
        <div className='mb-2'>Press and hold bolt to tip a custom amount.</div>
        <div>As you tip more, the bolt color follows the rainbow.</div>
      </Popover.Content>
    </Popover>
  </Overlay>
)
Example #6
Source File: user-link.js    From tclone with MIT License 5 votes vote down vote up
UserPopover = React.forwardRef(
    ({ popper, user, show, setShow, ...props }, ref) => {
        let dispatch = useDispatch()
        return (<Popover
            className="border-0"
            ref={ref}
            id="user-popover"
            {...props}>
            <Card
                onMouseEnter={() => { setShow(true) }}
                onMouseLeave={() => { setShow(undefined) }}
                className="border p-3 bg-transparent m-0">
                <Row className="d-flex justify-content-between align-items-center">
                    <Figure
                        style={{ height: "65px", width: "65px" }}
                        className="rounded-circle overflow-hidden bg-primary mr-3"
                    >
                        <Figure.Image
                            className="w-100 h-100"
                            src={user.profile_image_url_https}
                        />
                    </Figure>
                    <FollowButton
                        user={user}
                        followUser={() => { dispatch(followUser(user.screen_name)) }}
                        unFollowUser={() => { dispatch(unFollowUser(user.screen_name)) }}
                    />
                </Row>
                <div className="flex flex-column">
                    <b>{user.name}</b>
                    <div className="text-muted mb-2 mt-0">{user.screen_name}</div>
                </div>
                <blockquote>{truncateText(user.description, 7)}</blockquote>
                <Row className="d-flex flex-column">
                    <span className="text-muted">{user.location}</span>
                    <span className="text-muted">Joined {new Date(user.created_at).toDateString()}</span>
                </Row>
                <Row className="d-flex mt-1 mb-2">
                    <em className="mr-2">{numFormatter(user.followers_count)} <span className="text-muted">Followers</span></em>
                    <div className="mr-2">{numFormatter(user.friends_count)} <span className="text-muted">Following</span></div>
                </Row>
            </Card>
        </Popover>)
    }
)
Example #7
Source File: index.js    From Algorithm-Visualizer with MIT License 4 votes vote down vote up
Header = ({
  algorithm,
  animationSpeed,
  device,
  fenceToggle,
  ready,
  resizeGrid,
  resetFences,
  resetVisited,
  run: propRun,
  setAlgorithm,
  speed: propsSpeed,
  setNodeSize: propsNodeSize,
}) => {
  const mobile = device === "mobile";

  const [nodeSize, setNodeSize] = useState(defaultNodeSize);

  const [screenWidth, screenHeight] = getDimensions();
  const defaultDimensions = [
    maxFill(window.innerWidth, nodeSize),
    mobile ? maxFill(window.innerHeight, nodeSize) : screenHeight,
  ];
  const [maxDimensions, setMaxDimensions] = useState(defaultDimensions);

  const [maxWidth, maxHeight] = maxDimensions;

  // form value display
  const [width, setWidth] = useState(Math.ceil(screenWidth));
  const [height, setHeight] = useState(Math.ceil(screenHeight));
  const [speed, setSpeed] = useState(propsSpeed);

  // bootstrap
  const [show, setShow] = useState();
  const [expanded, setExpanded] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const collapseNav = () => setExpanded(false);

  const run = () => {
    if (algorithm === "") alert("Please select an algorithm");

    if (!ready)
      alert(
        "Please choose a start and finish point before running by clicking on the desired squares"
      );

    if (ready && algorithm) {
      if (mobile) {
        setTimeout(() => propRun(), 200);
        collapseNav();
        scroll.scrollToBottom({
          duration: 1200,
          delay: 100,
          smooth: true,
        });
      } else setTimeout(() => propRun(), 200);
    }
  };

  const nodeSizeHandler = (e) => {
    // for display
    setNodeSize(e.target.value);
    // for visualizer to change node inline style
    propsNodeSize(e.target.value);

    let [width, height] = getDimensions(e.target.value);

    resizeGrid([width, height]);
    setMaxDimensions([
      maxFill(window.innerWidth, nodeSize),
      mobile ? maxFill(window.innerWidth, e.target.value) : height,
    ]);
    setWidth(width);
    setHeight(height);
  };

  const gitHubImage = (
    <Image
      src="/images/github.png"
      className={"github-img"}
      alt={"Github"}
      fluid
    />
  );

  const linkedInImage = (
    <Image
      src="/images/linkedin.png"
      alt={"LinkedIn"}
      className={"linkedin-img"}
      fluid
    />
  );

  const algorithmDropdowns = algorithmInfo.map((alg, i) => {
    return (
      <OverlayTrigger
        key={i}
        trigger={["hover", "focus"]}
        placement={mobile ? "bottom" : "right"}
        overlay={
          <Popover id={`${alg.id}-popover`}>
            <Popover.Title as="h2" children={`${alg.name}`} />
            <Popover.Content>
              <p>
                <strong>{`${alg.header}`}</strong>
              </p>
              <p style={{ whiteSpace: "pre-line" }}>{`${alg.content}`}</p>
              <p>{`${alg.footer}`}</p>
            </Popover.Content>
          </Popover>
        }
      >
        <NavDropdown.Item
          id={`set-${alg.id}`}
          onClick={() => setAlgorithm(`${alg.name}`)}
          children={`${alg.name}`}
          active={algorithm === `${alg.name}`}
        />
      </OverlayTrigger>
    );
  });

  const howToUse = (
    <Modal show={show} onHide={handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>How To Use</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Container>
          <Row>
            1. Place a start and end point by clicking on the grid! (You can
            remove them by clicking on them again)
          </Row>
          <Row>
            {" "}
            2. Then place fences by checking "Fence Mode" and clicking on the
            grid.{" "}
          </Row>
          <Row>3. Choose an algorithm via the "Algorithms" dropdown. </Row>
          <Row>4. Run it via pressing the green "Run Algorithm" button. </Row>
          <Row>5. Enjoy!</Row>
        </Container>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleClose}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
  );

  const settings = (
    <DropdownButton title="Settings" size="sm" variant="dark">
      <Container variant="dark">
        <Row>
          <Form variant="dark" inline>
            <Col>
              Node Size
              <FormControl
                size="sm"
                type="text"
                placeholder={`Currently ${nodeSize})`}
                onChange={(e) => {
                  setNodeSize(e.target.value);
                }}
              />
              <Form.Control
                type="range"
                size="sm"
                min="10"
                max="100"
                value={nodeSize}
                onChange={nodeSizeHandler}
                custom
              />
              Grid Size
              <FormControl
                size="sm"
                type="text"
                placeholder={`Width (Currently ${width})`}
                onChange={(e) => {
                  setWidth(e.target.value);
                }}
              />
              <Form.Control
                type="range"
                size="sm"
                min="1"
                max={maxWidth}
                value={width}
                onChange={(e) => {
                  setWidth(e.target.value);
                  resizeGrid([e.target.value, height]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <FormControl
                type="text"
                size="sm"
                placeholder={`Height (Currently ${height})`}
                onChange={(e) => {
                  setHeight(e.target.value);
                }}
                className="Row-Input"
              />
              <Form.Control
                type="range"
                min="1"
                max={maxHeight}
                value={height}
                onChange={(e) => {
                  setHeight(e.target.value);
                  resizeGrid([width, e.target.value]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <Form.Label children={"Draw Square"} />
              <Form.Control
                type="range"
                size="sm"
                min="1"
                max={mobile ? maxWidth : maxHeight}
                value={(height, width)}
                onChange={(e) => {
                  setWidth(e.target.value);
                  setHeight(e.target.value);
                  resizeGrid([e.target.value, e.target.value]);
                }}
                custom
              />
              <NavDropdown.Divider />
              <Form.Label children={"Animation Speed"} />
              <Form.Control
                type="range"
                min="1"
                max="5"
                value={speed}
                onChange={(e) => {
                  setSpeed(e.target.value);
                  animationSpeed(e.target.value);
                }}
                custom
              />
            </Col>
          </Form>
        </Row>
      </Container>
    </DropdownButton>
  );

  const contactInfo = (
    <DropdownButton title=" Contact The Creators" size="sm" id="contact-info">
      <Container>
        <Row>
          <NavDropdown.Item id={"bassel"} children={"Bassel"} />
          <a
            className={"image-link"}
            href="https://github.com/basselalsayed"
            children={gitHubImage}
          />
          <a
            className={"image-link"}
            href="https://www.linkedin.com/in/bsas/"
            children={linkedInImage}
          />
        </Row>
        <Row>
          <NavDropdown.Item id={"tom"} children={"Tom"} />
          <a
            className={"image-link"}
            href="https://github.com/Walker-TW"
            children={gitHubImage}
          />
          <a
            className={"image-link"}
            href="https://www.linkedin.com/in/thomas-w-walker"
            children={linkedInImage}
          />
        </Row>
      </Container>
    </DropdownButton>
  );

  return (
    <Navbar
      expanded={expanded}
      expand="lg"
      bg="dark"
      variant="dark"
      collapseOnSelect
    >
      <Navbar.Brand
        href="https://github.com/Walker-TW/Algorithm-Visualizer"
        children={"Algo-Visualiser"}
      />
      <Navbar.Toggle
        onClick={() => setExpanded(expanded ? false : "lg")}
        aria-controls="responsive-navbar-nav"
      />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Container fluid>
          <Col md={{ span: 2 }}>
            <Nav className="mr-auto">
              <NavDropdown title="Algorithms" id="collapsible-nav-dropdown">
                {algorithmDropdowns}
              </NavDropdown>
            </Nav>
          </Col>
          <Col md={{ span: 4 }}>
            <Nav>
              <Button
                id="info-btn"
                style={{ border: "2px solid cyan", color: "cyan" }}
                variant="dark"
                children={"How To Use"}
                onClick={handleShow}
              />
              {howToUse}
              <Button
                id="run-btn"
                style={{ border: "2px solid chartreuse", color: "chartreuse" }}
                variant="dark"
                onClick={run}
                children={
                  algorithm
                    ? `Let's Run ${algorithm}`
                    : "Please Select Algorithm"
                }
                disabled={!ready || algorithm === ""}
              />
              <Dropdown as={ButtonGroup}>
                <Button
                  id="reset-btn"
                  variant="dark"
                  style={{ border: "2px solid red", color: "red" }}
                  children={"Reset Visited"}
                  onClick={resetVisited}
                />
                <Dropdown.Toggle
                  split
                  variant="dark"
                  style={{ border: "2px solid red", color: "red" }}
                  id="dropdown-custom-2"
                />
                <Dropdown.Menu>
                  <Dropdown.Item
                    id="fence-reset-btn"
                    onClick={resetFences}
                    variant="dark"
                    children={"Reset Fences"}
                  />
                </Dropdown.Menu>
              </Dropdown>
            </Nav>
          </Col>
          <Col md={{ span: 4 }}>
            <Nav navbar="true">
              <Container>
                <Form inline>
                  <Form.Check
                    type="switch"
                    id="fence-check"
                    name="fences"
                    label="Fence mode"
                    style={{ color: "white" }}
                    onChange={fenceToggle}
                  />
                </Form>
              </Container>
              {settings}
              {contactInfo}
            </Nav>
          </Col>
        </Container>
      </Navbar.Collapse>
    </Navbar>
  );
}