Can search country code

This commit is contained in:
Gucheng Wang
2023-02-25 14:57:23 +08:00
parent 0e9a3b0f30
commit 9acb3c499e

View File

@ -19,7 +19,7 @@ import React from "react";
const {Option} = Select; const {Option} = Select;
export default function PhoneNumberInput(props) { export default function PhoneNumberInput(props) {
const {onChange, style, disabled, showSearch} = props; const {onChange, style, disabled} = props;
const value = props.value ?? "CN"; const value = props.value ?? "CN";
const countryCodes = props.countryCodes ?? []; const countryCodes = props.countryCodes ?? [];
@ -30,20 +30,20 @@ export default function PhoneNumberInput(props) {
return ( return (
<Select <Select
virtual={false} virtual={false}
showSearch
style={style} style={style}
disabled={disabled} disabled={disabled}
value={value} value={value}
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
optionLabelProp={"label"} optionLabelProp={"label"}
showSearch={showSearch}
onChange={handleOnChange} onChange={handleOnChange}
filterOption={(input, option) => filterOption={(input, option) =>
(option?.label ?? "").toLowerCase().includes(input.toLowerCase()) (option?.text ?? "").toLowerCase().includes(input.toLowerCase())
} }
> >
{ {
Setting.getCountriesData(countryCodes).map((country) => ( Setting.getCountriesData(countryCodes).map((country) => (
<Option key={country.code} value={country.code} label={`+${country.phone}`} > <Option key={country.code} value={country.code} label={`+${country.phone}`} text={`${country.name}, ${country.code}, ${country.phone}`} >
<div style={{display: "flex", justifyContent: "space-between"}}> <div style={{display: "flex", justifyContent: "space-between"}}>
<div> <div>
{Setting.countryFlag(country)} {Setting.countryFlag(country)}