Skip to content

Commit bd0d6d4

Browse files
ArtyomVancyanArtyomVancyan
authored
Accept raw values as a value apart from the phone objects (GH-51)
2 parents 3e489b5 + 2485a18 commit bd0d6d4

File tree

5 files changed

+43
-28
lines changed

5 files changed

+43
-28
lines changed

‎README.md‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -101,31 +101,31 @@ return (
101101
102102
## Props
103103
104-
| Property | Description | Type |
105-
|--------------------|---------------------------------------------------------------------------------------------------------------------------------|---------------------|
106-
| size | Either `large`, `middle` or `small`. Default value is `middle`. See at ant [docs][antInputProps] for more. | string |
107-
| value | An object containing the parts of phone number. E.g. `value={{countryCode: 1, areaCode: 702, phoneNumber: "1234567"}}`. | [object](#value) |
108-
| style | Applies CSS styles to the container element. | CSSProperties |
109-
| className | The value will be assigned to the container element. | string |
110-
| disabled | Disables the whole input component. | boolean |
111-
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
112-
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
113-
| inputProps | [HTML properties of input][htmlInputProps] to pass into the input. E.g. `inputProps={{autoFocus: true}}`. | InputHTMLAttributes |
114-
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `search`. | string |
115-
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No entries to show`. | string |
116-
| placeholder | Custom placeholder. Default placeholder is `1 (702) 123-4567`. | string |
117-
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
118-
| regions | Show only the countries of the specified regions. See the list of [available regions][reactPhoneRegions]. | string[] |
119-
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
120-
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
121-
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
122-
| onChange | Callback when the user is inputting. See at ant [docs][antInputProps] for more. | function(value, e) |
123-
| onPressEnter | The callback function that is triggered when <kbd>Enter</kbd> key is pressed. | function(e) |
124-
| onFocus | The callback is triggered when the input element is focused. | function(e, value) |
125-
| onClick | The callback is triggered when the user clicks on the input element. | function(e, value) |
126-
| onBlur | The callback is triggered when the input element gets blurred or unfocused. | function(e, value) |
127-
| onKeyDown | The callback is triggered when any key is pressed down. | function(e) |
128-
| onMount | The callback is triggered once the component gets mounted. | function(e) |
104+
| Property | Description | Type |
105+
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
106+
| size | Either `large`, `middle` or `small`. Default value is `middle`. See at ant [docs][antInputProps] for more. | string |
107+
| 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 |
108+
| style | Applies CSS styles to the container element. | CSSProperties |
109+
| className | The value will be assigned to the container element. | string |
110+
| disabled | Disables the whole input component. | boolean |
111+
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
112+
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
113+
| inputProps | [HTML properties of input][htmlInputProps] to pass into the input. E.g. `inputProps={{autoFocus: true}}`. | InputHTMLAttributes |
114+
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `search`. | string |
115+
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No entries to show`. | string |
116+
| placeholder | Custom placeholder. Default placeholder is `1 (702) 123-4567`. | string |
117+
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
118+
| regions | Show only the countries of the specified regions. See the list of [available regions][reactPhoneRegions]. | string[] |
119+
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
120+
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
121+
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
122+
| onChange | Callback when the user is inputting. See at ant [docs][antInputProps] for more. | function(value, e) |
123+
| onPressEnter | The callback function that is triggered when <kbd>Enter</kbd> key is pressed. | function(e) |
124+
| onFocus | The callback is triggered when the input element is focused. | function(e, value) |
125+
| onClick | The callback is triggered when the user clicks on the input element. | function(e, value) |
126+
| onBlur | The callback is triggered when the input element gets blurred or unfocused. | function(e, value) |
127+
| onKeyDown | The callback is triggered when any key is pressed down. | function(e) |
128+
| onMount | The callback is triggered once the component gets mounted. | function(e) |
129129
130130
## Contribute
131131

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "0.2.3",
2+
"version": "0.2.4",
33
"name": "antd-phone-input",
44
"description": "Advanced, highly customizable phone input component for Ant Design.",
55
"keywords": [

‎src/legacy/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,9 @@ const PhoneInput = ({
6868
const countryCode = useMemo(() => country || getDefaultISO2Code(), [country]);
6969

7070
const rawPhone = useMemo(() => {
71+
if (typeof value === "string") return value;
7172
const {countryCode, areaCode, phoneNumber} = {...value};
72-
return [countryCode, areaCode, phoneNumber].map(v => v || "").join("");
73+
return [countryCode, areaCode, phoneNumber].filter(Boolean).join("");
7374
}, [value]);
7475

7576
const inputClass = useMemo(() => {

‎src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export interface PhoneNumber {
1717

1818
export interface AntInputProps {
1919
size?: "small" | "middle" | "large",
20-
value?: PhoneNumber,
20+
value?: PhoneNumber | string,
2121
style?: CSSProperties,
2222
className?: string,
2323
disabled?: boolean,

‎tests/common.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ export default function commonTests(PhoneInput: any, Form: any, FormItem: any, B
2424
render(<PhoneInput/>);
2525
})
2626

27+
it("Rendering with strict raw value", () => {
28+
render(<PhoneInput value="17021234567"/>);
29+
assert(screen.getByDisplayValue("+1 (702) 123 4567"));
30+
})
31+
2732
it("Rendering with an initial value", () => {
2833
render(<PhoneInput
2934
onMount={(value: any) => {
@@ -38,6 +43,15 @@ export default function commonTests(PhoneInput: any, Form: any, FormItem: any, B
3843
assert(screen.getByDisplayValue("+1 (702) 123 4567"));
3944
})
4045

46+
it("Rendering with a raw initial value", () => {
47+
render(<Form initialValues={{phone: "17021234567"}}>
48+
<FormItem name="phone">
49+
<PhoneInput/>
50+
</FormItem>
51+
</Form>);
52+
assert(screen.getByDisplayValue("+1 (702) 123 4567"));
53+
})
54+
4155
it("Checking the component on user input", async () => {
4256
render(<PhoneInput
4357
onChange={(value: any) => {

0 commit comments

Comments
 (0)