llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-04 21:30:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor out getCountryCodeOption()

Browse Source
This commit is contained in:
Gucheng Wang
2023-02-25 15:25:47 +08:00
parent 36c5a9d09b
commit 181e7c8c7d
4 changed files with 32 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/OrganizationEditPage.js
View File

@ -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 => {
return Setting.getOption(
<>
{Setting.countryFlag(country)}
{`${country.name} +${country.phone}`}
</>,
country.code);
})} onChange={value => {
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"}} >

8
web/src/SelectRegionBox.js
View File

@ -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) =>
(option?.label ?? "").toLowerCase().includes(input.toLowerCase())
}
filterOption={(input, option) => (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>
))

22
web/src/Setting.js
View File

@ -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}} />;
}

18
web/src/common/PhoneNumberInput.js
View File

@ -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) =>
(option?.text ?? "").toLowerCase().includes(input.toLowerCase())
}
filterOption={(input, option) => (option?.text ?? "").toLowerCase().includes(input.toLowerCase())}
>
{
Setting.getCountriesData(countryCodes).map((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>
))
Setting.getCountryCodeData(countryCodes).map((country) => Setting.getCountryCodeOption(country))
}
</Select>
);