Fakultas Ilmu Komputer UI

index.tsx 2.66 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { FC } from 'react';
import { View, Text, TextInput } from 'react-native';

import React from 'react';
import { InfoCard } from 'components/core';
import { typographyStyles } from 'styles';
import { styles } from './styles';
import { dietReportPage } from '../../pages/types';

interface Props {
  question: string;
  pageName: string;
  answer: string;
  textInputProps?: any;
  questionName?: string | null;
  lowestScoreDescription?: string | null;
  highestScoreDescription?: string | null;
  testID?: string;
}

const QuestionAnswerCommentCard: FC<Props> = ({
  questionName,
  pageName,
  question,
  answer,
  textInputProps,
  lowestScoreDescription,
  highestScoreDescription,
  testID,
}) => {
  return (
    <View style={styles.labelContainer} testID={testID}>
      {questionName === 'name' ? (
        <Text style={[typographyStyles.headingLarge, styles.nameSize]}>
          {answer}
        </Text>
      ) : null}
      {questionName === 'email' ? (
        <Text style={[typographyStyles.bodySmall, styles.bottomMargin]}>
          {answer}
        </Text>
      ) : null}

      {pageName === dietReportPage.PAGE3 ? (
        <View>
          <Text
            style={[
              typographyStyles.bodyLarge,
              styles.topMargin,
              styles.smallBottomMargin,
            ]}>
            {question}
          </Text>
          <InfoCard content={answer} />
          {/* <Text style={[typographyStyles.bodyMedium, styles.label]}>
            {answer}
          </Text> */}
        </View>
      ) : null}

      {pageName !== dietReportPage.PAGE3 &&
      questionName !== 'name' &&
      questionName !== 'email' ? (
        <View>
          <Text style={[typographyStyles.bodyLarge]}>{question}</Text>
          {lowestScoreDescription ? (
            <Text style={[typographyStyles.bodySmall, styles.descMargin]}>
              {lowestScoreDescription}
            </Text>
          ) : null}
          {highestScoreDescription ? (
            <Text
              style={[typographyStyles.bodySmall, styles.smallBottomMargin]}>
              {highestScoreDescription}
            </Text>
          ) : null}
          {/* <Text style={[typographyStyles.bodyMedium, styles.label]}>
            {answer}
          </Text> */}
          <InfoCard content={answer} />
          <Text style={[typographyStyles.bodySmall, styles.topMargin]}>
            Komentar:
          </Text>
          <TextInput
            style={[typographyStyles.bodySmall, styles.input]}
            {...textInputProps}
            placeholder="Tuliskan komentar..."
            multiline={true}
          />
        </View>
      ) : null}
    </View>
  );
};

export default QuestionAnswerCommentCard;