@razorpay/blade
Version:
The Design System that powers Razorpay
99 lines (96 loc) • 3.73 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';
import React__default from 'react';
import '../../../tokens/global/index.js';
import '../../../utils/index.js';
import '../../ActionList/index.js';
import '../../BottomSheet/index.js';
import '../../Dropdown/index.js';
import { useIsMobile } from '../../../utils/useIsMobile.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import { size } from '../../../tokens/global/size.js';
import { ActionList } from '../../ActionList/ActionList.js';
import { ActionListItem, ActionListItemText } from '../../ActionList/ActionListItem.js';
import { ActionListItemAsset } from '../../ActionList/ActionListItemAsset.web.js';
import { Dropdown } from '../../Dropdown/Dropdown.js';
import { InputDropdownButton } from '../../Dropdown/InputDropdownButton.web.js';
import { BottomSheet } from '../../BottomSheet/BottomSheet.web.js';
import { BottomSheetHeader } from '../../BottomSheet/BottomSheetHeader.web.js';
import { BottomSheetBody } from '../../BottomSheet/BottomSheetBody.web.js';
import { DropdownOverlay } from '../../Dropdown/DropdownOverlay.web.js';
var countryNameFormatter = new Intl.DisplayNames(['en'], {
type: 'region'
});
var flagSize = {
xsmall: makeSize(size[16]),
small: makeSize(size[16]),
medium: makeSize(size[20]),
large: makeSize(size[24])
};
var CountrySelector = function CountrySelector(_ref) {
var isDisabled = _ref.isDisabled,
selectedCountry = _ref.selectedCountry,
inputWrapperRef = _ref.inputWrapperRef,
countryData = _ref.countryData,
onItemClick = _ref.onItemClick,
flags = _ref.flags,
size = _ref.size;
var _React$useState = React__default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isDropdownOpen = _React$useState2[0],
setIsDropdownOpen = _React$useState2[1];
var isMobile = useIsMobile();
var actionList = /*#__PURE__*/jsx(ActionList, {
isVirtualized: true,
children: countryData.map(function (country) {
return /*#__PURE__*/jsx(ActionListItem, {
leading: /*#__PURE__*/jsx(ActionListItemAsset, {
src: flags[country.code]['4X3'],
alt: country.name
}),
title: country.name,
value: country.code,
trailing: /*#__PURE__*/jsx(ActionListItemText, {
children: getDialCodeByCountryCode(country.code)
})
}, country.code);
})
});
var flagImage = /*#__PURE__*/jsx("img", {
loading: "lazy",
role: "presentation",
width: flagSize[size],
src: getFlagOfCountry(selectedCountry)['4X3'],
alt: ""
});
return /*#__PURE__*/jsxs(Dropdown, {
isOpen: isDropdownOpen,
onOpenChange: setIsDropdownOpen,
children: [/*#__PURE__*/jsx(InputDropdownButton, {
value: selectedCountry,
onChange: function onChange(_ref2) {
var value = _ref2.value;
return onItemClick({
name: value
});
},
accessibilityLabel: "".concat(countryNameFormatter.of(selectedCountry), " - Select Country"),
isDisabled: isDisabled,
size: size,
leading: flagImage,
showDisplayValue: false
}), isMobile ? /*#__PURE__*/jsxs(BottomSheet, {
children: [/*#__PURE__*/jsx(BottomSheetHeader, {
title: "Select A Country"
}), /*#__PURE__*/jsx(BottomSheetBody, {
children: actionList
})]
}) : /*#__PURE__*/jsx(DropdownOverlay, {
referenceRef: inputWrapperRef,
children: actionList
})]
});
};
export { CountrySelector, countryNameFormatter };
//# sourceMappingURL=CountrySelector.web.js.map