From 04602eddf16700bfc4d4f3d541e3d9155950a5b3 Mon Sep 17 00:00:00 2001 From: Fidan HAKAJ Date: Sat, 18 Jun 2016 19:25:58 +0200 Subject: [PATCH 1/2] Added intl-tel-input.d.ts --- intl-tel-input/intl-tel-input-tests.ts | 69 +++++++ intl-tel-input/intl-tel-input.d.ts | 252 +++++++++++++++++++++++++ 2 files changed, 321 insertions(+) create mode 100644 intl-tel-input/intl-tel-input-tests.ts create mode 100644 intl-tel-input/intl-tel-input.d.ts diff --git a/intl-tel-input/intl-tel-input-tests.ts b/intl-tel-input/intl-tel-input-tests.ts new file mode 100644 index 0000000000..739fcc854b --- /dev/null +++ b/intl-tel-input/intl-tel-input-tests.ts @@ -0,0 +1,69 @@ +/// +/// + +$('#phone').intlTelInput(); + +$('#phone').intlTelInput({ + customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) { + return 'e.g. ' + selectedCountryPlaceholder; + } +}); + +$('#phone').intlTelInput({ + geoIpLookup: function(callback) { + $.get('http://ipinfo.io', function() {}, 'jsonp').always(function(resp) { + let countryCode = (resp && resp.country) ? resp.country : ''; + callback(countryCode); + }); + } +}); + +$('#phone').intlTelInput('destroy'); + +let extension = $('#phone').intlTelInput('getExtension'); + +let intlNumber = $('#phone').intlTelInput('getNumber'); +let ntlNumber = $('#phone').intlTelInput('getNumber', intlTelInputUtils.numberFormat.NATIONAL); + +let numberType = $('#phone').intlTelInput('getNumberType'); +if (numberType === intlTelInputUtils.numberType.MOBILE) {} + +let countryData = $('#phone').intlTelInput('getSelectedCountryData'); + +let error = $('#phone').intlTelInput('getValidationError'); +if (error === intlTelInputUtils.validationError.TOO_SHORT) {} + +let isValid = $('#phone').intlTelInput('isValidNumber'); + +$('#phone').intlTelInput('setCountry', 'gb'); + +$('#phone').intlTelInput('setNumber', '+447733123456'); + +let countryData3 = $.intlTelInput.getCountryData(); + +$.intlTelInput.loadUtils('build/js/utils.js'); + +$('#phone').intlTelInput({ + utilsScript: '../../build/js/utils.js' +}); + +$('#phone').intlTelInput({ + initialCountry: 'auto', + geoIpLookup: function(callback) { + $.get('http://ipinfo.io', function() {}, 'jsonp').always(function(resp) { + let countryCode = (resp && resp.country) ? resp.country : ''; + callback(countryCode); + }); + }, + utilsScript: '../../build/js/utils.js' +}); + +$('#phone').intlTelInput({ + nationalMode: true, + utilsScript: '../../build/js/utils.js' +}); + +$('#phone').intlTelInput({ + onlyCountries: ['al'], + utilsScript: '../../build/js/utils.js' +}); diff --git a/intl-tel-input/intl-tel-input.d.ts b/intl-tel-input/intl-tel-input.d.ts new file mode 100644 index 0000000000..7779f34bd4 --- /dev/null +++ b/intl-tel-input/intl-tel-input.d.ts @@ -0,0 +1,252 @@ +// Type definitions for intl-tel-input +// Project: https://github.com/jackocnr/intl-tel-input +// Definitions by: Fidan Hakaj +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +declare namespace IntlTelInput { + + interface Options { + /** + * Whether or not to allow the dropdown. If disabled, there is no dropdown + * arrow, and the selected flag is not clickable. Also we display the + * selected flag on the right instead because it is just a marker of state. + */ + allowDropdown?: boolean; + /** + * If there is just a dial code in the input: remove it on blur or submit, + * and re-add it on focus. This is to prevent just a dial code getting + * submitted with the form. Requires nationalMode to be set to false. + */ + autoHideDialCode?: boolean; + /** + * Set the input's placeholder to an example number for the selected country. + * You can specify the number type using the numberType option. + * If there is already a placeholder attribute set on the input then that + * will take precedence. Requires the utilsScript option. + */ + autoPlaceholder?: boolean; + /** + * Change the placeholder generated by autoPlaceholder. Must return a string. + */ + customPlaceholder?: (selectedCountryPlaceholder: string, selectedCountryData: CountryData) => string; + /** + * Specify the container for the country dropdown (use a jQuery selector + * e.g. "body"). This is useful when the input is within a scrolling element, + * or an element with overflow: hidden. Wherever you put the dropdown it + * will automatically close on the window scroll event to prevent positioning + * issues. If you want it to close when a different element is scrolled + * (such as the input's parent), simply listen for the that scroll event, + * and trigger $(window).scroll() e.g. + */ + dropdownContainer?: string; + /** + * Don't display the countries you specify. + */ + excludeCountries?: Array; + /** + * Format the input value during initialisation. + */ + formatOnInit?: boolean; + /** + * When setting initialCountry to "auto", you must use this option to + * specify a custom function that looks up the user's location. Also note + * that when instantiating the plugin, we now return a deferred object, so + * you can use .done(callback) to know when initialisation requests like + * this have completed. + * Note that the callback must still be called in the event of an error. + */ + geoIpLookup?: (callback: (countryCode: string) => void) => void; + /** + * Set the initial country selection by specifying it's country code. + * You can also set it to "auto", which will lookup the user's country based + * on their IP address (requires the geoIpLookup option). + * Note that the "auto" option will not update the country selection if the + * input already contains a number. If you leave initialCountry blank, + * it will default to the first country in the list. + */ + initialCountry?: string; + /** + * Allow users to enter national numbers (and not have to think about + * international dial codes). Formatting, validation and placeholders still + * work. Then you can use getNumber to extract a full international number. + * This option now defaults to true, and it is recommended that you leave it + * that way as it provides a better experience for the user. + */ + nationalMode?: boolean; + /** + * Specify one of the keys from the global enum intlTelInputUtils.numberType + * e.g. "FIXED_LINE" to tell the plugin you're expecting that type of number. + * Currently this is only used to set the placeholder to the right type of number. + */ + numberType?: string; + /** + * Display only the countries you specify. + */ + onlyCountries?: Array; + /** + * Specify the countries to appear at the top of the list. + */ + preferredCountries?: Array; + /** + * Display the country dial code next to the selected flag so it's not part + * of the typed number. Note that this will disable nationalMode because + * technically we are dealing with international numbers, but with the + * dial code separated. + */ + separateDialCode?: boolean; + /** + * Enable formatting/validation etc. by specifying the path to the included + * utils.js script, which is fetched only when the page has finished loading + * (on window.load) to prevent blocking. When instantiating the plugin, + * we return a deferred object, so you can use .done(callback) to know when + * initialisation requests like this have finished. Note that if you're + * lazy loading the plugin script itself (intlTelInput.js) this will not + * work and you will need to use the loadUtils method instead. + */ + utilsScript?: string; + } + + interface CountryData { + name: string; + iso2: string; + dialCode: string; + } + + interface Static { + /** + * Get all of the plugin's country data. + * Note that any modifications must be done before initialising the plugin. + */ + getCountryData: () => Array; + /** + * Note: this is only needed if you're lazy loading the plugin script itself (intlTelInput.js). + * If not then just use the utilsScript option. Load the utils.js script + * (included in the lib directory) to enable formatting/validation etc. + * @param path path to the utils.js script. + */ + loadUtils: (path: string) => void; + } +} + +declare namespace intlTelInputUtils { + + const enum numberFormat { + E164 = 0, + INTERNATIONAL = 1, + NATIONAL = 2, + RFC3966 = 3 + } + + const enum numberType { + FIXED_LINE = 0, + MOBILE = 1, + FIXED_LINE_OR_MOBILE = 2, + TOLL_FREE = 3, + PREMIUM_RATE = 4, + SHARED_COST = 5, + VOIP = 6, + PERSONAL_NUMBER = 7, + PAGER = 8, + UAN = 9, + VOICEMAIL = 10, + UNKNOWN = -1 + } + + const enum validationError { + IS_POSSIBLE = 0, + INVALID_COUNTRY_CODE = 1, + TOO_SHORT = 2, + TOO_LONG = 3, + NOT_A_NUMBER = 4 + } +} + +interface JQueryStatic { + intlTelInput: IntlTelInput.Static; +} + +interface JQuery { + /** + * Remove the plugin from the input, and unbind any event listeners. + */ + intlTelInput(method: 'destroy'): void; + /** + * Get the extension from the current number. + * Requires the utilsScript option. + * e.g. if the input value was "(702) 555-5555 ext. 1234", this would + * return "1234". + */ + intlTelInput(method: 'getExtension'): string; + /** + * Get the current number in the given format (defaults to E.164 standard). + * The different formats are available in the enum + * intlTelInputUtils.numberFormat - taken from here. + * Requires the utilsScript option. + * Note that even if nationalMode is enabled, this can still return a full + * international number. + */ + intlTelInput(method: 'getNumber'): string; + /** + * Get the type (fixed-line/mobile/toll-free etc) of the current number. + * Requires the utilsScript option. + * Returns an integer, which you can match against the various options in the + * global enum intlTelInputUtils.numberType. + * Note that in the US there's no way to differentiate between fixed-line and + * mobile numbers, so instead it will return FIXED_LINE_OR_MOBILE. + */ + intlTelInput(method: 'getNumberType'): intlTelInputUtils.numberType; + /** + * Get the country data for the currently selected flag. + */ + intlTelInput(method: 'getSelectedCountryData'): IntlTelInput.CountryData; + /** + * Get more information about a validation error. + * Requires the utilsScript option. + * Returns an integer, which you can match against the various options in the + * global enum intlTelInputUtils.validationError + */ + intlTelInput(method: 'getValidationError'): intlTelInputUtils.validationError; + /** + * Validate the current number. Expects an internationally formatted number + * (unless nationalMode is enabled). If validation fails, you can use + * getValidationError to get more information. + * Requires the utilsScript option. + * Also see getNumberType if you want to make sure the user enters a certain + * type of number e.g. a mobile number. + */ + intlTelInput(method: 'isValidNumber'): boolean; + intlTelInput(method: string): void; + /** + * Change the country selection (e.g. when the user is entering their address). + * @param countryCode country code of the country to be set. + */ + intlTelInput(method: 'setCountry', countryCode: string): void; + /** + * Insert a number, and update the selected flag accordingly. + * Note that by default, if nationalMode is enabled it will try to use + * national formatting. + * @param aNumber number to be set. + */ + intlTelInput(method: 'setNumber', aNumber: string): void; + intlTelInput(method: string, value: string): void; + + /** + * Get the current number in the given format (defaults to E.164 standard). + * The different formats are available in the enum + * intlTelInputUtils.numberFormat - taken from here. + * Requires the utilsScript option. + * Note that even if nationalMode is enabled, this can still return a full + * international number. + * @param numberFormat the format in which the number will be returned. + */ + intlTelInput(method: 'getNumber', numberFormat: intlTelInputUtils.numberFormat): string; + intlTelInput(method: string, numberFormat: intlTelInputUtils.numberFormat): string; + + /** + * initialise the plugin with optional options. + * @param options options that can be provided during initialization. + */ + intlTelInput(options?: IntlTelInput.Options): JQueryDeferred; +} From df9e1985b2972f1f6e1f1f84eb72e16f95cd8160 Mon Sep 17 00:00:00 2001 From: Fidan HAKAJ Date: Fri, 24 Jun 2016 01:47:16 +0200 Subject: [PATCH 2/2] Removed wrong static functions typings --- intl-tel-input/intl-tel-input-tests.ts | 6 +++--- intl-tel-input/intl-tel-input.d.ts | 24 +++++------------------- 2 files changed, 8 insertions(+), 22 deletions(-) diff --git a/intl-tel-input/intl-tel-input-tests.ts b/intl-tel-input/intl-tel-input-tests.ts index 739fcc854b..c10acfffa0 100644 --- a/intl-tel-input/intl-tel-input-tests.ts +++ b/intl-tel-input/intl-tel-input-tests.ts @@ -28,7 +28,7 @@ let ntlNumber = $('#phone').intlTelInput('getNumber', intlTelInputUtils.numberFo let numberType = $('#phone').intlTelInput('getNumberType'); if (numberType === intlTelInputUtils.numberType.MOBILE) {} -let countryData = $('#phone').intlTelInput('getSelectedCountryData'); +let selectedCountryData = $('#phone').intlTelInput('getSelectedCountryData'); let error = $('#phone').intlTelInput('getValidationError'); if (error === intlTelInputUtils.validationError.TOO_SHORT) {} @@ -39,9 +39,9 @@ $('#phone').intlTelInput('setCountry', 'gb'); $('#phone').intlTelInput('setNumber', '+447733123456'); -let countryData3 = $.intlTelInput.getCountryData(); +let countryData = $.fn.intlTelInput.getCountryData(); -$.intlTelInput.loadUtils('build/js/utils.js'); +$.fn.intlTelInput.loadUtils('build/js/utils.js'); $('#phone').intlTelInput({ utilsScript: '../../build/js/utils.js' diff --git a/intl-tel-input/intl-tel-input.d.ts b/intl-tel-input/intl-tel-input.d.ts index 7779f34bd4..c092084738 100644 --- a/intl-tel-input/intl-tel-input.d.ts +++ b/intl-tel-input/intl-tel-input.d.ts @@ -3,6 +3,11 @@ // Definitions by: Fidan Hakaj // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// Static methods that are defined in JQueryStatic.fn are not typed +// as jquery.d.ts has no interface for fn +// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts#L958 +// fn: any; //TODO: Decide how we want to type this + /// declare namespace IntlTelInput { @@ -113,21 +118,6 @@ declare namespace IntlTelInput { iso2: string; dialCode: string; } - - interface Static { - /** - * Get all of the plugin's country data. - * Note that any modifications must be done before initialising the plugin. - */ - getCountryData: () => Array; - /** - * Note: this is only needed if you're lazy loading the plugin script itself (intlTelInput.js). - * If not then just use the utilsScript option. Load the utils.js script - * (included in the lib directory) to enable formatting/validation etc. - * @param path path to the utils.js script. - */ - loadUtils: (path: string) => void; - } } declare namespace intlTelInputUtils { @@ -163,10 +153,6 @@ declare namespace intlTelInputUtils { } } -interface JQueryStatic { - intlTelInput: IntlTelInput.Static; -} - interface JQuery { /** * Remove the plugin from the input, and unbind any event listeners.