@gravityforms/components/react/admin/modules/Dropdown/CountryDropdown/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, classnames, PropTypes } from '@gravityforms/libraries';
import { getCountriesListItemsFromIsos, sortPreferredCountries } from './utils';
import Dropdown from '..';

const { forwardRef } = React;

/**
 * @module CountryDropdown
 *
 * @description A dropdown of countries.
 *              Rest of the props are passed to the Dropdown component.
 *
 * @since 5.6.2
 *
 * @param {object}              props                         Component props.
 * @param {Array}               props.countries               List of country iso codes.
 * @param {object}              props.customAttributes        Custom attributes for the component.
 * @param {string|Array|object} props.customClasses           Custom classes for the component.
 * @param {object}              props.i18n                    i18n object, has `allCountries` and `preferredCountries` keys.
 * @param {string}              props.i18n.allCountries       All countries i18n string.
 * @param {string}              props.i18n.preferredCountries Preferred countries i18n string.
 * @param {string}              props.i18n.placeholder        Placeholder i18n string.
 * @param {string}              props.language                Language code.
 * @param {Array}               props.preferredCountries      List of preferred country iso codes.
 * @param {bool}                props.showCallingCode         Whether to show the calling code.
 * @param {bool}                props.showFlag                Whether to show the country flags.
 * @param {bool}                props.showPlaceholder         Whether to show the placeholder.
 * @param {object}              ref                           Forwarded ref.
 *
 * @return {JSX.Element} The country dropdown.
 */
const CountryDropdown = forwardRef( ( {
	countries = [],
	customAttributes = {},
	customClasses = [],
	i18n = {},
	language = 'en',
	preferredCountries = [],
	showCallingCode = false,
	showFlag = true,
	showPlaceholder = false,
	...restProps
}, ref ) => {
	const dropdownProps = {
		...restProps,
		...customAttributes,
		i18n,
		customClasses: classnames( 'gform-country-dropdown', customClasses ),
	};
	if ( countries.length ) {
		let listItems = getCountriesListItemsFromIsos(
			countries,
			language,
			i18n,
			{ showFlag, showCallingCode, showPlaceholder },
		);
		if ( preferredCountries.length ) {
			listItems = sortPreferredCountries( listItems, preferredCountries, i18n );
		}
		dropdownProps.listItems = listItems;
	}

	return <Dropdown { ...dropdownProps } ref={ ref } />;
} );

CountryDropdown.propTypes = {
	countries: PropTypes.array,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	i18n: PropTypes.object,
	language: PropTypes.string,
	preferredCountries: PropTypes.array,
	showCallingCode: PropTypes.bool,
	showFlag: PropTypes.bool,
};

export default CountryDropdown;