@ambiot/material-ui-phone-field - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/material-ui-phone-field.cjs.development.js

@@ -276,2 +276,9 @@ 'use strict';
 
+function getValueCountry(value) {
+  if (!value) return '';
+  var phoneNumber = libphonenumberJs.parsePhoneNumberFromString(value);
+  if (!phoneNumber) return '';
+  return phoneNumber.country || '';
+}
+
 var PhoneField = function PhoneField(_ref) {
@@ -285,3 +292,3 @@ var value = _ref.value,
 
-  var _useState = React.useState(defaultCountry || ''),
+  var _useState = React.useState(getValueCountry(value) || defaultCountry || ''),
       country = _useState[0],
@@ -298,10 +305,17 @@ setCountry = _useState[1];
   var handleCountryChange = React.useCallback(function (event) {
-    setCountry(event.target.value);
-  }, []);
+    var newCountry = event.target.value;
+    setCountry(newCountry);
+    change(newCountry, phoneValue);
+  }, [setCountry, change, phoneValue]);
   var handleTextChange = React.useCallback(function (value) {
     setPhoneValue(value);
-  }, [setPhoneValue]);
+    change(country, value);
+  }, [setPhoneValue, change, country]);
   React.useEffect(function () {
-    change(country, phoneValue);
-  }, [country, phoneValue, change]);
+    var newCountry = getValueCountry(value);
+
+    if (newCountry) {
+      setCountry(newCountry);
+    }
+  }, [value]);
   return React__default.createElement("div", {
@@ -308,0 +322,0 @@ className: clsx(classes.root, fullWidth && classes.fullWidth)

dist/material-ui-phone-field.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),n=require("@material-ui/core/styles"),a=e(require("clsx")),u=e(require("prop-types")),i=e(require("@material-ui/core/MenuItem")),l=e(require("@material-ui/core/FormControl")),o=e(require("@material-ui/core/Select")),s=e(require("i18n-iso-countries")),c=require("@material-ui/core"),f=require("libphonenumber-js"),g=function(e){try{return f.getCountryCallingCode(e)}catch(e){return}};function m(){for(var e={},r=0,t=Object.keys(s.getAlpha2Codes());r<t.length;r++){var n=t[r];if(f.isSupportedCountry(n)){var a=g(n);a&&(e[n]=a)}}return e}s.registerLocale(require("i18n-iso-countries/langs/en.json")),s.registerLocale(require("i18n-iso-countries/langs/ru.json"));var p=Object.keys(m());function y(e){var n=e.value,a=e.onChange,u=e.displayCountries,f=void 0===u?[]:u,m=e.language,p=void 0===m?"en":m,y=c.useTheme(),v=r.useMemo((function(){return s.getNames(p)}),[p]),d=r.useMemo((function(){return null!=f&&f.length?f:Object.keys(v)}),[f,v]),h=r.useMemo((function(){return function(e){return v[e]||e}}),[v]),C=r.useMemo((function(){var e=[],r=d,t=Array.isArray(r),n=0;for(r=t?r:r[Symbol.iterator]();;){var a;if(t){if(n>=r.length)break;a=r[n++]}else{if((n=r.next()).done)break;a=n.value}var u=a,i=g(u);i&&e.push([u.toUpperCase(),h(u),"+"+i])}return e}),[d,h]);return t.createElement(l,null,t.createElement(o,{value:n,onChange:a,displayEmpty:!0,renderValue:function(e){return t.createElement(c.Typography,null,e.length?"+"+g(e):"—")}},C.map((function(e){var r=e[0],n=e[2];return t.createElement(i,{key:r,value:r,style:{whiteSpace:"normal"}},t.createElement(c.Grid,{container:!0,spacing:1},t.createElement(c.Grid,{item:!0,xs:9},t.createElement(c.Typography,{variant:"body2",color:"textSecondary"},e[1])),t.createElement(c.Grid,{item:!0},t.createElement(c.Typography,{variant:"body2",style:{fontWeight:y.typography.fontWeightMedium}},n))))}))))}y.propTypes={value:u.string,onChange:u.func.isRequired,language:u.string};var v=n.makeStyles((function(){return n.createStyles({input:{lineHeight:"1.5",height:"auto"}})}));function d(e){var n=e.value,a=e.onChange,u=e.country,i=e.className,l=v(),o=function(e,r){if(!e)return"";if(!r)return e;var t=new f.AsYouType(r);t.input(e);var n=t.getNumber();return n?r?n.format("NATIONAL",{nationalPrefix:!1}):e:""}(n,u),s=r.useCallback((function(e){a(function(e,r){if(!e)return"";if(!r)return e;var t=new f.AsYouType(r);t.input(e);var n=t.getNumber();return n?r?f.parseDigits(n.format("NATIONAL",{nationalPrefix:!1})):e:""}(e.target.value,u))}),[a,u]);return t.createElement(c.TextField,{value:o,onChange:s,className:i,size:"medium",InputProps:{classes:{input:l.input}}})}var h=n.makeStyles((function(e){return n.createStyles({root:{display:"flex",alignContent:"center","& > *:first-child":{marginRight:e.spacing(2)}},fullWidth:{width:"100%"},field:{flex:1}})}));exports.default=function(e){var n=e.value,u=e.onChange,i=e.defaultCountry,l=e.fullWidth,o=e.language,s=h(),c=r.useState(i||""),f=c[0],m=c[1],v=r.useState(""),C=v[0],b=v[1],E=r.useCallback((function(e,r){u(function(e,r){if(!r.length)return"";if(!e.length)return r;var t=g(e);return t?"+"+t+r:r}(e,r))}),[u]),q=r.useCallback((function(e){m(e.target.value)}),[]),k=r.useCallback((function(e){b(e)}),[b]);return r.useEffect((function(){E(f,C)}),[f,C,E]),t.createElement("div",{className:a(s.root,l&&s.fullWidth)},t.createElement(y,{value:f||"",onChange:q,displayCountries:p,language:o}),t.createElement(d,{value:n,onChange:k,country:f,className:s.field}))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),n=require("@material-ui/core/styles"),a=e(require("clsx")),u=e(require("prop-types")),i=e(require("@material-ui/core/MenuItem")),o=e(require("@material-ui/core/FormControl")),l=e(require("@material-ui/core/Select")),c=e(require("i18n-iso-countries")),s=require("@material-ui/core"),f=require("libphonenumber-js"),g=function(e){try{return f.getCountryCallingCode(e)}catch(e){return}};function m(){for(var e={},r=0,t=Object.keys(c.getAlpha2Codes());r<t.length;r++){var n=t[r];if(f.isSupportedCountry(n)){var a=g(n);a&&(e[n]=a)}}return e}c.registerLocale(require("i18n-iso-countries/langs/en.json")),c.registerLocale(require("i18n-iso-countries/langs/ru.json"));var p=Object.keys(m());function y(e){var n=e.value,a=e.onChange,u=e.displayCountries,f=void 0===u?[]:u,m=e.language,p=void 0===m?"en":m,y=s.useTheme(),v=r.useMemo((function(){return c.getNames(p)}),[p]),h=r.useMemo((function(){return null!=f&&f.length?f:Object.keys(v)}),[f,v]),d=r.useMemo((function(){return function(e){return v[e]||e}}),[v]),C=r.useMemo((function(){var e=[],r=h,t=Array.isArray(r),n=0;for(r=t?r:r[Symbol.iterator]();;){var a;if(t){if(n>=r.length)break;a=r[n++]}else{if((n=r.next()).done)break;a=n.value}var u=a,i=g(u);i&&e.push([u.toUpperCase(),d(u),"+"+i])}return e}),[h,d]);return t.createElement(o,null,t.createElement(l,{value:n,onChange:a,displayEmpty:!0,renderValue:function(e){return t.createElement(s.Typography,null,e.length?"+"+g(e):"—")}},C.map((function(e){var r=e[0],n=e[2];return t.createElement(i,{key:r,value:r,style:{whiteSpace:"normal"}},t.createElement(s.Grid,{container:!0,spacing:1},t.createElement(s.Grid,{item:!0,xs:9},t.createElement(s.Typography,{variant:"body2",color:"textSecondary"},e[1])),t.createElement(s.Grid,{item:!0},t.createElement(s.Typography,{variant:"body2",style:{fontWeight:y.typography.fontWeightMedium}},n))))}))))}y.propTypes={value:u.string,onChange:u.func.isRequired,language:u.string};var v=n.makeStyles((function(){return n.createStyles({input:{lineHeight:"1.5",height:"auto"}})}));function h(e){var n=e.value,a=e.onChange,u=e.country,i=e.className,o=v(),l=function(e,r){if(!e)return"";if(!r)return e;var t=new f.AsYouType(r);t.input(e);var n=t.getNumber();return n?r?n.format("NATIONAL",{nationalPrefix:!1}):e:""}(n,u),c=r.useCallback((function(e){a(function(e,r){if(!e)return"";if(!r)return e;var t=new f.AsYouType(r);t.input(e);var n=t.getNumber();return n?r?f.parseDigits(n.format("NATIONAL",{nationalPrefix:!1})):e:""}(e.target.value,u))}),[a,u]);return t.createElement(s.TextField,{value:l,onChange:c,className:i,size:"medium",InputProps:{classes:{input:o.input}}})}var d=n.makeStyles((function(e){return n.createStyles({root:{display:"flex",alignContent:"center","& > *:first-child":{marginRight:e.spacing(2)}},fullWidth:{width:"100%"},field:{flex:1}})}));function C(e){if(!e)return"";var r=f.parsePhoneNumberFromString(e);return r&&r.country||""}exports.default=function(e){var n=e.value,u=e.onChange,i=e.defaultCountry,o=e.fullWidth,l=e.language,c=d(),s=r.useState(C(n)||i||""),f=s[0],m=s[1],v=r.useState(""),b=v[0],E=v[1],q=r.useCallback((function(e,r){u(function(e,r){if(!r.length)return"";if(!e.length)return r;var t=g(e);return t?"+"+t+r:r}(e,r))}),[u]),k=r.useCallback((function(e){var r=e.target.value;m(r),q(r,b)}),[m,q,b]),N=r.useCallback((function(e){E(e),q(f,e)}),[E,q,f]);return r.useEffect((function(){var e=C(n);e&&m(e)}),[n]),t.createElement("div",{className:a(c.root,o&&c.fullWidth)},t.createElement(y,{value:f||"",onChange:k,displayCountries:p,language:l}),t.createElement(h,{value:n,onChange:N,country:f,className:c.field}))};
 //# sourceMappingURL=material-ui-phone-field.cjs.production.min.js.map

dist/material-ui-phone-field.esm.js

@@ -10,3 +10,3 @@ import React, { useMemo, useCallback, useState, useEffect } from 'react';
 import { useTheme, Typography, Grid, TextField } from '@material-ui/core';
-import { getCountryCallingCode, isSupportedCountry, AsYouType, parseDigits } from 'libphonenumber-js';
+import { getCountryCallingCode, isSupportedCountry, AsYouType, parseDigits, parsePhoneNumberFromString } from 'libphonenumber-js';
 
@@ -270,2 +270,9 @@ var getCallingCode = function getCallingCode(iso) {
 
+function getValueCountry(value) {
+  if (!value) return '';
+  var phoneNumber = parsePhoneNumberFromString(value);
+  if (!phoneNumber) return '';
+  return phoneNumber.country || '';
+}
+
 var PhoneField = function PhoneField(_ref) {
@@ -279,3 +286,3 @@ var value = _ref.value,
 
-  var _useState = useState(defaultCountry || ''),
+  var _useState = useState(getValueCountry(value) || defaultCountry || ''),
       country = _useState[0],
@@ -292,10 +299,17 @@ setCountry = _useState[1];
   var handleCountryChange = useCallback(function (event) {
-    setCountry(event.target.value);
-  }, []);
+    var newCountry = event.target.value;
+    setCountry(newCountry);
+    change(newCountry, phoneValue);
+  }, [setCountry, change, phoneValue]);
   var handleTextChange = useCallback(function (value) {
     setPhoneValue(value);
-  }, [setPhoneValue]);
+    change(country, value);
+  }, [setPhoneValue, change, country]);
   useEffect(function () {
-    change(country, phoneValue);
-  }, [country, phoneValue, change]);
+    var newCountry = getValueCountry(value);
+
+    if (newCountry) {
+      setCountry(newCountry);
+    }
+  }, [value]);
   return React.createElement("div", {
@@ -302,0 +316,0 @@ className: clsx(classes.root, fullWidth && classes.fullWidth)

package.json

 {
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

README.md

@@ -0,0 +0,0 @@ # Material-UI Phone Field

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87037

increased by7.81%

Lines of code

648

increased by4.01%

No dependency changes