@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
119 lines (118 loc) • 5.52 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["postalCode", "city", "help", "width", "country", "countryCode", "size"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useCallback, useContext, useMemo } from 'react';
import classnames from 'classnames';
import DataContext from '../../DataContext/Context';
import StringField from '../String';
import CompositionField from '../Composition';
import useTranslation from '../../hooks/useTranslation';
import useDataValue from '../../hooks/useDataValue';
import { COUNTRY as defaultCountry } from '../../../../shared/defaults';
function PostalCodeAndCity(props) {
var _useContext;
const translations = useTranslation();
const {
getSourceValue
} = useDataValue();
const countryCodeFromProvider = (_useContext = useContext(DataContext)) === null || _useContext === void 0 ? void 0 : _useContext.countryCode;
const {
postalCode = {},
city = {},
help,
width = 'large',
country,
countryCode = countryCodeFromProvider !== null && countryCodeFromProvider !== void 0 ? countryCodeFromProvider : defaultCountry,
size
} = props,
fieldBlockProps = _objectWithoutProperties(props, _excluded);
const countryCodeValue = getSourceValue(country || countryCode);
const handleCityDefaults = useCallback(city => {
const props = {};
switch (countryCodeValue) {
case defaultCountry:
{
props.pattern = '^[A-Za-zÆØÅæøå -]+$';
break;
}
}
return _objectSpread(_objectSpread({}, 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 _objectSpread(_objectSpread({}, 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)
}, fieldBlockProps, {
width: width
}), React.createElement(StringField, _extends({}, postalCode, {
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(() => _objectSpread({
'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
})), React.createElement(StringField, _extends({
help: help
}, city, {
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(() => _objectSpread({
'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"
})));
}
PostalCodeAndCity._supportsSpacingProps = true;
export default PostalCodeAndCity;
//# sourceMappingURL=PostalCodeAndCity.js.map