@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
143 lines (142 loc) • 7.38 kB
JavaScript
"use strict";
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _filterValidProps = require("../../shared/helpers/filterValidProps.js");
var _utils = require("../flex/utils.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function FormLabel(localProps) {
const context = _react.default.useContext(_Context.default);
const props = (0, _componentHelper.extendPropsWithContext)(localProps, null, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, (0, _filterValidProps.pickFormElementProps)(context === null || context === void 0 ? void 0 : context.formElement), context === null || context === void 0 ? void 0 : context.FormLabel);
const nestedContent = (props === null || props === void 0 ? void 0 : props.text) || (props === null || props === void 0 ? void 0 : props.children);
const nestedNode = (nestedContent === null || nestedContent === void 0 ? void 0 : nestedContent['type']) === FormLabel ? nestedContent === null || nestedContent === void 0 ? void 0 : nestedContent['type'] : null;
const nestedElement = nestedNode ? () => _react.default.createElement(nestedNode, nestedContent['props']) : null;
const {
forId,
text,
srOnly,
vertical,
labelDirection,
size,
skeleton,
element: Element = nestedElement || 'label',
ref: refProp,
className,
children,
...attributes
} = props;
const content = text || children;
const isInteractive = Boolean(!props.disabled && !srOnly && (typeof props.onClick === 'function' || forId));
const params = (0, _SpacingUtils.applySpacing)(content ? {
right: 'small',
...props
} : (0, _utils.omitSpacingProps)(props), {
className: (0, _clsx.default)('dnb-form-label', (vertical || vertical !== false && labelDirection !== 'horizontal') && `dnb-form-label--vertical`, (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, context), className, srOnly && 'dnb-sr-only', size && `dnb-h--${size}`, isInteractive && 'dnb-form-label--interactive'),
htmlFor: forId,
...attributes
});
const labelRef = (0, _react.useRef)(null);
const combinedRef = (0, _react.useCallback)(node => {
labelRef.current = node;
if (typeof refProp === 'function') {
refProp(node);
} else if (refProp) {
;
refProp.current = node;
}
}, [refProp]);
if (!nestedNode) {
params['ref'] = combinedRef;
}
(0, _react.useEffect)(() => {
if (!forId) {
return undefined;
}
const forElem = document.querySelector(`#${forId}`);
const target = (forElem === null || forElem === void 0 ? void 0 : forElem.closest('.dnb-input__border--root')) || (forElem === null || forElem === void 0 ? void 0 : forElem.closest('.dnb-input__border'));
if (target && labelRef.current) {
const elem = labelRef.current;
const buttonEnter = () => {
target.classList.add('no-hover');
target.classList.remove('hover');
};
const buttonLeave = () => {
target.classList.remove('no-hover');
enter();
};
const enter = () => {
var _button$addEventListe, _button$addEventListe2;
target.classList.add('hover');
const button = elem.querySelector('button');
button === null || button === void 0 || (_button$addEventListe = button.addEventListener) === null || _button$addEventListe === void 0 || _button$addEventListe.call(button, 'mouseenter', buttonEnter, {
once: true
});
button === null || button === void 0 || (_button$addEventListe2 = button.addEventListener) === null || _button$addEventListe2 === void 0 || _button$addEventListe2.call(button, 'mouseleave', buttonLeave, {
once: true
});
const interactiveElements = elem.querySelectorAll('[role="button"]:not(button)');
interactiveElements.forEach(interactiveElem => {
interactiveElem.addEventListener('mouseenter', buttonEnter, {
once: true
});
interactiveElem.addEventListener('mouseleave', buttonLeave, {
once: true
});
});
};
const leave = () => {
var _button$removeEventLi;
target.classList.remove('hover');
const button = elem.querySelector('button');
button === null || button === void 0 || (_button$removeEventLi = button.removeEventListener) === null || _button$removeEventLi === void 0 || _button$removeEventLi.call(button, 'mouseenter', buttonEnter);
const interactiveElements = elem.querySelectorAll('[role="button"]:not(button)');
interactiveElements.forEach(interactiveElem => {
interactiveElem.removeEventListener('mouseenter', buttonEnter);
interactiveElem.removeEventListener('mouseleave', buttonLeave);
});
};
elem.addEventListener('mouseenter', enter);
elem.addEventListener('mouseleave', leave);
return () => {
if (elem) {
var _button$removeEventLi2;
elem.removeEventListener('mouseenter', enter);
elem.removeEventListener('mouseleave', leave);
const button = elem.querySelector('button');
button === null || button === void 0 || (_button$removeEventLi2 = button.removeEventListener) === null || _button$removeEventLi2 === void 0 || _button$removeEventLi2.call(button, 'mouseleave', buttonLeave);
const interactiveElements = elem.querySelectorAll('[role="button"]:not(button)');
interactiveElements.forEach(interactiveElem => {
interactiveElem.removeEventListener('mouseenter', buttonEnter);
interactiveElem.removeEventListener('mouseleave', buttonLeave);
});
}
};
}
return undefined;
}, [forId, labelRef]);
(0, _SkeletonHelper.skeletonDOMAttributes)(params, skeleton, context);
(0, _componentHelper.validateDOMAttributes)(localProps, params);
return (0, _jsxRuntime.jsx)(Element, {
...params,
children: content
});
}
(0, _withComponentMarkers.default)(FormLabel, {
_formElement: true,
_supportsSpacingProps: true
});
var _default = exports.default = FormLabel;
//# sourceMappingURL=FormLabel.js.map