rn-try-n-buy-abfrl/src/component/BottomPopup.js

Virtual try-on plugin for ABFRL

import React, {useEffect} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image, FlatList, Dimensions} from 'react-native';
import ImageButton from '../component/ImageButton';
import SceneUtil from '../utils/SceneUtils';

const CheckSelected = require('../assets/images/check_selected.png');
const CheckUnSelected = require('../assets/images/check_unselected.png');

const BottomPopup = ({
  headerArr,
  onCrossPress,
  onHeaderItemClick,
  selectedPopupData,
  data,
  nobodyDetailsSavedBool,
  is_male,
  gender,
  category
}) => {

  const flatListRef = React.useRef()

  const renderHeader = () => (
    <>
      <View style={styles.headerContainer}>
        <FlatList
          data={headerArr}
          style={{marginRight: 14, zIndex: 100}}
          horizontal
          renderItem={(item) => (
            <TouchableOpacity
              onPress={() => {
                flatListRef.current.scrollToOffset({ animated: true, offset: 0 })
                onHeaderItemClick('headerIndex', item.index)
              }}
              style={{
                paddingTop: 14,
                paddingBottom: 14,
                paddingLeft: 12,
                paddingRight: 12,
                borderBottomColor:
                  selectedPopupData.headerIndex === item.index
                    ? SceneUtil.primary_color
                    : SceneUtil.secondary_color,
                borderBottomWidth: 2,
              }}>
              <Text
                style={{
                  fontSize:
                    selectedPopupData.headerIndex === item.index ? 14 : 12,
                  color:
                    selectedPopupData.headerIndex === item.index
                      // ? SceneUtil.primary_color
                      // : SceneUtil.text_color,
                      ? '#f7992e' : '#fff',
                      fontWeight: 'bold'
                }}>
                {item.item}
              </Text>
            </TouchableOpacity>
          )}
          showsHorizontalScrollIndicator={false}
          keyExtractor={(item, index) => index.toString()}
        />
        <ImageButton
          imagepath={require('../assets/images/letter-x.png')}
          width={15}
          height={15}
          marginRight={10}
          marginBottom={10}
          onPress={onCrossPress}
          tintColor={'#fff'}
        />
      </View>
      {renderSeperator()}
      {renderBody()}
    </>
  );

  const renderSeperator = () => <View style={styles.seperator} />;

  const renderBody = (index) => (
    <FlatList
      ref={flatListRef}
      data={data}
      style={{margin: 16}}
      horizontal
      renderItem={renderFaceHairBody}
      extraData={data}
      showsHorizontalScrollIndicator={false}
      keyExtractor={(item, index) => index.toString()}
    />
  );

  const sendType = () => {
    switch (selectedPopupData['headerIndex']) {
      case 0:
        return (gender == "2" || gender == "3")? 'backDropIndex' :(nobodyDetailsSavedBool|| category == "1")? (is_male ? 'hairIndexMale' : 'hairIndex'): (is_male ? 'skinIndexMale' : 'skinIndex');
      case 1:
        return category == "1" ? "backDropIndexLingerie" : nobodyDetailsSavedBool?'lipsIndex':(is_male ? 'hairIndexMale' : 'hairIndex');
      case 2:
        return !nobodyDetailsSavedBool && !is_male?'lipsIndex':'backDropIndex';
      case 3:
        return 'backDropIndex'
    }
    // return
  };

  const renderFaceHairBody = (item) => (
    <View
      style={{
        marginLeft: item.index === 0 ? 0 : 12,
      }}>
      <TouchableOpacity
        onPress={() => onHeaderItemClick(sendType(), item.item.id)}
        style={{
          height: 90,
          width: 90,
          backgroundColor: 'white',
          borderRadius: 4,
          justifyContent: 'flex-end',
          alignItems: 'center',
          borderColor:
            selectedPopupData[sendType()] == item.item.id
              ? SceneUtil.primary_color
              : SceneUtil.secondary_color,
          borderWidth: 1,
        }}>
        <Image
          style={{
            height: (is_male ? selectedPopupData[sendType()] === 'hairIndexMale' : selectedPopupData[sendType()] === 'hairIndex') ? 80 : '100%',
            width: (is_male ? selectedPopupData[sendType()] === 'hairIndexMale' : selectedPopupData[sendType()] === 'hairIndex') ? 80 : '100%',
          }}
          source={{uri:`${SceneUtil.BASE_URL}/${item.item.thumb}`}}
        />
        <Image
          style={{
            position: 'absolute',
            top: 7,
            left: 7,
            height: 20,
            width: 20,
            borderRadius: 10,
          }}
          source={
            selectedPopupData[sendType()] == item.item.id
              ? CheckSelected
              : CheckUnSelected
          }
        />
      </TouchableOpacity>
      {/* <Text style={{color: '#7e818c', fontSize: 9, paddingTop: 1}}>
        {item.item.label}
      </Text> */}
    </View>
  );
  return <View style={styles.container}>{
    renderHeader()
    }</View>;
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    left: -16,
    right: 0,
    backgroundColor: "rgba(30, 18, 0, 0.5)",
    marginHorizontal: 16,
    borderRadius: 4,
    paddingBottom: 10,
    width: Dimensions.get('screen').width,
    zIndex: 10,
    borderTopColor: '#f7992e',
    borderTopWidth: 1
  },
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  seperator: {
    height: 2,
    backgroundColor: '#d4d5d9',
    marginTop: -2,
    zIndex: 1,
  },
});

export default BottomPopup;