902 lines
14 KiB
JavaScript
902 lines
14 KiB
JavaScript
import React, { useState, useMemo } from "react";
|
|
import { CheckList, Popup, SearchBar } from "antd-mobile";
|
|
|
|
export default function RegionCodeSelecter({ visible, setVisible, setCode }) {
|
|
const [regionCode, setRegionCode] = useState("86");
|
|
|
|
//是否展开区号选择器
|
|
const [searchText, setSearchText] = useState("");
|
|
const items = [
|
|
{
|
|
city: "中国大陆",
|
|
code: "86",
|
|
},
|
|
{
|
|
city: "中国香港",
|
|
code: "852",
|
|
},
|
|
{
|
|
city: "中国澳门",
|
|
code: "853",
|
|
},
|
|
{
|
|
city: "中国台湾",
|
|
code: "886",
|
|
},
|
|
{
|
|
city: "新加坡",
|
|
code: "65",
|
|
},
|
|
{
|
|
city: "阿富汗",
|
|
code: "93",
|
|
},
|
|
{
|
|
city: "阿尔巴尼亚",
|
|
code: "355",
|
|
},
|
|
{
|
|
city: "阿尔格拉",
|
|
code: "213",
|
|
},
|
|
{
|
|
city: "安道尔",
|
|
code: "376",
|
|
},
|
|
{
|
|
city: "安哥拉",
|
|
code: "244",
|
|
},
|
|
{
|
|
city: "安圭拉",
|
|
code: "1264",
|
|
},
|
|
{
|
|
city: "阿森松岛",
|
|
code: "247",
|
|
},
|
|
{
|
|
city: "安提瓜和巴布达",
|
|
code: "1268",
|
|
},
|
|
{
|
|
city: "阿根廷",
|
|
code: "54",
|
|
},
|
|
{
|
|
city: "亚美尼亚",
|
|
code: "374",
|
|
},
|
|
{
|
|
city: "阿鲁巴",
|
|
code: "297",
|
|
},
|
|
{
|
|
city: "澳大利亚",
|
|
code: "61",
|
|
},
|
|
{
|
|
city: "奥地利",
|
|
code: "43",
|
|
},
|
|
{
|
|
city: "阿塞拜疆",
|
|
code: "994",
|
|
},
|
|
{
|
|
city: "巴哈马",
|
|
code: "1242",
|
|
},
|
|
{
|
|
city: "巴林",
|
|
code: "973",
|
|
},
|
|
{
|
|
city: "孟加拉国",
|
|
code: "880",
|
|
},
|
|
{
|
|
city: "巴巴多斯",
|
|
code: "1246",
|
|
},
|
|
{
|
|
city: "白俄罗斯",
|
|
code: "375",
|
|
},
|
|
{
|
|
city: "比利时",
|
|
code: "32",
|
|
},
|
|
{
|
|
city: "伯利兹",
|
|
code: "501",
|
|
},
|
|
{
|
|
city: "贝宁",
|
|
code: "229",
|
|
},
|
|
{
|
|
city: "百慕大",
|
|
code: "1441",
|
|
},
|
|
{
|
|
city: "不丹",
|
|
code: "975",
|
|
},
|
|
{
|
|
city: "玻利维亚",
|
|
code: "591",
|
|
},
|
|
{
|
|
city: "波斯尼亚和黑塞哥维那",
|
|
code: "387",
|
|
},
|
|
{
|
|
city: "博茨瓦纳",
|
|
code: "267",
|
|
},
|
|
{
|
|
city: "巴西",
|
|
code: "55",
|
|
},
|
|
{
|
|
city: "文莱",
|
|
code: "673",
|
|
},
|
|
{
|
|
city: "保加利亚",
|
|
code: "359",
|
|
},
|
|
{
|
|
city: "布基纳法索",
|
|
code: "226",
|
|
},
|
|
{
|
|
city: "布隆迪",
|
|
code: "257",
|
|
},
|
|
{
|
|
city: "柬埔寨",
|
|
code: "855",
|
|
},
|
|
{
|
|
city: "喀麦隆",
|
|
code: "237",
|
|
},
|
|
{
|
|
city: "加拿大",
|
|
code: "1",
|
|
},
|
|
{
|
|
city: "佛得角",
|
|
code: "238",
|
|
},
|
|
{
|
|
city: "开曼群岛",
|
|
code: "1345",
|
|
},
|
|
{
|
|
city: "中非共和国",
|
|
code: "236",
|
|
},
|
|
{
|
|
city: "乍得",
|
|
code: "235",
|
|
},
|
|
{
|
|
city: "智利",
|
|
code: "56",
|
|
},
|
|
{
|
|
city: "哥伦比亚",
|
|
code: "57",
|
|
},
|
|
{
|
|
city: "科摩罗",
|
|
code: "269",
|
|
},
|
|
{
|
|
city: "刚果共和国",
|
|
code: "242",
|
|
},
|
|
{
|
|
city: "刚果民主共和国",
|
|
code: "243",
|
|
},
|
|
{
|
|
city: "库克群岛",
|
|
code: "682",
|
|
},
|
|
{
|
|
city: "哥斯达黎加",
|
|
code: "506",
|
|
},
|
|
{
|
|
city: "科特迪沃",
|
|
code: "225",
|
|
},
|
|
{
|
|
city: "克罗地亚",
|
|
code: "385",
|
|
},
|
|
{
|
|
city: "古巴",
|
|
code: "53",
|
|
},
|
|
{
|
|
city: "塞浦路斯",
|
|
code: "357",
|
|
},
|
|
{
|
|
city: "捷克共和国",
|
|
code: "420",
|
|
},
|
|
{
|
|
city: "丹麦",
|
|
code: "45",
|
|
},
|
|
{
|
|
city: "吉布提",
|
|
code: "253",
|
|
},
|
|
{
|
|
city: "多米尼加",
|
|
code: "1767",
|
|
},
|
|
{
|
|
city: "多米尼加共和国",
|
|
code: "1809",
|
|
},
|
|
{
|
|
city: "厄瓜多尔",
|
|
code: "593",
|
|
},
|
|
{
|
|
city: "埃及",
|
|
code: "20",
|
|
},
|
|
{
|
|
city: "艾萨尔瓦多",
|
|
code: "503",
|
|
},
|
|
{
|
|
city: "爱沙尼亚",
|
|
code: "372",
|
|
},
|
|
{
|
|
city: "埃塞俄比亚",
|
|
code: "251",
|
|
},
|
|
{
|
|
city: "法罗群岛",
|
|
code: "298",
|
|
},
|
|
{
|
|
city: "斐济",
|
|
code: "679",
|
|
},
|
|
{
|
|
city: "芬兰",
|
|
code: "358",
|
|
},
|
|
{
|
|
city: "法国",
|
|
code: "33",
|
|
},
|
|
{
|
|
city: "法属圭亚那",
|
|
code: "594",
|
|
},
|
|
{
|
|
city: "法属波利尼西亚",
|
|
code: "689",
|
|
},
|
|
{
|
|
city: "加蓬",
|
|
code: "241",
|
|
},
|
|
{
|
|
city: "冈比亚",
|
|
code: "220",
|
|
},
|
|
{
|
|
city: "格鲁吉亚",
|
|
code: "995",
|
|
},
|
|
{
|
|
city: "德国",
|
|
code: "94",
|
|
},
|
|
{
|
|
city: "加纳",
|
|
code: "233",
|
|
},
|
|
{
|
|
city: "直布罗陀",
|
|
code: "350",
|
|
},
|
|
{
|
|
city: "希腊",
|
|
code: "30",
|
|
},
|
|
{
|
|
city: "格陵兰",
|
|
code: "299",
|
|
},
|
|
{
|
|
city: "格林纳达",
|
|
code: "1473",
|
|
},
|
|
{
|
|
city: "瓜德罗普",
|
|
code: "590",
|
|
},
|
|
{
|
|
city: "关岛",
|
|
code: "1671",
|
|
},
|
|
{
|
|
city: "危地马拉",
|
|
code: "502",
|
|
},
|
|
{
|
|
city: "几内亚",
|
|
code: "240",
|
|
},
|
|
{
|
|
city: "根西",
|
|
code: "44",
|
|
},
|
|
{
|
|
city: "几内亚",
|
|
code: "224",
|
|
},
|
|
{
|
|
city: "圭亚那",
|
|
code: "592",
|
|
},
|
|
{
|
|
city: "海地",
|
|
code: "509",
|
|
},
|
|
{
|
|
city: "洪都拉斯",
|
|
code: "504",
|
|
},
|
|
{
|
|
city: "缅甸",
|
|
code: "95",
|
|
},
|
|
{
|
|
city: "匈牙利",
|
|
code: "36",
|
|
},
|
|
{
|
|
city: "冰岛",
|
|
code: "354",
|
|
},
|
|
{
|
|
city: "印度",
|
|
code: "91",
|
|
},
|
|
{
|
|
city: "印度尼西亚",
|
|
code: "62",
|
|
},
|
|
{
|
|
city: "伊朗",
|
|
code: "98",
|
|
},
|
|
{
|
|
city: "伊拉克",
|
|
code: "964",
|
|
},
|
|
{
|
|
city: "爱尔兰",
|
|
code: "353",
|
|
},
|
|
{
|
|
city: "马恩岛",
|
|
code: "44",
|
|
},
|
|
{
|
|
city: "以色列",
|
|
code: "972",
|
|
},
|
|
{
|
|
city: "意大利",
|
|
code: "93",
|
|
},
|
|
{
|
|
city: "牙买加",
|
|
code: "1876",
|
|
},
|
|
{
|
|
city: "日本",
|
|
code: "81",
|
|
},
|
|
{
|
|
city: "泽西岛",
|
|
code: "44",
|
|
},
|
|
{
|
|
city: "约旦",
|
|
code: "962",
|
|
},
|
|
{
|
|
city: "哈萨克斯坦",
|
|
code: "7",
|
|
},
|
|
{
|
|
city: "肯尼亚",
|
|
code: "254",
|
|
},
|
|
{
|
|
city: "科索沃",
|
|
code: "383",
|
|
},
|
|
{
|
|
city: "科威特",
|
|
code: "965",
|
|
},
|
|
{
|
|
city: "吉尔吉斯斯坦",
|
|
code: "996",
|
|
},
|
|
{
|
|
city: "老挝",
|
|
code: "856",
|
|
},
|
|
{
|
|
city: "拉脱维亚",
|
|
code: "371",
|
|
},
|
|
{
|
|
city: "黎巴嫩",
|
|
code: "961",
|
|
},
|
|
{
|
|
city: "莱索托",
|
|
code: "266",
|
|
},
|
|
{
|
|
city: "利比里亚",
|
|
code: "231",
|
|
},
|
|
{
|
|
city: "利比亚",
|
|
code: "218",
|
|
},
|
|
{
|
|
city: "列支敦士登",
|
|
code: "423",
|
|
},
|
|
{
|
|
city: "立陶宛",
|
|
code: "370",
|
|
},
|
|
{
|
|
city: "卢森堡",
|
|
code: "352",
|
|
},
|
|
{
|
|
city: "马其顿",
|
|
code: "389",
|
|
},
|
|
{
|
|
city: "马达加斯加",
|
|
code: "261",
|
|
},
|
|
{
|
|
city: "马拉维",
|
|
code: "265",
|
|
},
|
|
{
|
|
city: "马来西亚",
|
|
code: "60",
|
|
},
|
|
{
|
|
city: "马尔代夫",
|
|
code: "960",
|
|
},
|
|
{
|
|
city: "马里",
|
|
code: "223",
|
|
},
|
|
{
|
|
city: "马耳他",
|
|
code: "356",
|
|
},
|
|
{
|
|
city: "马提尼克",
|
|
code: "596",
|
|
},
|
|
{
|
|
city: "毛里塔尼亚",
|
|
code: "222",
|
|
},
|
|
{
|
|
city: "毛里求斯",
|
|
code: "230",
|
|
},
|
|
{
|
|
city: "马约特",
|
|
code: "262",
|
|
},
|
|
{
|
|
city: "墨西哥",
|
|
code: "52",
|
|
},
|
|
{
|
|
city: "摩尔多瓦",
|
|
code: "373",
|
|
},
|
|
{
|
|
city: "摩纳哥",
|
|
code: "377",
|
|
},
|
|
{
|
|
city: "蒙古",
|
|
code: "976",
|
|
},
|
|
{
|
|
city: "黑山",
|
|
code: "382",
|
|
},
|
|
{
|
|
city: "蒙特塞拉特",
|
|
code: "1664",
|
|
},
|
|
{
|
|
city: "摩洛哥",
|
|
code: "212",
|
|
},
|
|
{
|
|
city: "莫桑比克",
|
|
code: "258",
|
|
},
|
|
{
|
|
city: "纳米比亚",
|
|
code: "264",
|
|
},
|
|
{
|
|
city: "尼泊尔",
|
|
code: "977",
|
|
},
|
|
{
|
|
city: "荷兰",
|
|
code: "31",
|
|
},
|
|
{
|
|
city: "荷属安的列斯",
|
|
code: "599",
|
|
},
|
|
{
|
|
city: "新喀里多尼亚",
|
|
code: "687",
|
|
},
|
|
{
|
|
city: "新西兰",
|
|
code: "64",
|
|
},
|
|
{
|
|
city: "尼加拉瓜",
|
|
code: "505",
|
|
},
|
|
{
|
|
city: "尼日尔",
|
|
code: "227",
|
|
},
|
|
{
|
|
city: "尼日利亚",
|
|
code: "234",
|
|
},
|
|
{
|
|
city: "挪威",
|
|
code: "47",
|
|
},
|
|
{
|
|
city: "阿曼",
|
|
code: "968",
|
|
},
|
|
{
|
|
city: "巴基斯坦",
|
|
code: "92",
|
|
},
|
|
{
|
|
city: "巴勒斯坦",
|
|
code: "970",
|
|
},
|
|
{
|
|
city: "巴拿马",
|
|
code: "507",
|
|
},
|
|
{
|
|
city: "巴布亚新几内亚",
|
|
code: "675",
|
|
},
|
|
{
|
|
city: "巴拉圭",
|
|
code: "595",
|
|
},
|
|
{
|
|
city: "秘鲁",
|
|
code: "51",
|
|
},
|
|
{
|
|
city: "菲律宾",
|
|
code: "63",
|
|
},
|
|
{
|
|
city: "波兰",
|
|
code: "48",
|
|
},
|
|
{
|
|
city: "葡萄牙",
|
|
code: "351",
|
|
},
|
|
{
|
|
city: "波多黎各",
|
|
code: "1",
|
|
},
|
|
{
|
|
city: "库塔",
|
|
code: "974",
|
|
},
|
|
{
|
|
city: "留尼汪",
|
|
code: "262",
|
|
},
|
|
{
|
|
city: "罗马尼亚",
|
|
code: "40",
|
|
},
|
|
{
|
|
city: "俄罗斯",
|
|
code: "7",
|
|
},
|
|
{
|
|
city: "卢旺达",
|
|
code: "250",
|
|
},
|
|
{
|
|
city: "萨摩亚东部",
|
|
code: "684",
|
|
},
|
|
{
|
|
city: "萨摩亚西部",
|
|
code: "685",
|
|
},
|
|
{
|
|
city: "圣马力诺",
|
|
code: "378",
|
|
},
|
|
{
|
|
city: "圣多美和普林西比",
|
|
code: "239",
|
|
},
|
|
{
|
|
city: "沙特阿拉伯",
|
|
code: "966",
|
|
},
|
|
{
|
|
city: "塞内加尔",
|
|
code: "221",
|
|
},
|
|
{
|
|
city: "塞尔维亚",
|
|
code: "381",
|
|
},
|
|
{
|
|
city: "塞舌尔",
|
|
code: "248",
|
|
},
|
|
{
|
|
city: "塞拉利昂",
|
|
code: "232",
|
|
},
|
|
{
|
|
city: "斯洛伐克",
|
|
code: "421",
|
|
},
|
|
{
|
|
city: "斯洛文尼亚",
|
|
code: "386",
|
|
},
|
|
{
|
|
city: "南非",
|
|
code: "27",
|
|
},
|
|
{
|
|
city: "韩国",
|
|
code: "82",
|
|
},
|
|
{
|
|
city: "西班牙",
|
|
code: "34",
|
|
},
|
|
{
|
|
city: "斯里兰卡",
|
|
code: "94",
|
|
},
|
|
{
|
|
city: "圣基茨和尼维斯",
|
|
code: "1869",
|
|
},
|
|
{
|
|
city: "圣卢西亚",
|
|
code: "1758",
|
|
},
|
|
{
|
|
city: "圣文森特",
|
|
code: "1784",
|
|
},
|
|
{
|
|
city: "苏丹",
|
|
code: "249",
|
|
},
|
|
{
|
|
city: "苏里南",
|
|
code: "597",
|
|
},
|
|
{
|
|
city: "斯威士兰",
|
|
code: "268",
|
|
},
|
|
{
|
|
city: "瑞典",
|
|
code: "46",
|
|
},
|
|
{
|
|
city: "瑞士",
|
|
code: "41",
|
|
},
|
|
{
|
|
city: "叙利亚",
|
|
code: "963",
|
|
},
|
|
{
|
|
city: "塔吉克斯坦",
|
|
code: "992",
|
|
},
|
|
{
|
|
city: "坦桑尼亚",
|
|
code: "255",
|
|
},
|
|
{
|
|
city: "泰国",
|
|
code: "66",
|
|
},
|
|
{
|
|
city: "东帝汶",
|
|
code: "670",
|
|
},
|
|
{
|
|
city: "多哥",
|
|
code: "228",
|
|
},
|
|
{
|
|
city: "汤加",
|
|
code: "676",
|
|
},
|
|
{
|
|
city: "特立尼达和多巴哥",
|
|
code: "1868",
|
|
},
|
|
{
|
|
city: "突尼斯",
|
|
code: "216",
|
|
},
|
|
{
|
|
city: "土耳其",
|
|
code: "90",
|
|
},
|
|
{
|
|
city: "土库曼斯坦",
|
|
code: "993",
|
|
},
|
|
{
|
|
city: "特克斯和凯科斯群岛",
|
|
code: "1649",
|
|
},
|
|
{
|
|
city: "乌干达",
|
|
code: "256",
|
|
},
|
|
{
|
|
city: "乌克兰",
|
|
code: "380",
|
|
},
|
|
{
|
|
city: "阿拉伯联合酋长国",
|
|
code: "971",
|
|
},
|
|
{
|
|
city: "英国",
|
|
code: "44",
|
|
},
|
|
{
|
|
city: "美国",
|
|
code: "1",
|
|
},
|
|
{
|
|
city: "乌拉圭",
|
|
code: "598",
|
|
},
|
|
{
|
|
city: "乌兹别克斯坦",
|
|
code: "998",
|
|
},
|
|
{
|
|
city: "瓦努阿图",
|
|
code: "678",
|
|
},
|
|
{
|
|
city: "委内瑞拉",
|
|
code: "58",
|
|
},
|
|
{
|
|
city: "越南",
|
|
code: "84",
|
|
},
|
|
{
|
|
city: "维尔京群岛",
|
|
code: "1340",
|
|
},
|
|
{
|
|
city: "也门",
|
|
code: "967",
|
|
},
|
|
{
|
|
city: "赞比亚",
|
|
code: "260",
|
|
},
|
|
{
|
|
city: "津巴布韦",
|
|
code: "263",
|
|
},
|
|
];
|
|
const filteredItems = useMemo(() => {
|
|
if (searchText) {
|
|
return items.filter((item) => item.city.includes(searchText));
|
|
} else {
|
|
return items;
|
|
}
|
|
}, [items, searchText]);
|
|
return (
|
|
<Popup
|
|
visible={visible}
|
|
onMaskClick={() => {
|
|
setVisible(false);
|
|
}}
|
|
destroyOnClose
|
|
>
|
|
<div className="p-2 border-b">
|
|
<SearchBar
|
|
placeholder="搜索国家/地区"
|
|
value={searchText}
|
|
onChange={(v) => {
|
|
setSearchText(v);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="h-96 overflow-y-scroll">
|
|
<CheckList
|
|
defaultValue={regionCode ? [regionCode] : []}
|
|
onChange={(val) => {
|
|
setRegionCode(val[0]);
|
|
setCode(val[0]);
|
|
setVisible(false);
|
|
}}
|
|
>
|
|
{filteredItems.map((item, index) => (
|
|
<CheckList.Item key={index} value={item.code}>
|
|
{item.city}({item.code})
|
|
</CheckList.Item>
|
|
))}
|
|
</CheckList>
|
|
</div>
|
|
</Popup>
|
|
);
|
|
}
|