react-frontend-common-components 0.0.9 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.0.9",
+  "version": "0.0.12",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/rollup.config.js

@@ -17,11 +17,13 @@ export default [
         file: packageJson.main, // CommonJS
         format: "cjs",
         sourcemap: true,
+        inlineDynamicImports: true,
       },
       {
         file: packageJson.module, // ES module
         format: "esm",
         sourcemap: true,
+        inlineDynamicImports: true,
       },
     ],
     plugins: [

package/src/components/app-phone-field/app-phone-field.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import "react-intl-tel-input/dist/main.css";
-import IntlTelInput from "react-intl-tel-input";
 import "./app-phone-field.css";
 
+const IntlTelInput = lazy(() => import("react-intl-tel-input"));
+
 interface AppPhoneFieldProps {
   phone: string;
   setPhone: (phone: string) => void;
@@ -21,39 +22,41 @@ const AppPhoneField = ({
   className,
 }: AppPhoneFieldProps) => {
   return (
-    <div className={`appPhoneField ${className}`}>
-      <div className={"intelWrapper"}>
-        <IntlTelInput
-          containerClassName={`${"intltelinput"} intl-tel-input`}
-          inputClassName={`${"customintlinput"} custom-intl-input`}
-          separateDialCode={true}
-          defaultCountry="ae"
-          placeholder="50-1234567"
-          preferredCountries={["ae"]}
-          value={phone}
-          onPhoneNumberChange={(isValid, value, country, fullNumber) => {
-            if (!isNaN(Number(value))) {
-              setPhone(value);
-              setCustomerCountryCode("+" + country.dialCode);
-              setPhoneError("");
-            } else if (value === "") {
-              setPhoneError("");
-            } else {
-              setPhoneError("You can only enter numbers.");
-            }
-          }}
-          onSelectFlag={(
-            currentNumber,
-            selectedCountryData,
-            fullNumber,
-            isValid
-          ) => {
-            setCustomerCountryCode("+" + selectedCountryData.dialCode);
-          }}
-        />
+    <Suspense fallback={<div>Loading...</div>}>
+      <div className={`appPhoneField ${className}`}>
+        <div className={"intelWrapper"}>
+          <IntlTelInput
+            containerClassName={`${"intltelinput"} intl-tel-input`}
+            inputClassName={`${"customintlinput"} custom-intl-input`}
+            separateDialCode={true}
+            defaultCountry="ae"
+            placeholder="50-1234567"
+            preferredCountries={["ae"]}
+            value={phone}
+            onPhoneNumberChange={(isValid, value, country, fullNumber) => {
+              if (!isNaN(Number(value))) {
+                setPhone(value);
+                setCustomerCountryCode("+" + country.dialCode);
+                setPhoneError("");
+              } else if (value === "") {
+                setPhoneError("");
+              } else {
+                setPhoneError("You can only enter numbers.");
+              }
+            }}
+            onSelectFlag={(
+              currentNumber,
+              selectedCountryData,
+              fullNumber,
+              isValid
+            ) => {
+              setCustomerCountryCode("+" + selectedCountryData.dialCode);
+            }}
+          />
+        </div>
+        <p className={"error"}>{phoneError && phoneError}</p>
       </div>
-      <p className={"error"}>{phoneError && phoneError}</p>
-    </div>
+    </Suspense>
   );
 };
 

package/src/index.ts

@@ -35,5 +35,4 @@ export { default as AppTable } from "./components/app-table/app-table";
 export { default as AppProgress } from "./components/app-progress/app-progress";
 export { default as AppPopover } from "./components/app-popover/app-popover";
 export { default as AppFloatButton } from "./components/app-float-button/app-float-button";
-
-// export { default as AppPhoneField } from "./components/app-phone-field/app-phone-field";
+export { default as AppPhoneField } from "./components/app-phone-field/app-phone-field";