UNPKG

react-phone-number-input-mui

Version:

Telephone input for React and Material-UI. Fork of catamphetamine awesome work of react-phone-number-input.

384 lines (227 loc) 15.7 kB
<!-- 2.0.0: * Remove `parsePhoneNumberCharacters` and `formatPhoneNumber` exports (and tests). * Remove `<InputBasic/>` (use `libphonenumber-js` one instead). * Remove `/rrui` and `/native` exports from `index.commonjs.js` so that's it's minimal and bare. * Make `/custom` components bare ones. Remove default value for `inputComponent` and require passing one (e.g. InputBasic, InputSmart). Move `smartCaret` property to the top level from `PhoneInput`: to `PhoneInputNativeDefaultMetadata` and to `PhoneInputReactResponsiveUIDefaultMetadata`. Remove default value for `dictionary` property and require passing one (e.g. dictionary). Remove default value for `internationalIcon` property and require passing one (e.g. InternationalIcon). * Add "Custom Country Select" section to README and move all `react-responsive-ui` text there: "The countries dropdown with autocomplete is taken from [`react-responsive-ui`](https://catamphetamine.github.io/react-responsive-ui/)." * Delete `rrui.css` (from root and `bundle`). Instead use modular inclusion of selective styles from `react-responsive-ui/styles`. Remove from README: "import 'react-phone-number-input/rrui.css'" and replace: "import 'react-phone-number-input/style.css'" with "require('react-phone-number-input/style.css')" Remove "rrui.css" from this part of README: "Get the `rrui.css` and `style.css` files from this package, process these files with a [CSS autoprefixer](https://github.com/postcss/autoprefixer) for supporting old web browsers (e.g. `last 2 versions`, `iOS >= 7`, `Android >= 4`), and then include them on a page." Remove from README: "<link rel="stylesheet" href="/css/react-phone-number-input/rrui.css"/>" Remove from README: "`nativeExpanded`" * Rename in CSS `.react-phone-number-input__phone--native` -> `.react-phone-number-input__phone`. * Remove all `rrui__` from *.css and *.js files. Review `style.css` and maybe refactor it removing unneeded style rules. * Search for "2.x" in code (e.g., "Will be uncommented for version 2.x") and remove those performing the actions. * Maybe make `smartCaret={false}` the default. * Replace <link rel="stylesheet" href="https://unpkg.com/react-phone-number-input@1.1.10/bundle/rrui.css"/> with the link to `react-responsive-ui` repo style. * Remove resources folder --> 1.1.13 / 12.07.2018 =================== * Added `react-phone-number-input/basic-input` component. 1.1.3 / 29.05.2018 =================== * Some CSS tweaks and code refactoring. 1.1.2 / 29.05.2018 =================== * Added an isolated `react-phone-number-input/native` export (so that it doesn't include `react-responsive-ui` package in the resulting bundle). * Some CSS tweaks. * `countrySelectComponent` `onToggle` property renamed to `hidePhoneInputField`. 1.1.0 / 28.05.2018 =================== * Added `PhoneInputNative` exported component which deprecateds the old `nativeCountrySelect={true/false}` property. `PhoneInputNative` component doesn't require `rrui.css`. It will be the default exported component in version `2.x`. * Fixed [a minor bug](https://github.com/catamphetamine/react-phone-number-input/issues/131) appering in React 16.4 which caused the currently selected country flag to be reset while typing. 1.0.10 / 19.04.2018 =================== * Added an optional `smartCaret={false}` property for [fixing Samsung Android phones](https://github.com/catamphetamine/react-phone-number-input/issues/75). 1.0.8 / 19.04.2018 =================== * (breaking change) Changed the properties passed to a custom `inputComponent`, see `Input.js` `propTypes` for more info. * Added `BasicInput`: an alternative `inputComponent` for working around the Samsung Galaxy caret positioning bug. 1.0.0 / 21.03.2018 =================== * (breaking change) Rewrote `Input.js` — there is a possibility that something could potentially break for users coming from previous versions. * (breaking change) No longer exporting `libphonenumber-js` functions. * (breaking change) `dictionary`'s `"International"` key renamed to `"ZZ"`. * (breaking change) `dictionary` property renamed to `labels`. * (breaking change) `nativeExpanded` property renamed to `nativeCountrySelect`. * (breaking change) `selectTabIndex` property renamed to `countrySelectTabIndex`. * (breaking change) `selectMaxItems` property renamed to `countrySelectMaxItems`. * (breaking change) `selectAriaLabel` property renamed to `countrySelectAriaLabel`. * (breaking change) `selectCloseAriaLabel` property renamed to `countrySelectCloseAriaLabel`. * (breaking change) `selectComponent` property renamed to `countrySelectComponent` * (breaking change) `flagComponent`'s `countryCode` property was renamed to just `country`. * (breaking change) Renamed `countries with flags.js` to `flags.js` and put them in the root folder. * (breaking change) `flags` property changed: it can no longer be a `boolean` and can only be an object of flag `React.Component`s. * (breaking change) `selectStyle` and `inputStyle` properties removed (due to not being used). * (breaking change) `inputTabIndex` property removed (use `tabIndex` instead). * (breaking change) `onCountryChange` property removed (no one actually used it). * (breaking change) `convertToNational` property renamed to `displayInitialValueAsLocalNumber`. * (breaking change) `style.css` changed a bit (to accomodate phone number extension field). * (breaking change) If someone did override `.rrui__input:not(.rrui__input--multiline)` CSS rule then now it has been split into two CSS rules: `.rrui__input` and `.rrui__input--multiline`. * Added `locale`s for the `labels` property (`ru` and `en`). * Added `ext` property for phone number extension input. 0.17.0 / 24.02.2018 =================== * (breaking change) Fixed SVG flag icons for IE. This alters the markup a bit: `<img/>` is now wrapped in a `<div/>` and the CSS class of the image becomes the CSS class of the div and also a new CSS class for the image is added. This could hypothetically be a breaking change in some advanced use cases hence the major version bump. * Fixed `<Select/>` scrolling to the top of the page in IE <= 11. * Fixed validation error margin left. 0.16.0 / 22.02.2018 =================== * Updated `libphonenumber-js` to `1.0.x`. * `parsePhoneNumber()`, `isValidPhoneNumber()` and `formatPhoneNumber()` no longer accept `undefined` phone number argument: it must be either a `string` or a parsed number `object` having a `string` `phone` property. 0.15.0 / 10.10.2017 =================== * Added `error` and `indicateInvalid` properties for displaying error label. * (CSS breaking change) `react-phone-number-input` `<div/>` is now wrapped by another `<div/>` and its CSS class name changed to `react-phone-number-input__row` and `react-phone-number-input` CSS class name goes to the wrapper. 0.14.0 / 04.10.2017 =================== * Returning `<input/>` `type` back to `tel`. There used to be reports previously that `input="tel"` `<input/>`s on some non-stock Android devices with non-stock keyboards had issues with proper caret positioning during input. Well, those are non-stock Android bugs and therefore they should fix those there. `type="tel"` is better in terms of the digital input keyboard so it's now a default. Still can be overridden by passing `type="text"` property. 0.13.0 / 20.09.2017 =================== This release contains some minor CSS class names refactoring which most likely won't introduce any issues in almost but all use cases. (CSS breaking change) Refactored `<Select/>` CSS class names in `react-responsive-ui`: * `.rrui__select__selected--autocomplete` -> `.rrui__select__autocomplete` * `.rrui__select__selected` -> `.rrui__select__button` * `.rrui__select__selected--nothing` -> `.rrui__select__button--empty` * `.rrui__select__selected--expanded` -> `.rrui__select__button--expanded` * `.rrui__select__selected--disabled` -> `.rrui__select__button--disabled` (CSS breaking change) Added `.rrui__text-input__input` CSS class to the phone number `<input/>`. (CSS breaking change) Added global `.rrui__text-input__input` styles to `style.css` 0.12.1 / 27.07.2017 =================== * Due to the [reports](https://github.com/catamphetamine/react-phone-number-input/issues/59) stating that `type="tel"` caret positioning doesn't work on Samsung devices the component had to revert back to `type="text"` by default (one can pass `type="tel"` property directly though). 0.12.0 / 25.07.2017 =================== * (breaking change) The default value of `convertToNational` property changed from `true` to `false`. The reason is that the newer generation grows up when there are no stationary phones and therefore everyone inputs phone numbers with a `+` in their smartphones so local phone numbers should now be considered obsolete. 0.11.3 / 16.05.2017 =================== * Now alphabetically sorting the supplied custom country names 0.11.2 / 12.05.2017 =================== * Fixed a bug when `value` was not set to `undefined` when the `<input/>` value was empty * Added `selectMaxItems` property for customizing the country select height 0.11.0 / 03.05.2017 =================== * (CSS breaking change) Removed vertical padding from the first and the last `<Select/>` `<li/>` options and moved it to `.rrui__select__options` `<ul/>` itself. So if someone customized `.rrui__select__options-list-item:first-child` and `.rrui__select__options-list-item:last-child` vertical padding then those padding customizations should be moved to `.rrui__select__options` itself. * (CSS breaking change) Added `.rrui__select__option:hover` and `.rrui__select__option--focused:hover` background color for better UX. 0.10.0 / 18.04.2017 =================== * (might be a breaking change) Slightly refactored the component CSS improving it in a couple of places along with adding comments to it (see `style.css`). * Added country code validation. 0.9.1 / 16.04.2017 ================== * (breaking change) Moved the `.css` file to the root folder of the package and **split it into two files** (the `rrui` one is not required when already using `react-responsive-ui`). `import`ing the CSS file via Webpack is the recommended way to go now. * (breaking change) Vendor prefixes dropped in favour of manually using autoprefixers. 0.8.10 / 15.04.2017 =================== * Added support for externally changing `value` property 0.8.5 / 06.04.2017 ================== * Added `inputTabIndex` and `selectTabIndex` settings 0.8.5 / 05.04.2017 ================== * Added `nativeExpanded` setting for native country `<select/>` 0.8.1 / 27.03.2017 ================== * The `.valid` property has been removed from "as you type" formatter, therefore dropping the `.react-phone-number-input__phone--valid` CSS class. This doesn't affect functionality in any way nor does it break existing code therefore it's a "patch" version upgrade. 0.8.0 / 17.03.2017 ================== * (could be a breaking change) Moving CSS positioning properties from inline styles to the CSS file therefore if using an edited CSS file from older versions (when not doing it via Webpack `require(...)`) update styles for `.rrui__select` and `.rrui__select__options`. As well as `.rrui__expandable` and `.rrui__shadow` have been added. Maybe (and most likely) something else, so better re-copy the entire CSS file. 0.7.11 / 16.03.2017 =================== * Fixed a small bug when an initially passed phone number `value` wasn't checked for country autodetection * A small enhancement: when an international phone number is erased to a single `+` then the currently selected country is reset. And, analogous, when a country is selected, and the input is empty, and then the user enters a single `+` sign — the country is reset too. 0.7.9 / 12.03.2017 ================== * Fixed a small bug when the `country` property was set after page load programmatically and that caused the input taking focus (which displayed a keyboard on mobile devices) 0.7.5 / 22.02.2017 ================== * `@JeandeCampredon` fixed `Const declarations are not supported in strict mode` in module exports 0.7.1 / 28.01.2017 ================== * Added custom metadata feature (now developers have a way to reduce the resulting bundle size in case they decide they need that) * `lockCountry` property removed (use `countries={[country]}` instead) * Added `international` boolean property to explicitly indicate whether to show the "International" option in the list of countries * Not showing country `<Select/>` when `countries.length === 1` or `countries.length === 0` * `countries` property can now only be an array of country codes 0.6.13 / 28.01.2017 =================== * Fixed the flags bug introduced by adding `flags={ false }` option 0.6.12 / 27.01.2017 =================== * Added `flags={ false }` option 0.6.11 / 26.01.2017 =================== * Added `lockCountry` option * Added a possibility to specify `countries` as an array of country codes * Fixed country selection on `country` property update 0.6.8 / 03.01.2017 =================== * Optimized performance on mobile devices 0.6.6 / 30.12.2016 =================== * Added a bunch of CSS classes: `react-phone-number-input`, `react-phone-number-input--valid`, `react-phone-number-input__country`, `react-phone-number-input__phone`, `react-phone-number-input__phone--valid` 0.6.5 / 28.12.2016 =================== * Now hiding the phone input while the country select is open 0.6.1 / 24.12.2016 =================== * Fixed collapsed select options being interactive in iOS 8 Safari 0.6.0 / 23.12.2016 =================== * A complete rewrite. Now supports all countries, all formats are hard-coded from Google Android's `libphonenumber` library. 0.5.4 / 11.12.2016 =================== * Hong Kong phone numbers fix by @nchan0154 0.5.3 / 15.11.2016 =================== * Added some popular country formats (and stubs for other countries) * Small bug fix for trunk prefixed phone numbers 0.5.0 / 14.11.2016 =================== * `format` prop is now not required for the React component. If `format` is not specified then the input switches itself into "auto" (iPhone style) mode. * input code rewrite 0.4.0 / 15.09.2016 =================== * (breaking change) `digits` passed to the `template()` function don't include trunk prefix anymore * Introduced custom `valid(digits)` phone number validation function for phone number format 0.3.0 / 07.09.2016 =================== * `format_phone_number` (aka `formatPhoneNumber`) function now formats phone number internationally (with country code) if no `format` argument was supplied (it tries to autodetect the correct phone number format from the phone number itself) * Added `country(phone)` function * Added `country_from_locale(locale)` (aka `countryFromLocale(locale)`) function 0.2.11 / 06.09.2016 =================== * Added `parse_phone_number` (aka `parsePhoneNumber`) function 0.2.10 / 04.09.2016 =================== * Added `plaintext_local` (aka `plaintextLocal`) and `plaintext_international` (aka `plaintextInternational`) methods 0.2.0 / 03.09.2016 ================== * Added custom phone formats * Refactoring * Removed `format_phone_number_international` (aka `formatPhoneNumberInternational`) 0.1.20 / 19.08.2016 =================== * Added `disabled` property 0.1.18 / 11.08.2016 =================== * Added `name` property (for javascriptless websites) 0.1.0 / 15.07.2016 =================== * Initial release