WIP: Use antd phone input

package.json

@@ -28,6 +28,7 @@
         "@sentry/browser": "^7.57.0",
         "aidbox-react": "^1.7.1",
         "antd": "^5.6.4",
+        "antd-phone-input": "^0.3.0",
         "classnames": "^2.3.2",
         "fhir-react": "https://github.com/beda-software/fhir-react.git",
         "fullcalendar": "^6.1.8",
@@ -42,7 +43,6 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.45.1",
-        "react-phone-input-2": "^2.15.1",
         "react-router-dom": "^6.14.1",
         "react-select": "^5.7.3",
         "sass": "^1.63.6",

src/components/BaseQuestionnaireResponseForm/index.tsx

@@ -24,8 +24,6 @@ import * as yup from 'yup';
 
 import { isSuccess, loading, RemoteData } from 'fhir-react/lib/libs/remoteData';
 
-import 'react-phone-input-2/lib/style.css';
-
 import { saveQuestionnaireResponseDraft } from 'src/components/QuestionnaireResponseForm';
 import { questionnaireToValidationSchema } from 'src/utils/questionnaire';
 

src/components/BaseQuestionnaireResponseForm/widgets/PhoneInput/index.tsx

@@ -1,38 +1,28 @@
 import { Form } from 'antd';
-import classNames from 'classnames';
-import { useState } from 'react';
-import PI, { PhoneInputProps } from 'react-phone-input-2';
+import PhoneInput from 'antd-phone-input';
 import { QuestionItemProps } from 'sdc-qrf';
 
-import { S } from './PhoneInput.styles';
 import { useFieldController } from '../../hooks';
 
-// https://github.com/bl00mber/react-phone-input-2/issues/533#issuecomment-1508211907
-const PhoneInput: React.FC<PhoneInputProps> = (PI as any).default || PI;
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const PhoneInputFixed: typeof PhoneInput = PhoneInput.default ? PhoneInput.default : PhoneInput;
 
 export function QuestionPhone({ parentPath, questionItem }: QuestionItemProps) {
     const { linkId } = questionItem;
     const fieldName = [...parentPath, linkId, 0, 'value', 'string'];
     const { value, onChange, disabled, formItem } = useFieldController(fieldName, questionItem);
-    const [focused, setFocused] = useState(false);
 
     return (
         <Form.Item {...formItem}>
-            <S.Container>
-                <PhoneInput
-                    country={'us'}
-                    value={value}
-                    onChange={(phone) => onChange(phone)}
-                    disabled={disabled}
-                    inputClass={'react-phone-input'}
-                    containerClass={classNames({
-                        _focused: focused,
-                    })}
-                    buttonClass={'react-phone-input__button'}
-                    onFocus={() => setFocused(true)}
-                    onBlur={() => setFocused(false)}
-                />
-            </S.Container>
+            <PhoneInputFixed
+                country="us"
+                value={value}
+                disabled={disabled}
+                onChange={({ countryCode, areaCode, phoneNumber }) => {
+                    onChange([countryCode, areaCode, phoneNumber].filter(Boolean).join(''));
+                }}
+            />
         </Form.Item>
     );
 }

yarn.lock

@@ -4670,6 +4670,13 @@ ansi-styles@^6.0.0, ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+antd-phone-input@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/antd-phone-input/-/antd-phone-input-0.2.3.tgz#1c46939418250f3241cf7b5f88e7998d27f385b6"
+  integrity sha512-PUJAYIe4lzMo1JgiqdEcbWepkeAKLmm+2IKTmNALSO7WByY/aD701JmLBEdNRPYQitegT6eAQdVF7Uj7a492EQ==
+  dependencies:
+    react-phone-input-2 "^2.15.1"
+
 antd@^5.6.4:
   version "5.6.4"
   resolved "https://registry.yarnpkg.com/antd/-/antd-5.6.4.tgz#689d74ba61181ba6ea87a0c5d249d30d116ce602"