From f6d0d7746dc4487678826ca0f3bd7a6f13c0d451 Mon Sep 17 00:00:00 2001 From: Daniel Fuchs Date: Wed, 3 Oct 2018 17:57:54 +0300 Subject: [PATCH 1/2] tests and lint --- package-lock.json | 334 +++++++++++++++++++----------- package.json | 18 +- src/country.ts | 7 + src/countryMenuItem.tsx | 40 ++-- src/index.ts | 1 + src/{index.tsx => phoneInput.tsx} | 105 +++++----- test/phoneInput.test.ts | 4 + tsconfig.json | 1 - tslint.json | 49 +++++ webpack.config.js | 1 - 10 files changed, 358 insertions(+), 202 deletions(-) create mode 100644 src/country.ts create mode 100644 src/index.ts rename src/{index.tsx => phoneInput.tsx} (65%) create mode 100644 test/phoneInput.test.ts create mode 100644 tslint.json diff --git a/package-lock.json b/package-lock.json index 949c507..077319d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "material-ui-phone-input", + "name": "@material-ui/phone-input", "version": "1.0.0", "lockfileVersion": 1, "requires": true, @@ -217,6 +217,12 @@ "integrity": "sha512-lRnAtKnxMXcYYXqOiotTmJd74uawNWuPnsnPrrO7HiFuE3npE2iQhfABatbYDyxTNqZNuXzcKGhw37R7RjBFLg==", "dev": true }, + "@types/mocha": { + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-5.2.5.tgz", + "integrity": "sha512-lAVp+Kj54ui/vLUFxsJTMtWvZraZxum3w3Nwkble2dNuV5VnPA+Mi2oGX9XYJAaIvZi3tn3cbjS/qcJXRb6Bww==", + "dev": true + }, "@types/node": { "version": "10.9.3", "resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.3.tgz", @@ -458,6 +464,12 @@ "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", "dev": true }, + "arrify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", + "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", + "dev": true + }, "asap": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", @@ -920,6 +932,12 @@ "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=", "dev": true }, + "browser-stdout": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz", + "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==", + "dev": true + }, "browserify-aes": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", @@ -1002,6 +1020,12 @@ "isarray": "1.0.0" } }, + "buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", + "dev": true + }, "buffer-indexof": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz", @@ -2335,12 +2359,6 @@ } } }, - "fontfaceobserver": { - "version": "2.0.13", - "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz", - "integrity": "sha1-R627NDJh7amMtE2yFSGW/xJNMiE=", - "dev": true - }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -3043,9 +3061,10 @@ "dev": true }, "growl": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz", - "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=" + "version": "1.10.5", + "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz", + "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==", + "dev": true }, "gzip-size": { "version": "4.1.0", @@ -3146,29 +3165,11 @@ "minimalistic-assert": "1.0.1" } }, - "history": { - "version": "4.7.2", - "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", - "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", - "dev": true, - "requires": { - "invariant": "2.2.4", - "loose-envify": "1.4.0", - "resolve-pathname": "2.2.0", - "value-equal": "0.4.0", - "warning": "3.0.0" - }, - "dependencies": { - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "dev": true, - "requires": { - "loose-envify": "1.4.0" - } - } - } + "he": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", + "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=", + "dev": true }, "hmac-drbg": { "version": "1.0.1", @@ -3779,12 +3780,6 @@ } } }, - "jquery": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", - "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==", - "dev": true - }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -4042,6 +4037,86 @@ "requires": { "closure": "1.0.3", "mocha": "2.5.3" + }, + "dependencies": { + "commander": { + "version": "2.3.0", + "resolved": "http://registry.npmjs.org/commander/-/commander-2.3.0.tgz", + "integrity": "sha1-/UMOiJgy7DU7ms0d4hfBHLPu+HM=" + }, + "debug": { + "version": "2.2.0", + "resolved": "http://registry.npmjs.org/debug/-/debug-2.2.0.tgz", + "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=", + "requires": { + "ms": "0.7.1" + } + }, + "diff": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz", + "integrity": "sha1-fyjS657nsVqX79ic5j3P2qPMur8=" + }, + "escape-string-regexp": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz", + "integrity": "sha1-Tbwv5nTnGUnK8/smlc5/LcHZqNE=" + }, + "glob": { + "version": "3.2.11", + "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz", + "integrity": "sha1-Spc/Y1uRkPcV0QmH1cAP0oFevj0=", + "requires": { + "inherits": "2.0.3", + "minimatch": "0.3.0" + } + }, + "growl": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz", + "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=" + }, + "lru-cache": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz", + "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=" + }, + "minimatch": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz", + "integrity": "sha1-J12O2qxPG7MyZHIInnlJyDlGmd0=", + "requires": { + "lru-cache": "2.7.3", + "sigmund": "1.0.1" + } + }, + "mocha": { + "version": "2.5.3", + "resolved": "http://registry.npmjs.org/mocha/-/mocha-2.5.3.tgz", + "integrity": "sha1-FhvlvetJZ3HrmzV0UFC2IrWu/Fg=", + "requires": { + "commander": "2.3.0", + "debug": "2.2.0", + "diff": "1.4.0", + "escape-string-regexp": "1.0.2", + "glob": "3.2.11", + "growl": "1.9.2", + "jade": "0.26.3", + "mkdirp": "0.5.1", + "supports-color": "1.2.0", + "to-iso-string": "0.0.2" + } + }, + "ms": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz", + "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=" + }, + "supports-color": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.2.0.tgz", + "integrity": "sha1-/x7R5hFp0Gs88tWI4YixjYhH4X4=" + } } }, "libphonenumber-js": { @@ -4151,6 +4226,12 @@ "yallist": "2.1.2" } }, + "make-error": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.5.tgz", + "integrity": "sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==", + "dev": true + }, "map-cache": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", @@ -4464,95 +4545,70 @@ } }, "mocha": { - "version": "2.5.3", - "resolved": "http://registry.npmjs.org/mocha/-/mocha-2.5.3.tgz", - "integrity": "sha1-FhvlvetJZ3HrmzV0UFC2IrWu/Fg=", - "requires": { - "commander": "2.3.0", - "debug": "2.2.0", - "diff": "1.4.0", - "escape-string-regexp": "1.0.2", - "glob": "3.2.11", - "growl": "1.9.2", - "jade": "0.26.3", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/mocha/-/mocha-5.2.0.tgz", + "integrity": "sha512-2IUgKDhc3J7Uug+FxMXuqIyYzH7gJjXECKe/w43IGgQHTSj3InJi+yAA7T24L9bQMRKiUEHxEX37G5JpVUGLcQ==", + "dev": true, + "requires": { + "browser-stdout": "1.3.1", + "commander": "2.15.1", + "debug": "3.1.0", + "diff": "3.5.0", + "escape-string-regexp": "1.0.5", + "glob": "7.1.2", + "growl": "1.10.5", + "he": "1.1.1", + "minimatch": "3.0.4", "mkdirp": "0.5.1", - "supports-color": "1.2.0", - "to-iso-string": "0.0.2" + "supports-color": "5.4.0" }, "dependencies": { "commander": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.3.0.tgz", - "integrity": "sha1-/UMOiJgy7DU7ms0d4hfBHLPu+HM=" + "version": "2.15.1", + "resolved": "http://registry.npmjs.org/commander/-/commander-2.15.1.tgz", + "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", + "dev": true }, "debug": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz", - "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, "requires": { - "ms": "0.7.1" + "ms": "2.0.0" } }, - "diff": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/diff/-/diff-1.4.0.tgz", - "integrity": "sha1-fyjS657nsVqX79ic5j3P2qPMur8=" - }, - "escape-string-regexp": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz", - "integrity": "sha1-Tbwv5nTnGUnK8/smlc5/LcHZqNE=" - }, "glob": { - "version": "3.2.11", - "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz", - "integrity": "sha1-Spc/Y1uRkPcV0QmH1cAP0oFevj0=", + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", + "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "dev": true, "requires": { + "fs.realpath": "1.0.0", + "inflight": "1.0.6", "inherits": "2.0.3", - "minimatch": "0.3.0" + "minimatch": "3.0.4", + "once": "1.4.0", + "path-is-absolute": "1.0.1" } }, - "lru-cache": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz", - "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=" - }, - "minimatch": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz", - "integrity": "sha1-J12O2qxPG7MyZHIInnlJyDlGmd0=", + "supports-color": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", + "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", + "dev": true, "requires": { - "lru-cache": "2.7.3", - "sigmund": "1.0.1" + "has-flag": "3.0.0" } - }, - "ms": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz", - "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=" - }, - "supports-color": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-1.2.0.tgz", - "integrity": "sha1-/x7R5hFp0Gs88tWI4YixjYhH4X4=" } } }, - "moment": { - "version": "2.22.2", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz", - "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=", + "mocha-clean": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/mocha-clean/-/mocha-clean-1.0.0.tgz", + "integrity": "sha1-fnabFss4dF32KiiRcHeVOwX+wGQ=", "dev": true }, - "moment-range": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/moment-range/-/moment-range-4.0.1.tgz", - "integrity": "sha1-GujPIJ3e0KXOXhZgMUYmWzkGqG8=", - "dev": true, - "requires": { - "es6-symbol": "3.1.1" - } - }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -5613,12 +5669,6 @@ "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=", "dev": true }, - "resolve-pathname": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", - "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==", - "dev": true - }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -6355,6 +6405,46 @@ "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==", "dev": true }, + "ts-node": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-7.0.1.tgz", + "integrity": "sha512-BVwVbPJRspzNh2yfslyT1PSbl5uIk03EZlb493RKHN4qej/D06n1cEhjlOJG69oFsE7OT8XjpTUcYf6pKTLMhw==", + "dev": true, + "requires": { + "arrify": "1.0.1", + "buffer-from": "1.1.1", + "diff": "3.5.0", + "make-error": "1.3.5", + "minimist": "1.2.0", + "mkdirp": "0.5.1", + "source-map-support": "0.5.9", + "yn": "2.0.0" + }, + "dependencies": { + "minimist": { + "version": "1.2.0", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-support": { + "version": "0.5.9", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.9.tgz", + "integrity": "sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==", + "dev": true, + "requires": { + "buffer-from": "1.1.1", + "source-map": "0.6.1" + } + } + } + }, "ts-trait": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ts-trait/-/ts-trait-4.1.0.tgz", @@ -6444,6 +6534,12 @@ "mime-types": "2.1.20" } }, + "typescript": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.1.1.tgz", + "integrity": "sha512-Veu0w4dTc/9wlWNf2jeRInNodKlcdLgemvPsrNpfu5Pq39sgfFjvIIgTsvUHCoLBnMhPoUA+tFxsXjU6VexVRQ==", + "dev": true + }, "ua-parser-js": { "version": "0.7.18", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz", @@ -6671,12 +6767,6 @@ "spdx-expression-parse": "3.0.0" } }, - "value-equal": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", - "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==", - "dev": true - }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -7248,6 +7338,12 @@ "dev": true } } + }, + "yn": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz", + "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=", + "dev": true } } } diff --git a/package.json b/package.json index 4a5418f..e5c3228 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,15 @@ { - "name": "material-ui-phone-input", + "name": "@material-ui/phone-input", "version": "1.0.0", "description": "", "main": "build/index.js", "types": "build/index.d.ts", "scripts": { "build": "rm -rf build && npm run compile", - "ci": "npm run build && npm test", + "ci": "npm run build && npm run lint && npm test", "compile": "tsc -p tsconfig.prod.json", "compile-watch": "tsc -w -p tsconfig.prod.json", - "test": "mocha '{test,xe2e}/**/*.ts*' --require=ts-node/register --require mocha-clean", + "test": "mocha 'test/**/*.ts*' --require=ts-node/register --require mocha-clean", "bundle-watch": "webpack-dev-server --open", "publish-local": "npm publish --registry=http://localhost:4873 --force", "lint": "tslint '{src,test}/**/*.ts*'", @@ -61,6 +61,8 @@ "@types/history": "^4.7.0", "@types/immutable": "^3.8.7", "@types/jquery": "^3.2.17", + "@types/lodash": "^4.14.116", + "@types/mocha": "^5.2.5", "@types/numeral": "^0.0.22", "@types/prop-types": "^15.5.2", "@types/react": "^16.0.31", @@ -68,16 +70,14 @@ "@types/react-transition-group": "^2.0.11", "@types/react-virtualized": "^9.7.10", "@types/webpack-env": "^1.13.6", - "@types/lodash": "^4.14.116", "babel-core": "^6.26.3", - "fontfaceobserver": "^2.0.13", - "history": "^4.7.2", - "jquery": "^3.3.1", - "moment": "^2.22.1", - "moment-range": "^4.0.1", + "mocha": "^5.2.0", + "mocha-clean": "^1.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", + "ts-node": "^7.0.1", "tslint": "^5.10.0", + "typescript": "^3.1.1", "webpack": "^3.12.0", "webpack-bundle-analyzer": "^2.13.1", "webpack-dev-server": "^2.11.1" diff --git a/src/country.ts b/src/country.ts new file mode 100644 index 0000000..ddfd97b --- /dev/null +++ b/src/country.ts @@ -0,0 +1,7 @@ +export interface Country { + name: string + emoji: string + alpha2: string + countryCallingCodes: string[] +} +ֶ \ No newline at end of file diff --git a/src/countryMenuItem.tsx b/src/countryMenuItem.tsx index a5c514b..ffb3af0 100644 --- a/src/countryMenuItem.tsx +++ b/src/countryMenuItem.tsx @@ -3,12 +3,12 @@ import MenuItem from "@material-ui/core/MenuItem/MenuItem" import Grid from "@material-ui/core/Grid/Grid" import Icon from "@material-ui/core/Icon/Icon" import Typography from "@material-ui/core/Typography" +import withStyles from "@material-ui/core/styles/withStyles"; const styles = { countryName: { fontSize: "1em", paddingLeft: "0.5em", - fontFamily: "AvertaCY" }, dialNumber: { marginLeft: "auto", @@ -21,50 +21,50 @@ const styles = { }, countryNameList: { color: "#1D0047", fontSize: "1em", fontWeight: 300 - } + }, + menuItem: {padding: "0.5em"} } export interface CountryItemProps extends CountryDataItem { - flagSVG: string; - name: string; - search: string; - + flagSVG: string + name: string + search: string onClick: (event: any) => void + classes?: Record } export interface CountryDataItem { - countryCode: number; + countryCode: string; } -export class CountryMenuItem extends React.Component { - - state = { - value: this.props.countryCode - } - +@(withStyles(styles) as any) +export class CountryMenuItem extends React.Component { highlightSearch(name: string, search: string) { + const {classes: classesProp} = this.props + const classes = classesProp! if (search) { const parts = name.split(new RegExp(`(${search})`, "gi")) - return + return {parts.map((part, index) => part.toLowerCase() === search.toLowerCase() ? {part} : part)} } - return {name} + return {name} } render() { - const {onClick, flagSVG, countryCode, name, search} = this.props + const {onClick, flagSVG, countryCode, name, search, classes: classesProp} = this.props + const classes = classesProp! return name.toLowerCase().indexOf(search.toLowerCase()) != -1 && - + {flagSVG} - + {this.highlightSearch(name, search)} - - {countryCode} + + {countryCode} diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..b7694c1 --- /dev/null +++ b/src/index.ts @@ -0,0 +1 @@ +export * from "./phoneInput" diff --git a/src/index.tsx b/src/phoneInput.tsx similarity index 65% rename from src/index.tsx rename to src/phoneInput.tsx index 7a1ad84..0680919 100644 --- a/src/index.tsx +++ b/src/phoneInput.tsx @@ -7,14 +7,17 @@ import {AsYouType} from "libphonenumber-js" import Input from "@material-ui/core/Input/Input" import WorldIcon from "@material-ui/icons/Language" import ArrowIcon from "@material-ui/icons/ArrowDropDown" -import * as _ from "lodash" import MenuList from "@material-ui/core/MenuList/MenuList" import Icon from "@material-ui/core/Icon/Icon" import Grid from "@material-ui/core/Grid/Grid" -import Paper from "@material-ui/core/Paper/Paper"; -import Popper from "@material-ui/core/Popper/Popper"; -import ClickAwayListener from "@material-ui/core/ClickAwayListener/ClickAwayListener"; -import MenuItem from "@material-ui/core/MenuItem/MenuItem"; +import Paper from "@material-ui/core/Paper/Paper" +import Popper from "@material-ui/core/Popper/Popper" +import ClickAwayListener from "@material-ui/core/ClickAwayListener/ClickAwayListener" +import MenuItem from "@material-ui/core/MenuItem/MenuItem" +import withStyles from "@material-ui/core/styles/withStyles" +import {Country} from "./country" + +const sortBy = require("lodash/sortBy") const styles = { worldIcon: { @@ -35,36 +38,39 @@ const styles = { }, popper: { zIndex: 999 - } + }, + input: {marginRight: 0}, + textField: {paddingBottom: 0}, + button: {padding: 0} } -const lookup = require('country-data').lookup - +const lookup = require("country-data").lookup export interface PhoneInputProps { phoneValueOnChange: (a: string) => void, countryValueOnChange: (a: string) => void, error: boolean, helperText: string + classes?: Record } -export default class PhoneInput extends React.Component { - - getCountries = () => { - const countries = lookup.countries({status: "assigned"}) - .filter((y: any) => y.countryCallingCodes != "") - return _.sortBy(countries, "name") - } +function getCountries(): Country[] { + const countries = lookup.countries({status: "assigned"}) + .filter((y: any) => y.countryCallingCodes != "") + return sortBy(countries, "name") +} +@(withStyles(styles) as any) +export class PhoneInput extends React.Component { state = { code: "", phone: "", - anchorEl: null, - flag: null, + anchorEl: null as any, + flag: "", search: "", - allCountries: this.getCountries(), + allCountries: getCountries(), countryCode: "" - } as any; + } _onChange = (e: any) => { const {phoneValueOnChange, countryValueOnChange} = this.props @@ -88,16 +94,12 @@ export default class PhoneInput extends React.Component { } handleClick = (event: any) => { - this.setState({anchorEl: event.currentTarget}); - }; + this.setState({anchorEl: event.currentTarget}) + } handleClose = () => { - this.setState({anchorEl: null}); - }; - - handleOpen = () => { - this.setState({anchorEl: null}); - }; + this.setState({anchorEl: null}) + } handleClickItem = (event: any, code: string, flag: string, countryCode: string) => { const phone = this.state.phone ? this.state.phone.replace(this.state.code, code) : @@ -109,20 +111,27 @@ export default class PhoneInput extends React.Component { phone, flag, countryCode - }); - }; - - handleChange = (event: any) => { - this.setState({[event.target.name]: event.target.value}); - }; + }) + } handleSearch = (event: any) => { - this.setState({search: event.target.value}); + this.setState({search: event.target.value}) } + renderCountry = (country: Country) => + this.handleClickItem(event, country.countryCallingCodes[0], country.emoji, country.alpha2)} + flagSVG={country.emoji} + name={country.name} + countryCode={country.countryCallingCodes[0]} + search={this.state.search} + /> + render() { - const {error, helperText} = this.props; - const {anchorEl, search, allCountries} = this.state; + const {error, helperText, classes: classesProp} = this.props + const {anchorEl, allCountries} = this.state + const classes = classesProp! return { label={"Phone Number"} fullWidth={true} value={this.state.phone} - style={{paddingBottom: 0}} + className={classes.textField} error={error} helperText={helperText} InputProps={{ startAdornment: - -