@availity/phone 2.1.4 → 2.2.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# [2.2.0](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.4...@availity/phone@2.2.0) (2024-08-01)
+
+
+### Features
+
+* **phone:** initial format value ([#1447](https://github.com/Availity/availity-react/issues/1447)) ([3398a65](https://github.com/Availity/availity-react/commit/3398a65973bc46152ccd302f14b458e0af4d59d1))
+
+
+
 ## [2.1.4](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.3...@availity/phone@2.1.4) (2023-10-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/phone",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "Availity Phone component using Formik and Yup",
   "keywords": [
     "availity",
@@ -29,7 +29,7 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@availity/form": "1.7.5",
+    "@availity/form": "1.9.0",
     "formik": "^2.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/Phone.d.ts

@@ -13,6 +13,7 @@ export interface PhoneProps extends FieldProps {
   showExtension?: boolean;
   phoneColProps?: object;
   extProps?: ExtensionProps;
+  formatInitialValue?: boolean;
 }
 
 declare const Phone: (props: PhoneProps) => JSX.Element;

package/src/Phone.js

@@ -1,12 +1,21 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Field } from '@availity/form';
 import { useFormikContext } from 'formik';
 import { AsYouType } from 'libphonenumber-js';
 import { Row, Col } from 'reactstrap';
 
-const Phone = ({ name, label, country = 'US', showExtension = false, extProps, phoneColProps, ...restPhoneProps }) => {
-  const { setFieldValue, setFieldTouched } = useFormikContext();
+const Phone = ({
+  name,
+  label,
+  country = 'US',
+  showExtension = false,
+  extProps,
+  phoneColProps,
+  formatInitialValue,
+  ...restPhoneProps
+}) => {
+  const { setFieldValue, setFieldTouched, values } = useFormikContext();
 
   let ext = null;
   if (showExtension) {
@@ -27,6 +36,13 @@ const Phone = ({ name, label, country = 'US', showExtension = false, extProps, p
     return asYouType.formattedOutput;
   };
 
+  useEffect(() => {
+    if (formatInitialValue) {
+      setFieldValue(name, asYouFormat(values[name]), false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const formatPhoneOnBlur = ({ target: { value } }) => {
     setFieldValue(name, asYouFormat(value), true);
     setFieldTouched(name, true, true);
@@ -60,6 +76,8 @@ Phone.propTypes = {
   country: PropTypes.string,
   /** Used to control props on the `<Col />` for the phone field, if needed. The phone column defaults to xs: { size: 12 } when not rendering an extension field, and defaults to xs: { size: 10 } when rendering an extension field. */
   phoneColProps: PropTypes.object,
+  /** When true, when the field is first rendered, it will trigger the formatter to update the value. */
+  formatInitialValue: PropTypes.bool,
 };
 
 export default Phone;