UNPKG

@dnb/eufemia

Version:

DNB Eufemia Design System UI Library

120 lines (119 loc) 4.43 kB
"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