Skip to content

Commit

Permalink
Accept raw values as a value apart from the phone objects (GH-51)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArtyomVancyan
ArtyomVancyan authored Oct 5, 2023
2 parents 3e489b5 + 2485a18 commit bd0d6d4
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 28 deletions.
50 changes: 25 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,31 +101,31 @@ return (
## Props
| Property | Description | Type |
|--------------------|---------------------------------------------------------------------------------------------------------------------------------|---------------------|
| size | Either `large`, `middle` or `small`. Default value is `middle`. See at ant [docs][antInputProps] for more. | string |
| value | An object containing the parts of phone number. E.g. `value={{countryCode: 1, areaCode: 702, phoneNumber: "1234567"}}`. | [object](#value) |
| style | Applies CSS styles to the container element. | CSSProperties |
| className | The value will be assigned to the container element. | string |
| disabled | Disables the whole input component. | boolean |
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
| inputProps | [HTML properties of input][htmlInputProps] to pass into the input. E.g. `inputProps={{autoFocus: true}}`. | InputHTMLAttributes |
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `search`. | string |
| 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 |
| placeholder | Custom placeholder. Default placeholder is `1 (702) 123-4567`. | string |
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
| regions | Show only the countries of the specified regions. See the list of [available regions][reactPhoneRegions]. | string[] |
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
| onChange | Callback when the user is inputting. See at ant [docs][antInputProps] for more. | function(value, e) |
| onPressEnter | The callback function that is triggered when <kbd>Enter</kbd> key is pressed. | function(e) |
| onFocus | The callback is triggered when the input element is focused. | function(e, value) |
| onClick | The callback is triggered when the user clicks on the input element. | function(e, value) |
| onBlur | The callback is triggered when the input element gets blurred or unfocused. | function(e, value) |
| onKeyDown | The callback is triggered when any key is pressed down. | function(e) |
| onMount | The callback is triggered once the component gets mounted. | function(e) |
| Property | Description | Type |
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
| size | Either `large`, `middle` or `small`. Default value is `middle`. See at ant [docs][antInputProps] for more. | string |
| 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 |
| style | Applies CSS styles to the container element. | CSSProperties |
| className | The value will be assigned to the container element. | string |
| disabled | Disables the whole input component. | boolean |
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
| inputProps | [HTML properties of input][htmlInputProps] to pass into the input. E.g. `inputProps={{autoFocus: true}}`. | InputHTMLAttributes |
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `search`. | string |
| 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 |
| placeholder | Custom placeholder. Default placeholder is `1 (702) 123-4567`. | string |
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
| regions | Show only the countries of the specified regions. See the list of [available regions][reactPhoneRegions]. | string[] |
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
| onChange | Callback when the user is inputting. See at ant [docs][antInputProps] for more. | function(value, e) |
| onPressEnter | The callback function that is triggered when <kbd>Enter</kbd> key is pressed. | function(e) |
| onFocus | The callback is triggered when the input element is focused. | function(e, value) |
| onClick | The callback is triggered when the user clicks on the input element. | function(e, value) |
| onBlur | The callback is triggered when the input element gets blurred or unfocused. | function(e, value) |
| onKeyDown | The callback is triggered when any key is pressed down. | function(e) |
| onMount | The callback is triggered once the component gets mounted. | function(e) |
## Contribute
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.2.3",
"version": "0.2.4",
"name": "antd-phone-input",
"description": "Advanced, highly customizable phone input component for Ant Design.",
"keywords": [
Expand Down
3 changes: 2 additions & 1 deletion src/legacy/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,9 @@ const PhoneInput = ({
const countryCode = useMemo(() => country || getDefaultISO2Code(), [country]);

const rawPhone = useMemo(() => {
if (typeof value === "string") return value;
const {countryCode, areaCode, phoneNumber} = {...value};
return [countryCode, areaCode, phoneNumber].map(v => v || "").join("");
return [countryCode, areaCode, phoneNumber].filter(Boolean).join("");
}, [value]);

const inputClass = useMemo(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export interface PhoneNumber {

export interface AntInputProps {
size?: "small" | "middle" | "large",
value?: PhoneNumber,
value?: PhoneNumber | string,
style?: CSSProperties,
className?: string,
disabled?: boolean,
Expand Down
14 changes: 14 additions & 0 deletions tests/common.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ export default function commonTests(PhoneInput: any, Form: any, FormItem: any, B
render(<PhoneInput/>);
})

it("Rendering with strict raw value", () => {
render(<PhoneInput value="17021234567"/>);
assert(screen.getByDisplayValue("+1 (702) 123 4567"));
})

it("Rendering with an initial value", () => {
render(<PhoneInput
onMount={(value: any) => {
Expand All @@ -38,6 +43,15 @@ export default function commonTests(PhoneInput: any, Form: any, FormItem: any, B
assert(screen.getByDisplayValue("+1 (702) 123 4567"));
})

it("Rendering with a raw initial value", () => {
render(<Form initialValues={{phone: "17021234567"}}>
<FormItem name="phone">
<PhoneInput/>
</FormItem>
</Form>);
assert(screen.getByDisplayValue("+1 (702) 123 4567"));
})

it("Checking the component on user input", async () => {
render(<PhoneInput
onChange={(value: any) => {
Expand Down

0 comments on commit bd0d6d4

Please sign in to comment.