@pinuts/bsr-uikit-relaunch
Version:
BSR UI-KIT Relaunch
204 lines (202 loc) • 9.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _formBuilder = require("@pinuts/form-builder");
var _reactI18next = require("react-i18next");
var _FieldLabel = _interopRequireDefault(require("../items/FieldLabel/FieldLabel.jsx"));
var _HTMLParserSanitized = require("../items/HTMLParserSanitized/HTMLParserSanitized.jsx");
var _AlertTriangle = _interopRequireDefault(require("../icons/AlertTriangle.jsx"));
var _Verify = _interopRequireDefault(require("../icons/Verify.jsx"));
var _InfoOutline = _interopRequireDefault(require("../icons/InfoOutline.jsx"));
var _isWindowAvailable = require("../utils/isWindowAvailable.js");
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; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable react/prop-types */ // import Icon from '../items/Icon/Icon.jsx';
const {
useUniqueIds
} = _formBuilder.hooks;
const {
getClassNames,
getAriaAttributes
} = _formBuilder.utils;
const isFieldHiddenByEmptyValues = (value, isInvalid) => [undefined, ''].includes(value) && !isInvalid;
const isHiddenByEmptyValues = (value, isInvalid, components, values, errors) => {
const allComponentsHidden = !components?.length || components.every(child => isHiddenByEmptyValues(values?.[child.config?.key], errors?.[child.config?.key], child.components, values, errors));
return isFieldHiddenByEmptyValues(value, isInvalid) && allComponentsHidden;
};
const getOuterComponent = (FieldComponent, viewMode) => {
if (FieldComponent.formFieldConfig?.isFieldset && !viewMode) {
return FieldSetComponent;
}
return DivComponent;
};
// eslint-disable-next-line react/display-name
const withFieldGroup = FieldComponent => props => {
const [t] = (0, _reactI18next.useTranslation)();
// Doppelpunkte und HTML-Tags zerstören das i18n?
const translateMessage = (0, _react.useCallback)(function (message) {
let i18nOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return message && !message.includes(':') && !message.includes('<') ? t(message, i18nOptions) : message;
}, [t]);
const {
value,
helpText,
infoText,
helpTextPositionTop = false,
classNameHelperText,
label,
readOnly,
disabled,
viewMode,
stepId,
hideEmptyValues,
isInvalid,
isRequired,
validationMessage,
prefix,
withRowCols,
formGroupClassName,
// colClassName,
maxCharacters,
maxCharactersText = 'bsrItems.maxCharacters',
// maxSize,
components,
values,
errors,
meta,
showToprow = true
} = props;
const hookedFieldIds = useUniqueIds(prefix);
const [textLength, setTextLength] = (0, _react.useState)(value?.length || 0);
const [isFocused, setIsFocused] = (0, _react.useState)(false);
const handleFocus = () => setIsFocused(true);
const handleBlur = () => setIsFocused(false);
const fieldIds = props.fieldIds || hookedFieldIds;
const ariaAttributes = props.ariaAttributes || getAriaAttributes({
...props,
fieldIds
});
const OuterComponent = getOuterComponent(FieldComponent, viewMode);
const usedHelpTextPositionTop = (0, _react.useMemo)(() => helpTextPositionTop || maxCharacters && helpText, [helpTextPositionTop, maxCharacters, helpText]);
const showHelpText = (0, _react.useMemo)(() => helpText && (!viewMode || FieldComponent.formFieldConfig?.showHelpTextInViewMode), [helpText, viewMode]);
const showMaxCharacters = maxCharacters && !(readOnly || disabled || viewMode);
const showIsInvalid = isInvalid && !viewMode && validationMessage;
const showIsSuccess = meta?.touched && !isInvalid && (!isRequired || isRequired && value && value.length > 0);
const tooltipRef = (0, _react.useRef)(null);
(0, _react.useEffect)(() => {
const adjustTooltipPosition = () => {
if (tooltipRef.current) {
const tooltipElement = tooltipRef.current;
const rect = tooltipElement.getBoundingClientRect();
tooltipElement.classList.add('adjustRight' || '');
// Adjust vertical position
if (rect.bottom > 200) {
tooltipElement.classList.remove('bottom' || '');
} else {
tooltipElement.classList.add('bottom' || '');
}
}
};
if ((0, _isWindowAvailable.isWindowAvailable)()) {
window.addEventListener('scroll', adjustTooltipPosition);
window.addEventListener('resize', adjustTooltipPosition);
adjustTooltipPosition();
return () => {
window.removeEventListener('scroll', adjustTooltipPosition);
window.removeEventListener('resize', adjustTooltipPosition);
};
}
}, []);
const infoRow = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
className: 'infoRow'
}, showIsSuccess && /*#__PURE__*/_react.default.createElement("div", {
className: 'success'
}, /*#__PURE__*/_react.default.createElement(_Verify.default, {
width: 18,
height: 18
})), infoText && /*#__PURE__*/_react.default.createElement("div", {
className: 'info'
}, /*#__PURE__*/_react.default.createElement(_InfoOutline.default, {
width: 18,
height: 18,
stroke: 'currentColor'
}), /*#__PURE__*/_react.default.createElement("div", {
className: 'tooltip opacity-100',
ref: tooltipRef
}, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, translateMessage(infoText))))), [showIsSuccess, infoText, tooltipRef, translateMessage]);
const helpTextDiv = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement("div", {
id: fieldIds.helpText,
className: getClassNames(['helperText', classNameHelperText])
}, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, translateMessage(helpText)))), [fieldIds.helpText, helpText, classNameHelperText, translateMessage]);
const topRow = (0, _react.useMemo)(() => {
const labelComponent = label ? /*#__PURE__*/_react.default.createElement(_FieldLabel.default, {
id: fieldIds.label,
targetId: fieldIds.fieldId,
isInvalid: isInvalid,
isRequired: isRequired,
isFocused: isFocused,
labelText: label,
isLegend: FieldComponent.formFieldConfig?.labelIsLegend,
viewMode: viewMode,
stepId: stepId
}) : null;
return /*#__PURE__*/_react.default.createElement("div", {
className: 'topRow'
}, labelComponent, infoRow);
}, [infoRow, fieldIds.label, fieldIds.fieldId, isInvalid, isRequired, isFocused, label, viewMode, stepId]);
if (viewMode && hideEmptyValues && isHiddenByEmptyValues(value, isInvalid, components, values, errors)) {
return null;
}
return /*#__PURE__*/_react.default.createElement(OuterComponent, {
className: getClassNames([withRowCols && 'row', 'formInput', isInvalid && 'error', formGroupClassName])
}, showToprow && topRow, showHelpText && usedHelpTextPositionTop && helpTextDiv, (!isInvalid || !viewMode) && /*#__PURE__*/_react.default.createElement(FieldComponent, _extends({}, props, {
setTextLength: setTextLength,
inputProps: {
onBlur: handleBlur,
onFocus: handleFocus,
...props.inputProps,
id: fieldIds.fieldId,
readOnly: props.disabled || props.readOnly,
// TODO: Muss das in den Form-Builder?
disabled: props.disabled || props.readOnly // TODO: Muss das in den Form-Builder?
},
fieldIds: fieldIds,
ariaAttributes: ariaAttributes
})), showHelpText && !usedHelpTextPositionTop && helpTextDiv, showMaxCharacters && /*#__PURE__*/_react.default.createElement("span", {
className: getClassNames(['helperText', 'align-items-start'])
}, (maxCharactersText, {
characters: textLength,
maxCharacters
})), showIsInvalid && /*#__PURE__*/_react.default.createElement("div", {
id: fieldIds.errorMessage,
className: 'errorMessage pt-1',
"aria-live": "polite",
role: "region",
"aria-atomic": "true"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "sr-only"
}, t('bsrItems.errorMsgPrefix')), /*#__PURE__*/_react.default.createElement(_AlertTriangle.default, {
width: 18,
height: 18,
className: 'errorMessageIcon'
}), validationMessage));
};
const FieldSetComponent = _ref => {
let {
children,
...otherProps
} = _ref;
return /*#__PURE__*/_react.default.createElement("fieldset", otherProps, children);
};
const DivComponent = _ref2 => {
let {
children,
...otherProps
} = _ref2;
return /*#__PURE__*/_react.default.createElement("div", otherProps, children);
};
var _default = exports.default = withFieldGroup;