Bug fixes

This commit is contained in:
Shaurya Sharma 2025-04-04 04:11:33 +05:30
parent 1c5a79f900
commit 71734667d1
7 changed files with 196 additions and 31 deletions

View file

@ -72,8 +72,8 @@ export const currencyinputConfig = {
validation: {
mandatory: { type: 'toggle', displayName: 'Make this field mandatory' },
regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' },
minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' },
maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' },
minValue: { type: 'code', displayName: 'Min value', placeholder: 'Enter min value' },
maxValue: { type: 'code', displayName: 'Max value', placeholder: 'Enter max value' },
customRule: {
type: 'code',
displayName: 'Custom validation',
@ -223,9 +223,12 @@ export const currencyinputConfig = {
},
actions: [
{
handle: 'setText',
displayName: 'Set text',
params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }],
handle: 'setValue',
displayName: 'Set Value',
params: [
{ handle: 'value', displayName: 'value', defaultValue: '' },
{ handle: 'country', displayName: 'country', defaultValue: '' },
],
},
{
handle: 'clear',
@ -259,8 +262,8 @@ export const currencyinputConfig = {
validation: {
mandatory: { value: '{{false}}' },
regex: { value: '' },
minLength: { value: '' },
maxLength: { value: '' },
minValue: { value: '' },
maxValue: { value: '' },
customRule: { value: '' },
},

View file

@ -115,6 +115,15 @@ export const useInput = ({
});
}, [inputType, country]);
useEffect(() => {
if (inputType !== 'currency') return;
setExposedVariable('setValue', async function (value, countryCode = country) {
setInputValue(value);
setCountry(countryCode);
fireEvent('onChange');
});
}, [inputType, country]);
useEffect(() => {
const exposedVariables = {
...(inputType !== 'phone' && {

View file

@ -15,6 +15,7 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => {
showValidationError,
computedStyles,
darkMode,
filterOption,
} = rest;
const [menuIsOpen, setMenuIsOpen] = useState(false);
const dropdownRef = useRef(null);
@ -110,6 +111,7 @@ export const CountrySelect = ({ value, onChange, options, ...rest }) => {
useCustomStyles={true}
menuPortalTarget={document.body}
isCurrencyInput={isCurrencyInput}
{...(filterOption && { filterOption })}
components={{
MenuList: CustomMenuList,
Option: (props) => <CustomOption {...props} />,

View file

@ -43,16 +43,17 @@ export const CurrencyInput = (props) => {
};
const options = useMemo(() => {
return Object.keys(CurrencyMap).map((country) => ({
label: `${CurrencyMap[country].prefix} (${CurrencyMap[country].currency})`,
value: country,
return Object.keys(CurrencyMap).map((ele) => ({
label: `${CurrencyMap[ele].prefix} (${CurrencyMap[ele].currency})`,
value: ele,
country: CurrencyMap[ele].country,
}));
}, []);
const onInputValueChange = (value) => {
setExposedVariables({
country: country,
formattedValue: `${CurrencyMap?.[country]?.prefix || ''} ${inputRef.current?.value}`,
formattedValue: `${inputRef.current?.value}`,
});
handlePhoneCurrencyInputChange(value);
};
@ -128,11 +129,26 @@ export const CurrencyInput = (props) => {
zIndex: 3,
};
useEffect(() => {
if (!isInitialRender.current) {
setCountry(defaultCountry);
}
}, [defaultCountry]);
useEffect(() => {
if (!isInitialRender.current) {
setExposedVariables({
country: country,
formattedValue: `${inputRef.current?.value}`,
});
}
}, [country]);
useEffect(() => {
if (isInitialRender.current) {
setExposedVariables({
country: country,
formattedValue: `${CurrencyMap?.[country]?.prefix || ''} ${inputRef.current?.value}`,
formattedValue: `${inputRef.current?.value}`,
value: value,
setCountryCode: (code) => {
setCountry(code);
@ -142,14 +158,6 @@ export const CurrencyInput = (props) => {
}
}, []);
useEffect(() => {
if (!isInitialRender.current) {
setCountry(defaultCountry);
}
}, [defaultCountry]);
console.log('CurrencyMap?.[country]?.prefix', CurrencyMap?.[country]?.prefix);
return (
<>
<div
@ -184,12 +192,22 @@ export const CurrencyInput = (props) => {
/>
<div className="d-flex h-100 w-100" style={{ boxShadow, borderRadius: `${borderRadius}px` }}>
<CountrySelect
value={{ label: `${CurrencyMap?.[country]?.prefix} (${CurrencyMap?.[country]?.currency})`, value: country }}
value={{
label: `${CurrencyMap?.[country]?.prefix} (${CurrencyMap?.[country]?.currency})`,
value: country,
country: CurrencyMap?.[country]?.country,
}}
options={options}
isCountryChangeEnabled={isCountryChangeEnabled}
disabledState={disabledState}
borderRadius={borderRadius}
isValid={isValid}
filterOption={(option, inputValue) => {
return (
option.label.toLowerCase().includes(inputValue.toLowerCase()) ||
option.data.country.toLowerCase().includes(inputValue.toLowerCase())
);
}}
computedStyles={computedStyles}
showValidationError={showValidationError}
darkMode={darkMode}
@ -197,9 +215,10 @@ export const CurrencyInput = (props) => {
onChange={(selectedOption) => {
if (selectedOption) {
setCountry(selectedOption.value);
fireEvent('onChange');
setExposedVariables({
country: selectedOption.value,
formattedValue: `${CurrencyMap?.[selectedOption.value]?.prefix || ''} ${inputRef.current?.value}`,
formattedValue: `${inputRef.current?.value}`,
});
}
}}
@ -214,7 +233,10 @@ export const CurrencyInput = (props) => {
decimalsLimit={decimalPlaces}
style={computedStyles}
data-ignore-hover={true}
onValueChange={(value) => onInputValueChange(value)}
onValueChange={(newVal) => {
if (newVal === value) return;
onInputValueChange(newVal);
}}
prefix={`${CurrencyMap?.[country]?.prefix || ''} `}
disabled={disabledState}
onBlur={handleBlur}

View file

@ -21,7 +21,14 @@ export const CustomValueContainer = ({ getValue, ...props }) => {
</>
</div>
) : (
<div style={{ display: 'flex', marginLeft: '17px', marginTop: '4px', justifyContent: 'center' }}>
<div
style={{
display: 'flex',
marginLeft: isCurrencyInput ? '6px' : '17px',
marginTop: '4px',
justifyContent: 'center',
}}
>
<Planet width={24} height={24} />
</div>
)}

View file

@ -2,477 +2,596 @@ export const CurrencyMap = {
AE: {
currency: 'AED',
prefix: 'د.إ.',
country: 'United Arab Emirates',
},
AF: {
currency: 'AFN',
prefix: '؋',
country: 'Afghanistan',
},
AL: {
currency: 'ALL',
prefix: 'Lek',
country: 'Albania',
},
AM: {
currency: 'AMD',
prefix: 'դր.',
country: 'Armenia',
},
AR: {
currency: 'ARS',
prefix: '$',
country: 'Argentina',
},
AU: {
currency: 'AUD',
prefix: '$',
country: 'Australia',
},
AZ: {
currency: 'AZN',
prefix: 'ман.',
country: 'Azerbaijan',
},
BA: {
currency: 'BAM',
prefix: 'KM',
country: 'Bosnia and Herzegovina',
},
BD: {
currency: 'BDT',
prefix: '৳',
country: 'Bangladesh',
},
BG: {
currency: 'BGN',
prefix: 'лв.',
country: 'Bulgaria',
},
BH: {
currency: 'BHD',
prefix: 'د.ب.',
country: 'Bahrain',
},
BI: {
currency: 'BIF',
prefix: 'FBu',
country: 'Burundi',
},
BN: {
currency: 'BND',
prefix: '$',
country: 'Brunei Darussalam',
},
BO: {
currency: 'BOB',
prefix: 'Bs',
country: 'Bolivia',
},
BR: {
currency: 'BRL',
prefix: 'R$',
country: 'Brazil',
},
BV: {
currency: 'NOK',
prefix: 'kr',
country: 'Bouvet Island',
},
BW: {
currency: 'BWP',
prefix: 'P',
country: 'Botswana',
},
BY: {
currency: 'BYR',
prefix: 'BYR',
country: 'Belarus',
},
BZ: {
currency: 'BZD',
prefix: '$',
country: 'Belize',
},
CA: {
currency: 'CAD',
prefix: '$',
country: 'Canada',
},
CD: {
currency: 'CDF',
prefix: 'FrCD',
country: 'Congo, Democratic Republic of the',
},
CF: {
currency: 'XAF',
prefix: 'FCFA',
country: 'Central African Republic',
},
CH: {
currency: 'CHF',
prefix: 'CHF',
country: 'Switzerland',
},
CL: {
currency: 'CLP',
prefix: '$',
country: 'Chile',
},
CN: {
currency: 'CNY',
prefix: 'CN¥',
country: 'China',
},
CO: {
currency: 'COP',
prefix: '$',
country: 'Colombia',
},
CR: {
currency: 'CRC',
prefix: '₡',
country: 'Costa Rica',
},
CV: {
currency: 'CVE',
prefix: 'CV$',
country: 'Cape Verde',
},
CZ: {
currency: 'CZK',
prefix: 'Kč',
country: 'Czech Republic',
},
DJ: {
currency: 'DJF',
prefix: 'Fdj',
country: 'Djibouti',
},
DK: {
currency: 'DKK',
prefix: 'kr',
country: 'Denmark',
},
DO: {
currency: 'DOP',
prefix: 'RD$',
country: 'Dominican Republic',
},
DZ: {
currency: 'DZD',
prefix: 'د.ج.',
country: 'Algeria',
},
EG: {
currency: 'EGP',
prefix: 'ج.م.',
country: 'Egypt',
},
ER: {
currency: 'ERN',
prefix: 'Nfk',
country: 'Eritrea',
},
EU: {
currency: 'EUR',
prefix: '€',
country: 'European Union',
},
ET: {
currency: 'ETB',
prefix: 'Br',
country: 'Ethiopia',
},
GB: {
currency: 'GBP',
prefix: '£',
country: 'United Kingdom',
},
GE: {
currency: 'GEL',
prefix: 'GEL',
country: 'Georgia',
},
GH: {
currency: 'GHS',
prefix: 'GH₵',
country: 'Ghana',
},
GN: {
currency: 'GNF',
prefix: 'FG',
country: 'Guinea',
},
GT: {
currency: 'GTQ',
prefix: 'Q',
country: 'Guatemala',
},
HK: {
currency: 'HKD',
prefix: '$',
country: 'Hong Kong',
},
HN: {
currency: 'HNL',
prefix: 'L',
country: 'Honduras',
},
HR: {
currency: 'HRK',
prefix: 'kn',
country: 'Croatia',
},
HU: {
currency: 'HUF',
prefix: 'Ft',
country: 'Hungary',
},
ID: {
currency: 'IDR',
prefix: 'Rp',
country: 'Indonesia',
},
IL: {
currency: 'ILS',
prefix: '₪',
country: 'Israel',
},
IN: {
currency: 'INR',
prefix: '₹',
country: 'India',
},
IQ: {
currency: 'IQD',
prefix: 'د.ع.',
country: 'Iraq',
},
IR: {
currency: 'IRR',
prefix: '﷼',
country: 'Iran, Islamic Republic of',
},
IS: {
currency: 'ISK',
prefix: 'kr',
country: 'Iceland',
},
JM: {
currency: 'JMD',
prefix: '$',
country: 'Jamaica',
},
JO: {
currency: 'JOD',
prefix: 'د.أ.',
country: 'Jordan',
},
JP: {
currency: 'JPY',
prefix: '¥',
country: 'Japan',
},
KE: {
currency: 'KES',
prefix: 'Ksh',
country: 'Kenya',
},
KH: {
currency: 'KHR',
prefix: '៛',
country: 'Cambodia',
},
KM: {
currency: 'KMF',
prefix: 'FC',
country: 'Comoros',
},
KR: {
currency: 'KRW',
prefix: '₩',
country: 'Korea, Republic of',
},
KW: {
currency: 'KWD',
prefix: 'د.ك.',
country: 'Kuwait',
},
KZ: {
currency: 'KZT',
prefix: 'тңг.',
country: 'Kazakhstan',
},
LB: {
currency: 'LBP',
prefix: 'ل.ل.',
country: 'Lebanon',
},
LK: {
currency: 'LKR',
prefix: 'SL Re',
country: 'Sri Lanka',
},
LT: {
currency: 'LTL',
prefix: 'Lt',
country: 'Lithuania',
},
LY: {
currency: 'LYD',
prefix: 'د.ل.',
country: 'Libya',
},
MA: {
currency: 'MAD',
prefix: 'د.م.',
country: 'Morocco',
},
MD: {
currency: 'MDL',
prefix: 'MDL',
country: 'Moldova, Republic of',
},
MG: {
currency: 'MGA',
prefix: 'MGA',
country: 'Madagascar',
},
MK: {
currency: 'MKD',
prefix: 'MKD',
country: 'Macedonia, the Former Yugoslav Republic of',
},
MM: {
currency: 'MMK',
prefix: 'K',
country: 'Myanmar',
},
MO: {
currency: 'MOP',
prefix: 'MOP$',
country: 'Macao',
},
MU: {
currency: 'MUR',
prefix: 'MURs',
country: 'Mauritius',
},
MX: {
currency: 'MXN',
prefix: '$',
country: 'Mexico',
},
MY: {
currency: 'MYR',
prefix: 'RM',
country: 'Malaysia',
},
MZ: {
currency: 'MZN',
prefix: 'MTn',
country: 'Mozambique',
},
NA: {
currency: 'NAD',
prefix: 'N$',
country: 'Namibia',
},
NG: {
currency: 'NGN',
prefix: '₦',
country: 'Nigeria',
},
NI: {
currency: 'NIO',
prefix: 'C$',
country: 'Nicaragua',
},
NO: {
currency: 'NOK',
prefix: 'kr',
country: 'Norway',
},
NP: {
currency: 'NPR',
prefix: 'नेरू',
country: 'Nepal',
},
NZ: {
currency: 'NZD',
prefix: '$',
country: 'New Zealand',
},
OM: {
currency: 'OMR',
prefix: 'ر.ع.',
country: 'Oman',
},
PA: {
currency: 'PAB',
prefix: 'B/.',
country: 'Panama',
},
PE: {
currency: 'PEN',
prefix: 'S/.',
country: 'Peru',
},
PH: {
currency: 'PHP',
prefix: '₱',
country: 'Philippines',
},
PK: {
currency: 'PKR',
prefix: '₨',
country: 'Pakistan',
},
PL: {
currency: 'PLN',
prefix: 'zł',
country: 'Poland',
},
PY: {
currency: 'PYG',
prefix: '₲',
country: 'Paraguay',
},
QA: {
currency: 'QAR',
prefix: 'ر.ق.',
country: 'Qatar',
},
RO: {
currency: 'RON',
prefix: 'RON',
country: 'Romania',
},
RS: {
currency: 'RSD',
prefix: 'дин.',
country: 'Serbia',
},
RU: {
currency: 'RUB',
prefix: '₽',
country: 'Russian Federation',
},
RW: {
currency: 'RWF',
prefix: 'FR',
country: 'Rwanda',
},
SA: {
currency: 'SAR',
prefix: 'ر.س.',
country: 'Saudi Arabia',
},
SD: {
currency: 'SDG',
prefix: 'SDG',
country: 'Sudan',
},
SE: {
currency: 'SEK',
prefix: 'kr',
country: 'Sweden',
},
SG: {
currency: 'SGD',
prefix: '$',
country: 'Singapore',
},
SJ: {
currency: 'NOK',
prefix: 'kr',
country: 'Svalbard and Jan Mayen',
},
SN: {
currency: 'XOF',
prefix: 'CFA',
country: 'Senegal',
},
SO: {
currency: 'SOS',
prefix: 'Ssh',
country: 'Somalia',
},
SY: {
currency: 'SYP',
prefix: 'ل.س.',
country: 'Syrian Arab Republic',
},
TH: {
currency: 'THB',
prefix: '฿',
country: 'Thailand',
},
TN: {
currency: 'TND',
prefix: 'د.ت.',
country: 'Tunisia',
},
TO: {
currency: 'TOP',
prefix: 'T$',
country: 'Tonga',
},
TR: {
currency: 'TRY',
prefix: 'TL',
country: 'Turkey',
},
TT: {
currency: 'TTD',
prefix: '$',
country: 'Trinidad and Tobago',
},
TW: {
currency: 'TWD',
prefix: 'NT$',
country: 'Taiwan, Province of China',
},
TZ: {
currency: 'TZS',
prefix: 'TSh',
country: 'United Republic of Tanzania',
},
UA: {
currency: 'UAH',
prefix: '₴',
country: 'Ukraine',
},
UG: {
currency: 'UGX',
prefix: 'USh',
country: 'Uganda',
},
US: {
currency: 'USD',
prefix: '$',
country: 'United States',
},
UY: {
currency: 'UYU',
prefix: '$',
country: 'Uruguay',
},
UZ: {
currency: 'UZS',
prefix: 'UZS',
country: 'Uzbekistan',
},
VE: {
currency: 'VEF',
prefix: 'Bs.F.',
country: 'Venezuela',
},
VN: {
currency: 'VND',
prefix: '₫',
country: 'Vietnam',
},
VU: {
currency: 'VUV',
prefix: 'VT',
country: 'Vanuatu',
},
YE: {
currency: 'YER',
prefix: 'ر.ي.',
country: 'Yemen',
},
ZA: {
currency: 'ZAR',
prefix: 'R',
country: 'South Africa',
},
ZM: {
currency: 'ZMK',
prefix: 'ZK',
country: 'Zambia',
},
};

View file

@ -72,8 +72,8 @@ export const currencyinputConfig = {
validation: {
mandatory: { type: 'toggle', displayName: 'Make this field mandatory' },
regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' },
minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' },
maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' },
minValue: { type: 'code', displayName: 'Min value', placeholder: 'Enter min value' },
maxValue: { type: 'code', displayName: 'Max value', placeholder: 'Enter max value' },
customRule: {
type: 'code',
displayName: 'Custom validation',
@ -223,9 +223,12 @@ export const currencyinputConfig = {
},
actions: [
{
handle: 'setText',
displayName: 'Set text',
params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }],
handle: 'setValue',
displayName: 'Set Value',
params: [
{ handle: 'value', displayName: 'value', defaultValue: '' },
{ handle: 'country', displayName: 'country', defaultValue: '' },
],
},
{
handle: 'clear',
@ -259,8 +262,8 @@ export const currencyinputConfig = {
validation: {
mandatory: { value: '{{false}}' },
regex: { value: '' },
minLength: { value: '' },
maxLength: { value: '' },
minValue: { value: '' },
maxValue: { value: '' },
customRule: { value: '' },
},