@pinuts/bsr-uikit-relaunch
Version:
BSR UI-KIT Relaunch
177 lines (168 loc) • 8.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _formBuilder = require("@pinuts/form-builder");
var _reactI18next = require("react-i18next");
var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
var _BSRAddressContext = require("./BSRAddressContext.js");
var _Button = _interopRequireDefault(require("../Button/Button.jsx"));
var _SectionSpinner = _interopRequireDefault(require("../SectionSpinner/SectionSpinner.jsx"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// form-builder
const subFormPLZConfigStr = JSON.stringify(require('./PLZSelectorSubForm.json'));
const fetchStreetPLz = async (url, selectedStreedAndNumber) => {
const response = await fetch(`${url}/plzSet?searchQuery=${encodeURI(selectedStreedAndNumber)}`);
const data = await response.json();
return data;
};
const {
useFormikContext
} = _formBuilder.formik;
const BSRStreetPlzSelector = props => {
const [t] = (0, _reactI18next.useTranslation)();
const {
values,
setFieldValue
} = useFormikContext();
const {
getControllerPath,
showNextBtn,
onClickCheckAddressBtn,
showNoResultsError,
addressContext,
setShowNoResultsError,
selectedStreetList,
setSelectedStreetList,
dontShowSelector,
fieldKeys,
selectedRadioValue
} = (0, _react.useContext)(_BSRAddressContext.BSRAddressContext);
const {
config
} = props;
const groupKey = fieldKeys?.groupKey;
const labelKey = fieldKeys?.labelKey;
const selectedStreedAndNumberKey = fieldKeys?.selectedStreetAndNumberKey;
const localFieldKey = config.key;
// die in diesem Schritt ausgewählte Straße, Hausnummer PLZ kombination
// falls es nur eine gibt, wird diese direkt gesetzt
// selectedRadioValue, setSelectedRadioValue => ist im Context
// die im vorherigen Schritt ausgewählte Straße und Hausnummer
const [selectedStreedAndNumber, setSelectedStreedAndNumber] = (0, _react.useState)(null);
const [showLoading, setShowLoading] = (0, _react.useState)(false);
// labels
const {
overwriteLabels
} = addressContext;
const addressNotFoundStr = t(overwriteLabels.addressNotFound || 'bsrAddressSelector.labels.addressNotFound');
const loadingStr = t(overwriteLabels.loading || 'bsrAddressSelector.labels.loading');
const checkAddressStr = t(overwriteLabels.checkAddress || 'bsrAddressSelector.labels.checkAddress');
(0, _react.useEffect)(() => {
// set or delete selected street and number, form parent inputs, to state
if (values[selectedStreedAndNumberKey] && values[selectedStreedAndNumberKey] !== selectedStreedAndNumber) {
setSelectedStreedAndNumber(values[selectedStreedAndNumberKey]);
} else if (!values[selectedStreedAndNumberKey] && selectedStreedAndNumber) {
setSelectedStreedAndNumber(null);
setSelectedStreetList(null);
setFieldValue(groupKey, '');
setFieldValue(`${labelKey}`, '');
}
}, [selectedStreedAndNumberKey, values, selectedStreedAndNumber, setSelectedStreedAndNumber, groupKey, labelKey, setFieldValue, setSelectedStreetList]);
(0, _react.useEffect)(() => {
const mainFieldValue = values[groupKey];
//const selectedRadioValue = values[localFieldKey];
if (selectedRadioValue) {
if (selectedRadioValue !== mainFieldValue) {
setFieldValue(groupKey, selectedRadioValue);
}
const label = selectedStreetList?.find(option => option.value === selectedRadioValue)?.label;
if (label !== values[labelKey]) {
setFieldValue(labelKey, label);
}
} else if (selectedStreetList && selectedStreetList.length > 1) {
if (mainFieldValue) {
// if main field is set, but radio is not, reset main field
setFieldValue(groupKey, '');
}
// same for label
if (values[labelKey]) {
setFieldValue(labelKey, '');
}
}
}, [localFieldKey, groupKey, labelKey, values, setFieldValue, selectedStreetList, selectedRadioValue]);
(0, _react.useEffect)(() => {
if (selectedStreedAndNumber) {
const url = getControllerPath() + '/plzSet';
setShowLoading(true);
setSelectedStreetList(null);
fetchStreetPLz(url, selectedStreedAndNumber).catch(console.error).then(data => {
const list = data || [];
setShowNoResultsError(list.length === 0);
setSelectedStreetList(list);
// if only one result, set it directly, otherwise clear
const [value, label] = list.length === 1 ? [list[0].value, list[0].label] : ['', ''];
setFieldValue(groupKey, value);
setFieldValue(labelKey, label);
if (list.length > 1) {
setFieldValue(localFieldKey, value);
}
setShowLoading(false);
});
}
return () => {
setSelectedStreetList(null);
};
}, [selectedStreedAndNumber, groupKey, labelKey, setFieldValue, getControllerPath, localFieldKey, setShowNoResultsError, setSelectedStreetList]);
const noResultsError = showNoResultsError ? /*#__PURE__*/_react.default.createElement("p", null, addressNotFoundStr) : null;
if (dontShowSelector) {
return null;
}
if (showLoading) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
className: 'sr-only',
"aria-live": "polite"
}, loadingStr), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_SectionSpinner.default, null)));
}
if (showNextBtn) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, noResultsError, /*#__PURE__*/_react.default.createElement("div", {
className: 'checkAddressBtn'
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: onClickCheckAddressBtn,
color: "primary"
}, checkAddressStr)));
}
if (showNoResultsError) {
return noResultsError;
}
if (!selectedStreetList || selectedStreetList.length === 0) {
return null;
}
if (selectedStreetList.length === 1) {
return /*#__PURE__*/_react.default.createElement("p", null, selectedStreetList[0]?.label);
}
// baue eine neues subForm auf
let subFormPLZConfigStrInner = subFormPLZConfigStr.replace('{SELID}', groupKey).replace('{localFieldKey}', localFieldKey).replace(/"{selectedStreetList}"/g, JSON.stringify(selectedStreetList));
if (overwriteLabels) {
Object.keys(overwriteLabels).forEach(key => {
subFormPLZConfigStrInner = subFormPLZConfigStrInner.replaceAll(`"bsrAddressSelector.labels.${key}"`, `"${overwriteLabels[key]}"`);
});
}
const subFormPLZConfig = JSON.parse(subFormPLZConfigStrInner);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_formBuilder.ComponentPopulator, {
formId: `${groupKey}-adselctor-wrapper`,
components: subFormPLZConfig.components
}));
};
// add propTypes
BSRStreetPlzSelector.propTypes = {
config: _propTypes.default.object.isRequired
};
const HigherOrderBSRStreetPlzSelector = (0, _withFieldGroup.default)(BSRStreetPlzSelector);
(0, _formBuilder.registerComponent)('BSRStreetPlzSelector', HigherOrderBSRStreetPlzSelector);
var _default = exports.default = HigherOrderBSRStreetPlzSelector;