components#TextMultiline TypeScript Examples

The following examples show how to use components#TextMultiline. 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: TekUploadNoDate.tsx From mobile with Apache License 2.0

6 votes

TekUploadNoDate = () => {
  const i18n = useI18n();
  return (
    <BaseTekUploadView
      buttonText={i18n.translate('DataUpload.TekUploadNoDate.CTA')}
      contagiousDateInfo={{dateType: ContagiousDateType.None, date: null}}
    >
      <Box paddingHorizontal="m">
        <StepXofY currentStep={3} />
        <Text variant="bodyTitle" marginBottom="l" accessibilityRole="header" accessibilityAutoFocus>
          {i18n.translate('DataUpload.TekUploadNoDate.Title')}
        </Text>
        <TextMultiline marginBottom="l" color="lightText" text={i18n.translate('DataUpload.TekUploadNoDate.Body')} />
      </Box>
    </BaseTekUploadView>
  );
}

Example #2

Source File: ApiNotConnectedView.tsx From mobile with Apache License 2.0

6 votes

ApiNotConnectedView = () => {
  const i18n = useI18n();

  const autoFocusRef = useAccessibilityAutoFocus(true);
  return (
    <BaseErrorView iconName="error-icon">
      <Text focusRef={autoFocusRef} variant="bodyTitle" marginBottom="m" accessibilityRole="header" color="darkText">
        {i18n.translate('Errors.ApiNotConnected.Title')}
      </Text>
      <TextMultiline
        variant="bodyDescription"
        color="lightText"
        marginBottom="m"
        text={i18n.translate('Errors.ApiNotConnected.Body')}
      />
    </BaseErrorView>
  );
}

Example #3

Source File: AllSetView.tsx From mobile with Apache License 2.0

6 votes

AllSetView = ({
  isBottomSheetExpanded,
  titleText,
  bodyText,
  testID,
}: {
  isBottomSheetExpanded: boolean;
  titleText: string;
  bodyText: string;
  testID?: string;
}) => {
  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);
  return (
    <>
      <Text
        testID={testID}
        focusRef={autoFocusRef}
        variant="bodyTitle"
        color="darkText"
        marginBottom="m"
        accessibilityRole="header"
      >
        {titleText}
      </Text>
      <TextMultiline color="lightText" variant="bodyDescription" text={bodyText} marginBottom="m" />
    </>
  );
}

Example #4

Source File: FrameworkUnavailableView.tsx From mobile with Apache License 2.0

6 votes

FrameworkUnavailableView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
  const i18n = useI18n();

  const onHelp = useCallback(() => {
    Linking.openURL(i18n.translate('Info.HelpUrl')).catch(error => captureException('An error occurred', error));
  }, [i18n]);

  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);
  return (
    <BaseHomeView iconName="error-icon">
      <Text focusRef={autoFocusRef} variant="bodyTitle" color="darkText" marginBottom="m" accessibilityRole="header">
        {i18n.translate('Home.FrameworkUnavailable.Title')}
      </Text>
      <TextMultiline
        variant="bodyDescription"
        color="lightText"
        marginBottom="m"
        text={i18n.translate('Home.FrameworkUnavailable.Body')}
      />
      <Box alignSelf="stretch" marginBottom="m" marginTop="l">
        <ButtonSingleLine
          text={i18n.translate('Home.FrameworkUnavailable.CTA')}
          variant="danger50Flat"
          externalLink
          onPress={onHelp}
        />
      </Box>
    </BaseHomeView>
  );
}

Example #5

Source File: NoRegionView.tsx From mobile with Apache License 2.0

6 votes

NoRegionView = () => {
  const i18n = useI18n();
  const navigation = useNavigation();
  const autoFocusRef = useAccessibilityAutoFocus(true);

  const onChooseRegion = useCallback(() => navigation.navigate('RegionSelect'), [navigation]);

  return (
    <Box>
      <Text
        testID="noCodeHeader"
        focusRef={autoFocusRef}
        variant="bodyTitle"
        marginBottom="l"
        accessibilityRole="header"
      >
        {i18n.translate('DataUpload.NoCode.NoRegion.Title')}
      </Text>
      <TextMultiline marginBottom="l" text={i18n.translate('DataUpload.NoCode.NoRegion.Body')} />
      <ButtonSingleLine
        text={i18n.translate('DataUpload.NoCode.NoRegion.ChooseRegionCTA')}
        variant="bigFlatDarkGrey"
        internalLink
        onPress={onChooseRegion}
      />
    </Box>
  );
}

Example #6

Source File: ItemView.tsx From mobile with Apache License 2.0

6 votes

ItemView = ({item, image, isActive}: ItemViewProps) => {
  const i18n = useI18n();
  const autoFocusRef = useAccessibilityAutoFocus(isActive);

  return (
    <>
      <Box marginHorizontal="-m" marginTop="s" marginBottom="l">
        <Image
          accessible
          ref={autoFocusRef}
          style={styles.image}
          source={image}
          accessibilityLabel={i18n.translate(`Tutorial.${item}AltText`)}
        />
      </Box>
      <Text variant="bodyTitle" color="headerText" marginBottom="l" accessible accessibilityRole="header">
        {i18n.translate(`Tutorial.${item}Title`)}
      </Text>
      <TextMultiline text={i18n.translate(`Tutorial.${item}`)} variant="bodyText" color="darkText" marginBottom="l" />
    </>
  );
}

Example #7

Source File: NoExposureNoRegionView.tsx From mobile with Apache License 2.0

5 votes

NoExposureNoRegionView = ({isBottomSheetExpanded}: {isBottomSheetExpanded: boolean}) => {
  const i18n = useI18n();
  const {onboardedDatetime, skipAllSet} = useStorage();

  const autoFocusRef = useAccessibilityAutoFocus(!isBottomSheetExpanded);

  if (!skipAllSet && onboardedDatetime && hoursFromNow(onboardedDatetime) < 24) {
    return (
      <BaseHomeView iconName="thumbs-up">
        <AllSetView
          testID="allSetNoRegionView"
          isBottomSheetExpanded={isBottomSheetExpanded}
          titleText={i18n.translate('Home.NoExposureDetected.AllSetTitle')}
          bodyText={i18n.translate('Home.NoExposureDetected.NoRegion.AllSetBody')}
        />
      </BaseHomeView>
    );
  }

  return (
    // note you can add an icon i.e. <BaseHomeView iconName="icon-offline>
    <BaseHomeView iconName="thumbs-up">
      <Text
        testID="noRegionHeader"
        focusRef={autoFocusRef}
        variant="bodyTitle"
        color="bodyText"
        marginBottom="m"
        accessibilityRole="header"
      >
        {i18n.translate('Home.NoExposureDetected.NoRegion.Title')}
      </Text>

      <TextMultiline
        variant="bodyText"
        color="bodyText"
        marginBottom="m"
        text={i18n.translate('Home.NoExposureDetected.NoRegion.Body')}
      />
    </BaseHomeView>
  );
}