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

/**
 * 国家图标组件
 * @邠心vbe on 2021/10/08
 */
import React from 'react';
import { Image, StyleSheet, Text } from 'react-native';
import countries from './countrys.json';
import Button from './Button';
import apiUser from '../api/apiUser';

const RNCountryList = {
  AD: require('../images/country/AD.png'),
  AE: require('../images/country/AE.png'),
  AF: require('../images/country/AF.png'),
  AG: require('../images/country/AG.png'),
  AI: require('../images/country/AI.png'),
  AL: require('../images/country/AL.png'),
  AM: require('../images/country/AM.png'),
  AO: require('../images/country/AO.png'),
  AR: require('../images/country/AR.png'),
  AS: require('../images/country/AS.png'),
  AT: require('../images/country/AT.png'),
  AU: require('../images/country/AU.png'),
  AW: require('../images/country/AW.png'),
  AX: require('../images/country/AX.png'),
  AZ: require('../images/country/AZ.png'),
  BA: require('../images/country/BA.png'),
  BB: require('../images/country/BB.png'),
  BD: require('../images/country/BD.png'),
  BE: require('../images/country/BE.png'),
  BF: require('../images/country/BF.png'),
  BG: require('../images/country/BG.png'),
  BH: require('../images/country/BH.png'),
  BI: require('../images/country/BI.png'),
  BJ: require('../images/country/BJ.png'),
  BL: require('../images/country/BL.png'),
  BM: require('../images/country/BM.png'),
  BN: require('../images/country/BN.png'),
  BO: require('../images/country/BO.png'),
  BQ: require('../images/country/BQ.png'),
  BR: require('../images/country/BR.png'),
  BS: require('../images/country/BS.png'),
  BT: require('../images/country/BT.png'),
  BW: require('../images/country/BW.png'),
  BY: require('../images/country/BY.png'),
  BZ: require('../images/country/BZ.png'),
  CA: require('../images/country/CA.png'),
  CC: require('../images/country/CC.png'),
  CD: require('../images/country/CD.png'),
  CF: require('../images/country/CF.png'),
  CG: require('../images/country/CG.png'),
  CH: require('../images/country/CH.png'),
  CI: require('../images/country/CI.png'),
  CK: require('../images/country/CK.png'),
  CL: require('../images/country/CL.png'),
  CM: require('../images/country/CM.png'),
  CN: require('../images/country/CN.png'),
  CO: require('../images/country/CO.png'),
  CR: require('../images/country/CR.png'),
  CU: require('../images/country/CU.png'),
  CV: require('../images/country/CV.png'),
  CW: require('../images/country/CW.png'),
  CX: require('../images/country/CX.png'),
  CY: require('../images/country/CY.png'),
  CZ: require('../images/country/CZ.png'),
  DE: require('../images/country/DE.png'),
  DJ: require('../images/country/DJ.png'),
  DK: require('../images/country/DK.png'),
  DM: require('../images/country/DM.png'),
  DO: require('../images/country/DO.png'),
  DZ: require('../images/country/DZ.png'),
  EC: require('../images/country/EC.png'),
  EE: require('../images/country/EE.png'),
  EG: require('../images/country/EG.png'),
  EH: require('../images/country/EH.png'),
  ER: require('../images/country/ER.png'),
  ES: require('../images/country/ES.png'),
  ET: require('../images/country/ET.png'),
  FI: require('../images/country/FI.png'),
  FJ: require('../images/country/FJ.png'),
  FK: require('../images/country/FK.png'),
  FM: require('../images/country/FM.png'),
  FO: require('../images/country/FO.png'),
  FR: require('../images/country/FR.png'),
  GA: require('../images/country/GA.png'),
  GB: require('../images/country/GB.png'),
  GD: require('../images/country/GD.png'),
  GE: require('../images/country/GE.png'),
  GF: require('../images/country/GF.png'),
  GG: require('../images/country/GG.png'),
  GH: require('../images/country/GH.png'),
  GI: require('../images/country/GI.png'),
  GM: require('../images/country/GM.png'),
  GN: require('../images/country/GN.png'),
  GP: require('../images/country/GP.png'),
  GQ: require('../images/country/GQ.png'),
  GR: require('../images/country/GR.png'),
  GT: require('../images/country/GT.png'),
  GU: require('../images/country/GU.png'),
  GW: require('../images/country/GW.png'),
  GY: require('../images/country/GY.png'),
  HK: require('../images/country/HK.png'),
  HN: require('../images/country/HN.png'),
  HR: require('../images/country/HR.png'),
  HT: require('../images/country/HT.png'),
  HU: require('../images/country/HU.png'),
  ID: require('../images/country/ID.png'),
  IE: require('../images/country/IE.png'),
  IL: require('../images/country/IL.png'),
  IM: require('../images/country/IM.png'),
  IN: require('../images/country/IN.png'),
  IO: require('../images/country/IO.png'),
  IQ: require('../images/country/IQ.png'),
  IR: require('../images/country/IR.png'),
  IS: require('../images/country/IS.png'),
  IT: require('../images/country/IT.png'),
  JE: require('../images/country/JE.png'),
  JM: require('../images/country/JM.png'),
  JO: require('../images/country/JO.png'),
  JP: require('../images/country/JP.png'),
  KE: require('../images/country/KE.png'),
  KG: require('../images/country/KG.png'),
  KH: require('../images/country/KH.png'),
  KI: require('../images/country/KI.png'),
  KM: require('../images/country/KM.png'),
  KN: require('../images/country/KN.png'),
  KP: require('../images/country/KP.png'),
  KR: require('../images/country/KR.png'),
  KS: require('../images/country/KS.png'),
  KW: require('../images/country/KW.png'),
  KY: require('../images/country/KY.png'),
  KZ: require('../images/country/KZ.png'),
  LA: require('../images/country/LA.png'),
  LB: require('../images/country/LB.png'),
  LC: require('../images/country/LC.png'),
  LI: require('../images/country/LI.png'),
  LK: require('../images/country/LK.png'),
  LR: require('../images/country/LR.png'),
  LS: require('../images/country/LS.png'),
  LT: require('../images/country/LT.png'),
  LU: require('../images/country/LU.png'),
  LV: require('../images/country/LV.png'),
  LY: require('../images/country/LY.png'),
  MA: require('../images/country/MA.png'),
  MC: require('../images/country/MC.png'),
  MD: require('../images/country/MD.png'),
  ME: require('../images/country/ME.png'),
  MF: require('../images/country/MF.png'),
  MG: require('../images/country/MG.png'),
  MH: require('../images/country/MH.png'),
  MK: require('../images/country/MK.png'),
  ML: require('../images/country/ML.png'),
  MM: require('../images/country/MM.png'),
  MN: require('../images/country/MN.png'),
  MO: require('../images/country/MO.png'),
  MP: require('../images/country/MP.png'),
  MQ: require('../images/country/MQ.png'),
  MR: require('../images/country/MR.png'),
  MS: require('../images/country/MS.png'),
  MT: require('../images/country/MT.png'),
  MU: require('../images/country/MU.png'),
  MV: require('../images/country/MV.png'),
  MW: require('../images/country/MW.png'),
  MX: require('../images/country/MX.png'),
  MY: require('../images/country/MY.png'),
  MZ: require('../images/country/MZ.png'),
  NA: require('../images/country/NA.png'),
  NC: require('../images/country/NC.png'),
  NE: require('../images/country/NE.png'),
  NF: require('../images/country/NF.png'),
  NG: require('../images/country/NG.png'),
  NI: require('../images/country/NI.png'),
  NL: require('../images/country/NL.png'),
  NO: require('../images/country/NO.png'),
  NP: require('../images/country/NP.png'),
  NR: require('../images/country/NR.png'),
  NU: require('../images/country/NU.png'),
  NZ: require('../images/country/NZ.png'),
  OM: require('../images/country/OM.png'),
  PA: require('../images/country/PA.png'),
  PE: require('../images/country/PE.png'),
  PF: require('../images/country/PF.png'),
  PG: require('../images/country/PG.png'),
  PH: require('../images/country/PH.png'),
  PK: require('../images/country/PK.png'),
  PL: require('../images/country/PL.png'),
  PM: require('../images/country/PM.png'),
  PR: require('../images/country/PR.png'),
  PS: require('../images/country/PS.png'),
  PT: require('../images/country/PT.png'),
  PW: require('../images/country/PW.png'),
  PY: require('../images/country/PY.png'),
  QA: require('../images/country/QA.png'),
  RE: require('../images/country/RE.png'),
  RO: require('../images/country/RO.png'),
  RS: require('../images/country/RS.png'),
  RU: require('../images/country/RU.png'),
  RW: require('../images/country/RW.png'),
  SA: require('../images/country/SA.png'),
  SB: require('../images/country/SB.png'),
  SC: require('../images/country/SC.png'),
  SD: require('../images/country/SD.png'),
  SE: require('../images/country/SE.png'),
  SG: require('../images/country/SG.png'),
  SH: require('../images/country/SH.png'),
  SI: require('../images/country/SI.png'),
  SJ: require('../images/country/SJ.png'),
  SK: require('../images/country/SK.png'),
  SL: require('../images/country/SL.png'),
  SM: require('../images/country/SM.png'),
  SN: require('../images/country/SN.png'),
  SO: require('../images/country/SO.png'),
  SR: require('../images/country/SR.png'),
  SS: require('../images/country/SS.png'),
  ST: require('../images/country/ST.png'),
  SV: require('../images/country/SV.png'),
  SX: require('../images/country/SX.png'),
  SY: require('../images/country/SY.png'),
  SZ: require('../images/country/SZ.png'),
  TC: require('../images/country/TC.png'),
  TD: require('../images/country/TD.png'),
  TG: require('../images/country/TG.png'),
  TH: require('../images/country/TH.png'),
  TJ: require('../images/country/TJ.png'),
  TK: require('../images/country/TK.png'),
  TL: require('../images/country/TL.png'),
  TM: require('../images/country/TM.png'),
  TN: require('../images/country/TN.png'),
  TO: require('../images/country/TO.png'),
  TR: require('../images/country/TR.png'),
  TT: require('../images/country/TT.png'),
  TV: require('../images/country/TV.png'),
  TW: require('../images/country/TW.png'),
  TZ: require('../images/country/TZ.png'),
  UA: require('../images/country/UA.png'),
  UG: require('../images/country/UG.png'),
  US: require('../images/country/US.png'),
  UY: require('../images/country/UY.png'),
  UZ: require('../images/country/UZ.png'),
  VA: require('../images/country/VA.png'),
  VC: require('../images/country/VC.png'),
  VE: require('../images/country/VE.png'),
  VG: require('../images/country/VG.png'),
  VI: require('../images/country/VI.png'),
  VN: require('../images/country/VN.png'),
  VU: require('../images/country/VU.png'),
  WF: require('../images/country/WF.png'),
  WS: require('../images/country/WS.png'),
  YE: require('../images/country/YE.png'),
  YT: require('../images/country/YT.png'),
  ZA: require('../images/country/ZA.png'),
  ZM: require('../images/country/ZM.png'),
  ZW: require('../images/country/ZW.png')
}

//const RNCurrencyList = ['SG', 'US', 'MY', 'HK', 'AU', 'CA', 'PH', 'ID', 'NZ', 'JP']

export const CountryIcon = (
  {
    style={},
    width=24,
    height=16,
    borderRadius=2,
    countryCode='SG'
  }
) => (
  <Image
    style={
      {
        width: width, 
        height: height,
        borderRadius: borderRadius,
        ...style //Any image styles
      }
    }
    source={
      //**SG
      RNCountryList[countryCode ?? 'SG']
    }
  />
)

export const GetCountryList = (back) => {
  if (global.ComCountryList === undefined) {
    console.log('--------------------------------------------------------');
    console.log('--START--', 'GetCountryList');
    const list = []
    //const curl = []
    //console.log('原始国家', countries.length);
    apiUser.getCountryList().then(res => {
      if (res.data && res.data.length) {
        res.data.forEach(item => {
          const country = {
            countryNum: item.callingCode,
            countryCode: item.countryCode,
            countryName: item.countryName,
            currency: item.currency,
            currencySign: item.currencySymbol
          };
          list.push(country);
        })
        if (list.length > 0) {
          global.ComCountryList = list;
          if (back) back(global.ComCountryList);
        }
      }
    }).catch(err => {
      countries.forEach(item => {
        if (RNCountryList[item.countryCode] !== undefined && item.region !== 'Antarctic' && item.subregion !== 'Polynesia' && !item.exclude) {
          //item.subregion === 'Eastern Asia' || item.subregion === 'South-Eastern Asia') {
          const country = {
            countryNum: item.callingCode[0],
            countryCode: item.countryCode,
            countryName: item.countryName,
            currencySign: item.currencySign,
            currency: item.currency[0]
          };
          list.push(country);
          /*if (RNCurrencyList.indexOf(item.countryCode) >= 0) {
            curl.push(country);
          }*/
        }
      })
      //console.log('最终国家', list.length);
      if (list.length > 0) {
        global.ComCountryList = list;
        //global.CurCountryList = curl;
        if (back) back(global.ComCountryList);
      }
    });
  } else {
    if (back) back(global.ComCountryList);
  }
}

export const GetCurrencyCountryList = (back) => {
  if (global.CurCountryList === undefined) {
    GetCountryList(list => {
      if (back) back(global.CurCountryList);
    })
  } else {
    if (back) back(global.CurCountryList);
  }
}

/**
 * 根据国家代码查询国家信息
 * @param {*} countryCode 国家代码
 * @returns 国家信息
 */
export const GetCountryByCode = (countryCode, back) => {
  if (countryCode) {
    GetCountryList(list => {
      for (let item of list) {
        //console.log(item.countryCode, item.countryCode === countryCode);
        if (item.countryCode === countryCode) {
          if (back) back(item);
          break;
        }
      }
    })
  } else {
    if (back) back(undefined);
  }
}

/**
 * 根据国家代码查询国家信息
 * @param {*} countryCode 国家代码
 * @returns 国家信息
 */
 export const GetCountryByNum = (countryNum, back) => {
  if (global.ComCountryList && countryNum) {
    for (let item of global.ComCountryList) {
      //console.log(item.countryNum, item.countryNum === countryNum);
      if (item.countryNum === countryNum) {
        if (back) back(item);
        break;
      }
    }
  } else {
    if (back) back(undefined);
  }
}

/**
 * CallingCode下拉框组件
 * @param {*} param0 国家信息{country, value, onClick}
 * @returns 下拉框组件
 */
export const CountryDropNum = ({country, value, onClick}) => {
  return (
    <Button
      style={styles.countryDropItem}
      viewStyle={styles.countryDropItemView}
      onClick={onClick}>
      <CountryIcon
        borderRadius={0}
        style={styles.iconBorder}
        countryCode={country.countryCode}/>
      <Text style={styles.countryDropItemText}>{country.countryName} ({'+'+country.countryNum})</Text>
      { value == country.countryNum &&
        <MaterialIcons
          name='check-circle'
          color={colorAccent}
          size={20}/>
      }
    </Button>
  )
}

/**
 * 国家名称下拉框组件
 * @param {*} param0 国家信息{country, value, onClick}
 * @returns 下拉框组件
 */
export const CountryDropCode = ({country, value, onClick}) => {
  return (
    <Button
      style={styles.countryDropItem}
      viewStyle={styles.countryDropItemView}
      onClick={onClick}>
      <CountryIcon
        style={styles.iconBorder}
        borderRadius={0}
        countryCode={country.countryCode}/>
      <Text style={styles.countryDropItemText}>{country.countryName}</Text>
      { value == country.countryCode &&
        <MaterialIcons
          name='check-circle'
          color={colorAccent}
          size={20}/>
      }
    </Button>
  )
}

/**
 * 货币符号下拉框组件
 * @param {*} param0 国家信息{country, value, onClick}
 * @returns 下拉框组件
 */
export const CountryDropCurrency = ({country, value, onClick}) => {
  return (
    <Button
      style={styles.countryDropItem}
      viewStyle={styles.countryDropItemView}
      onClick={onClick}>
      <CountryIcon
        style={styles.iconBorder}
        borderRadius={0}
        countryCode={country.countryCode}/>
      <Text style={styles.countryDropItemText}>{country.countryName} ({country.currencySign})</Text>
      { value == country.countryCode
      ? <MaterialIcons
          name='check-circle'
          color={colorAccent}
          size={20}/>
      : <Text style={styles.countryExchangeRate}>{country.exchangeRate}</Text>
      }
    </Button>
  )
}

const styles = StyleSheet.create({
  countryDropItem: {
    borderRadius: 0,
    backgroundColor: 'white'
  },
  countryDropItemView: {
    flex: 1,
    height: 50,
    paddingLeft: 16,
    paddingRight: 16,
    alignItems: 'center',
    flexDirection: 'row'
  },
  countryDropItemText: {
    flex: 1,
    color: '#333',
    fontSize: 14,
    paddingLeft: 16
  },
  countryExchangeRate: {
    color: '#999',
    fontSize: 10,
  },
  iconBorder: {
    borderWidth: 1,
    borderColor: 'rgba(100, 100, 100, .1)'
  },
  payIcon: {
    width: 50,
    height: 25
  }
})