FeedbackView.js 5.79 KB
Newer Older
Giang Tran committed
1
import React, {useState} from 'react';
2 3 4 5 6 7 8 9
import {
  View,
  StyleSheet,
  Text,
  KeyboardAvoidingView,
  Platform,
  TextInput,
  Image,
10 11 12
  TouchableOpacity,
  ImageBackground,
  ScrollView,
Giang Tran committed
13 14
  TouchableWithoutFeedback,
  Keyboard,
15
} from 'react-native';
Giang Tran committed
16
import HeaderBack from '../../components/Header/HeaderBack';
17 18 19 20 21 22 23
import RadioForm, {
  RadioButton,
  RadioButtonInput,
  RadioButtonLabel,
} from 'react-native-simple-radio-button';
import PickerImg from '../../components/Picker/PickerImg';
import {HEIGHTXD, WIDTHXD, getFontXD} from '../../Config/Functions';
24 25
import R from '../../assets/R';
import Button from '../../components/Button';
26
import I18n from '../../helper/i18/i18n';
27 28

const radio_props = [
29 30 31 32 33
  {label: I18n.t('VeryBad'), value: 0},
  {label: I18n.t('Bad'), value: 1},
  {label: I18n.t('Normal'), value: 2},
  {label: I18n.t('Good'), value: 3},
  {label: I18n.t('VeryGood'), value: 4},
Giang Tran committed
34
];
Giang Tran committed
35 36

const FeedbackView = (props) => {
37 38
  const [isSelected, setIsSelected] = useState('');
  const [txtInput, setTxtInput] = useState('');
39
  const [imageAdd, setImageAdd] = useState([]);
40 41 42 43 44 45

  const onPress = (value) => {
    setIsSelected(value);
    // console.log('hellooo');
  };

46 47 48
  const onClickImages = (images) => {
    // const images = imageAdd.map((e) => e.path);
    setImageAdd(images);
49
  };
50 51 52 53 54 55 56 57 58

  const onClickClose = (index) => {
    console.log('index---', index);
    const temp = imageAdd.filter((e, i) => {
      if (i != index) return e;
    });
    setImageAdd(temp);
  };

Giang Tran committed
59
  return (
60 61 62 63
    <KeyboardAvoidingView
      behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
      style={{flex: 1}}
      keyboardVerticalOffset={-50}>
Giang Tran committed
64 65
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={{flex: 1}}>
Giang Tran committed
66
          <HeaderBack isWhite={true} title={'SendFeedback'} />
Giang Tran committed
67
          <View style={styles.container}>
68
            <Text style={styles.txt}>{I18n.t('ReviewService')}</Text>
69

Giang Tran committed
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
            <RadioForm animation={true}>
              {radio_props.map((obj, i) => (
                <RadioButton labelHorizontal={true} key={i}>
                  <RadioButtonInput
                    obj={obj}
                    index={i}
                    isSelected={isSelected === i}
                    onPress={onPress}
                    r
                    borderWidth={1}
                    buttonColor={isSelected === i ? '#1473E6' : '#C5C5C5'}
                    buttonSize={10}
                    buttonOuterSize={18}
                    buttonStyle={{marginLeft: 20, marginVertical: 10}}
                  />
                  <RadioButtonLabel
                    obj={obj}
                    index={i}
                    labelColor={'#001C51'}
                    onPress={onPress}
                    labelStyle={{fontSize: 16, paddingLeft: 16}}
                  />
                </RadioButton>
              ))}
            </RadioForm>
95

Giang Tran committed
96 97 98 99 100
            <View style={styles.footer}>
              <TextInput
                style={styles.txtInput}
                placeholderTextColor={R.colors.placeHolder}
                multiline={true}
101
                placeholder={I18n.t('ShareYourFeel')}
Giang Tran committed
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
                onChangeText={(val) => setTxtInput(val)}
              />
              <View
                style={{
                  borderWidth: 1,
                  borderStyle: 'dashed',
                  borderColor: '#CBCBCB',
                }}
              />
              <View style={styles.picker}>
                {imageAdd.length > 0 ? (
                  <ScrollView showsHorizontalScrollIndicator={false} horizontal>
                    {imageAdd.map((e, index) => (
                      <View key={index} style={styles.imageButton}>
                        <ImageBackground
                          imageStyle={{
                            width: WIDTHXD(330),
                            height: HEIGHTXD(250),
                          }}
121
                          style={{
Giang Tran committed
122 123
                            width: WIDTHXD(330),
                            height: HEIGHTXD(250),
124
                          }}
Giang Tran committed
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
                          source={{uri: e}}>
                          <TouchableOpacity
                            style={{
                              flexDirection: 'row',
                              justifyContent: 'flex-end',
                              marginTop: -10,
                              marginRight: -10,
                            }}
                            onPress={() => onClickClose(index)}>
                            <Image
                              style={{height: 30, width: 30}}
                              source={R.images.iconClose}
                            />
                          </TouchableOpacity>
                        </ImageBackground>
                      </View>
                    ))}
                  </ScrollView>
                ) : (
144
                  <PickerImg title={I18n.t('UploadImage')} onClickImage={onClickImages} />
Giang Tran committed
145 146
                )}
              </View>
147 148
            </View>
          </View>
149

Giang Tran committed
150 151 152
          <View style={styles.containerBtn}>
            <Button
              onClick={() => console.log('hello')}
153
              title={I18n.t('SendFeedback')}
Giang Tran committed
154 155
            />
          </View>
156
        </View>
Giang Tran committed
157
      </TouchableWithoutFeedback>
158
    </KeyboardAvoidingView>
Giang Tran committed
159 160 161
  );
};

162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 30,
    paddingVertical: 10,
  },
  txt: {
    color: '#929292',
    paddingVertical: 16,
    fontSize: 18,
  },
  footer: {
    marginTop: 10,
    borderRadius: 6,
    borderWidth: 2,
    borderColor: '#CBCBCB',
    // height: 200,
    marginHorizontal: 5,
  },
  txtInput: {
    height: 110,
    margin: 10,
  },
185 186 187 188 189 190 191 192 193 194 195
  picker: {
    marginLeft: 10,
    marginBottom: 10,
  },
  imageButton: {
    marginTop: 10,
    marginRight: 20,
  },
  containerBtn: {
    marginBottom: 30,
  },
196 197
});

Giang Tran committed
198
export default FeedbackView;