feat: Allow passing custom component to flags prop #203

packages/docs/docs/02-Usage/01-PhoneInput.md

@@ -177,8 +177,8 @@ defaultValue="false"
 ### `flags`
 
 <PropDescription
-type="CustomFlagImage[]"
-description="Custom flag URLs array"
+type="CustomFlagImage[] | ComponentType"
+description="Custom flag URLs array or a custom flag component"
 defaultValue="undefined"
 />
 

src/components/CountrySelector/CountrySelector.tsx

@@ -117,21 +117,36 @@ export const CountrySelector: React.FC<CountrySelectorProps> = ({
         })}
         style={styleProps.buttonContentWrapperStyle}
       >
-        <FlagImage
-          iso2={selectedCountry}
-          src={flags?.find((f) => f.iso2 === selectedCountry)?.src}
-          className={buildClassNames({
-            addPrefix: [
-              'country-selector-button__flag-emoji',
-              disabled && 'country-selector-button__flag-emoji--disabled',
-            ],
-            rawClassNames: [styleProps.flagClassName],
-          })}
-          style={{
-            visibility: selectedCountry ? 'visible' : 'hidden',
-            ...styleProps.flagStyle,
-          }}
-        />
+        {typeof flags === 'function' ? (
+          React.createElement(flags, {
+            iso2: selectedCountry,
+            disabled,
+            style: styleProps.flagStyle,
+            className: buildClassNames({
+              addPrefix: [
+                'country-selector-button__flag-emoji',
+                disabled && 'country-selector-button__flag-emoji--disabled',
+              ],
+              rawClassNames: [styleProps.flagClassName],
+            }),
+          })
+        ) : (
+          <FlagImage
+            iso2={selectedCountry}
+            src={flags?.find((f) => f.iso2 === selectedCountry)?.src}
+            className={buildClassNames({
+              addPrefix: [
+                'country-selector-button__flag-emoji',
+                disabled && 'country-selector-button__flag-emoji--disabled',
+              ],
+              rawClassNames: [styleProps.flagClassName],
+            })}
+            style={{
+              visibility: selectedCountry ? 'visible' : 'hidden',
+              ...styleProps.flagStyle,
+            }}
+          />
+        )}
         {!hideDropdown && (
           <div
             className={buildClassNames({

src/components/CountrySelector/CountrySelectorDropdown.tsx

@@ -48,7 +48,14 @@ export interface CountrySelectorDropdownProps
   selectedCountry: CountryIso2;
   countries?: CountryData[];
   preferredCountries?: CountryIso2[];
-  flags?: CustomFlagImage[];
+  flags?:
+    | CustomFlagImage[]
+    | React.ComponentType<{
+        className?: string;
+        iso2?: ParsedCountry['iso2'];
+        disabled?: boolean;
+        style?: React.CSSProperties;
+      }>;
   onSelect?: (country: ParsedCountry) => void;
   onClose?: () => void;
 }
@@ -272,7 +279,6 @@ export const CountrySelectorDropdown: React.FC<
         const isFocused = index === focusedItemIndex;
         const isPreferred = preferredCountries.includes(country.iso2);
         const isLastPreferred = index === preferredCountries.length - 1;
-        const flag = flags?.find((f) => f.iso2 === country.iso2);
 
         return (
           <React.Fragment key={country.iso2}>
@@ -297,17 +303,31 @@ export const CountrySelectorDropdown: React.FC<
               style={styleProps.listItemStyle}
               title={country.name}
             >
-              <FlagImage
-                iso2={country.iso2}
-                src={flag?.src}
-                className={buildClassNames({
-                  addPrefix: [
-                    'country-selector-dropdown__list-item-flag-emoji',
-                  ],
-                  rawClassNames: [styleProps.listItemFlagClassName],
-                })}
-                style={styleProps.listItemFlagStyle}
-              />
+              {typeof flags === 'function' ? (
+                React.createElement(flags, {
+                  iso2: country.iso2,
+                  disabled: false,
+                  style: styleProps.listItemFlagStyle,
+                  className: buildClassNames({
+                    addPrefix: [
+                      'country-selector-dropdown__list-item-flag-emoji',
+                    ],
+                    rawClassNames: [styleProps.listItemFlagClassName],
+                  }),
+                })
+              ) : (
+                <FlagImage
+                  iso2={country.iso2}
+                  src={flags?.find((f) => f.iso2 === country.iso2)?.src}
+                  className={buildClassNames({
+                    addPrefix: [
+                      'country-selector-dropdown__list-item-flag-emoji',
+                    ],
+                    rawClassNames: [styleProps.listItemFlagClassName],
+                  })}
+                  style={styleProps.listItemFlagStyle}
+                />
+              )}
               <span
                 className={buildClassNames({
                   addPrefix: [

src/components/PhoneInput/PhoneInput.test.tsx

@@ -1,4 +1,4 @@
-import { act, fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -1173,6 +1173,23 @@ describe('PhoneInput', () => {
     });
   });
 
+  describe('custom flag component', () => {
+    test('should render custom flag component from flags prop', () => {
+      const flagComponent = () => <span>custom-flag</span>;
+      render(<PhoneInput flags={flagComponent} />);
+
+      const element = screen.getByText((content, element) => {
+        return (
+          element?.tagName.toLowerCase() === 'span' &&
+          element?.parentElement?.tagName.toLowerCase() === 'div' &&
+          element?.parentElement?.parentElement?.tagName.toLowerCase() === 'button'
+        );
+      }) as HTMLLIElement;
+
+      expect(element).toHaveTextContent('custom-flag');
+    });
+  });
+
   describe('disableFormatting', () => {
     test('should remove mask chars from input if disableFormatting is set to true', async () => {
       const user = userEvent.setup({ delay: null });

src/stories/PhoneInput/PhoneInput.stories.tsx

@@ -26,6 +26,7 @@ import { WithAutofocus } from './stories/WithAutofocus.story';
 import { DisableFormatting } from './stories/DisableFormatting.story';
 import { ControlledMode } from './stories/ControlledMode.story';
 import { CustomFlags } from './stories/CustomFlags.story';
+import { CustomFlagComponent } from './stories/CustomFlagComponent.story';
 
 export const _Default = Default;
 export const _WithInitialValue = WithInitialValue;
@@ -42,3 +43,4 @@ export const _WithAutofocus = WithAutofocus;
 export const _DisableFormatting = DisableFormatting;
 export const _ControlledMode = ControlledMode;
 export const _CustomFlags = CustomFlags;
+export const _CustomFlagComponent = CustomFlagComponent;

src/stories/PhoneInput/stories/CustomFlagComponent.story.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import {
+  CountryIso2,
+  defaultCountries,
+  parseCountry,
+  PhoneInput,
+} from '../../../index';
+import { PhoneInputStory } from '../PhoneInput.stories';
+
+const CustomFlag = ({
+  iso2,
+  style,
+  className,
+}: {
+  iso2?: CountryIso2;
+  style?: React.CSSProperties;
+  className?: string;
+}) => {
+  return (
+    <img
+      src={`/flags/${iso2}.svg`}
+      style={{ ...style, width: '24px', height: '24px' }}
+      className={className}
+    />
+  );
+};
+
+const countries = defaultCountries.filter((c) => {
+  const country = parseCountry(c);
+  return ['fr', 'jp', 'pl', 'ua'].includes(country.iso2);
+});
+
+export const CustomFlagComponent: PhoneInputStory = {
+  name: 'Custom Flag Component',
+  render: (args) => <PhoneInput {...args} />,
+  args: {
+    flags: CustomFlag,
+    countries,
+    defaultCountry: 'jp',
+    placeholder: 'Phone number',
+  },
+};