Fakultas Ilmu Komputer UI

index.tsx 2.17 KB
Newer Older
Wulan Mantiri's avatar
Wulan Mantiri committed
1
2
import React, { FC } from 'react';
import { useNavigation } from '@react-navigation/native';
3
4
import { View, ScrollView } from 'react-native';
import { Button, Text, Icon } from 'react-native-elements';
Wulan Mantiri's avatar
Wulan Mantiri committed
5
6
7

import { styles } from './styles';
import { Props } from './types';
8
import { colors } from 'styles';
Wulan Mantiri's avatar
Wulan Mantiri committed
9
10
11
12
13
14
15
16
17
18

const StepByStepForm: FC<Props> = ({
  pages,
  currentPage,
  defaultValues,
  finishRedirectRoute,
}) => {
  const navigation = useNavigation();

  const getButton = (i: number, route: string) => {
19
20
21
    if (i === 0 && currentPage !== 0) {
      return <Icon name="lock" color={colors.primaryYellow} size={30} />;
    }
Wulan Mantiri's avatar
Wulan Mantiri committed
22
23
24
25
    let buttonLabel;
    if (i < currentPage) {
      buttonLabel = 'Ubah';
    } else if (i === currentPage) {
26
      buttonLabel = 'Isi';
Wulan Mantiri's avatar
Wulan Mantiri committed
27
28
29
30
31
32
33
34
35
36
37
38
    }
    return buttonLabel ? (
      <Button
        title={buttonLabel}
        onPress={() => navigation.navigate(route, defaultValues)}
        buttonStyle={styles.button}
        titleStyle={styles.buttonTitle}
      />
    ) : null;
  };

  return (
39
    <ScrollView contentContainerStyle={styles.container}>
Wulan Mantiri's avatar
Wulan Mantiri committed
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
      <View style={styles.pageContainer}>
        {pages.map((page, i) => (
          <View style={styles.page} key={i}>
            <Text
              style={[
                styles.number,
                currentPage < i ? styles.notfilled : styles.filled,
              ]}>
              {i + 1}
            </Text>
            <Text
              style={[
                styles.md,
                currentPage < i ? styles.notfilled : styles.filled,
              ]}>
              {page.name}
            </Text>
            <View style={styles.buttonContainer}>
              {getButton(i, page.route)}
            </View>
          </View>
        ))}
      </View>
63
      <View style={styles.bottomContainer}>
Wulan Mantiri's avatar
Wulan Mantiri committed
64
65
        <Button
          title="Selesai"
66
67
68
69
70
71
          onPress={() =>
            navigation.reset({
              index: 0,
              routes: [{ name: finishRedirectRoute }],
            })
          }
Wulan Mantiri's avatar
Wulan Mantiri committed
72
73
74
75
76
          buttonStyle={styles.finishButton}
          titleStyle={styles.buttonTitle}
          disabled={currentPage !== pages.length}
        />
      </View>
77
    </ScrollView>
Wulan Mantiri's avatar
Wulan Mantiri committed
78
79
80
81
  );
};

export default StepByStepForm;