ui-soxo-bootstrap-core 2.6.1-dev.3 → 2.6.1

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -6,48 +6,79 @@
  * Ensure to follow a minimal standard
  */
 import React, { useState, useEffect, useRef } from 'react';
+
 import PhoneInput from 'react-phone-input-2';
+
 import 'react-phone-input-2/lib/style.css';
-import PropTypes from 'prop-types';
+
+import PropTypes from "prop-types";
+
 import './phone-input.scss';
 
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur,className }) {
-  const inputRef = useRef();
-  const hasInitializedRef = useRef(false); // IMPORTANT
 
-  const [phone, setPhone] = useState('');
+export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {
+
+  let inputRef = useRef();
+
+  const [phone, setPhone] = useState();
 
-  /**
-   * run ONLY ONCE when initial value has dial code
-   */
   useEffect(() => {
-    if (
-      !hasInitializedRef.current &&
-      value?.code?.dialCode &&
-      value?.value
-    ) {
+    if (value && value.code && value.code.dialCode !== null) {
+      // To prepopulate phone number ,concat dialCode and phone number
       setPhone(value.code.dialCode + value.value);
-      hasInitializedRef.current = true; // 👈 mark as done
+
+      // In case of update , to identify the country code that is getting selected
+      // We are setting a timeout
+      setTimeout(() => {
+        // Using the reference , we get the internal state of the library component
+        let selectedCountry = null;
+
+        let selectedCode = null;
+
+        if (
+          inputRef.current &&
+          inputRef.current.state &&
+          inputRef.current.state.selectedCountry
+        ) {
+          selectedCountry = inputRef.current.state.selectedCountry;
+
+          // Once we get the selected country ,we format it to the form that is received for normal onChange
+          selectedCode = {
+            countryCode: selectedCountry.iso2,
+            dialCode: selectedCountry.dialCode,
+            name: selectedCountry.name,
+          };
+        }
+
+        // Below being the format expected , we trigger the onChange to manually update the form
+        let updatedValue = {
+          value: value.code.dialCode + value.value,
+          code: selectedCode,
+        };
+
+        onChange(updatedValue);
+      }, 0);
     }
-  }, [value]);
+  }, []);
 
   /**
-   * handle user input
+   * To get value in parent component
+   * @param {*} value
    */
-  function handleInput(inputValue, code) {
-    if (!code?.dialCode) return;
-
-    const phoneNumber = inputValue.slice(code.dialCode.length);
-
-    // remove autofill class when user edits field (if you use it)
-    onChange({
-      value: phoneNumber,
+  function handleInput(value, code) {
+    if (code.dialCode) {
+      value = value.substring(code.dialCode.length);
+    }
+    // To get country code with phone number in parent component
+    value = {
+      value,
       code,
-    });
+    };
+    onChange(value);
   }
 
   return (
-    <div className={`phone-input ${className || ''}`}>
+    <div className="phone-input">
       <PhoneInput
         ref={inputRef}
         country={defaultCountryCode || 'in'}

package/core/lib/elements/basic/country-phone-input/phone-input.scss

@@ -12,20 +12,6 @@
     // }
   }
   
-  .autofilled-field {
-  .react-tel-input {
-    .form-control {
-      border-color: #fa8c16 !important; // AntD warning orange
-      background-color: #fff7e6;
-      box-shadow: none;
-    }
-
-    .flag-dropdown {
-      border-color: #fa8c16 !important;
-      background-color: #fff7e6;
-    }
-  }
-}
 //   /* For tablets and smaller screens (max-width: 1024px) */
 //   @media (max-width: 1024px) {
 //     .phone-input {