components#InfoBlock TypeScript Examples

The following examples show how to use components#InfoBlock. 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: OverlayView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
SystemStatusOff = ({i18n}: {i18n: I18n}) => {
  const startExposureNotificationService = useStartExposureNotificationService();

  const enableExposureNotifications = useCallback(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  return (
    <InfoBlock
      icon="icon-exposure-notifications-off"
      title={i18n.translate('OverlayOpen.ExposureNotificationCardStatus')}
      titleBolded={i18n.translate('OverlayOpen.ExposureNotificationCardStatusOff')}
      text={i18n.translate('OverlayOpen.ExposureNotificationCardBody')}
      button={{text: i18n.translate('OverlayOpen.ExposureNotificationCardAction'), action: enableExposureNotifications}}
      backgroundColor="errorBackground"
      color="errorText"
    />
  );
}
Example #2
Source File: OverlayView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
BluetoothStatusOff = ({i18n}: {i18n: I18n}) => {
  const toSettings = useCallback(() => {
    Linking.openSettings();
  }, []);
  return (
    <InfoBlock
      icon="icon-bluetooth-off"
      title={i18n.translate('OverlayOpen.BluetoothCardStatus')}
      titleBolded={i18n.translate('OverlayOpen.BluetoothCardStatusOff')}
      text={i18n.translate('OverlayOpen.BluetoothCardBody')}
      button={{text: i18n.translate('OverlayOpen.BluetoothCardAction'), action: toSettings}}
      backgroundColor="errorBackground"
      color="errorText"
    />
  );
}
Example #3
Source File: OverlayView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
NotificationStatusOff = ({action, i18n}: {action: () => void; i18n: I18n}) => {
  return (
    <InfoBlock
      icon="icon-notifications"
      title={i18n.translate('OverlayOpen.NotificationCardStatus')}
      titleBolded={i18n.translate('OverlayOpen.NotificationCardStatusOff')}
      text={i18n.translate('OverlayOpen.NotificationCardBody')}
      button={{text: i18n.translate('OverlayOpen.NotificationCardAction'), action}}
      backgroundColor="infoBlockNeutralBackground"
      color="overlayBodyText"
    />
  );
}
Example #4
Source File: OverlayView.tsx    From mobile with Apache License 2.0 6 votes vote down vote up 
BluetoothStatusOff = ({i18n}: {i18n: I18n}) => {
  return (
    <InfoBlock
      titleBolded={i18n.translate('OverlayOpen.BluetoothCardAction')}
      backgroundColor="danger25Background"
      color="bodyTextWhite"
      descriptionColor="bodyTextWhite"
      button={{
        text: '',
        action: () => {},
      }}
      text={i18n.translate('OverlayOpen.BluetoothCardBody')}
      showButton={false}
    />
  );
}
Example #5
Source File: OverlayView.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
OverlayView = ({status, notificationWarning, turnNotificationsOn, maxWidth}: Props) => {
  const [i18n] = useI18n();
  const navigation = useNavigation();

  return (
    <Box maxWidth={maxWidth}>
      <Box marginBottom="l">
        <StatusHeaderView enabled={status === SystemStatus.Active} />
      </Box>
      {status !== SystemStatus.Active && (
        <Box marginBottom="m" marginHorizontal="m">
          <SystemStatusOff i18n={i18n} />
        </Box>
      )}
      {status !== SystemStatus.Active && (
        <Box marginBottom="m" marginHorizontal="m">
          <BluetoothStatusOff i18n={i18n} />
        </Box>
      )}
      {notificationWarning && (
        <Box marginBottom="m" marginHorizontal="m">
          <NotificationStatusOff action={turnNotificationsOn} i18n={i18n} />
        </Box>
      )}
      <Box marginBottom="m" marginHorizontal="m">
        <InfoBlock
          icon="icon-enter-code"
          title={i18n.translate('OverlayOpen.EnterCodeCardTitle')}
          text={i18n.translate('OverlayOpen.EnterCodeCardBody')}
          button={{
            text: i18n.translate('OverlayOpen.EnterCodeCardAction'),
            action: () => navigation.navigate('DataSharing'),
          }}
          backgroundColor="infoBlockBrightBackground"
          color="infoBlockBrightText"
        />
      </Box>
      <Box marginBottom="m" marginHorizontal="m">
        <InfoShareView />
      </Box>
    </Box>
  );
}
Example #6
Source File: OverlayView.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
ShareDiagnosisCode = ({i18n, isBottomSheetExpanded}: {i18n: I18n; isBottomSheetExpanded: boolean}) => {
  const navigation = useNavigation();
  const exposureStatus = useExposureStatus();

  //

  const network = useNetInfo();

  if (!network.isConnected && exposureStatus.type !== ExposureStatusType.Diagnosed) {
    return (
      <InfoBlock
        titleBolded={i18n.translate('OverlayOpen.NoConnectivityCardAction')}
        backgroundColor="danger25Background"
        color="bodyText"
        button={{
          text: '',
          action: () => {},
        }}
        text={i18n.translate('OverlayOpen.NoConnectivityCardBody')}
        showButton={false}
      />
    );
  }

  if (exposureStatus.type === ExposureStatusType.Diagnosed) {
    const daysLeft = getUploadDaysLeft(exposureStatus.cycleEndsAt);
    let bodyText = i18n.translate('OverlayOpen.EnterCodeCardBodyDiagnosed');
    if (daysLeft > 0) {
      bodyText += i18n.translate(pluralizeKey('OverlayOpen.EnterCodeCardDiagnosedCountdown', daysLeft), {
        number: daysLeft,
      });
    }

    return (
      <InfoBlock
        focusOnTitle={isBottomSheetExpanded}
        titleBolded={i18n.translate('OverlayOpen.EnterCodeCardTitleDiagnosed')}
        text={bodyText}
        button={{
          text: '',
          action: () => {},
        }}
        backgroundColor="infoBlockNeutralBackground"
        color="bodyText"
        showButton={false}
      />
    );
  }
  return (
    <InfoBlock
      focusOnTitle={isBottomSheetExpanded}
      titleBolded={i18n.translate('OverlayOpen.EnterCodeCardTitle')}
      text={i18n.translate('OverlayOpen.EnterCodeCardBody')}
      button={{
        text: i18n.translate('OverlayOpen.EnterCodeCardAction'),
        action: () => navigation.navigate('DataSharing'),
      }}
      backgroundColor="infoBlockNeutralBackground"
      color="bodyText"
      showButton
    />
  );
}