ui-soxo-bootstrap-core 2.4.25-dev.40 → 2.4.25-dev.44

package/core/lib/elements/basic/copy-to-clipboard/copy-to-clipboard.js

@@ -1,62 +1,62 @@
-/**
- *
- *
- * @description Component for Copying the element
- * @author Ashique
- */
-
-import React, { useState, useEffect, useContext } from "react";
-
-import { Button, message } from "antd";
-
-import PropTypes from "prop-types";
-
-// import 'antd/dist/antd.css';
-
-
-/**
- *
- */
-export default function CopyToClipBoard({
-  caption = "Element ID",
-  id,
-  record,
-}) {
-  /**
-   * Copy to clipboard
-   *
-   * @param {*} step
-   */
-  function copyToClipBoard(id) {
-    console.log(record);
-
-    /* Copy the text inside the text field */
-    navigator.clipboard.writeText(id);
-
-    message.success(`${caption} copied to Clipboard`);
-  }
-
-  return (
-    <>
-      <Button
-        size={"small"}
-        onClick={() => {
-          copyToClipBoard(id);
-        }}
-      >
-        Copy
-      </Button>
-    </>
-    
-  );
-}
-
-CopyToClipBoard.propTypes = {
-
-  /** A string that represents the caption or label for the element ID being copied to clipboard.  */
-  caption: PropTypes.string,
-  /** A string that represents the element ID that should be copied to the clipboard. This prop is required. */
-  id: PropTypes.string.isRequired,
-  /** An object that contains any additional information or data related to the element being copied to the clipboard. This prop is optional. */
-  record: PropTypes.object,
+/**
+ *
+ *
+ * @description Component for Copying the element
+ * @author Ashique
+ */
+
+import React, { useState, useEffect, useContext } from "react";
+
+import { Button, message } from "antd";
+
+import PropTypes from "prop-types";
+
+// import 'antd/dist/antd.css';
+
+
+/**
+ *
+ */
+export default function CopyToClipBoard({
+  caption = "Element ID",
+  id,
+  record,
+}) {
+  /**
+   * Copy to clipboard
+   *
+   * @param {*} step
+   */
+  function copyToClipBoard(id) {
+    console.log(record);
+
+    /* Copy the text inside the text field */
+    navigator.clipboard.writeText(id);
+
+    message.success(`${caption} copied to Clipboard`);
+  }
+
+  return (
+    <>
+      <Button
+        size={"small"}
+        onClick={() => {
+          copyToClipBoard(id);
+        }}
+      >
+        Copy
+      </Button>
+    </>
+    
+  );
+}
+
+CopyToClipBoard.propTypes = {
+
+  /** A string that represents the caption or label for the element ID being copied to clipboard.  */
+  caption: PropTypes.string,
+  /** A string that represents the element ID that should be copied to the clipboard. This prop is required. */
+  id: PropTypes.string.isRequired,
+  /** An object that contains any additional information or data related to the element being copied to the clipboard. This prop is optional. */
+  record: PropTypes.object,
 };

package/core/lib/elements/basic/country-phone-input/Readme.md

@@ -1,98 +1,98 @@
-A component that allows users to enter phone numbers with country codes.
-
-## Usage
-
-To use CountryPhoneInput, you need to import it in your React component and render it with the desired properties:
-
-```jsx
-import CountryPhoneInput from "./country-phone-input";
-
-<CountryPhoneInput
-  value={{ value: "", code: { countryCode: "", dialCode: "", name: "" } }}
-  onChange={(value) => console.log(value)}
-  disabled={false}
-  disableCountryCode={false}
-  required={false}
-/>;
-```
-
-```sh
-import React, { useState, useEffect, useRef } from "react";
-
-import PhoneInput from "react-phone-input-2";
-
-import "react-phone-input-2/lib/style.css";
-
-import "./phone-input.scss";
-
-export default function CountryPhoneInput({
-  value,
-  onChange,
-  disabled,
-  disableCountryCode,
-  required,
-}) {
-  let inputRef = useRef();
-
-  const [phone, setPhone] = useState();
-
-  useEffect(() => {
-    if (value && value.code && value.code.dialCode !== null) {
-      setPhone(value.code.dialCode + value.value);
-
-      setTimeout(() => {
-        let selectedCountry = null;
-
-        let selectedCode = null;
-
-        if (
-          inputRef.current &&
-          inputRef.current.state &&
-          inputRef.current.state.selectedCountry
-        ) {
-          selectedCountry = inputRef.current.state.selectedCountry;
-
-          selectedCode = {
-            countryCode: selectedCountry.iso2,
-            dialCode: selectedCountry.dialCode,
-            name: selectedCountry.name,
-          };
-        }
-
-        let updatedValue = {
-          value: value.code.dialCode + value.value,
-          code: selectedCode,
-        };
-
-        onChange(updatedValue);
-      }, 0);
-    }
-  }, []);
-
-  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">
-      <PhoneInput
-        ref={inputRef}
-        country={disableCountryCode ? false : "in"}
-        value={phone}
-        onChange={handleInput}
-        inputProps={{ required: required }}
-        disabled={disabled}
-      />
-    </div>
-  );
-}
-
-```
+A component that allows users to enter phone numbers with country codes.
+
+## Usage
+
+To use CountryPhoneInput, you need to import it in your React component and render it with the desired properties:
+
+```jsx
+import CountryPhoneInput from "./country-phone-input";
+
+<CountryPhoneInput
+  value={{ value: "", code: { countryCode: "", dialCode: "", name: "" } }}
+  onChange={(value) => console.log(value)}
+  disabled={false}
+  disableCountryCode={false}
+  required={false}
+/>;
+```
+
+```sh
+import React, { useState, useEffect, useRef } from "react";
+
+import PhoneInput from "react-phone-input-2";
+
+import "react-phone-input-2/lib/style.css";
+
+import "./phone-input.scss";
+
+export default function CountryPhoneInput({
+  value,
+  onChange,
+  disabled,
+  disableCountryCode,
+  required,
+}) {
+  let inputRef = useRef();
+
+  const [phone, setPhone] = useState();
+
+  useEffect(() => {
+    if (value && value.code && value.code.dialCode !== null) {
+      setPhone(value.code.dialCode + value.value);
+
+      setTimeout(() => {
+        let selectedCountry = null;
+
+        let selectedCode = null;
+
+        if (
+          inputRef.current &&
+          inputRef.current.state &&
+          inputRef.current.state.selectedCountry
+        ) {
+          selectedCountry = inputRef.current.state.selectedCountry;
+
+          selectedCode = {
+            countryCode: selectedCountry.iso2,
+            dialCode: selectedCountry.dialCode,
+            name: selectedCountry.name,
+          };
+        }
+
+        let updatedValue = {
+          value: value.code.dialCode + value.value,
+          code: selectedCode,
+        };
+
+        onChange(updatedValue);
+      }, 0);
+    }
+  }, []);
+
+  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">
+      <PhoneInput
+        ref={inputRef}
+        country={disableCountryCode ? false : "in"}
+        value={phone}
+        onChange={handleInput}
+        inputProps={{ required: required }}
+        disabled={disabled}
+      />
+    </div>
+  );
+}
+
+```

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

@@ -1,107 +1,107 @@
-/**
- * Component used for Phone number input with country code
- *
- * @author Hasna
- *
- * 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 './phone-input.scss';
-
-
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {
-
-  let inputRef = useRef();
-
-  const [phone, setPhone] = useState();
-
-  useEffect(() => {
-    if (value && value.code && value.code.dialCode !== null) {
-      // To prepopulate phone number ,concat dialCode and phone number
-      setPhone(value.code.dialCode + value.value);
-
-      // 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);
-    }
-  }, []);
-
-  /**
-   * To get value in parent component
-   * @param {*} value
-   */
-  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">
-      <PhoneInput
-        ref={inputRef}
-        country={defaultCountryCode || 'in'}
-        // country={disableCountryCode ? false : 'in'}
-        value={phone}
-        onChange={handleInput}
-        inputProps={{ required: required }}
-        disabled={disabled}
-        onBlur={onBlur}
-      />
-    </div>
-  );
-}
-
-CountryPhoneInput.propTypes = {
-  /** A string representing the current value of the input. This prop is optional. */
-  value: PropTypes.string,
-  /** A function that will be called when the value of the input changes. This prop is required. */
-  onChange: PropTypes.func.isRequired,
-  /** A boolean indicating whether the input should be disabled or not. This prop is optional. */
-  disabled: PropTypes.bool,
-  /** A boolean indicating whether the country code portion of the input should be disabled or not. This prop is optional. */
-  disableCountryCode: PropTypes.bool,
-  /** A boolean indicating whether the input is required or not. This prop is optional. */
-  required: PropTypes.bool,
+/**
+ * Component used for Phone number input with country code
+ *
+ * @author Hasna
+ *
+ * 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 './phone-input.scss';
+
+
+export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {
+
+  let inputRef = useRef();
+
+  const [phone, setPhone] = useState();
+
+  useEffect(() => {
+    if (value && value.code && value.code.dialCode !== null) {
+      // To prepopulate phone number ,concat dialCode and phone number
+      setPhone(value.code.dialCode + value.value);
+
+      // 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);
+    }
+  }, []);
+
+  /**
+   * To get value in parent component
+   * @param {*} value
+   */
+  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">
+      <PhoneInput
+        ref={inputRef}
+        country={defaultCountryCode || 'in'}
+        // country={disableCountryCode ? false : 'in'}
+        value={phone}
+        onChange={handleInput}
+        inputProps={{ required: required }}
+        disabled={disabled}
+        onBlur={onBlur}
+      />
+    </div>
+  );
+}
+
+CountryPhoneInput.propTypes = {
+  /** A string representing the current value of the input. This prop is optional. */
+  value: PropTypes.string,
+  /** A function that will be called when the value of the input changes. This prop is required. */
+  onChange: PropTypes.func.isRequired,
+  /** A boolean indicating whether the input should be disabled or not. This prop is optional. */
+  disabled: PropTypes.bool,
+  /** A boolean indicating whether the country code portion of the input should be disabled or not. This prop is optional. */
+  disableCountryCode: PropTypes.bool,
+  /** A boolean indicating whether the input is required or not. This prop is optional. */
+  required: PropTypes.bool,
 };

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

@@ -1,62 +1,62 @@
-/* Default styles for larger screens (desktops/tablets) */
-.phone-input {
-    .react-tel-input {
-      .form-control {
-        width: 100%;
-      }
-    }
-  
-    /* Disabled state styling */
-    // .react-tel-input:disabled {
-    //   background-color: #f5f5f5;
-    // }
-  }
-  
-//   /* For tablets and smaller screens (max-width: 1024px) */
-//   @media (max-width: 1024px) {
-//     .phone-input {
-//       .react-tel-input {
-//         .form-control {
-//           width: 100%;
-//         }
-//       }
-  
-//       /* Disabled state for mobile/tablet */
-//     //   .react-tel-input:disabled {
-//     //     background-color: #f5f5f5;
-//     //   }
-//     }
-//   }
-  
-//   /* For smaller devices like mobile phones (max-width: 768px) */
-//   @media (max-width: 768px) {
-//     .phone-input {
-//       .react-tel-input {
-//         .form-control {
-//           width: 100%;
-//           font-size: 14px;  /* Adjust font size for smaller screens */
-//         }
-//       }
-  
-//     //   .react-tel-input:disabled {
-//     //     background-color: #f5f5f5;
-//     //   }
-//     }
-//   }
-  
-//   /* For very small mobile screens (max-width: 480px) */
-//   @media (max-width: 480px) {
-//     .phone-input {
-//       .react-tel-input {
-//         .form-control {
-//           width: 100%;
-//           font-size: 12px;  /* Even smaller font for very small screens */
-//         }
-//       }
-  
-//     //   .react-tel-input:disabled {
-//     //     background-color: #f5f5f5;
-//     //   }
-//     }
-//   }
+/* Default styles for larger screens (desktops/tablets) */
+.phone-input {
+    .react-tel-input {
+      .form-control {
+        width: 100%;
+      }
+    }
+  
+    /* Disabled state styling */
+    // .react-tel-input:disabled {
+    //   background-color: #f5f5f5;
+    // }
+  }
+  
+//   /* For tablets and smaller screens (max-width: 1024px) */
+//   @media (max-width: 1024px) {
+//     .phone-input {
+//       .react-tel-input {
+//         .form-control {
+//           width: 100%;
+//         }
+//       }
+  
+//       /* Disabled state for mobile/tablet */
+//     //   .react-tel-input:disabled {
+//     //     background-color: #f5f5f5;
+//     //   }
+//     }
+//   }
+  
+//   /* For smaller devices like mobile phones (max-width: 768px) */
+//   @media (max-width: 768px) {
+//     .phone-input {
+//       .react-tel-input {
+//         .form-control {
+//           width: 100%;
+//           font-size: 14px;  /* Adjust font size for smaller screens */
+//         }
+//       }
+  
+//     //   .react-tel-input:disabled {
+//     //     background-color: #f5f5f5;
+//     //   }
+//     }
+//   }
+  
+//   /* For very small mobile screens (max-width: 480px) */
+//   @media (max-width: 480px) {
+//     .phone-input {
+//       .react-tel-input {
+//         .form-control {
+//           width: 100%;
+//           font-size: 12px;  /* Even smaller font for very small screens */
+//         }
+//       }
+  
+//     //   .react-tel-input:disabled {
+//     //     background-color: #f5f5f5;
+//     //   }
+//     }
+//   }