Merge pull request #161 from GetLuko/hugo/fix/default-value-input-phone

fix(InputPhone): add defaultValue & onValueChange props

sandbox/src/app/sandbox/docs/input-phone.doc.tsx

@@ -16,6 +16,7 @@ const docs: JSX.Element[] = [
     label="Error"
     description="Error message"
     placeholder="0606060606"
+    defaultValue="0695"
   />,
   <InputPhone
     countryCode="DE"

src/components/inputs/input-phone/input-phone.spec.tsx

@@ -28,19 +28,33 @@ describe('InputPhone', () => {
     expect(handleChangePhoneNumber).toHaveBeenCalled();
   });
 
-  it('calls the onError prop when the phone number is invalid', () => {
-    const handleError = jest.fn();
+  it('onValidChange prop should return false when phone number is not valid', () => {
+    const onValidChange = jest.fn();
     const { getByTestId } = renderWithProvider(
       <InputPhone
         onChangePhoneNumber={() => {}}
-        onError={handleError}
+        onValidChange={onValidChange}
         testID="phone-input"
       />
     );
 
     fireEvent.changeText(getByTestId('phone-input'), 'invalid');
 
-    expect(handleError).toHaveBeenCalled();
+    expect(onValidChange).toHaveBeenCalledWith(false);
+  });
+  it('onValidChange prop should return true when phone number is valid', () => {
+    const onValidChange = jest.fn();
+    const { getByTestId } = renderWithProvider(
+      <InputPhone
+        onChangePhoneNumber={() => {}}
+        onValidChange={onValidChange}
+        testID="phone-input"
+      />
+    );
+
+    fireEvent.changeText(getByTestId('phone-input'), '0612345678');
+
+    expect(onValidChange).toHaveBeenCalledWith(true);
   });
 
   it('displays the correct country code when the countryCode prop is provided', () => {

src/components/inputs/input-phone/input-phone.tsx

@@ -1,4 +1,4 @@
-import { ParseError, parsePhoneNumberWithError } from 'libphonenumber-js';
+import parsePhoneNumberFromString from 'libphonenumber-js';
 import { FC, useState } from 'react';
 
 import CountryPicker from './components/country-picker';
@@ -17,24 +17,31 @@ export const InputPhone: FC<InputPhoneProps> = ({
   isFocused,
   description,
   label,
-  onError,
+  onValidChange,
   ...props
 }) => {
-  const [inputValue, setInputValue] = useState('');
+  const initialValue = props.defaultValue
+    ? parsePhoneNumberFromString(
+        props.defaultValue,
+        countryCode
+      )?.formatNational() || ''
+    : '';
+  const [inputValue, setInputValue] = useState(initialValue);
 
-  const showDescription =
-    (description && !isError) || (isError && inputValue.length > 2);
+  const showError = isError && inputValue.length > 2;
+
+  const showDescription = (description && !isError) || showError;
 
   const handleOnChangeText = (value: string) => {
-    try {
-      const phoneNumber = parsePhoneNumberWithError(value, countryCode);
-      setInputValue(phoneNumber.formatNational());
+    const phoneNumber = parsePhoneNumberFromString(value, countryCode);
+
+    if (phoneNumber) {
       onChangePhoneNumber?.(phoneNumber);
-    } catch (error) {
-      if (error instanceof ParseError) {
-        onError?.(error);
-      }
+      setInputValue(phoneNumber.formatNational());
+      onValidChange?.(phoneNumber.isValid());
+    } else {
       setInputValue(value);
+      onValidChange?.(false);
     }
   };
 
@@ -53,14 +60,14 @@ export const InputPhone: FC<InputPhoneProps> = ({
         <CountryPicker
           countryCode={countryCode}
           isDisabled={isDisabled}
-          isError={isError}
+          isError={showError}
           onCountryPickerPress={onCountryPickerPress}
         />
         <Box flex={1} marginLeft="xs">
           <InputText
             {...props}
             isDisabled={isDisabled}
-            isError={isError}
+            isError={showError}
             isFocused={isFocused}
             keyboardType="phone-pad"
             onChangeText={handleOnChangeText}

src/components/inputs/input-phone/input-phone.types.ts

@@ -1,12 +1,12 @@
-import { CountryCode, ParseError, PhoneNumber } from 'libphonenumber-js';
+import { CountryCode, PhoneNumber } from 'libphonenumber-js';
 
 import { InputTextProps } from '../input-text/types';
 
 export type InputPhoneProps = InputTextProps & {
   countryCode?: CountryCode;
   onCountryPickerPress?: () => void;
   onChangePhoneNumber?: (phoneNumber: PhoneNumber) => void;
-  onError?: (error: ParseError) => void;
+  onValidChange?: (isValid: boolean) => void;
 };
 
 export type CountryPickerProps = Pick<

src/types.ts

@@ -14,6 +14,7 @@ export * from './components/dialog/dialog.types';
 
 export * from './components/inputs/input-outline/input-outline.types';
 export * from './components/inputs/input-text/types';
+export * from './components/inputs/input-phone/input-phone.types';
 
 export * from './components/list-items/list-item/list-item.types';
 export * from './components/list-items/list-item-article/list-item-article.types';