ChargEco/Strides-APP/app/components/Dropdown.js

import React, { useEffect, useRef, useState } from 'react';
import { FlatList, Keyboard, Pressable, StyleSheet, Text, View } from 'react-native';
import Modal from 'react-native-modal';
import Button from './Button';
import Dialog, { getDialogWidth } from './Dialog';

//const DialogMaxWidth = $vw(85) > 500 ? 500 : $vw(85);
//const DialogIOSWidth = $vw(75) > 450 ? 450 : $vw(75);

export default Dropdown = ({
    list = [],
    title = '',
    value,
    onChange,
    nameKey,
    valueKey,
    extraText='',
    itemHeight=50,
    rippleStyle,
    style = styles.valueView,
    textStyle = styles.valueText,
    placeholderStyle=styles.placeText,
    placeholder='',
    showIcon = true,
    iconColor = '#888',
    iconStyle = styles.iconStyle,
    autoSelect = true,
    customerItemView
  }) => {
  
  const refFlat = useRef();
  const [visible, showDialog] = useState(false);
  const [selected, changeValue] = useState('');
  const [currentIndex, setCurrent] = useState(0);
  useEffect(() => {
    if (value !== selected) {
      if (nameKey && valueKey) {
        for (var i = 0; i < list.length; i++) {
          let item = list[i];
          if (item[valueKey] == value) {
            changeValue(extraText+item[nameKey]);
            if (list.length > 20) {
              setCurrent(i > 5 ? i - 4 : 0);
            }
            break;
          }
        }
      } else {
        changeValue(extraText+value);
      }
    }
  }, [value, []]);
  useEffect(() => {
    if (autoSelect && list.length > 0) {
      if (!value) {
        const item = list[0];
        /*if (nameKey) {
          changeValue(item[nameKey]);
        } else {
          changeValue(item);
        }*/
        if (onChange) {
          onChange(valueKey ? item[valueKey] : item, 0)
        }
      }
    }
  }, [list]);
  const showList = () => {
    Keyboard.dismiss();
    showDialog(true);
    /*if (currentIndex > 0) {
      console.log(refFlat.current);
      setTimeout(() => {
        if (refFlat.current) {
          refFlat.current.scrollToIndex({
            animated: false,
            index: currentIndex,
            viewPosition: 0.5
          })
        }
      }, 100)
    }*/
  }
  const renderItem = ({ item, index, separators }) => {
    if (customerItemView) {
      return customerItemView(item, index, () => {
        showDialog(false);
        if (onChange) {
          onChange(valueKey ? item[valueKey] : item, index)
        }
      })
    } else {
      return (
        <Button
          text={nameKey ? item[nameKey] : item}
          style={styles.itemView}
          textStyle={styles.itemText}
          onClick={() => {
            showDialog(false);
            if (onChange) {
              onChange(valueKey ? item[valueKey] : item, index)
            }
          }
        }/>
      )
    }
  }
  return (
    <>
      <Pressable
        style={style}
        android_ripple={rippleStyle}
        onPress={() => showList()}>
        { selected 
          ? <Text style={[ui.flex1, textStyle]} numberOfLines={1}>{selected}</Text>
          : <Text style={[textStyle, placeholderStyle]} numberOfLines={1}>{placeholder}</Text>
        }
        { showIcon && 
          <Entypo 
            name={'chevron-thin-down'}
            size={14}
            color={iconColor}
            style={iconStyle}
          />
        }
      </Pressable>
      <Modal
        isVisible={visible}
        onTouchOutside={() => showDialog(false)}
        onBackdropPress={() => showDialog(false)}
        onBackButtonPress={() => showDialog(false)}
        {...Dialog.modalProps}
      >
        <View style={styles.dialog}>
          { title !== '' && <Text style={styles.title}>{title}</Text> }
          <FlatList
            data={list}
            ref={refFlat}
            renderItem={renderItem}
            initialScrollIndex={currentIndex}
            keyExtractor={(item, index) => index}
            style={{maxHeight: $vh(55)}}
            getItemLayout={(data, index) => (
              {length: itemHeight, offset: itemHeight * index, index}
            )}
          />
        </View>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  dialog: {
    width: getDialogWidth(),
    marginLeft: 'auto',
    marginRight: 'auto',
    paddingTop: isIOS ? 12 : 8,
    paddingBottom: isIOS ? 12 : 8,
    backgroundColor: 'white',
    borderRadius: isIOS ? 10 : 3
  },
  title: {
    color: '#000',
    paddingTop: 8,
    paddingLeft: 16,
    paddingBottom: 16,
    fontSize: 17,
    fontWeight: 'bold'
  },
  valueView: {
    paddingLeft: 16,
    paddingRight: 32,
    alignItems: 'center',
    flexDirection: 'row'
  },
  valueText: {
    color: '#000',
    fontSize: 16
  },
  itemView: {
    borderRadius: 0,
    backgroundColor: 'white'
  },
  itemText: {
    flex: 1,
    color: '#333',
    fontSize: 14,
    textAlign: 'left',
    fontWeight: 'normal'
  },
  placeText: {
    flex: 1,
    color: '#aaa'
  },
  iconStyle: {
    top: '50%',
    right: 16,
    marginTop: -7,
    position: 'absolute',
  }
});