Add support for prefixCls provided by ConfigProvider (GH-82)

Author: ArtyomVancyan

src/index.tsx

@@ -10,6 +10,7 @@ import {
     useState
 } from "react";
 import useFormInstance from "antd/es/form/hooks/useFormInstance";
+import {ConfigContext} from "antd/es/config-provider";
 import {FormContext} from "antd/es/form/context";
 import {useWatch} from "antd/es/form/Form";
 import Select from "antd/es/select";
@@ -32,8 +33,6 @@ import {
 import {injectMergedStyles} from "./styles";
 import {PhoneInputProps, PhoneNumber} from "./types";
 
-injectMergedStyles();
-
 const PhoneInput = forwardRef(({
                                    value: initialValue = "",
                                    country = getDefaultISO2Code(),
@@ -52,13 +51,17 @@ const PhoneInput = forwardRef(({
                                }: PhoneInputProps, forwardedRef: any) => {
     const formInstance = useFormInstance();
     const formContext = useContext(FormContext);
+    const {getPrefixCls} = useContext(ConfigContext);
     const inputRef = useRef<any>(null);
     const selectedRef = useRef<boolean>(false);
     const initiatedRef = useRef<boolean>(false);
     const [query, setQuery] = useState<string>("");
     const [minWidth, setMinWidth] = useState<number>(0);
     const [countryCode, setCountryCode] = useState<string>(country);
 
+    const prefixCls = getPrefixCls();
+    injectMergedStyles(prefixCls);
+
     const {
         value,
         pattern,
@@ -183,7 +186,7 @@ const PhoneInput = forwardRef(({
             dropdownStyle={{minWidth}}
             notFoundContent={searchNotFound}
             dropdownRender={(menu) => (
-                <div className="ant-phone-input-search-wrapper">
+                <div className={`${prefixCls}-phone-input-search-wrapper`}>
                     {enableSearch && (
                         <Input
                             placeholder={searchPlaceholder}
@@ -199,7 +202,7 @@ const PhoneInput = forwardRef(({
                     value={iso + dial}
                     key={`${iso}_${mask}`}
                     label={<div className={`flag ${iso}`}/>}
-                    children={<div className="ant-phone-input-select-item">
+                    children={<div className={`${prefixCls}-phone-input-select-item`}>
                         <div className={`flag ${iso}`}/>
                         {name}&nbsp;{displayFormat(mask)}
                     </div>}
@@ -209,7 +212,7 @@ const PhoneInput = forwardRef(({
     ), [selectValue, disableDropdown, minWidth, searchNotFound, countriesList, setFieldValue, setValue, enableSearch, searchPlaceholder])
 
     return (
-        <div className="ant-phone-input-wrapper"
+        <div className={`${prefixCls}-phone-input-wrapper`}
              ref={node => setMinWidth(node?.offsetWidth || 0)}>
             <Input
                 ref={ref}

src/styles.ts

@@ -3,4 +3,18 @@ import commonStyles from "react-phone-hooks/stylesheet.json";
 
 import customStyles from "./resources/stylesheet.json";
 
-export const injectMergedStyles = () => injectStyles(jsonToCss(Object.assign(commonStyles, customStyles)));
+let prefix: any = null;
+
+export const injectMergedStyles = (prefixCls: any = null) => {
+    const stylesheet = customStyles as { [key: string]: any };
+    if (prefixCls) {
+        if (prefix === prefixCls) return;
+        Object.entries(stylesheet).forEach(([k, value]) => {
+            const key = k.replace(/ant(?=-)/g, prefixCls);
+            stylesheet[key] = value;
+            delete stylesheet[k];
+        })
+        prefix = prefixCls;
+    }
+    return injectStyles(jsonToCss(Object.assign(commonStyles, stylesheet)));
+}

tests/antd.test.tsx

@@ -2,6 +2,7 @@ import assert from "assert";
 import Form from "antd/lib/form";
 import Button from "antd/lib/button";
 import FormItem from "antd/lib/form/FormItem";
+import ConfigProvider from "antd/lib/config-provider";
 import userEvent from "@testing-library/user-event";
 import {act, render, screen} from "@testing-library/react";
 
@@ -112,6 +113,15 @@ describe("Checking the basic rendering and functionality", () => {
         assert(input.getAttribute("value") === "+1 (702) 123 4567");
     })
 
+    it("Using `prefixCls` with ConfigProvider", () => {
+        render(<ConfigProvider prefixCls="custom-prefix">
+            <PhoneInput data-testid="input"/>
+        </ConfigProvider>);
+        const input = screen.getByTestId("input");
+        assert(!input.outerHTML.includes("ant-input"));
+        assert(input.outerHTML.includes("custom-prefix-input"));
+    })
+
     it("Checking field value setters", async () => {
         const FormWrapper = () => {
             const [form] = Form.useForm();