@material-ui/icons#VisibilityOff TypeScript Examples

iconMap: { [K in IconNames]: any } = {
  'down-arrow': KeyboardArrowDownRounded,
  'left-arrow': KeyboardArrowLeftRounded,
  'person-add': PersonAddRounded,
  'right-arrow': KeyboardArrowRightRounded,
  'sort-arrows-asc': ArrowUpward,
  'sort-arrows-desc': ArrowDownward,
  'sort-arrows': DeleteRounded,
  'up-arrow': KeyboardArrowUpRounded,
  'vertical-dots': MoreVertRounded,
  'visibility-off': VisibilityOff,
  back: ArrowBackRounded,
  checkmark: CheckRounded,
  copy: FileCopyRounded,
  delete: DeleteRounded,
  edit: Edit,
  filters: FilterList,
  image: ImageRounded,
  indeterminate: IndeterminateCheckBoxRounded,
  search: Search,
  send: SendRounded,
  refresh: Cached,
  'calendar-today': CalendarToday,
  flash: FlashOn,
  pdf: PictureAsPdf,
  csv: GridOn,
  visibility: Visibility,
  warning: WarningRounded,
  list: Subject,
  exit: ExitToAppRounded,
  swap: CachedRounded,
  profile: FaceRounded,
  globe: Language,
  close: Close,
}

useInputTypeIcon = ({
  type,
  onSearch,
  value,
}: {
  type: InputProps['type'];
  onSearch: InputProps['onSearch'];
  value: InputProps['value'];
}): [boolean, JSX.Element] => {
  const [showPassword, setShowPassword] = useState(false);
  const toggleShowPassword = useCallback(() => setShowPassword((_) => !_), []);

  const Icon = type === 'password' ? (showPassword ? Visibility : VisibilityOff) : Search;
  const onClick = type === 'password' ? toggleShowPassword : () => onSearch?.(value);

  return [
    showPassword,
    Icon && (
      <IconButton onClick={onClick}>
        <Icon />
      </IconButton>
    ),
  ];
}

function Legends({ classes, layers, extent }: LegendsProps) {
  const [open, setOpen] = useState(true);
  const isAnalysisLayerActive = useSelector(isAnalysisLayerActiveSelector);
  const analysisResult = useSelector(analysisResultSelector);
  const features = analysisResult?.featureCollection.features;
  const hasData = features ? features.length > 0 : false;

  const { t } = useSafeTranslation();

  const handleAnalysisDownload = (e: React.ChangeEvent<{}>): void => {
    e.preventDefault();
    downloadToFile(
      {
        content: JSON.stringify(features),
        isUrl: false,
      },
      analysisResult ? analysisResult.getTitle() : 'prism_extract',
      'application/json',
    );
  };

  const legendItems = [
    ...layers.map(layer => {
      if (!layer.legend || !layer.legendText) {
        // this layer doesn't have a legend (likely boundary), so lets ignore.
        return null;
      }

      // If legend array is empty, we fetch from remote server the legend as GetLegendGraphic request.
      const legendUrl =
        layer.type === 'wms' && layer.legend.length === 0
          ? formatWMSLegendUrl(layer.baseUrl, layer.serverLayerName)
          : undefined;

      const exposure = GetExposureFromLayer(layer);

      return (
        <LegendItem
          classes={classes}
          key={layer.id}
          id={layer.id}
          title={layer.title ? t(layer.title) : undefined}
          legend={layer.legend}
          legendUrl={legendUrl}
          type={layer.type}
          opacity={layer.opacity}
          exposure={exposure}
          extent={extent}
        >
          {t(layer.legendText)}
        </LegendItem>
      );
    }),
    // add analysis legend item if layer is active and analysis result exists
    ...(isAnalysisLayerActive && hasData
      ? [
          <LegendItem
            key={analysisResult?.key}
            legend={analysisResult?.legend}
            title={analysisResult?.getTitle(t)}
            classes={classes}
            opacity={0.5} // TODO: initial opacity value
          >
            {analysisResult instanceof BaselineLayerResult && (
              <LegendImpactResult result={analysisResult} />
            )}
            <Divider />
            <Grid item>
              <Button
                variant="contained"
                color="primary"
                size="small"
                onClick={e => handleAnalysisDownload(e)}
                fullWidth
              >
                {t('Download')}
              </Button>
            </Grid>
          </LegendItem>,
        ]
      : []),
  ];

  return (
    <Grid item className={classes.container}>
      <Button
        variant="contained"
        color="primary"
        onClick={() => setOpen(!open)}
      >
        {open ? (
          <VisibilityOff fontSize="small" />
        ) : (
          <Visibility fontSize="small" />
        )}
        <Hidden smDown>
          <Typography className={classes.label} variant="body2">
            {t('Legend')}
          </Typography>
        </Hidden>
      </Button>
      {open && <List className={classes.list}>{legendItems}</List>}
    </Grid>
  );
}

ContactDescription: React.FC<ContactDescriptionProps> = (props) => {
  const { phone, maskedPhone, collections, lastMessage, statusMessage } = props;
  let { fields, settings } = props;

  const [showPlainPhone, setShowPlainPhone] = useState(false);
  const { t } = useTranslation();

  // list of collections that the contact is assigned
  let assignedToCollection: any = Array.from(
    new Set(
      [].concat(
        ...collections.map((collection: any) => collection.users.map((user: any) => user.name))
      )
    )
  );

  if (assignedToCollection.length > 2) {
    assignedToCollection = `${assignedToCollection.slice(0, 2).join(', ')} +${(
      assignedToCollection.length - 2
    ).toString()}`;
  } else {
    assignedToCollection = assignedToCollection.join(', ');
  }

  // list of collections that the contact belongs
  const collectionList = collections.map((collection: any) => collection.label).join(', ');

  const collectionDetails = [
    { label: t('Collections'), value: collectionList || t('None') },
    {
      label: t('Assigned to'),
      value: assignedToCollection || t('None'),
    },
  ];

  if (typeof settings === 'string') {
    settings = JSON.parse(settings);
  }

  if (typeof fields === 'string') {
    fields = JSON.parse(fields);
  }

  const handlePhoneDisplay = () => {
    setShowPlainPhone(!showPlainPhone);
  };

  let phoneDisplay = (
    <div data-testid="phone" className={styles.PhoneField}>
      +{maskedPhone}
    </div>
  );

  if (phone) {
    let phoneDisplayValue = maskedPhone;
    let visibilityElement = (
      <Tooltip title={t('Show number')} placement="right">
        <Visibility classes={{ root: styles.Visibility }} />
      </Tooltip>
    );
    if (showPlainPhone) {
      phoneDisplayValue = phone;
      visibilityElement = (
        <Tooltip title={t('Hide number')} placement="right">
          <VisibilityOff classes={{ root: styles.Visibility }} />
        </Tooltip>
      );
    }

    phoneDisplay = (
      <div className={styles.PhoneSection}>
        <div data-testid="phone" className={styles.PhoneField}>
          +{phoneDisplayValue}
        </div>
        <IconButton
          aria-label="toggle phone visibility"
          data-testid="phoneToggle"
          onClick={handlePhoneDisplay}
          edge="end"
        >
          {visibilityElement}
        </IconButton>
      </div>
    );
  }

  return (
    <div className={styles.DescriptionContainer} data-testid="contactDescription">
      <h2 className={styles.Title}>{t('Details')}</h2>
      <div className={styles.Description}>
        {phoneDisplay}
        <div className={styles.SessionTimer}>
          <span>{t('Session Timer')}</span>
          <Timer time={lastMessage} />
        </div>
      </div>

      <div className={styles.DetailBlock}>
        {collectionDetails.map((collectionItem: any) => (
          <div key={collectionItem.label}>
            <div className={styles.DescriptionItem}>{collectionItem.label}</div>
            <div className={styles.DescriptionItemValue} data-testid="collections">
              {collectionItem.value}
            </div>
          </div>
        ))}
      </div>

      <div className={styles.DetailBlock}>
        <div>
          <div className={styles.DescriptionItem}>Status</div>
          <div className={styles.DescriptionItemValue}>{statusMessage}</div>
        </div>
        {settings &&
          typeof settings === 'object' &&
          Object.keys(settings).map((key) => (
            <div key={key}>
              <div className={styles.DescriptionItem}>{key}</div>
              <div className={styles.DescriptionItemValue}>
                {Object.keys(settings[key])
                  .filter((settingKey) => settings[key][settingKey] === true)
                  .join(', ')}
              </div>
            </div>
          ))}
        {fields &&
          typeof fields === 'object' &&
          Object.keys(fields).map((key) => (
            <div key={key}>
              <div className={styles.DescriptionItem}>
                {fields[key].label ? fields[key].label : key.replace('_', ' ')}
              </div>
              <div className={styles.DescriptionItemValue}>{fields[key].value}</div>
            </div>
          ))}
      </div>
    </div>
  );
}