From af4720de9513af6551c63bd309a69383df5f6f98 Mon Sep 17 00:00:00 2001
From: savindi7 <savindi@wso2.com>
Date: Tue, 14 Mar 2023 14:54:55 +0530
Subject: [PATCH] chore(react): support external state values

---
 packages/react/src/components/Image/Image.tsx |  4 ++
 .../PhoneNumberInput.stories.mdx              | 14 ++++-
 .../PhoneNumberInput/PhoneNumberInput.tsx     | 61 ++++++++++++-------
 3 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx
index 6ac0838e..46032ee8 100644
--- a/packages/react/src/components/Image/Image.tsx
+++ b/packages/react/src/components/Image/Image.tsx
@@ -25,6 +25,10 @@ export type ImageProps = ImgHTMLAttributes<HTMLImageElement>;
 
 const COMPONENT_NAME: string = 'Image';
 
+/**
+ * TODO: Refer improvement issue if this Image component is required.
+ * @see {@link https://github.com/wso2/oxygen-ui/issues/65}
+ */
 const Image: FC<ImageProps> & WithWrapperProps = (props: ImageProps): ReactElement => {
   const {className, alt, ...rest} = props;
 
diff --git a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.stories.mdx b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.stories.mdx
index 66720b56..6c0af927 100644
--- a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.stories.mdx
+++ b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.stories.mdx
@@ -43,6 +43,18 @@ Import and use the `PhoneNumberInput` component in your components as follows.
   code={dedent`
 import PhoneNumberInput from '@oxygen-ui/react/PhoneNumberInput';\n
 function Demo() {
-  return <PhoneNumberInput onChange={handlePhoneNumberInputChange} />;
+  const [dialCode, setDialCode] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');\n
+  const handlePhoneNumberInputChange = (dialCode, phoneNumber) => {
+    setDialCode(dialCode);
+    setPhoneNumber(phoneNumber);
+  };\n
+  return (
+    <PhoneNumberInput
+      dialCodeValue={dialCode}
+      phoneNumberValue={phoneNumber}
+      onChange={handlePhoneNumberInputChange}
+    />
+  );
 }`}
 />
diff --git a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
index 43231599..19d63bc6 100644
--- a/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
+++ b/packages/react/src/components/PhoneNumberInput/PhoneNumberInput.tsx
@@ -46,15 +46,21 @@ export interface PhoneNumberInputProps extends BoxProps {
    */
   SelectProps?: Omit<MuiSelectProps, 'labelId' | 'id' | 'value' | 'onChange' | 'placeholder'>;
   /**
-   * Default country selected for the dialCode.
+   * Dial code state value.
    *
-   * @example {code: 'US', dialCode: '+1', name: 'United States'}
+   * @example '+94'
    */
-  defaultCountry?: Country;
+  dialCodeValue?: string;
   /**
    * Callback function to be called when the dialCode or phoneNumber changes.
    */
   onChange?: (dialCode: string, phoneNumber: string) => void;
+  /**
+   * Phone number state value.
+   *
+   * @example '787878787'
+   */
+  phoneNumberValue?: string;
   /**
    * Placeholder text for the phone number input.
    */
@@ -67,11 +73,12 @@ const PhoneNumberInput: ForwardRefExoticComponent<PhoneNumberInputProps> & WithW
   (props: PhoneNumberInputProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
     const {
       className,
-      defaultCountry,
+      dialCodeValue,
       label,
       InputLabelProps,
       OutlinedInputProps,
       onChange,
+      phoneNumberValue,
       placeholder,
       SelectProps,
       ...rest
@@ -79,17 +86,36 @@ const PhoneNumberInput: ForwardRefExoticComponent<PhoneNumberInputProps> & WithW
 
     const classes: string = clsx('oxygen-phone-number-input', className);
 
-    const [country, setCountry] = useState<Country>(defaultCountry ?? countries[0]);
-    const [phoneNumber, setPhoneNumber] = useState<string>('');
+    const [dialCode, setDialCode] = useState<string>(dialCodeValue ?? countries[0].dialCode);
+
+    const [phoneNumber, setPhoneNumber] = useState<string>(phoneNumberValue ?? '');
 
     const handleDialCodeChange = (event: SelectChangeEvent): void => {
-      setCountry(countries.find((item: Country) => item.dialCode === event.target.value));
+      setDialCode(event.target.value);
       onChange?.(event.target.value, phoneNumber);
     };
 
     const handlePhoneNumberChange = (event: ChangeEvent<HTMLInputElement>): void => {
       setPhoneNumber(event.target.value);
-      onChange?.(country.dialCode, event.target.value);
+      onChange?.(dialCode, event.target.value);
+    };
+
+    const renderValue = (value: string): ReactElement => {
+      const selectedCountry: Country = countries.find((item: Country) => item.dialCode === dialCode);
+
+      return (
+        <>
+          <ListItemIcon>
+            <Flag
+              className="oxygen-image"
+              alt={selectedCountry.name}
+              code={selectedCountry.code}
+              fallback={<FlagOutlined />}
+            />
+          </ListItemIcon>
+          {value}
+        </>
+      );
     };
 
     return (
@@ -102,30 +128,23 @@ const PhoneNumberInput: ForwardRefExoticComponent<PhoneNumberInputProps> & WithW
             className="oxygen-select"
             labelId="phone-number-label"
             id="phone-number-select"
-            value={country.dialCode}
+            value={dialCode}
             onChange={handleDialCodeChange}
-            renderValue={(value: string): ReactElement => (
-              <>
-                <ListItemIcon>
-                  <Flag className="oxygen-image" alt={country.name} code={country.code} fallback={<FlagOutlined />} />
-                </ListItemIcon>
-                {value}
-              </>
-            )}
+            renderValue={renderValue}
             inputProps={{
               className: 'oxygen-select-input-root',
             }}
             {...SelectProps}
           >
             {countries?.map((countryItem: Country) => {
-              const {dialCode, code, name} = countryItem;
+              const {dialCode: phoneCode, code, name} = countryItem;
               return (
-                <MenuItem value={dialCode} key={code} className="oxygen-dial-code-menu-item">
+                <MenuItem value={phoneCode} key={code} className="oxygen-dial-code-menu-item">
                   <ListItemIcon>
-                    <Flag className="oxygen-image" alt={country.name} code={code} fallback={<FlagOutlined />} />
+                    <Flag className="oxygen-image" alt={name} code={code} fallback={<FlagOutlined />} />
                   </ListItemIcon>
                   <Typography>{name}</Typography>&nbsp;
-                  <Typography variant="body2">{dialCode}</Typography>
+                  <Typography variant="body2">{phoneCode}</Typography>
                 </MenuItem>
               );
             })}