@material-ui/icons#Notifications TypeScript Examples

The following examples show how to use @material-ui/icons#Notifications. 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: with-actions.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
actionItems = [
    <Search onClick={action('clicked search')} key={'search'} />,
    <Mail onClick={action('clicked mail')} key={'mail'} />,
    <Notifications onClick={action('clicked alarms')} key={'notifications'} />,
    <Favorite onClick={action('clicked favorite')} key={'favorite'} />,
    <Cloud onClick={action('clicked cloud')} key={'cloud'} />,
    <MoreVert onClick={action('clicked more')} key={'morevert'} />,
]
Example #2
Source File: with-full-config.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
withFullConfig = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        title: {
            fontWeight: 400,
        },
    });
    const classes = useStyles();

    return (
        <ScoreCard
            style={{ width: 400, flex: '0 0 auto' }}
            headerTitle={text('headerTitle', 'Substation 3')}
            headerSubtitle={text('headerSubtitle', 'High Humidity Alarm')}
            headerInfo={text('headerInfo', '4 Devices')}
            headerColor={color('headerColor', Colors.blue[500])}
            headerFontColor={color('headerFontColor', Colors.white[50])}
            headerBackgroundImage={boolean('headerBackgroundImage', true) ? backgroundImage : undefined}
            actionLimit={number('actionLimit', 3, { range: true, min: 1, max: 6, step: 1 })}
            actionItems={actionItems}
            actionRow={actionRow}
            badge={
                <HeroBanner>
                    {heroes.slice(0, number('Number of Heroes', 1, { range: true, min: 0, max: 2, step: 1 }))}
                </HeroBanner>
            }
            badgeOffset={number('badgeOffset', -40)}
        >
            <List style={{ padding: '.5rem 0' }}>
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'0 Alarms'}
                    icon={<Notifications color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    fontColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    iconColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    title={'1 Event'}
                    icon={<ListAlt color={'inherit'} style={getLeftToRightIconTransform()} />}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'Online'}
                    icon={<Cloud color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
            </List>
        </ScoreCard>
    );
}
Example #3
Source File: with-score-badge.tsx    From react-component-library with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
withScoreBadge = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        title: {
            fontWeight: 400,
        },
    });
    const classes = useStyles();

    return (
        <ScoreCard
            style={{ width: 400, flex: '0 0 auto' }}
            headerTitle={'Substation 3'}
            headerSubtitle={'Normal'}
            headerInfo={'4 Devices'}
            headerFontColor={Colors.white[50]}
            headerBackgroundImage={backgroundImage}
            actionItems={[<MoreVert onClick={action('clicked more')} key={'morevert'} />]}
            actionRow={actionRow}
            badge={
                <HeroBanner>
                    <Hero
                        icon={<GradeA fontSize={'inherit'} htmlColor={Colors.green[500]} />}
                        label={'Grade'}
                        iconSize={72}
                        iconBackgroundColor={useDarkMode() ? Colors.black[900] : Colors.white[50]}
                        value={'98'}
                        units={'/100'}
                        fontSize={'normal'}
                    />
                </HeroBanner>
            }
            badgeOffset={number('badgeOffset', -52)}
        >
            <List style={{ padding: '.5rem 0' }}>
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'0 Alarms'}
                    icon={<Notifications color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    fontColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    iconColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    title={'1 Event'}
                    icon={<ListAlt color={'inherit'} style={getLeftToRightIconTransform()} />}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'Online'}
                    icon={<Cloud color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
            </List>
        </ScoreCard>
    );
}
Example #4
Source File: index.tsx    From prism-frontend with MIT License 4 votes vote down vote up 
function AlertForm({ classes, isOpen, setOpen }: AlertFormProps) {
  const boundaryLayerData = useSelector(layerDataSelector(boundaryLayer.id)) as
    | LayerData<BoundaryLayerProps>
    | undefined;
  const regionsList = useSelector(getSelectedBoundaries);
  const dispatch = useDispatch();
  // form elements
  const [hazardLayerId, setHazardLayerId] = useState<LayerKey>();
  const [emailValid, setEmailValid] = useState<boolean>(false);
  const [email, setEmail] = useState('');
  const [belowThreshold, setBelowThreshold] = useState('');
  const [aboveThreshold, setAboveThreshold] = useState('');
  const [thresholdError, setThresholdError] = useState<string | null>(null);
  const [alertName, setAlertName] = useState('');
  const [alertWaiting, setAlertWaiting] = useState(false);

  const regionCodesToFeatureData: { [k: string]: object } = useMemo(() => {
    if (!boundaryLayerData) {
      // Not loaded yet. Will proceed when it is.
      return {};
    }

    return Object.fromEntries(
      boundaryLayerData.data.features
        .filter(feature => feature.properties !== null)
        .map(feature => {
          return [feature.properties?.[boundaryLayer.adminCode], feature];
        }),
    );
  }, [boundaryLayerData]);

  const generateGeoJsonForRegionNames = () => {
    // TODO - Handle these errors properly.
    if (!boundaryLayerData) {
      throw new Error('Boundary layer data is not loaded yet.');
    }

    if (regionsList.length === 0) {
      throw new Error('Please select at least one region boundary.');
    }

    const features = regionsList.map(region => {
      return regionCodesToFeatureData[region];
    });

    // Generate a copy of admin layer data (to preserve top-level properties)
    // and replace the 'features' property with just the selected regions.
    const mutableFeatureCollection = JSON.parse(
      JSON.stringify(boundaryLayerData.data),
    );
    // eslint-disable-next-line fp/no-mutation
    mutableFeatureCollection.features = features;

    return mutableFeatureCollection;
  };

  const onChangeEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newEmail = event.target.value;
    setEmailValid(!!newEmail.match(EMAIL_REGEX));
    setEmail(newEmail);
  };

  const onOptionChange = <T extends string>(
    setterFunc: Dispatch<SetStateAction<T>>,
  ) => (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value as T;
    setterFunc(value);
    return value;
  };

  // specially for threshold values, also does error checking
  const onThresholdOptionChange = (thresholdType: 'above' | 'below') => (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const setterFunc =
      thresholdType === 'above' ? setAboveThreshold : setBelowThreshold;
    const changedOption = onOptionChange(setterFunc)(event);
    // setting a value doesn't update the existing value until next render,
    // therefore we must decide whether to access the old one or the newly change one here.
    const aboveThresholdValue = parseFloat(
      thresholdType === 'above' ? changedOption : aboveThreshold,
    );
    const belowThresholdValue = parseFloat(
      thresholdType === 'below' ? changedOption : belowThreshold,
    );
    if (belowThresholdValue > aboveThresholdValue) {
      setThresholdError('Below threshold is larger than above threshold!');
    } else {
      setThresholdError(null);
    }
  };

  const runAlertForm = async () => {
    if (!hazardLayerId) {
      throw new Error('Layer should be selected to create alert.');
    }

    const request: AlertRequest = {
      alert_name: alertName,
      alert_config: LayerDefinitions[hazardLayerId] as WMSLayerProps,
      max: parseFloat(aboveThreshold) || undefined,
      min: parseFloat(belowThreshold) || undefined,
      zones: generateGeoJsonForRegionNames(),
      email,
      prism_url: getPrismUrl(),
    };

    setAlertWaiting(true);
    const response = await fetchApiData(ALERT_API_URL, request);
    setAlertWaiting(false);

    if ('message' in response) {
      // TODO response isn't typed correctly because fetchApiData is too strict.
      dispatch(
        addNotification({
          message: (response as { message: string }).message,
          type: 'success',
        }),
      );
    }
  };

  if (!ALERT_FORM_ENABLED) {
    return null;
  }

  return (
    <div className={classes.alertForm}>
      <Button
        variant="contained"
        color="primary"
        onClick={() => {
          setOpen(!isOpen);
        }}
      >
        <Notifications fontSize="small" />
        <Typography variant="body2" className={classes.alertLabel}>
          Create Alert
        </Typography>
        <ArrowDropDown fontSize="small" />
      </Button>

      <Box
        className={classes.alertFormMenu}
        width={isOpen ? 'min-content' : 0}
        padding={isOpen ? '10px' : 0}
      >
        {isOpen ? (
          <div>
            <div className={classes.newAlertFormContainer}>
              <div className={classes.alertFormOptions}>
                <Typography variant="body2">Hazard Layer</Typography>
                <LayerDropdown
                  type="wms"
                  value={hazardLayerId}
                  setValue={setHazardLayerId}
                  className={classes.selector}
                  placeholder="Choose hazard layer"
                />
              </div>
              <div className={classes.alertFormOptions}>
                <Typography variant="body2">Threshold</Typography>
                <TextField
                  id="filled-number"
                  error={!!thresholdError}
                  helperText={thresholdError}
                  className={classes.numberField}
                  label="Below"
                  type="number"
                  value={belowThreshold}
                  onChange={onThresholdOptionChange('below')}
                  variant="filled"
                />
                <TextField
                  id="filled-number"
                  label="Above"
                  className={classes.numberField}
                  style={{ paddingLeft: '10px' }}
                  value={aboveThreshold}
                  onChange={onThresholdOptionChange('above')}
                  type="number"
                  variant="filled"
                />
              </div>
              <div className={classes.alertFormOptions}>
                <Typography variant="body2">Regions</Typography>
                <BoundaryDropdown className={classes.regionSelector} />
              </div>
              <div className={classes.alertFormOptions}>
                <TextField
                  id="alert-name"
                  label="Alert Name"
                  type="text"
                  variant="filled"
                  value={alertName}
                  onChange={e => setAlertName(e.target.value)}
                  fullWidth
                />
              </div>
              <div className={classes.alertFormOptions}>
                <TextField
                  id="email-address"
                  label="Email Address"
                  type="text"
                  variant="filled"
                  onChange={onChangeEmail}
                  fullWidth
                />
              </div>
            </div>
            <Button
              className={classes.innerCreateAlertButton}
              onClick={runAlertForm}
              disabled={
                !hazardLayerId ||
                !!thresholdError ||
                !emailValid ||
                alertWaiting ||
                regionsList.length === 0
              }
            >
              <Typography variant="body2">Create Alert</Typography>
            </Button>
          </div>
        ) : null}
      </Box>
    </div>
  );
}