react-frontend-common-components 0.0.14 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/node_modules/react-intl-tel-input/dist/index.js +1 -1
- package/dist/cjs/node_modules/react-intl-tel-input/dist/index.js.map +1 -1
- package/dist/cjs/src/components/app-phone-field/app-phone-field.js +1 -1
- package/dist/cjs/src/components/app-phone-field/app-phone-field.js.map +1 -1
- package/dist/esm/node_modules/react-intl-tel-input/dist/index.js +1 -1
- package/dist/esm/node_modules/react-intl-tel-input/dist/index.js.map +1 -1
- package/dist/esm/src/components/app-phone-field/app-phone-field.js +1 -1
- package/dist/esm/src/components/app-phone-field/app-phone-field.js.map +1 -1
- package/package.json +1 -1
- package/src/components/app-phone-field/app-phone-field.tsx +34 -37
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";var e=require("../../../_virtual/index.js");require("./components/IntlTelInput.js");var t,r=require("../../../_virtual/IntlTelInput.js");Object.defineProperty(e.__exports,"__esModule",{value:!0}),exports.default=e.__exports.default=void 0;var u=((t=r.__exports)&&t.__esModule?t:{default:t}).default;exports.default=e.__exports.default=u,module.exports=exports.default;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../node_modules/react-intl-tel-input/dist/index.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _IntlTelInput = _interopRequireDefault(require(\"./components/IntlTelInput\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = _IntlTelInput.default;\nexports.default = _default;"],"names":["obj","Object","defineProperty","dist","__exports","value","default_1","default","_default","require$$0","__esModule"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../node_modules/react-intl-tel-input/dist/index.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _IntlTelInput = _interopRequireDefault(require(\"./components/IntlTelInput\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = _IntlTelInput.default;\nexports.default = _default;"],"names":["obj","Object","defineProperty","dist","__exports","value","default_1","default","_default","require$$0","__esModule"],"mappings":"qGASgCA,iDAPhCC,OAAOC,eAAeC,EAAOC,UAAE,aAAc,CAC3CC,OAAO,IAEMC,QAAAA,QAAAH,EAAAC,UAAAG,aAAG,EAMlB,IAAIC,IAF4BR,EAFWS,EAAAA,YAEUT,EAAIU,WAAaV,EAAM,CAAEO,QAASP,IAE1DO,QAC7BD,QAAAA,QAAAH,EAAAA,UAAAI,QAAkBC","x_google_ignoreList":[0]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../../../node_modules/react/jsx-runtime.js")
|
|
1
|
+
"use strict";var e=require("../../../node_modules/react/jsx-runtime.js");require("../../../node_modules/react-intl-tel-input/dist/main.css.js");var n=require("../../../node_modules/react-intl-tel-input/dist/index.js");require("./app-phone-field.css.js");module.exports=function(t){var s=t.phone,r=t.setPhone,i=t.phoneError,o=t.setPhoneError,a=t.setCustomerCountryCode,u=t.className;return e.jsxRuntimeExports.jsxs("div",{className:"appPhoneField ".concat(u),children:[e.jsxRuntimeExports.jsx("div",{className:"intelWrapper",children:e.jsxRuntimeExports.jsx(n,{containerClassName:"".concat("intltelinput"," intl-tel-input"),inputClassName:"".concat("customintlinput"," custom-intl-input"),separateDialCode:!0,defaultCountry:"ae",placeholder:"50-1234567",preferredCountries:["ae"],value:s,onPhoneNumberChange:function(e,n,t,s){isNaN(Number(n))?o(""===n?"":"You can only enter numbers."):(r(n),a("+"+t.dialCode),o(""))},onSelectFlag:function(e,n,t,s){a("+"+n.dialCode)}})}),e.jsxRuntimeExports.jsx("p",{className:"error",children:i&&i})]})};
|
|
2
2
|
//# sourceMappingURL=app-phone-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-phone-field.js","sources":["../../../../../src/components/app-phone-field/app-phone-field.tsx"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"file":"app-phone-field.js","sources":["../../../../../src/components/app-phone-field/app-phone-field.tsx"],"sourcesContent":["import React from \"react\";\nimport \"react-intl-tel-input/dist/main.css\";\nimport IntlTelInput from \"react-intl-tel-input\";\nimport \"./app-phone-field.css\";\n\ninterface AppPhoneFieldProps {\n phone: string;\n setPhone: (phone: string) => void;\n phoneError: string;\n setPhoneError: (error: string) => void;\n setCustomerCountryCode: (code: string) => void;\n className?: string;\n}\n\nconst AppPhoneField = ({\n phone,\n setPhone,\n phoneError,\n setPhoneError,\n setCustomerCountryCode,\n className,\n}: AppPhoneFieldProps) => {\n return (\n <div className={`appPhoneField ${className}`}>\n <div className={\"intelWrapper\"}>\n <IntlTelInput\n containerClassName={`${\"intltelinput\"} intl-tel-input`}\n inputClassName={`${\"customintlinput\"} custom-intl-input`}\n separateDialCode={true}\n defaultCountry=\"ae\"\n placeholder=\"50-1234567\"\n preferredCountries={[\"ae\"]}\n value={phone}\n onPhoneNumberChange={(isValid, value, country, fullNumber) => {\n if (!isNaN(Number(value))) {\n setPhone(value);\n setCustomerCountryCode(\"+\" + country.dialCode);\n setPhoneError(\"\");\n } else if (value === \"\") {\n setPhoneError(\"\");\n } else {\n setPhoneError(\"You can only enter numbers.\");\n }\n }}\n onSelectFlag={(\n currentNumber,\n selectedCountryData,\n fullNumber,\n isValid\n ) => {\n setCustomerCountryCode(\"+\" + selectedCountryData.dialCode);\n }}\n />\n </div>\n <p className={\"error\"}>{phoneError && phoneError}</p>\n </div>\n );\n};\n\nexport default AppPhoneField;\n"],"names":["_a","phone","setPhone","phoneError","setPhoneError","setCustomerCountryCode","className","_jsxs","jsxRuntimeExports","jsxs","concat","children","_jsx","IntlTelInput","containerClassName","inputClassName","separateDialCode","defaultCountry","placeholder","preferredCountries","value","onPhoneNumberChange","isValid","country","fullNumber","isNaN","Number","dialCode","onSelectFlag","currentNumber","selectedCountryData"],"mappings":"6QAcsB,SAACA,GACrB,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAUH,EAAAG,WACVC,kBACAC,EAAsBL,EAAAK,uBACtBC,EAASN,EAAAM,UAET,OACEC,EAAKC,kBAAAC,KAAA,MAAA,CAAAH,UAAW,iBAAAI,OAAiBJ,GAC/BK,SAAA,CAAAC,wBAAA,MAAA,CAAKN,UAAW,eAAcK,SAC5BC,wBAACC,EACC,CAAAC,mBAAoB,GAAAJ,OAAG,eAAc,mBACrCK,eAAgB,GAAAL,OAAG,kBAAiB,sBACpCM,kBAAkB,EAClBC,eAAe,KACfC,YAAY,aACZC,mBAAoB,CAAC,MACrBC,MAAOnB,EACPoB,oBAAqB,SAACC,EAASF,EAAOG,EAASC,GACxCC,MAAMC,OAAON,IAKhBhB,EADmB,KAAVgB,EACK,GAEA,gCANdlB,EAASkB,GACTf,EAAuB,IAAMkB,EAAQI,UACrCvB,EAAc,IAMjB,EACDwB,aAAc,SACZC,EACAC,EACAN,EACAF,GAEAjB,EAAuB,IAAMyB,EAAoBH,SAClD,MAGLf,wBAAA,IAAA,CAAGN,UAAW,QAAUK,SAAAR,GAAcA,MAG5C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__exports as e}from"../../../_virtual/index.js";import"./components/IntlTelInput.js";import{__exports as t}from"../../../_virtual/IntlTelInput.js";
|
|
1
|
+
import{__exports as e}from"../../../_virtual/index.js";import"./components/IntlTelInput.js";import{__exports as t}from"../../../_virtual/IntlTelInput.js";Object.defineProperty(e,"__esModule",{value:!0});var l,o=e.default=void 0;var r=((l=t)&&l.__esModule?l:{default:l}).default;o=e.default=r;export{o as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../node_modules/react-intl-tel-input/dist/index.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _IntlTelInput = _interopRequireDefault(require(\"./components/IntlTelInput\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = _IntlTelInput.default;\nexports.default = _default;"],"names":["Object","defineProperty","dist","value","obj","default_1","default","_default","require$$0","__esModule"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../node_modules/react-intl-tel-input/dist/index.js"],"sourcesContent":["\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _IntlTelInput = _interopRequireDefault(require(\"./components/IntlTelInput\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = _IntlTelInput.default;\nexports.default = _default;"],"names":["Object","defineProperty","dist","value","obj","default_1","default","_default","require$$0","__esModule"],"mappings":"0JAEAA,OAAOC,eAAeC,EAAS,aAAc,CAC3CC,OAAO,IAEM,IAIiBC,EAJjBC,EAAAH,EAAAI,aAAG,EAMlB,IAAIC,IAF4BH,EAFWI,IAEUJ,EAAIK,WAAaL,EAAM,CAAEE,QAASF,IAE1DE,QAC7BD,EAAAH,EAAAI,QAAkBC","x_google_ignoreList":[0]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as e}from"../../../node_modules/react/jsx-runtime.js";import
|
|
1
|
+
import{j as e}from"../../../node_modules/react/jsx-runtime.js";import"../../../node_modules/react-intl-tel-input/dist/main.css.js";import n from"../../../node_modules/react-intl-tel-input/dist/index.js";import"./app-phone-field.css.js";var t=function(t){var o=t.phone,r=t.setPhone,s=t.phoneError,a=t.setPhoneError,i=t.setCustomerCountryCode,l=t.className;return e.jsxs("div",{className:"appPhoneField ".concat(l),children:[e.jsx("div",{className:"intelWrapper",children:e.jsx(n,{containerClassName:"".concat("intltelinput"," intl-tel-input"),inputClassName:"".concat("customintlinput"," custom-intl-input"),separateDialCode:!0,defaultCountry:"ae",placeholder:"50-1234567",preferredCountries:["ae"],value:o,onPhoneNumberChange:function(e,n,t,o){isNaN(Number(n))?a(""===n?"":"You can only enter numbers."):(r(n),i("+"+t.dialCode),a(""))},onSelectFlag:function(e,n,t,o){i("+"+n.dialCode)}})}),e.jsx("p",{className:"error",children:s&&s})]})};export{t as default};
|
|
2
2
|
//# sourceMappingURL=app-phone-field.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-phone-field.js","sources":["../../../../../src/components/app-phone-field/app-phone-field.tsx"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"file":"app-phone-field.js","sources":["../../../../../src/components/app-phone-field/app-phone-field.tsx"],"sourcesContent":["import React from \"react\";\nimport \"react-intl-tel-input/dist/main.css\";\nimport IntlTelInput from \"react-intl-tel-input\";\nimport \"./app-phone-field.css\";\n\ninterface AppPhoneFieldProps {\n phone: string;\n setPhone: (phone: string) => void;\n phoneError: string;\n setPhoneError: (error: string) => void;\n setCustomerCountryCode: (code: string) => void;\n className?: string;\n}\n\nconst AppPhoneField = ({\n phone,\n setPhone,\n phoneError,\n setPhoneError,\n setCustomerCountryCode,\n className,\n}: AppPhoneFieldProps) => {\n return (\n <div className={`appPhoneField ${className}`}>\n <div className={\"intelWrapper\"}>\n <IntlTelInput\n containerClassName={`${\"intltelinput\"} intl-tel-input`}\n inputClassName={`${\"customintlinput\"} custom-intl-input`}\n separateDialCode={true}\n defaultCountry=\"ae\"\n placeholder=\"50-1234567\"\n preferredCountries={[\"ae\"]}\n value={phone}\n onPhoneNumberChange={(isValid, value, country, fullNumber) => {\n if (!isNaN(Number(value))) {\n setPhone(value);\n setCustomerCountryCode(\"+\" + country.dialCode);\n setPhoneError(\"\");\n } else if (value === \"\") {\n setPhoneError(\"\");\n } else {\n setPhoneError(\"You can only enter numbers.\");\n }\n }}\n onSelectFlag={(\n currentNumber,\n selectedCountryData,\n fullNumber,\n isValid\n ) => {\n setCustomerCountryCode(\"+\" + selectedCountryData.dialCode);\n }}\n />\n </div>\n <p className={\"error\"}>{phoneError && phoneError}</p>\n </div>\n );\n};\n\nexport default AppPhoneField;\n"],"names":["AppPhoneField","_a","phone","setPhone","phoneError","setPhoneError","setCustomerCountryCode","className","_jsxs","jsxs","concat","children","_jsx","IntlTelInput","containerClassName","inputClassName","separateDialCode","defaultCountry","placeholder","preferredCountries","value","onPhoneNumberChange","isValid","country","fullNumber","isNaN","Number","dialCode","onSelectFlag","currentNumber","selectedCountryData"],"mappings":"4OAcM,IAAAA,EAAgB,SAACC,GACrB,IAAAC,EAAKD,EAAAC,MACLC,EAAQF,EAAAE,SACRC,EAAUH,EAAAG,WACVC,kBACAC,EAAsBL,EAAAK,uBACtBC,EAASN,EAAAM,UAET,OACEC,EAAKC,KAAA,MAAA,CAAAF,UAAW,iBAAAG,OAAiBH,GAC/BI,SAAA,CAAAC,MAAA,MAAA,CAAKL,UAAW,eAAcI,SAC5BC,MAACC,EACC,CAAAC,mBAAoB,GAAAJ,OAAG,eAAc,mBACrCK,eAAgB,GAAAL,OAAG,kBAAiB,sBACpCM,kBAAkB,EAClBC,eAAe,KACfC,YAAY,aACZC,mBAAoB,CAAC,MACrBC,MAAOlB,EACPmB,oBAAqB,SAACC,EAASF,EAAOG,EAASC,GACxCC,MAAMC,OAAON,IAKhBf,EADmB,KAAVe,EACK,GAEA,gCANdjB,EAASiB,GACTd,EAAuB,IAAMiB,EAAQI,UACrCtB,EAAc,IAMjB,EACDuB,aAAc,SACZC,EACAC,EACAN,EACAF,GAEAhB,EAAuB,IAAMwB,EAAoBH,SAClD,MAGLf,MAAA,IAAA,CAAGL,UAAW,QAAUI,SAAAP,GAAcA,MAG5C"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import "react-intl-tel-input/dist/main.css";
|
|
3
|
+
import IntlTelInput from "react-intl-tel-input";
|
|
3
4
|
import "./app-phone-field.css";
|
|
4
5
|
|
|
5
|
-
const IntlTelInput = lazy(() => import("react-intl-tel-input"));
|
|
6
|
-
|
|
7
6
|
interface AppPhoneFieldProps {
|
|
8
7
|
phone: string;
|
|
9
8
|
setPhone: (phone: string) => void;
|
|
@@ -22,41 +21,39 @@ const AppPhoneField = ({
|
|
|
22
21
|
className,
|
|
23
22
|
}: AppPhoneFieldProps) => {
|
|
24
23
|
return (
|
|
25
|
-
<
|
|
26
|
-
<div className={
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
/>
|
|
56
|
-
</div>
|
|
57
|
-
<p className={"error"}>{phoneError && phoneError}</p>
|
|
24
|
+
<div className={`appPhoneField ${className}`}>
|
|
25
|
+
<div className={"intelWrapper"}>
|
|
26
|
+
<IntlTelInput
|
|
27
|
+
containerClassName={`${"intltelinput"} intl-tel-input`}
|
|
28
|
+
inputClassName={`${"customintlinput"} custom-intl-input`}
|
|
29
|
+
separateDialCode={true}
|
|
30
|
+
defaultCountry="ae"
|
|
31
|
+
placeholder="50-1234567"
|
|
32
|
+
preferredCountries={["ae"]}
|
|
33
|
+
value={phone}
|
|
34
|
+
onPhoneNumberChange={(isValid, value, country, fullNumber) => {
|
|
35
|
+
if (!isNaN(Number(value))) {
|
|
36
|
+
setPhone(value);
|
|
37
|
+
setCustomerCountryCode("+" + country.dialCode);
|
|
38
|
+
setPhoneError("");
|
|
39
|
+
} else if (value === "") {
|
|
40
|
+
setPhoneError("");
|
|
41
|
+
} else {
|
|
42
|
+
setPhoneError("You can only enter numbers.");
|
|
43
|
+
}
|
|
44
|
+
}}
|
|
45
|
+
onSelectFlag={(
|
|
46
|
+
currentNumber,
|
|
47
|
+
selectedCountryData,
|
|
48
|
+
fullNumber,
|
|
49
|
+
isValid
|
|
50
|
+
) => {
|
|
51
|
+
setCustomerCountryCode("+" + selectedCountryData.dialCode);
|
|
52
|
+
}}
|
|
53
|
+
/>
|
|
58
54
|
</div>
|
|
59
|
-
|
|
55
|
+
<p className={"error"}>{phoneError && phoneError}</p>
|
|
56
|
+
</div>
|
|
60
57
|
);
|
|
61
58
|
};
|
|
62
59
|
|