Fakultas Ilmu Komputer UI

index.tsx 1.78 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
import React, { FC } from 'react';

import { View } from 'react-native';
import { typographyStyles } from 'styles';
import { Text } from 'react-native-elements';

import { styles } from './styles';
import { Props } from './types';
import FormLabel from '../FormLabel';
import RadioButton from '../RadioButton';

const LikertScale: FC<Props> = ({
  label,
  required,
  errorMessage,
  helperText,
  scaleDescription,
  choices,
  value,
  onChange,
}) => (
  <View>
    <FormLabel label={label} required={required} />
    {helperText ? (
      <Text style={[typographyStyles.bodySmall, styles.helperText]}>
        {helperText}
      </Text>
    ) : null}
    {scaleDescription ? (
      <Text style={[typographyStyles.bodySmall, styles.helperText]}>
        {choices[0].label}: {scaleDescription.lowest} {'\n'}
        {scaleDescription.middle ? scaleDescription.middle + '\n' : ''}
        {choices[choices.length - 1].label}: {scaleDescription.highest}
      </Text>
    ) : null}
    <View style={styles.textGroup}>
      {choices.map((choice) => (
        <View style={{ flex: 1 / choices.length }} key={`text${choice.value}`}>
          <Text style={styles.radioText}>{choice.label}</Text>
        </View>
      ))}
    </View>
    <View style={styles.buttonGroup}>
      {choices.map((choice) => (
        <View
          style={{ flex: 1 / choices.length }}
          key={`button${choice.value}`}>
          <RadioButton
49
            testID={`${label}-${value}`}
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
            key={choice.value}
            checked={value === choice.value}
            onPress={() => onChange(choice.value)}
            center
          />
        </View>
      ))}
    </View>
    {errorMessage ? (
      <Text style={[typographyStyles.caption, styles.red]}>{errorMessage}</Text>
    ) : null}
  </View>
);

export default LikertScale;