Skip to content

Commit 0d465ed

Browse files
ArtyomVancyanArtyomVancyan
authored
Implement dropdownRender property (GH-85)
2 parents 75846d9 + 4a95da0 commit 0d465ed

File tree

9 files changed

+31
-24
lines changed

9 files changed

+31
-24
lines changed

‎README.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,20 @@ The `valid` function primarily checks if a phone number has a length appropriate
5454
5555
Apart from the phone-specific properties described below, all [Input](https://ant.design/components/input#input) properties supported by the used Ant Design version can be applied to the phone input component.
5656
57-
| Property | Description | Type |
58-
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
59-
| value | An object containing a parsed phone number or the raw number. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [object](#value) / string |
60-
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
61-
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
62-
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
63-
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
64-
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
65-
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
66-
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
67-
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
68-
| onChange | The only difference from the original `onChange` is that value comes first. | function(value, event) |
69-
| onMount | The callback is triggered once the component gets mounted. | function(value) |
57+
| Property | Description | Type |
58+
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------|
59+
| value | An object containing a parsed phone number or the raw number. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [object](#value) / string |
60+
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
61+
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
62+
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
63+
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
64+
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
65+
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
66+
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
67+
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
68+
| dropdownRender | Customize the dropdown menu content. | (menu: ReactNode) => ReactNode |
69+
| onChange | The only difference from the original `onChange` is that value comes first. | function(value, event) |
70+
| onMount | The callback is triggered once the component gets mounted. | function(value) |
7071
7172
## Contribute
7273

‎examples/antd4.x/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"@types/react-dom": "^18.2.0",
88
"@craco/craco": "^7.0.0",
99
"antd": "^4.24.8",
10-
"antd-phone-input": "^0.3.0",
10+
"antd-phone-input": "^0.3.5",
1111
"craco-less": "^2.0.0",
1212
"react": "^18.2.0",
1313
"react-dom": "^18.2.0",
@@ -35,4 +35,4 @@
3535
"last 1 safari version"
3636
]
3737
}
38-
}
38+
}

‎examples/antd5.x/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"@types/react": "^18.2.0",
77
"@types/react-dom": "^18.2.0",
88
"antd": "^5.8.3",
9-
"antd-phone-input": "^0.3.0",
9+
"antd-phone-input": "^0.3.5",
1010
"react": "^18.2.0",
1111
"react-dom": "^18.2.0",
1212
"react-scripts": "^5.0.1",

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "0.3.5",
2+
"version": "0.3.6",
33
"name": "antd-phone-input",
44
"description": "Advanced, highly customizable phone input component for Ant Design.",
55
"keywords": [
@@ -70,7 +70,7 @@
7070
"react": ">=16"
7171
},
7272
"dependencies": {
73-
"react-phone-hooks": "^0.1.0-beta.1"
73+
"react-phone-hooks": "^0.1.3"
7474
},
7575
"devDependencies": {
7676
"@testing-library/react": "^14.0.0",

‎src/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const PhoneInput = forwardRef(({
4343
preferredCountries = [],
4444
searchNotFound = "No country found",
4545
searchPlaceholder = "Search country",
46+
dropdownRender = (node) => node,
4647
onMount: handleMount = () => null,
4748
onInput: handleInput = () => null,
4849
onChange: handleChange = () => null,
@@ -209,7 +210,7 @@ const PhoneInput = forwardRef(({
209210
/>
210211
))}
211212
</Select>
212-
), [selectValue, disableDropdown, minWidth, searchNotFound, countriesList, setFieldValue, setValue, enableSearch, searchPlaceholder])
213+
), [selectValue, disableDropdown, minWidth, searchNotFound, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
213214

214215
return (
215216
<div className={`${prefixCls}-phone-input-wrapper`}
@@ -221,7 +222,7 @@ const PhoneInput = forwardRef(({
221222
onInput={onInput}
222223
onChange={onChange}
223224
onKeyDown={onKeyDown}
224-
addonBefore={countriesSelect}
225+
addonBefore={dropdownRender(countriesSelect)}
225226
{...antInputProps}
226227
/>
227228
</div>

‎src/resources/stylesheet.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"margin": "0 6px 6px 6px"
1313
},
1414
".ant-phone-input-wrapper .ant-select-selector": {
15+
"padding": "0 11px !important",
16+
"height": "unset !important",
1517
"border": "none !important"
1618
},
1719
".ant-phone-input-wrapper .ant-select-selection-item": {

‎src/styles.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import {injectStyles, jsonToCss} from "react-phone-hooks/styles";
22
import commonStyles from "react-phone-hooks/stylesheet.json";
3+
import {defaultPrefixCls} from "antd/es/config-provider";
34

45
import customStyles from "./resources/stylesheet.json";
56

67
let prefix: any = null;
78

89
export const injectMergedStyles = (prefixCls: any = null) => {
910
const stylesheet = customStyles as { [key: string]: any };
10-
if (prefixCls) {
11+
if (prefixCls && prefixCls !== defaultPrefixCls) {
1112
if (prefix === prefixCls) return;
1213
Object.entries(stylesheet).forEach(([k, value]) => {
1314
const key = k.replace(/ant(?=-)/g, prefixCls);

‎src/types.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {ChangeEvent, KeyboardEvent} from "react";
1+
import {ChangeEvent, KeyboardEvent, ReactNode} from "react";
22
import types from "react-phone-hooks/types";
33
import {InputProps} from "antd/es/input";
44

@@ -23,6 +23,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">
2323

2424
preferredCountries?: string[];
2525

26+
dropdownRender?: (menu: ReactNode) => ReactNode;
27+
2628
onMount?(value: PhoneNumber): void;
2729

2830
onInput?(event: ChangeEvent<HTMLInputElement>): void;

‎tests/antd.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ describe("Checking the basic rendering and functionality", () => {
215215
await new Promise(r => setTimeout(r, 100));
216216
})
217217
assert(inputHasError(form)); // invalid
218-
})
218+
}, 25000)
219219

220220
it("Checking validation with casual inputs and actions", async () => {
221221
render(<Form data-testid="form">
@@ -260,5 +260,5 @@ describe("Checking the basic rendering and functionality", () => {
260260
assert(inputHasError(form)); // invalid
261261
await userEvent.click(reset);
262262
assert(!inputHasError(form)); // valid
263-
})
263+
}, 25000)
264264
})

0 commit comments

Comments
 (0)