@material-ui/icons#Visibility TypeScript Examples

The following examples show how to use @material-ui/icons#Visibility. 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: index.tsx    From frontegg-react with MIT License 6 votes vote down vote up
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,
}
Example #2
Source File: index.tsx    From frontegg-react with MIT License 6 votes vote down vote up
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>
    ),
  ];
}
Example #3
Source File: index.tsx    From prism-frontend with MIT License 4 votes vote down vote up
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>
  );
}
Example #4
Source File: ContactDescription.tsx    From glific-frontend with GNU Affero General Public License v3.0 4 votes vote down vote up
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>
  );
}