components#Box TypeScript Examples

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

  return (
    <BaseTekUploadView
      buttonText={i18n.translate('DataUpload.ConsentView.Action')}
      contagiousDateInfo={{dateType: ContagiousDateType.None, date: null}}
      showBackButton={false}
    >
      <Box paddingHorizontal="m">
        <Text variant="bodyTitle" marginBottom="l" accessibilityRole="header" accessibilityAutoFocus>
          {i18n.translate('DataUpload.ConsentView.Title')}
        </Text>
        <Text marginBottom="m">{i18n.translate('DataUpload.ConsentView.Body1')}</Text>
        <Text marginBottom="m">
          <Text fontWeight="bold">{i18n.translate('DataUpload.ConsentView.Body2a')}</Text>
          <Text>{i18n.translate('DataUpload.ConsentView.Body2b')}</Text>
        </Text>
        <Text marginBottom="l">{i18n.translate('DataUpload.ConsentView.Body3')}</Text>
      </Box>
    </BaseTekUploadView>
  );
}

Welcome = ({ navigation }: StackNavigationProps<PreAuthScreens, 'Welcome'>) => {
  const handleNavigation = (route: 'Login' | 'SignUp') => {
    navigation.navigate(route);
  };

  return (
    <Background isBlue>
      <Box flex={1} alignItems="center">
        <Box style={WelcomeStyle.logo}>
          <Illustration name="logo" />
        </Box>
        <Box alignItems="center">
          <StyledText variant="h3Regular" color="white" opacity={0.5}>
            Welcome to
          </StyledText>
          <StyledText variant="h1Light" color="white">
            WHOLLET
          </StyledText>
        </Box>
        <Box flex={1} justifyContent="flex-end">
          <BottomSection
            mainButtonVariant="secondary"
            mainButtonLabel="Create account"
            lightTextLabel="Already have an account?"
            accentTextLabel="Login"
            onMainButtonPress={() => handleNavigation('SignUp')}
            onAccentTextPress={() => handleNavigation('Login')}
            isWelcomePage
          />
        </Box>
      </Box>
    </Background>
  );
}

HomeScreen = () => {
  const navigation = useNavigation();
  useEffect(() => {
    if (__DEV__) {
      DevSettings.addMenuItem('Show Test Menu', () => {
        navigation.dispatch(DrawerActions.openDrawer());
      });
    }
  }, [navigation]);

  // This only initiate system status updater.
  // The actual updates will be delivered in useSystemStatus().
  const subscribeToStatusUpdates = useExposureNotificationSystemStatusAutomaticUpdater();
  useEffect(() => {
    return subscribeToStatusUpdates();
  }, [subscribeToStatusUpdates]);

  const startExposureNotificationService = useStartExposureNotificationService();
  useEffect(() => {
    startExposureNotificationService();
  }, [startExposureNotificationService]);

  const maxWidth = useMaxContentWidth();

  return (
    <NotificationPermissionStatusProvider>
      <Box flex={1} alignItems="center" backgroundColor="mainBackground">
        <Box flex={1} maxWidth={maxWidth} paddingTop="m">
          <Content />
        </Box>
        <BottomSheetWrapper />
      </Box>
    </NotificationPermissionStatusProvider>
  );
}

PinLayout: React.FC<IPinLayout> = ({
  isLogin,
  isConfirm,
  pinEntry,
  loading,
  onCheckIfPinExists,
  onPinEntryFinished,
  onPinChange,
  onPinDelete,
}) => {
  useEffect(() => {
    onCheckIfPinExists();
  }, [onCheckIfPinExists]);

  useEffect(() => {
    onPinEntryFinished();
  }, [onPinEntryFinished]);

  const title = isLogin || isConfirm ? 'Verification required' : 'Create a PIN';
  const subtitle =
    isLogin || isConfirm
      ? 'Please enter your PIN to proceed'
      : 'Enhance the security of your account by creating a PIN code';

  return (
    <Background>
      {loading && <Loading isFullScreen />}
      <Header {...{ title, subtitle }} />
      <Box position="absolute">
        <TextInput
          value={pinEntry}
          onChangeText={onPinChange}
          maxLength={4}
          style={{ opacity: 0 }}
          keyboardType="numeric"
        />
      </Box>
      <Box alignItems="center" style={PinLayoutStyle.indicator}>
        <Indicator type="pin" pinLength={pinEntry.length} />
      </Box>
      <Box flex={1} justifyContent="center">
        <NumberPad
          onNumberPress={onPinChange}
          onDeletePress={onPinDelete}
          onForgotPress={() => true}
          {...{ isLogin }}
        />
      </Box>
    </Background>
  );
}

DatePicker = ({daysBack, selectedDate, setDate}: DatePickerProps) => {
  const i18n = useI18n();
  const today = getCurrentDate();

  const getLabel = (step: number, date: Date) => {
    const dateLocale = i18n.locale === 'mn' ? 'mn-MN' : 'en-CA';
    switch (step) {
      case 0:
        return i18n.translate('DataUpload.Today');
      case 1:
        return i18n.translate('DataUpload.Yesterday');
      case daysBack - 1:
        return i18n.translate('DataUpload.Earlier');
      default:
        return capitalizeFirstLetter(
          date.toLocaleString(dateLocale, {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric',
          }),
        );
    }
  };
  const dateOptions = [{label: '', value: ''}];
  const labelDict: {[key: string]: string} = {'': ''};
  for (let step = 0; step < daysBack; step++) {
    const date = addDays(today, -1 * step);
    const dateAtMidnight = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    const dateString = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const label = getLabel(step, dateAtMidnight);
    labelDict[dateString] = label;
    dateOptions.push({label, value: dateString});
  }

  if (Platform.OS === 'ios') {
    return (
      <ModalWrapper labelDict={labelDict} selectedDate={selectedDate} buttonText={i18n.translate('DataUpload.Close')}>
        <DatePickerInternal
          // eslint-disable-next-line react-native/no-inline-styles
          pickerStyles={{height: 200}}
          dateOptions={dateOptions}
          selectedDate={selectedDate}
          setDate={setDate}
        />
      </ModalWrapper>
    );
  }
  return (
    <Box style={{...styles.outline}} marginBottom="m">
      <DatePickerInternal dateOptions={dateOptions} selectedDate={selectedDate} setDate={setDate} />
    </Box>
  );
}

SignUp = ({ navigation }: StackNavigationProps<SignUpScreens, 'SignUp'>) => {
  const [loading, setLoading] = useState<boolean>(false);
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [showPassword, setShowPassword] = useState<boolean>(false);
  const alert = useAlert();

  const { height } = Dimensions.get('window');

  const isEmailValid = email.length > 0 ? validateEmailAddress(email) : undefined;
  const isPasswordValid = password.length > 0 ? validatePassword(password) : undefined;
  const isButtonDisabled = [isEmailValid, isPasswordValid].some(c => !c) || loading;

  const handleLogin = async () => {
    setLoading(true);
    try {
      const res = await auth().signInWithEmailAndPassword(email, password);
      if (res) {
        const { additionalUserInfo } = res;
        if (additionalUserInfo) {
          const { isNewUser } = additionalUserInfo;
          await AsyncStorage.setItem('isNewUser', `${isNewUser}`);
        }
      }
    } catch (error) {
      if (error.code === 'auth/user-not-found') {
        setLoading(false);
        alert(
          'Error',
          'The email and password you entered did not match our records. Please double check and try again.',
        );
      }
    }
  };

  return (
    <Background>
      <Header {...{ navigation }} title="Welcome Back!" colorMode="dark" />
      <Box alignItems="center" justifyContent="flex-end" height={height * 0.38}>
        <Illustration name="login" width="308" height={`${(height * 28) / 100}`} />
      </Box>
      <AuthForm
        {...{
          email,
          password,
          isEmailValid,
          isPasswordValid,
          loading,
          isButtonDisabled,
          showPassword,
        }}
        onEmailChange={v => setEmail(v)}
        onPasswordChange={v => setPassword(v)}
        onShowPasswordPress={() => setShowPassword(s => !s)}
        onNavigationToLoginOrSignUp={() => navigation.navigate('SignUp')}
        onSignUpPress={handleLogin}
        onForgotPasswordPress={() => true}
        submitButtonLabel="Login"
        bottomSectionLightTextLabel="Don't have an account?"
        bottomSectionAccentTextLabel="Sign Up"
      />
    </Background>
  );
}

TutorialContent = ({item, isActive}: TutorialContentProps) => {
  const [i18n] = useI18n();
  const prefersReducedMotion = useReduceMotionPreference();
  const {width: viewportWidth, height: viewportHeight} = useWindowDimensions();

  const animationRef: React.Ref<LottieView> = useRef(null);
  useEffect(() => {
    // need to stop if user prefers reduced animations
    if (prefersReducedMotion) {
      animationRef.current?.play(animationData[item].pauseFrame, animationData[item].pauseFrame);
    } else if (isActive) {
      animationRef.current?.play();
    } else {
      animationRef.current?.reset();
    }
  }, [isActive, prefersReducedMotion, item]);

  const autoFocusRef = useRef<any>();
  useLayoutEffect(() => {
    const tag = findNodeHandle(autoFocusRef.current);
    if (isActive && tag) {
      AccessibilityInfo.setAccessibilityFocus(tag);
    }
  }, [isActive]);

  return (
    <ScrollView style={styles.flex} contentContainerStyle={styles.center}>
      <LottieView
        ref={animationRef}
        style={{width: viewportWidth, height: viewportHeight / 2}}
        source={animationData[item].source}
        imageAssetsFolder="animation/images"
        loop={!prefersReducedMotion}
      />
      <Box paddingHorizontal="xxl">
        <Text
          ref={autoFocusRef}
          textAlign="center"
          color="overlayBodyText"
          variant="bodySubTitle"
          marginBottom="m"
          accessibilityRole="header"
        >
          {i18n.translate(`Tutorial.${item}Title`)}
        </Text>
        <Text variant="bodyText" textAlign="center" color="overlayBodyText">
          {i18n.translate(`Tutorial.${item}`)}
        </Text>
      </Box>
    </ScrollView>
  );
}