react-feather#Eye TypeScript Examples

export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
  const classes = useStyles()
  const [open, setOpen] = useState(expanded || false)
  const [copied, setCopied] = useState(false)
  const toggleOpen = () => setOpen(!open)

  const tooltipClickHandler = () => setCopied(true)
  const tooltipCloseHandler = () => setCopied(false)

  const splitValues = split(value)
  const hasPrefix = isPrefixedHexString(value)
  const spanText = `${hasPrefix ? `${splitValues[0]} ${splitValues[1]}` : splitValues[0]}[…]${
    splitValues[splitValues.length - 1]
  }`

  return (
    <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
        <Grid container direction="row" justifyContent="space-between" alignItems="center">
          {label && <Typography variant="body1">{label}</Typography>}
          <Typography variant="body2">
            <div>
              {!open && (
                <span className={classes.copyValue}>
                  <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
                    <CopyToClipboard text={value}>
                      <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
                    </CopyToClipboard>
                  </Tooltip>
                </span>
              )}
              <IconButton size="small" className={classes.copyValue}>
                {open ? <Minus onClick={toggleOpen} strokeWidth={1} /> : <Eye onClick={toggleOpen} strokeWidth={1} />}
              </IconButton>
            </div>
          </Typography>
        </Grid>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <div className={classes.content}>
            <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
              <CopyToClipboard text={value}>
                {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
                <span onClick={tooltipClickHandler}>
                  <span className={classes.copyValue}>
                    {splitValues.map((s, i) => (
                      <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
                        {s}
                      </Typography>
                    ))}
                  </span>
                </span>
              </CopyToClipboard>
            </Tooltip>
          </div>
        </Collapse>
      </Grid>
    </ListItem>
  )
}

Home = () => (
    <SitePage
        heroCardProps={{
            src: HeroImage,
            children: (
                <Overlay>
                    <Card.Title>
                        <strong>Help Your Community End Coronavirus</strong>
                    </Card.Title>
                    <Card.Title>Essential. Anonymous. Accessible to all.</Card.Title>
                    <LinkButton
                        className="mt-5"
                        to="/policies/privacy"
                        variant="p-dark"
                    >
                        <Eye /> Read our Privacy-First Commitment
                    </LinkButton>
                </Overlay>
            ),
        }}
    >
        <Row className="mb-5 justify-content-center">
            <Col lg={4} className="d-flex justify-content-center">
                <Image src={ZerobaseIcon} height="200" width="200" alt="Zerobase Icon" />
            </Col>
            <Col className="text-p-dark">
                <h2>Our Mission</h2>
                <p className="lead">
                    The Zerobase Foundation is a nonprofit organization whose mission is to build open source public
                    health technology for the good of communities around the world. Our free, privacy-first contact
                    tracing empowers both individuals and communities to stop the spread of COVID-19.
                </p>
            </Col>
        </Row>
        <Row lg={3} md={2} sm={1} xs={1} className="justify-content-md-center">
            <Col className="mb-md-0 mb-3">
                <LinkCard
                    cardImgComp={<Card.Img src={Business} />}
                    fullCard
                    hasBorder
                    hasHover
                    info="Play a vital role in stopping the spread of coronavirus in your community by enabling anonymous check-ins at your door in seconds. Stay ahead of the curve and keep your patrons and staff safe."
                    title="Business and Public Locations"
                    to="/info/businesses"
                ></LinkCard>
            </Col>
            <Col className="mb-md-0 mb-3">
                <LinkCard
                    cardImgComp={<Card.Img src={Healthcare} />}
                    fullCard
                    hasBorder
                    hasHover
                    info="Use our powerful tracing technology to maximize the value of every COVID-19 test in your area and keep your community safe."
                    title="Testing Centers"
                    to="/info/testingSites"
                ></LinkCard>
            </Col>
            <Col className="mb-md-0 mb-3">
                <LinkCard
                    cardImgComp={<Card.Img src={Community} />}
                    fullCard
                    hasBorder
                    hasHover
                    info="Use our smart contact tracing platform to get customized, deep insight into the local dynamics of the epidemic and provide instant, individualized guidance to community members."
                    title="Public Officials"
                    to="/info/communities"
                ></LinkCard>
            </Col>
        </Row>
    </SitePage>
)

PasswordTextField = ({
  onChangePassword,
  onChangeValid,
  onChangeShowPassword,
  showPassword,
  className,
}: Props) => {
  const classes = useStyles();
  const [errors, setErrors] = useState<string[]>([]);

  const handleChange = () => {
    if (errors.length > 0) {
      setErrors([]);
      onChangeValid(true);
    }
  };

  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
    const password = event.target.value;
    if (password) {
      onChangePassword(password);

      const errors = [];
      // length
      if (password.match(/^(?=.{6,26})/g) === null)
        errors.push(errorMessages.length);
      // lower case
      if (password.match(/^(?=.*[a-z])/g) === null)
        errors.push(errorMessages.lowerCase);
      // upper case
      if (password.match(/^(?=.*[A-Z])/g) === null)
        errors.push(errorMessages.upperCase);
      // number
      if (password.match(/^(?=.*[0-9])/g) === null)
        errors.push(errorMessages.number);
      // special char
      // if (password.match(/^(?=.*[!@#$%^&*])/g) === null) errors.push(errorMessages.specialChar);
      // spaces
      if (password.match(/\s/g) !== null) errors.push(errorMessages.noSpaces);

      onChangeValid(errors.length === 0);
      setErrors(errors);
    }
  };

  return (
    <TextField
      id="email"
      color="secondary"
      name="password"
      autoComplete="password"
      onChange={handleChange}
      onBlur={handleBlur}
      label="Password"
      variant="outlined"
      type={showPassword ? "text" : "password"}
      size="small"
      required
      className={className}
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={onChangeShowPassword}
              className={classes.iconButton}
            >
              {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
            </IconButton>
          </InputAdornment>
        ),
      }}
      error={Boolean(errors.length)}
      helperText={
        errors.length > 0 && (
          <>
            <FormHelperText id="name-error-text">
              Password must contain:
            </FormHelperText>
            {errors.map((error) => (
              <FormHelperText id="name-error-text">- {error}</FormHelperText>
            ))}
          </>
        )
      }
    />
  );
}