SelectBankModal.js 8.34 KB
Newer Older
Giang Tran committed
1
import React, {useState, useEffect} from 'react';
2
import {
Giang Tran committed
3 4 5 6 7 8 9 10
  Text,
  View,
  Modal,
  TouchableOpacity,
  FlatList,
  StyleSheet,
  TextInput,
  ActivityIndicator,
11 12 13 14 15
} from 'react-native';
import _ from 'lodash';
import AntDesign from 'react-native-vector-icons/AntDesign';
import R from '../../assets/R';
import {
Giang Tran committed
16 17 18 19 20
  HEIGHTXD,
  WIDTHXD,
  getFontXD,
  getWidth,
  getHeight,
21 22 23
} from '../../Config/Functions';
import I18n from '../../helper/i18/i18n';
import ItemBank from './ItemBank';
24
import {SafeAreaView} from 'react-native-safe-area-context';
25 26

const SelectBankModal = (props) => {
Giang Tran committed
27 28 29 30
  const [modalVisible, setModalVisible] = useState(false);
  const [valueSearch, setValueSearch] = useState('');
  const [result, setResult] = useState(props.data);
  const [keySearch, setKeySearch] = useState('');
Giang Tran committed
31 32 33
  useEffect(() => {
    setResult(props.data);
  }, [props.data]);
Giang Tran committed
34 35 36
  const localFilter = (data, allowFields = [], search_text) => {
    if (!data) return [];
    if (!search_text || search_text === '') return data;
37

Giang Tran committed
38 39 40 41 42 43 44 45
    let result = [];
    data.map((item) => {
      if (!allowFields) {
        result.push(item);
      } else {
        let added = false;
        allowFields.map((param) => {
          if (
Giang Tran committed
46 47 48 49
            !added &&
            (item[param + ''] + '')
              .toLowerCase()
              .includes(search_text.toLowerCase())
Giang Tran committed
50 51 52 53
          ) {
            result.push(item);
            added = true;
          }
54
        });
Giang Tran committed
55 56 57 58 59 60
      }
    });
    return result;
  };
  const _onSearch = async (keySearch) => {
    const data = props.data
Giang Tran committed
61 62 63 64 65 66 67
      ? localFilter(props.data, ['code', 'name'], keySearch).map((x) => ({
          id: x.id,
          code: x.code,
          name: x.name,
          logo: x.logo,
        }))
      : [];
68

Giang Tran committed
69 70 71 72 73 74 75 76 77
    // remove duplicate
    let result = [];
    data.map((item) => {
      let exists = result.filter((x) => x.id === item.id);
      if (!exists || exists.length === 0) result.push(item);
    });
    setResult(result);
  };
  const _onPressItem = (item) => {
Giang Tran committed
78
    props.onPressItem(item);
Giang Tran committed
79 80 81
    setValueSearch(item ? item.name : '');
    setModalVisible(false);
  };
82

Giang Tran committed
83
  return (
Giang Tran committed
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125
    <View>
      <TouchableOpacity
        style={[styles.buttonShowModal]}
        onPress={() => {
          setModalVisible(true);
          setKeySearch('');
          _onSearch(keySearch);
        }}>
        <View style={styles.flexRowJustifyBetween}>
          <Text
            style={[styles.txtTitle, {flex: 1, flexWrap: 'wrap'}]}
            numberOfLines={1}
            ellipsizeMode="tail">
            {valueSearch.trim()}
          </Text>
          <View>
            {valueSearch === '' ? (
              <TouchableOpacity
                onPress={() => {
                  setModalVisible(true);
                  _onSearch(keySearch);
                }}
                hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}>
                <AntDesign
                  name="search1"
                  size={WIDTHXD(43)}
                  color={R.colors.iconGray}
                />
              </TouchableOpacity>
            ) : (
              <TouchableOpacity
                onPress={() => {
                  _onPressItem(null);
                }}
                hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}>
                <AntDesign
                  name="close"
                  size={WIDTHXD(43)}
                  color={R.colors.iconGray}
                />
              </TouchableOpacity>
            )}
Giang Tran committed
126
          </View>
Giang Tran committed
127 128
        </View>
      </TouchableOpacity>
129

Giang Tran committed
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
      <Modal animated={true} animationType="fade" visible={modalVisible}>
        <SafeAreaView>
          <View style={styles.overViewModal}>
            <View style={[styles.container]}>
              <View style={styles.viewTitle}>
                <Text style={[styles.title]}>{props.title}</Text>
                <TouchableOpacity
                  style={styles.btClose}
                  onPress={() => setModalVisible(false)}>
                  <AntDesign
                    name="close"
                    size={WIDTHXD(48)}
                    color={R.colors.black}
                  />
                </TouchableOpacity>
              </View>
              <View style={styles.viewContent}>
                <View style={styles.inputSearch}>
                  <TextInput
                    style={styles.input}
                    value={keySearch}
                    placeholder={I18n.t('Search')}
                    placeholderTextColor={R.colors.color777}
                    onChangeText={(keySearch) => {
                      setKeySearch(keySearch);
                      _onSearch(keySearch);
                    }}
                  />
                  <AntDesign
                    name="search1"
                    size={WIDTHXD(40)}
                    color={R.colors.gray}
                    style={{position: 'absolute', left: WIDTHXD(28)}}
                  />
164
                </View>
Giang Tran committed
165 166 167 168 169 170 171 172 173 174 175 176 177
                {!_.isEmpty(result) ? (
                  <View style={styles.viewResult}>
                    <FlatList
                      data={result}
                      extraData={result}
                      style={styles.flatlist}
                      renderItem={({item, index}) => (
                        <ItemBank
                          item={item}
                          isEndItem={index == result.length - 1}
                          onPress={(item) => _onPressItem(item)}
                        />
                      )}
178 179
                    />
                  </View>
Giang Tran committed
180 181 182 183 184
                ) : (
                  <Text style={styles.txtEmpty}>
                    {I18n.t('NullDataSearch')}
                  </Text>
                )}
185 186
              </View>
            </View>
Giang Tran committed
187 188 189 190
          </View>
        </SafeAreaView>
      </Modal>
    </View>
Giang Tran committed
191
  );
192 193 194
};

const styles = StyleSheet.create({
Giang Tran committed
195 196 197 198 199
  container: {
    backgroundColor: R.colors.white,
    width: getWidth(),
    height: getHeight(),
  },
200

Giang Tran committed
201 202 203 204 205 206 207 208 209
  txtEmpty: {
    textAlign: 'center',
    color: R.colors.black,
    fontSize: getFontXD(36),
    marginTop: HEIGHTXD(48),
  },
  viewTitle: {
    width: getWidth(),
    height: HEIGHTXD(85),
210
    marginTop: WIDTHXD(30),
Giang Tran committed
211 212 213 214 215 216
    flexDirection: 'row',
    justifyContent: 'center',
    position: 'relative',
  },
  txtTitle: {
    marginRight: WIDTHXD(24),
217
    color: R.colors.black,
Giang Tran committed
218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235
    fontSize: getFontXD(42),
  },
  viewContent: {
    marginTop: WIDTHXD(30),
    marginBottom: WIDTHXD(36),
    paddingHorizontal: WIDTHXD(46),
  },
  inputSearch: {
    flexDirection: 'row',
    position: 'relative',
    alignItems: 'center',
  },
  viewResult: {
    marginTop: WIDTHXD(37),
    paddingBottom: WIDTHXD(54),
  },
  flatlist: {
    width: getWidth(),
Giang Tran committed
236
    marginBottom: HEIGHTXD(300),
Giang Tran committed
237 238
  },
  input: {
239
    height: WIDTHXD(110),
Giang Tran committed
240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272
    width: getWidth() - WIDTHXD(90),
    borderRadius: WIDTHXD(20),
    backgroundColor: R.colors.gray5,
    fontSize: getFontXD(35),
    paddingLeft: WIDTHXD(90),
    paddingRight: WIDTHXD(90),
    color: R.colors.black,
  },
  flexRow: {
    flexDirection: 'row',
  },
  title: {
    width: getWidth(),
    textAlign: 'center',
    alignItems: 'center',
    fontSize: getFontXD(48),
    color: R.colors.black,
  },
  buttonShowModal: {
    justifyContent: 'center',
    height: HEIGHTXD(109),
    color: 'black',
    borderRadius: 7,
    borderWidth: 0.7,
    borderColor: '#DBDBDB',
    fontSize: getFontXD(42),
    paddingVertical: 5,
    paddingHorizontal: 10,
    backgroundColor: 'white',
    shadowColor: '#AFA9A9',
    shadowOffset: {
      width: 0,
      height: 1,
273
    },
Giang Tran committed
274 275 276 277 278 279 280 281
    shadowOpacity: 0.25,
    shadowRadius: 1.84,
    elevation: 1,
  },
  flexRowJustifyBetween: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
282
    paddingHorizontal: WIDTHXD(5),
Giang Tran committed
283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313
  },
  overViewModal: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#rgba(0,0,0,0.7)',
  },
  btClose: {
    alignSelf: 'center',
    position: 'absolute',
    left: WIDTHXD(48),
    width: WIDTHXD(48),
    height: WIDTHXD(48),
  },
  btItem: {
    paddingVertical: WIDTHXD(6),
    // paddingBottom: WIDTHXD(18),
    justifyContent: 'center',
    borderBottomWidth: WIDTHXD(1),
    borderBottomColor: R.colors.borderD4,
  },
  txtResult: {
    paddingLeft: WIDTHXD(28),
    paddingRight: WIDTHXD(28),
    lineHeight: HEIGHTXD(100),
    // width: '100%'
    // textAlign: 'center'
  },
  loading: {
    alignSelf: 'center',
    marginTop: 24,
  },
314
});
Giang Tran committed
315
export default React.memo(SelectBankModal);