components#CodeInput TypeScript Examples

The following examples show how to use components#CodeInput. 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: FormView.tsx    From mobile with Apache License 2.0 5 votes vote down vote up 
FormView = ({value, onChange, onSuccess, onError}: FormViewProps) => {
  const [i18n] = useI18n();
  const [loading, setLoading] = useState(false);
  const {startSubmission} = useReportDiagnosis();
  const handleVerify = useCallback(async () => {
    setLoading(true);
    try {
      await startSubmission(value);
      setLoading(false);
      onSuccess();
    } catch {
      setLoading(false);
      onError();
    }
  }, [startSubmission, value, onSuccess, onError]);

  return (
    <>
      <Box margin="xxl">
        <Text variant="bodyText" textAlign="center" color="overlayBodyText" accessibilityRole="header">
          {i18n.translate('DataUpload.FormIntro')}
        </Text>
      </Box>
      <Box paddingHorizontal="m" marginBottom="m">
        <CodeInput value={value} onChange={onChange} accessibilityLabel={i18n.translate('DataUpload.InputLabel')} />
      </Box>
      <Box flex={1} paddingHorizontal="m" marginBottom="m">
        <Button
          loading={loading}
          disabled={value.length !== 8}
          variant="bigFlat"
          text={i18n.translate('DataUpload.Action')}
          onPress={handleVerify}
        />
        <Text variant="smallText" color="bodyTextSubdued" textAlign="center" marginTop="s">
          {i18n.translate('DataUpload.InfoSmall')}
        </Text>
      </Box>
    </>
  );
}
Example #2
Source File: FormScreen.tsx    From mobile with Apache License 2.0 4 votes vote down vote up 
FormScreen = () => {
  const i18n = useI18n();
  const [codeValue, setCodeValue] = useState('');
  const handleChange = useCallback(text => setCodeValue(text), []);
  const navigation = useNavigation();
  const exposureStatus = useExposureStatus();
  const [loading, setLoading] = useState(false);
  const {startSubmission} = useReportDiagnosis();
  const onSuccess = useCallback(() => {
    AsyncStorage.setItem(INITIAL_TEK_UPLOAD_COMPLETE, 'false');
    navigation.navigate('Step2');
  }, [navigation]);

  const getTranslationKey = (error: any) => {
    // OTC = One time code (diagnosis code)
    switch (error) {
      case covidshield.KeyClaimResponse.ErrorCode.INVALID_ONE_TIME_CODE:
        return 'OtcUploadInvalidOneTimeCode';
      case covidshield.KeyClaimResponse.ErrorCode.TEMPORARY_BAN:
        return 'OtcUploadTemporaryBan';
      case xhrError:
        return 'OtcUploadOffline';
      default:
        return 'OtcUploadDefault';
    }
  };
  const onError = useCallback(
    (error: any) => {
      const translationKey = getTranslationKey(error);
      Alert.alert(i18n.translate(`Errors.${translationKey}.Title`), i18n.translate(`Errors.${translationKey}.Body`), [
        {text: i18n.translate(`Errors.Action`)},
      ]);
    },
    [i18n],
  );
  const validateInput = () => {
    if (codeValue.length < 1) {
      Alert.alert(i18n.translate(`Errors.OtcCodeNotEntered.Title`), i18n.translate(`Errors.OtcCodeNotEntered.Body`), [
        {text: i18n.translate(`Errors.Action`)},
      ]);
      return false;
    }
    return true;
  };
  const onSubmit = useCallback(async () => {
    setLoading(true);
    try {
      await startSubmission(codeValue);
      setLoading(false);
      onSuccess();
    } catch (error) {
      setLoading(false);
      onError(error);
    }
  }, [startSubmission, codeValue, onSuccess, onError]);

  if (exposureStatus.type === ExposureStatusType.Diagnosed) {
    return <FormDiagnosedView />;
  }

  return (
    <BaseDataSharingView>
      <Box marginHorizontal="m" marginBottom="l">
        <StepXofY currentStep={1} />
        <Text
          variant="bodyTitle2"
          color="overlayBodyText"
          accessibilityRole="header"
          // eslint-disable-next-line no-unneeded-ternary
          accessibilityAutoFocus={codeValue === '' ? true : false}
        >
          {i18n.translate('DataUpload.FormView.Title')}
        </Text>
      </Box>
      <Box marginHorizontal="m" marginBottom="l">
        <Text color="lightText" variant="bodyDescription">
          {i18n.translate('DataUpload.FormView.Body')}
        </Text>
      </Box>
      <Box marginBottom="m" paddingHorizontal="m">
        <CodeInput
          value={codeValue}
          onChange={handleChange}
          accessibilityLabel={i18n.translate('DataUpload.FormView.InputLabel')}
        />
      </Box>
      <Box flex={1} marginHorizontal="m" marginBottom="m">
        <Button
          loading={loading}
          variant="thinFlat"
          text={i18n.translate('DataUpload.FormView.Action')}
          onPress={() => {
            const inputValid = validateInput();
            if (!inputValid) {
              return;
            }
            onSubmit();
          }}
        />
      </Box>
    </BaseDataSharingView>
  );
}