@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
120 lines (119 loc) • 4.43 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useContext, useMemo } from 'react';
import classnames from 'classnames';
import DataContext from "../../DataContext/Context.js";
import StringField from "../String/index.js";
import CompositionField from "../Composition/index.js";
import useTranslation from "../../hooks/useTranslation.js";
import useDataValue from "../../hooks/useDataValue.js";
import { COUNTRY as defaultCountry } from "../../../../shared/defaults.js";
function PostalCodeAndCity(props) {
const translations = useTranslation();
const {
getSourceValue
} = useDataValue();
const countryCodeFromProvider = useContext(DataContext)?.countryCode;
const {
postalCode = {},
city = {},
help,
width = 'large',
country,
countryCode = countryCodeFromProvider !== null && countryCodeFromProvider !== void 0 ? countryCodeFromProvider : defaultCountry,
size,
...compositionFieldProps
} = props;
const countryCodeValue = getSourceValue(country || countryCode);
const handleCityDefaults = useCallback(city => {
const props = {};
switch (countryCodeValue) {
case defaultCountry:
{
props.pattern = '^[A-Za-zÆØÅæøå -]+$';
break;
}
}
return {
...props,
...city
};
}, [countryCodeValue]);
const {
pattern: cityPattern,
className: cityClassName,
label: cityLabel,
width: cityWidth,
errorMessages: cityErrorMessages
} = handleCityDefaults(city);
const handlePostalCodeDefaults = useCallback(postalCode => {
const props = {};
switch (countryCodeValue) {
case defaultCountry:
case 'DK':
case 'CH':
{
props.mask = [/\d/, /\d/, /\d/, /\d/];
props.pattern = '^[0-9]{4}$';
props.placeholder = '0000';
break;
}
default:
props.width = '8rem';
break;
}
return {
...props,
...postalCode
};
}, [countryCodeValue]);
const {
mask: postalCodeMask,
pattern: postalCodePattern,
placeholder: postalCodePlaceHolder,
className: postalCodeClassName,
label: postalCodeLabel,
width: postalCodeWidth,
errorMessages: postalCodeErrorMessages
} = handlePostalCodeDefaults(postalCode);
return React.createElement(CompositionField, _extends({
className: classnames('dnb-forms-field-postal-code-and-city', props.className)
}, compositionFieldProps, {
width: width
}), React.createElement(StringField, _extends({
size: size,
className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCodeClassName),
label: postalCodeLabel !== null && postalCodeLabel !== void 0 ? postalCodeLabel : translations.PostalCode.label,
mask: postalCodeMask,
pattern: postalCodePattern,
placeholder: postalCodePlaceHolder,
errorMessages: useMemo(() => ({
'Field.errorRequired': translations.PostalCode.errorRequired,
'Field.errorPattern': translations.PostalCode.errorPattern,
...postalCodeErrorMessages
}), [postalCodeErrorMessages, translations.PostalCode.errorPattern, translations.PostalCode.errorRequired]),
width: postalCodeWidth !== null && postalCodeWidth !== void 0 ? postalCodeWidth : false,
inputClassName: "dnb-forms-field-postal-code-and-city__postal-code-input",
inputMode: "numeric",
autoComplete: "postal-code",
"data-country-code": country || countryCode
}, postalCode)), React.createElement(StringField, _extends({
help: help,
size: size,
className: classnames('dnb-forms-field-postal-code-and-city__city', cityClassName),
label: cityLabel !== null && cityLabel !== void 0 ? cityLabel : translations.City.label,
errorMessages: useMemo(() => ({
'Field.errorRequired': translations.City.errorRequired,
'Field.errorPattern': translations.City.errorPattern,
...cityErrorMessages
}), [cityErrorMessages, translations.City.errorPattern, translations.City.errorRequired]),
pattern: cityPattern,
trim: true,
width: cityWidth !== null && cityWidth !== void 0 ? cityWidth : 'stretch',
inputClassName: "dnb-forms-field-postal-code-and-city__city-input",
autoComplete: "address-level2"
}, city)));
}
PostalCodeAndCity._supportsSpacingProps = undefined;
export default PostalCodeAndCity;
//# sourceMappingURL=PostalCodeAndCity.js.map