-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
427 additions
and
143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| name: Tests | ||
|
|
||
| on: push | ||
|
|
||
| jobs: | ||
| tests: | ||
|
|
||
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - name: Checkout | ||
| uses: actions/checkout@v3 | ||
|
|
||
| - name: Install dependencies | ||
| run: yarn && yarn install | ||
|
|
||
| - name: Run tests | ||
| run: yarn test |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,102 @@ | ||
| # antd-phone-input | ||
| Advanced Phone Number Input for Ant Design | ||
|
|
||
| Advanced Phone Number Input for [Ant Design](https://github.com/ant-design/ant-design). | ||
|
|
||
| [](https://www.npmjs.com/package/antd-phone-input) | ||
| [](https://www.npmjs.com/package/antd-phone-input) | ||
| [](https://github.com/ArtyomVancyan/antd-phone-input/blob/master/LICENSE) | ||
| [](https://makeapullrequest.com) | ||
| [](https://github.com/ArtyomVancyan/antd-phone-input/actions/workflows/tests.yml) | ||
|
|
||
| ## Install | ||
|
|
||
| ```shell | ||
| npm i antd-phone-input | ||
| ``` | ||
|
|
||
| ```shell | ||
| yarn add antd-phone-input | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Antd 4.x | ||
|
|
||
| ```javascript | ||
| import React from "react"; | ||
| import PhoneInput from "antd-phone-input"; | ||
| import FormItem from "antd/es/form/FormItem"; | ||
|
|
||
| const Demo = () => { | ||
| return ( | ||
| <FormItem name="phone"> | ||
| <PhoneInput enableSearch/> | ||
| </FormItem> | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ### Antd 5.x | ||
|
|
||
| ```ascii | ||
| v5.x does not have support yet | ||
| this issue is covered in GH-20 | ||
| ``` | ||
|
|
||
| ## Value | ||
|
|
||
| The value of the component is an object containing the parts of a phone number. This format of value gives a wide range | ||
| of opportunities for handling the data in your custom way. For example, you can easily merge the parts of the phone | ||
| number into a single string. | ||
|
|
||
| ```json | ||
| { | ||
| "countryCode": 1, | ||
| "areaCode": 702, | ||
| "phoneNumber": "1234567", | ||
| "isoCode": "us" | ||
| } | ||
| ``` | ||
|
|
||
| ## 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 | | ||
| | 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 | ||
|
|
||
| Any contribution is welcome. If you have any ideas or suggestions, feel free to open an issue or a pull request. And | ||
| don't forget to add tests for your changes. | ||
|
|
||
| ## License | ||
|
|
||
| Copyright (C) 2023 Artyom Vancyan. [MIT](LICENSE) | ||
|
|
||
| [antInputProps]:https://ant.design/components/input#input | ||
|
|
||
| [reactPhoneRegions]:https://github.com/bl00mber/react-phone-input-2#regions | ||
|
|
||
| [htmlInputProps]:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,87 @@ | ||
| @import "~react-phone-input-2/lib/style.css"; | ||
| @import "../node_modules/antd/lib/style/themes/variable"; | ||
| @import "../node_modules/antd/lib/input/style/index"; | ||
|
|
||
| //.phone-number-form-item { | ||
| // | ||
| // &.ant-form-item-has-error { | ||
| // .react-tel-input { | ||
| // .form-control { | ||
| // border-color: @error-color; | ||
| // | ||
| // &:hover { | ||
| // border-color: @error-color; | ||
| // } | ||
| // | ||
| // &:focus { | ||
| // border-color: @error-color; | ||
| // } | ||
| // } | ||
| // } | ||
| // } | ||
| // | ||
| // .react-tel-input { | ||
| // | ||
| // .form-control { | ||
| // z-index: 3; | ||
| // width: 100%; | ||
| // border-radius: @border-radius-base; | ||
| // line-height: @line-height-base; | ||
| // height: inherit; | ||
| // background: transparent; | ||
| // border-color: @border-color-base; | ||
| // | ||
| // &:hover { | ||
| // border-color: @input-hover-border-color; | ||
| // } | ||
| // | ||
| // &:focus { | ||
| // border-color: @primary-color; | ||
| // } | ||
| // } | ||
| // | ||
| // .country-list { | ||
| // margin: 3px; | ||
| // border-radius: 2px; | ||
| // width: calc(100% - 6px); | ||
| // box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), | ||
| // 0 6px 16px 0 rgba(0, 0, 0, .08), | ||
| // 0 9px 28px 8px rgba(0, 0, 0, .05); | ||
| // | ||
| // .search { | ||
| // padding: @spacing-2 @spacing-2 @spacing-1 @spacing-2; | ||
| // | ||
| // .search-box { | ||
| // .ant-input(); | ||
| // } | ||
| // } | ||
| // } | ||
| // | ||
| // .flag-dropdown, | ||
| // .flag-dropdown.open { | ||
| // border: 0; | ||
| // width: 100%; | ||
| // border-radius: 0; | ||
| // background-color: transparent; | ||
| // | ||
| // .arrow { | ||
| // display: none; | ||
| // } | ||
| // | ||
| // .selected-flag { | ||
| // z-index: 4; | ||
| // padding: 0; | ||
| // display: flex; | ||
| // justify-content: center; | ||
| // border-right: @border-base; | ||
| // background-color: transparent; | ||
| // } | ||
| // } | ||
| // } | ||
| //} | ||
| .ant-form-item { | ||
| &.ant-form-item-has-error { | ||
| .react-tel-input { | ||
| .form-control { | ||
| border-color: @error-color; | ||
|
|
||
| &:hover { | ||
| border-color: @error-color; | ||
| } | ||
|
|
||
| &:focus { | ||
| border-color: @error-color; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .react-tel-input { | ||
| .form-control { | ||
| z-index: 3; | ||
| width: 100%; | ||
| border-radius: @border-radius-base; | ||
| line-height: @line-height-base; | ||
| height: inherit; | ||
| background: transparent; | ||
| border-color: @border-color-base; | ||
|
|
||
| &:hover { | ||
| border-color: @input-hover-border-color; | ||
| } | ||
|
|
||
| &:focus { | ||
| border-color: @primary-color; | ||
| } | ||
|
|
||
| &.open { | ||
| z-index: 6 !important; | ||
| transition: 0s !important; | ||
| } | ||
| } | ||
|
|
||
| .country-list { | ||
| margin: 3px; | ||
| border-radius: 2px; | ||
| width: calc(100% - 6px); | ||
| box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), | ||
| 0 6px 16px 0 rgba(0, 0, 0, .08), | ||
| 0 9px 28px 8px rgba(0, 0, 0, .05); | ||
|
|
||
| .search { | ||
| padding: 10px 10px 5px 10px; | ||
|
|
||
| .search-box { | ||
| .ant-input(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .flag-dropdown, | ||
| .flag-dropdown.open { | ||
| border: 0; | ||
| width: 100%; | ||
| border-radius: 0; | ||
| background-color: @component-background; | ||
|
|
||
| .arrow { | ||
| display: none; | ||
| } | ||
|
|
||
| .selected-flag { | ||
| z-index: 4; | ||
| padding: 0; | ||
| display: flex; | ||
| justify-content: center; | ||
| background-color: transparent; | ||
| border-right: @border-width-base @border-style-base @border-color-base; | ||
| } | ||
| } | ||
|
|
||
| .flag-dropdown.open { | ||
| z-index: 5 !important; | ||
| } | ||
| } |
Oops, something went wrong.