Refactor out getCountryCodeOption()

web/src/OrganizationEditPage.js

@@ -188,16 +188,15 @@ class OrganizationEditPage extends React.Component {
           </Col>
           <Col span={22} >
             <Select virtual={false} mode={"multiple"} style={{width: "100%"}} value={this.state.organization.countryCodes ?? []}
-              options={Setting.getCountriesData().map(country => {
+              onChange={value => {
-                return Setting.getOption(
-                  <>
-                    {Setting.countryFlag(country)}
-                    {`${country.name} +${country.phone}`}
-                  </>,
-                  country.code);
-              })} onChange={value => {
                 this.updateOrganizationField("countryCodes", value);
-              }} />
+              }}
+              filterOption={(input, option) => (option?.text ?? "").toLowerCase().includes(input.toLowerCase())}
+            >
+              {
+                Setting.getCountryCodeData().map((country) => Setting.getCountryCodeOption(country))
+              }
+            </Select>
           </Col>
         </Row>
         <Row style={{marginTop: "20px"}} >

web/src/SelectRegionBox.js

@@ -41,17 +41,15 @@ class SelectRegionBox extends React.Component {
         defaultValue={this.props.defaultValue || undefined}
         placeholder="Please select country/region"
         onChange={(value => {this.onChange(value);})}
-        filterOption={(input, option) =>
+        filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
-          (option?.label ?? "").toLowerCase().includes(input.toLowerCase())
-        }
         filterSort={(optionA, optionB) =>
           (optionA?.label ?? "").toLowerCase().localeCompare((optionB?.label ?? "").toLowerCase())
         }
       >
         {
-          Setting.getCountriesData().map((item) => (
+          Setting.getCountryCodeData().map((item) => (
             <Option key={item.code} value={item.code} label={`${item.name} (${item.code})`} >
-              {Setting.countryFlag(item)}
+              {Setting.getCountryImage(item)}
               {`${item.name} (${item.code})`}
             </Option>
           ))

web/src/Setting.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Checkbox, Form, Modal, Tag, Tooltip, message, theme} from "antd";
+import {Checkbox, Form, Modal, Select, Tag, Tooltip, message, theme} from "antd";
 import {QuestionCircleTwoTone} from "@ant-design/icons";
 import {isMobile as isMobileDevice} from "react-device-detect";
 import "./i18n";
@@ -26,6 +26,8 @@ import * as Conf from "./Conf";
 import * as phoneNumber from "libphonenumber-js";
 import * as path from "path-browserify";
 
+const {Option} = Select;
+
 export const ServerUrl = "";
 
 // export const StaticBaseUrl = "https://cdn.jsdelivr.net/gh/casbin/static";
@@ -206,7 +208,7 @@ export function initCountries() {
   return countries;
 }
 
-export function getCountriesData(countryCodes = phoneNumber.getCountries()) {
+export function getCountryCodeData(countryCodes = phoneNumber.getCountries()) {
   return countryCodes?.map((countryCode) => {
     if (phoneNumber.isSupportedCountry(countryCode)) {
       const name = initCountries().getName(countryCode, getLanguage());
@@ -220,7 +222,21 @@ export function getCountriesData(countryCodes = phoneNumber.getCountries()) {
     .sort((a, b) => a.phone - b.phone);
 }
 
-export function countryFlag(country) {
+export function getCountryCodeOption(country) {
+  return (
+    <Option key={country.code} value={country.code} label={`+${country.phone}`} text={`${country.name}, ${country.code}, ${country.phone}`} >
+      <div style={{display: "flex", justifyContent: "space-between", marginRight: "10px"}}>
+        <div>
+          {getCountryImage(country)}
+          {`${country.name}`}
+        </div>
+        {`+${country.phone}`}
+      </div>
+    </Option>
+  );
+}
+
+export function getCountryImage(country) {
   return <img src={`${StaticBaseUrl}/flag-icons/${country.code}.svg`} alt={country.name} height={20} style={{marginRight: 10}} />;
 }
 

web/src/common/PhoneNumberInput.js

@@ -16,8 +16,6 @@ import {Select} from "antd";
 import * as Setting from "../Setting";
 import React from "react";
 
-const {Option} = Select;
-
 export default function PhoneNumberInput(props) {
   const {onChange, style, disabled} = props;
   const value = props.value ?? "CN";
@@ -37,22 +35,10 @@ export default function PhoneNumberInput(props) {
       dropdownMatchSelectWidth={false}
       optionLabelProp={"label"}
       onChange={handleOnChange}
-      filterOption={(input, option) =>
+      filterOption={(input, option) => (option?.text ?? "").toLowerCase().includes(input.toLowerCase())}
-        (option?.text ?? "").toLowerCase().includes(input.toLowerCase())
-      }
     >
       {
-        Setting.getCountriesData(countryCodes).map((country) => (
+        Setting.getCountryCodeData(countryCodes).map((country) => Setting.getCountryCodeOption(country))
-          <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>
-                {Setting.countryFlag(country)}
-                {`${country.name}`}
-              </div>
-              {`+${country.phone}`}
-            </div>
-          </Option>
-        ))
       }
     </Select>
   );