@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
100 lines • 3.87 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["selector", "text", "children", "className", "focusDelay"],
_excluded2 = ["selector", "className"];
import React from 'react';
import classnames from 'classnames';
import Button from '../button/Button';
import HeightAnimation from '../height-animation/HeightAnimation';
import { applyPageFocus } from '../../shared/helpers';
const SkipContent = localProps => {
const {
selector,
text,
children,
className,
focusDelay = 400
} = localProps,
props = _objectWithoutProperties(localProps, _excluded);
React.useEffect(() => () => {
clearTimeout(timeout.current);
}, []);
const [visible, setVisible] = React.useState(false);
const [keepReturnActive, setKeepReturnActive] = React.useState(false);
const ref = React.useRef();
const timeout = React.useRef();
const classes = classnames('dnb-skip-content', className, visible && 'dnb-skip-content--visible', keepReturnActive && 'dnb-skip-content__return--active');
const returnSelector = selector.replace(/^(\.|#)/, '');
const returnId = `${returnSelector}--alias`;
return React.createElement("span", {
className: classes,
ref: ref,
onFocus: handleFocus,
id: returnId
}, React.createElement(React.Fragment, null, !visible && React.createElement("button", {
className: "dnb-sr-only",
onKeyUp: handleKeyUp
}, text || children), React.createElement(HeightAnimation, {
open: visible
}, React.createElement(Button, _extends({
wrap: true,
variant: "secondary",
onClick: handleClick,
onBlur: handleBlur
}, props), text || children))));
function handleBlur() {
setVisible(false);
}
function handleClick() {
var _element$scrollIntoVi;
setVisible(false);
const element = document.querySelector(selector);
element === null || element === void 0 ? void 0 : (_element$scrollIntoVi = element.scrollIntoView) === null || _element$scrollIntoVi === void 0 ? void 0 : _element$scrollIntoVi.call(element, {
behavior: 'smooth'
});
element === null || element === void 0 ? void 0 : element.classList.add('dnb-skip-content__focus');
timeout.current = setTimeout(() => {
var _document$querySelect;
applyPageFocus(selector);
(_document$querySelect = document.querySelector(`#${returnSelector}--alias--alias`)) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.classList.add('dnb-skip-content__return--active');
}, focusDelay);
}
function handleFocus(e) {
if (e.target.tagName === 'SPAN') {
setFocus();
}
}
function handleKeyUp(e) {
if (e.key === 'Tab') {
setFocus();
}
}
function setFocus() {
var _ref$current2;
setVisible(true);
window.requestAnimationFrame(() => {
var _ref$current;
const element = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('.dnb-button');
element === null || element === void 0 ? void 0 : element.focus();
});
if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.getAttribute('class').includes('__return--active')) {
setKeepReturnActive(true);
}
}
};
const SkipContentReturn = localProps => {
const {
selector,
className
} = localProps,
props = _objectWithoutProperties(localProps, _excluded2);
const classes = classnames('dnb-skip-content__return', className);
return React.createElement(SkipContent, _extends({
selector: `${selector}--alias`,
className: classes
}, props));
};
SkipContent.Return = SkipContentReturn;
SkipContent._supportsSpacingProps = true;
export default SkipContent;
//# sourceMappingURL=SkipContent.js.map