@razorpay/blade
Version:
The Design System that powers Razorpay
120 lines (117 loc) • 4.83 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { getDialCodeByCountryCode, getFlagOfCountry } from '@razorpay/i18nify-js';
import React__default from 'react';
import styled from 'styled-components';
import '../../ActionList/index.js';
import '../../BottomSheet/index.js';
import '../../Dropdown/index.js';
import '../../Icons/index.js';
import { useIsMobile } from '../../../utils/useIsMobile.js';
import '../../../tokens/global/index.js';
import '../../../utils/index.js';
import '../../Box/BaseBox/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import { ActionList } from '../../ActionList/ActionList.js';
import { ActionListItem, ActionListItemText } from '../../ActionList/ActionListItem.js';
import { ActionListItemAsset } from '../../ActionList/ActionListItemAsset.web.js';
import { makeSize } from '../../../utils/makeSize/makeSize.js';
import { size } from '../../../tokens/global/size.js';
import { Dropdown } from '../../Dropdown/Dropdown.js';
import { DropdownButton } from '../../Dropdown/DropdownButton.js';
import ChevronUpIcon from '../../Icons/ChevronUpIcon/ChevronUpIcon.js';
import ChevronDownIcon from '../../Icons/ChevronDownIcon/ChevronDownIcon.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 CountryDropdownButtonWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "CountrySelectorweb__CountryDropdownButtonWrapper",
componentId: "nhlxq5-0"
})(function () {
return {
'& > button': {
padding: '0',
width: '100%'
}
};
});
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$1 = _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, {
children: countryData.map(function (country) {
return /*#__PURE__*/jsx(ActionListItem, {
onClick: onItemClick,
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 flagSize = {
medium: makeSize(size[20]),
large: makeSize(size[24])
};
return /*#__PURE__*/jsxs(Dropdown, {
isOpen: isDropdownOpen,
onOpenChange: setIsDropdownOpen,
children: [/*#__PURE__*/jsx(CountryDropdownButtonWrapper, {
width: size$1 === 'medium' ? '45px' : '60px',
marginLeft: size$1 === 'medium' ? '-3px' : '-2px',
children: /*#__PURE__*/jsx(DropdownButton, {
isDisabled: isDisabled,
size: size$1 === 'medium' ? 'xsmall' : 'medium',
variant: "tertiary",
accessibilityLabel: "".concat(countryNameFormatter.of(selectedCountry), " - Select Country"),
icon: isDropdownOpen ? ChevronUpIcon : ChevronDownIcon,
iconPosition: "right"
// We need to prevent the click event from propagating to the BaseInputWrapper,
// Because the BaseInputWrapper is listening for click events to focus the input.
// We don't want that to happen when the user clicks on the dropdown button
// otherwise the dropdown will close immediately after opening
,
onClick: function onClick(e) {
e.stopPropagation();
},
children: /*#__PURE__*/jsx("img", {
loading: "lazy",
role: "presentation",
width: flagSize[size$1],
src: getFlagOfCountry(selectedCountry)['4X3'],
alt: ""
})
})
}), 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