Rebuild example

patw0929 · Dec 16, 2018 · 617f86c · 617f86c
1 parent 6adc797
commit 617f86c
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/example/example.js b/example/example.js
diff --git a/example/index.html b/example/index.html
@@ -1 +1 @@
-<!doctype html><html lang="zh-Hant-TW"><head><meta charset="UTF-8"><title>React-Intl-Tel-Input</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="author" content="patw"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/tomorrow-night-eighties.min.css"><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script><script src="https://rawgit.com/paulmillr/console-polyfill/master/index.js"></script><!--[if gte IE 9]><!--><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script><!--<![endif]--><style>.footer{text-align:center;margin:20px auto}</style><link href="main.css" rel="stylesheet"></head><body><a href="https://github.com/patw0929/react-intl-tel-input"><img style="position:absolute;top:0;right:0;border:0;z-index:1" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a><div class="container-fluid"><div class="row"><div class="col-md-10 col-md-offset-1"><div class="page-header"><h1>React-Intl-Tel-Input</h1></div><h2>Demo</h2><div class="panel panel-default"><div class="panel-body"><form class="form-inline"><div id="root"><h1>If you can see this, something is broken (or JS is not enabled)!!.</h1></div></form></div></div><hr><h2>Installation</h2><pre><code>npm install --save react-intl-tel-input</code></pre><p>or...</p><pre><code>yarn add react-intl-tel-input</code></pre><hr><h2>Syntax</h2><h3>General</h3><script src="https://gist.github.com/patw0929/9e1ed9e20032a79ba05338079af3abce.js?file=general.js"></script><h3>Demo: Lookup user's country</h3><script src="https://gist.github.com/patw0929/9e1ed9e20032a79ba05338079af3abce.js?file=geoip.js"></script><h3>Validation callback</h3><script src="https://gist.github.com/patw0929/9e1ed9e20032a79ba05338079af3abce.js?file=validation.js"></script><h3>Styling</h3><script src="https://gist.github.com/patw0929/9e1ed9e20032a79ba05338079af3abce.js?file=styling.js"></script><hr><h2>Props</h2><div class="table-responsive"><table class="table table-bordered"><thead><tr><th scope="col" style="width:10%">key</th><th scope="col" style="width:20%">default</th><th scope="col">description</th></tr></thead><tbody><tr><th scope="row">css</th><td><code>['intl-tel-input', '']</code></td><td>CSS classnames. First one is for the component wrapper, and second one is for text input.</td></tr><tr><th scope="row">style</th><td><code>{}</code></td><td>Style object for the wrapper div. Useful for setting 100% width on the wrapper, etc.</td></tr><tr><th scope="row">defaultValue</th><td><code>''</code></td><td>The value used to initialize input. This will only work on uncontrolled component.</td></tr><tr><th scope="row">value</th><td><code>''</code></td><td>The value of the input field. Useful for making input value controlled from outside the component.</td></tr><tr><th scope="row">fieldName</th><td><code>''</code></td><td>It's used as `input` field `name` attribute.</td></tr><tr><th scope="row">fieldId</th><td><code>''</code></td><td>It's used as `input` field `id` attribute.</td></tr><tr><th scope="row">countriesData</th><td><code>array</code></td><td>Countries data can be configured, it defaults to data defined in `AllCountries`.</td></tr><tr><th scope="row">disabled</th><td><code>null</code></td><td>Disable this component.</td></tr><tr><th scope="row">allowDropdown</th><td><code>true</code></td><td>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.</td></tr><tr><th scope="row">autoComplete</th><td><code>off</code></td><td>Set the value of the <code>autoComplete</code> attribute on the input. For example, set it to <code>phone</code> to tell the browser where to auto complete phone numbers.</td></tr><tr><th scope="row">autoPlaceholder</th><td><code>true</code></td><td>Add or remove input placeholder with an example number for the selected country.</td></tr><tr><th scope="row">autoHideDialCode</th><td><code>true</code></td><td>If there is just a dial code in the input: remove it on blur, and re-add it on focus.</td></tr><tr><th scope="row">placeholder</th><td><code>null</code></td><td>Static placeholder for input controller. When defined it takes priority over autoPlaceholder.</td></tr><tr><th scope="row">customPlaceholder</th><td><code>null</code></td><td>Change the placeholder generated by autoPlaceholder. Must return a string.</td></tr><tr><th scope="row">defaultCountry</th><td><code>''</code></td><td>Default country.</td></tr><tr><th scope="row">excludeCountries</th><td><code>undefined</code></td><td>Don't display the countries you specify. (<code>Array</code>)</td></tr><tr><th scope="row">formatOnInit</th><td><code>true</code></td><td>Format the input value during initialisation.</td></tr><tr><th scope="row">noCountryDataHandler</th><td><code>null</code></td><td>The function which can catch the "no this default country" exception.</td></tr><tr><th scope="row">geoIpLookup</th><td><code>null</code></td><td>GeoIp lookup function.</td></tr><tr><th scope="row">nationalMode</th><td><code>true</code></td><td>Don't insert international dial codes.</td></tr><tr><th scope="row">numberType</th><td><code>'MOBILE'</code></td><td>Number type to use for placeholders.</td></tr><tr><th scope="row">onlyCountries</th><td><code>[]</code></td><td>Display only these countries.</td></tr><tr><th scope="row">preferredCountries</th><td><code>['us', 'gb']</code></td><td>The countries at the top of the list. defaults to United States and United Kingdom.</td></tr><tr><th scope="row">separateDialCode</th><td><code>false</code></td><td>Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable <code>nationalMode</code> because technically we are dealing with international numbers, but with the dial code separated.</td></tr><tr><th scope="row">utilsScript</th><td><code>''</code></td><td>Specify the path to the libphonenumber script to enable validation/formatting.</td></tr><tr><th scope="row">onSelectFlag</th><td><code>null</code></td><td>Allow main app to do things when a country is selected.</td></tr><tr><th scope="row">onPhoneNumberChange</th><td><code>null</code></td><td>Optional validation callback function. It returns validation status, input box value and selected country data.</td></tr><tr><th scope="row">onPhoneNumberBlur</th><td><code>null</code></td><td>Optional validation callback function. It returns validation status, input box value and selected country data.</td></tr><tr><th scope="row">useMobileFullscreenDropdown</th><td><code>true</code></td><td>Render fullscreen flag dropdown when mobile useragent is detected. The dropdown element is rendered as a direct child of <code>document.body</code></td></tr><tr><th scope="row">telInputProps</th><td><code>{}</code></td><td>Pass through arbitrary props to the tel input element.</td></tr><tr><th scope="row">format</th><td><code>false</code></td><td>Format the number.</td></tr></tbody></table></div><hr><h2>Inspired by</h2><p><a href="https://github.com/jackocnr" target="_blank">@jackocnr</a> and his awesome project <a href="https://github.com/jackocnr/intl-tel-input" target="_blank">International Telephone Input</a>.</p><hr><h2>Lincense</h2><p>MIT License</p></div></div><div class="row footer"><div class="col-md-12"><ul class="list-inline"><li><a href="https://github.com/patw0929/react-intl-tel-input" target="_blank">GitHub</a></li><li><a href="https://patw.me" target="_blank">@patw</a></li></ul></div></div></div><script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/prop-types/prop-types.min.js"></script><script src="https://raw.githack.com/patw0929/libphonenumber-js-utils/master/dist/libphonenumber.js"></script><!--[if gte IE 9]><!--><script>hljs.initHighlightingOnLoad()</script><!--<![endif]--><script src="example.js"></script></body></html>
+<!doctype html><html lang="zh-Hant-TW"><head><meta charset="UTF-8"><title>React-Intl-Tel-Input</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="author" content="patw"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/tomorrow-night-eighties.min.css"><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script><script src="https://rawgit.com/paulmillr/console-polyfill/master/index.js"></script><!--[if gte IE 9]><!--><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script><!--<![endif]--><style>.footer{text-align:center;margin:20px auto}</style><link href="main.css" rel="stylesheet"></head><body><a href="https://github.com/patw0929/react-intl-tel-input"><img style="position:absolute;top:0;right:0;border:0;z-index:1" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a><div class="container-fluid"><div class="row"><div class="col-md-10 col-md-offset-1"><div class="page-header"><h1>React-Intl-Tel-Input</h1></div><h2>Demo</h2><div class="panel panel-default"><div class="panel-body"><form class="form-inline"><div id="root"><h1>If you can see this, something is broken (or JS is not enabled)!!.</h1></div></form></div></div><hr><h2>Installation</h2><pre><code>npm install --save react-intl-tel-input</code></pre><p>or...</p><pre><code>yarn add react-intl-tel-input</code></pre><hr><h2>Syntax</h2><h3>General</h3><script src="https://gist.github.com/patw0929/9e1ed9e20032a79ba05338079af3abce.js?file=general.js"></script><h3>Demo: Lookup user's country</h3><script src="https://gist.github.com/patw0929/9e1ed9e20032a79ba05338079af3abce.js?file=geoip.js"></script><h3>Validation callback</h3><script src="https://gist.github.com/patw0929/9e1ed9e20032a79ba05338079af3abce.js?file=validation.js"></script><h3>Styling</h3><script src="https://gist.github.com/patw0929/9e1ed9e20032a79ba05338079af3abce.js?file=styling.js"></script><hr><h2>Props</h2><div class="table-responsive"><table class="table table-bordered"><thead><tr><th scope="col" style="width:10%">key</th><th scope="col" style="width:20%">default</th><th scope="col">description</th></tr></thead><tbody><tr><th scope="row">css</th><td><code>['intl-tel-input', '']</code></td><td>CSS classnames. First one is for the component wrapper, and second one is for text input.</td></tr><tr><th scope="row">style</th><td><code>{}</code></td><td>Style object for the wrapper div. Useful for setting 100% width on the wrapper, etc.</td></tr><tr><th scope="row">defaultValue</th><td><code>''</code></td><td>The value used to initialize input. This will only work on uncontrolled component.</td></tr><tr><th scope="row">value</th><td><code>''</code></td><td>The value of the input field. Useful for making input value controlled from outside the component.</td></tr><tr><th scope="row">fieldName</th><td><code>''</code></td><td>It's used as `input` field `name` attribute.</td></tr><tr><th scope="row">fieldId</th><td><code>''</code></td><td>It's used as `input` field `id` attribute.</td></tr><tr><th scope="row">countriesData</th><td><code>array</code></td><td>Countries data can be configured, it defaults to data defined in `AllCountries`.</td></tr><tr><th scope="row">disabled</th><td><code>null</code></td><td>Disable this component.</td></tr><tr><th scope="row">allowDropdown</th><td><code>true</code></td><td>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.</td></tr><tr><th scope="row">autoComplete</th><td><code>off</code></td><td>Set the value of the <code>autoComplete</code> attribute on the input. For example, set it to <code>phone</code> to tell the browser where to auto complete phone numbers.</td></tr><tr><th scope="row">autoPlaceholder</th><td><code>true</code></td><td>Add or remove input placeholder with an example number for the selected country.</td></tr><tr><th scope="row">autoHideDialCode</th><td><code>true</code></td><td>If there is just a dial code in the input: remove it on blur, and re-add it on focus.</td></tr><tr><th scope="row">placeholder</th><td><code>null</code></td><td>Static placeholder for input controller. When defined it takes priority over autoPlaceholder.</td></tr><tr><th scope="row">customPlaceholder</th><td><code>null</code></td><td>Change the placeholder generated by autoPlaceholder. Must return a string.</td></tr><tr><th scope="row">defaultCountry</th><td><code>''</code></td><td>Default country.</td></tr><tr><th scope="row">excludeCountries</th><td><code>undefined</code></td><td>Don't display the countries you specify. (<code>Array</code>)</td></tr><tr><th scope="row">formatOnInit</th><td><code>true</code></td><td>Format the input value during initialisation.</td></tr><tr><th scope="row">noCountryDataHandler</th><td><code>null</code></td><td>The function which can catch the "no this default country" exception.</td></tr><tr><th scope="row">geoIpLookup</th><td><code>null</code></td><td>GeoIp lookup function.</td></tr><tr><th scope="row">nationalMode</th><td><code>true</code></td><td>Don't insert international dial codes.</td></tr><tr><th scope="row">numberType</th><td><code>'MOBILE'</code></td><td>Number type to use for placeholders.</td></tr><tr><th scope="row">onlyCountries</th><td><code>[]</code></td><td>Display only these countries.</td></tr><tr><th scope="row">preferredCountries</th><td><code>['us', 'gb']</code></td><td>The countries at the top of the list. defaults to United States and United Kingdom.</td></tr><tr><th scope="row">separateDialCode</th><td><code>false</code></td><td>Display the country dial code next to the selected flag so it's not part of the typed number. Note that this will disable <code>nationalMode</code> because technically we are dealing with international numbers, but with the dial code separated.</td></tr><tr><th scope="row">onSelectFlag</th><td><code>null</code></td><td>Allow main app to do things when a country is selected.</td></tr><tr><th scope="row">onPhoneNumberChange</th><td><code>null</code></td><td>Optional validation callback function. It returns validation status, input box value and selected country data.</td></tr><tr><th scope="row">onPhoneNumberBlur</th><td><code>null</code></td><td>Optional validation callback function. It returns validation status, input box value and selected country data.</td></tr><tr><th scope="row">useMobileFullscreenDropdown</th><td><code>true</code></td><td>Render fullscreen flag dropdown when mobile useragent is detected. The dropdown element is rendered as a direct child of <code>document.body</code></td></tr><tr><th scope="row">telInputProps</th><td><code>{}</code></td><td>Pass through arbitrary props to the tel input element.</td></tr><tr><th scope="row">format</th><td><code>false</code></td><td>Format the number.</td></tr></tbody></table></div><hr><h2>Inspired by</h2><p><a href="https://github.com/jackocnr" target="_blank">@jackocnr</a> and his awesome project <a href="https://github.com/jackocnr/intl-tel-input" target="_blank">International Telephone Input</a>.</p><hr><h2>Lincense</h2><p>MIT License</p></div></div><div class="row footer"><div class="col-md-12"><ul class="list-inline"><li><a href="https://github.com/patw0929/react-intl-tel-input" target="_blank">GitHub</a></li><li><a href="https://patw.me" target="_blank">@patw</a></li></ul></div></div></div><script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/prop-types/prop-types.min.js"></script><script src="https://raw.githack.com/patw0929/libphonenumber-js-utils/master/dist/libphonenumber.js"></script><!--[if gte IE 9]><!--><script>hljs.initHighlightingOnLoad()</script><!--<![endif]--><script src="example.js"></script></body></html>
diff --git a/example/main.js b/example/main.js