suomifi-ui-components
Version:
Suomi.fi UI component library
285 lines (279 loc) • 10.9 kB
JavaScript
;
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var common = require('../../../utils/common/common.js');
var SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
require('../../theme/SpacingProvider/SpacingProvider.js');
require('../../../reset/HtmlA/HtmlA.js');
require('../../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../../reset/HtmlDiv/HtmlDiv.js');
require('../../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../../reset/HtmlH/HtmlH.js');
require('../../../reset/HtmlInput/HtmlInput.js');
require('../../../reset/HtmlLabel/HtmlLabel.js');
require('../../../reset/HtmlLegend/HtmlLegend.js');
require('../../../reset/HtmlLi/HtmlLi.js');
require('../../../reset/HtmlNav/HtmlNav.js');
require('../../../reset/HtmlOl/HtmlOl.js');
require('../../../reset/HtmlSpan/HtmlSpan.js');
require('../../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../../reset/HtmlUl/HtmlUl.js');
require('../../../reset/HtmlTable/HtmlTable.js');
require('../../../reset/HtmlTable/HtmlTableCaption.js');
require('../../../reset/HtmlTable/HtmlTableHeader.js');
require('../../../reset/HtmlTable/HtmlTableRow.js');
require('../../../reset/HtmlTable/HtmlTableBody.js');
require('../../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../../reset/HtmlTable/HtmlTableCell.js');
var logger = require('../../../utils/log/logger.js');
var LanguageMenuPopover_baseStyles = require('./LanguageMenuPopover.baseStyles.js');
var reactDom = require('@floating-ui/react-dom');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var baseClassName = 'fi-language-menu-popover';
var languageMenuPopoverClassNames = {
baseClassName: baseClassName,
hidden: "".concat(baseClassName, "--hidden"),
list: "".concat(baseClassName, "_list"),
floatinguiArrow: "".concat(baseClassName, "_floatingui-arrow")
};
var defaultProviderValue = {
onItemClick: function onItemClick() {
return null;
},
onItemMouseOver: function onItemMouseOver() {
return null;
},
activeDescendantIndex: -1,
parentId: ''
};
var _a = /*#__PURE__*/React__default.default.createContext(defaultProviderValue),
LanguageMenuProvider = _a.Provider,
LanguageMenuConsumer = _a.Consumer;
var scrollItemList = function scrollItemList(elementId, wrapperRef) {
var _a, _b;
var wrapperOffsetPx = 10;
if (wrapperRef !== null && wrapperRef.current !== null) {
var elementOffsetTop = ((_a = document.getElementById(elementId)) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0;
var elementOffsetHeight = ((_b = document.getElementById(elementId)) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
if (elementOffsetTop < wrapperRef.current.scrollTop) {
wrapperRef.current.scrollTop = elementOffsetTop - wrapperOffsetPx;
} else {
var offsetBottom = elementOffsetTop + elementOffsetHeight;
var scrollBottom = wrapperRef.current.scrollTop + wrapperRef.current.offsetHeight;
if (offsetBottom > scrollBottom) {
wrapperRef.current.scrollTop = offsetBottom - wrapperRef.current.offsetHeight + wrapperOffsetPx;
}
}
}
};
var BaseLanguageMenuPopover = function BaseLanguageMenuPopover(props) {
var _a;
var _b, _c, _d;
var openButtonRef = props.openButtonRef,
onClose = props.onClose,
className = props.className,
children = props.children,
menuId = props.menuId,
parentId = props.parentId,
initialActiveDescendant = props.initialActiveDescendant,
isOpen = props.isOpen;
var _e = React.useState(null),
mountNode = _e[0],
setMountNode = _e[1];
var _f = React.useState(null),
dialogElement = _f[0],
setDialogElement = _f[1];
var _g = React.useState(-1),
activeChild = _g[0],
setActiveChild = _g[1];
var _h = React.useState(false),
preventScroll = _h[0],
setPreventScroll = _h[1];
var menuRef = React.useRef(null);
var arrowRef = React.useRef(null);
common.useEnhancedEffect(function () {
setMountNode(window.document.body);
}, []);
React.useEffect(function () {
if (isOpen) {
document.addEventListener('keydown', globalKeyDownHandler, {
capture: true
});
if (!preventScroll) {
scrollItemList("".concat(parentId, "-list-item-").concat(activeChild), menuRef);
}
return function () {
document.removeEventListener('keydown', globalKeyDownHandler, {
capture: true
});
};
}
}, [activeChild]);
React.useEffect(function () {
if (isOpen) {
document.addEventListener('click', globalClickHandler, {
capture: true
});
return function () {
document.removeEventListener('click', globalClickHandler, {
capture: true
});
};
}
}, [isOpen]);
React.useEffect(function () {
var isMounted = true;
setTimeout(function () {
if (isMounted) {
if (initialActiveDescendant === 'first') {
setActiveChild(0);
} else if (initialActiveDescendant === 'last') {
setActiveChild(React__default.default.Children.count(children) - 1);
}
}
}, 0);
return function () {
setActiveChild(-1);
isMounted = false;
};
}, [isOpen]);
var globalClickHandler = function globalClickHandler(nativeEvent) {
var _a, _b;
if (!((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(nativeEvent.target)) && !((_b = openButtonRef.current) === null || _b === void 0 ? void 0 : _b.contains(nativeEvent.target))) {
handleClose(false);
}
};
var globalKeyDownHandler = function globalKeyDownHandler(event) {
setPreventScroll(false);
if (event.key === 'Escape') {
handleClose(true);
event.preventDefault();
}
if (event.key === 'Tab') {
handleClose(true);
}
var popoverItemsLength = React__default.default.Children.count(children);
var getNextIndex = function getNextIndex() {
return activeChild < popoverItemsLength - 1 ? activeChild + 1 : 0;
};
var getPreviousIndex = function getPreviousIndex() {
return activeChild !== 0 ? activeChild - 1 : popoverItemsLength - 1;
};
if (event.key === 'ArrowDown') {
event.preventDefault();
setActiveChild(getNextIndex());
}
if (event.key === 'ArrowUp') {
event.preventDefault();
setActiveChild(getPreviousIndex());
}
};
var _j = reactDom.useFloating({
open: isOpen,
middleware: [reactDom.offset(10), reactDom.flip(), reactDom.shift(), reactDom.arrow({
element: arrowRef
})],
whileElementsMounted: reactDom.autoUpdate,
placement: 'bottom-end'
}),
floatingUiRefs = _j.refs,
floatingStyles = _j.floatingStyles,
middlewareData = _j.middlewareData;
React.useEffect(function () {
if (openButtonRef.current) {
floatingUiRefs.setReference(openButtonRef.current);
}
}, [floatingUiRefs, openButtonRef]);
React.useEffect(function () {
if (dialogElement) {
floatingUiRefs.setFloating(dialogElement);
}
}, [floatingUiRefs, dialogElement]);
var handleClose = function handleClose(moveFocus) {
onClose(moveFocus);
};
if (React__default.default.Children.count(children) < 1) {
logger.getLogger().warn("LanguageMenu ".concat(menuId, " does not contain items"));
return null;
}
var itemMouseOver = function itemMouseOver(value) {
setActiveChild(value);
};
if (!mountNode) {
return null;
}
var menuItems = function menuItems(childs) {
return React__default.default.Children.map(childs, function (child, index) {
if ( /*#__PURE__*/React__default.default.isValidElement(child)) {
return /*#__PURE__*/React__default.default.cloneElement(child, {
itemIndex: index
});
}
return child;
});
};
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, {
className: classnames__default.default(className, baseClassName, (_a = {}, _a[languageMenuPopoverClassNames.hidden] = !isOpen, _a)),
style: floatingStyles,
forwardedRef: setDialogElement
}, /*#__PURE__*/React__default.default.createElement(LanguageMenuProvider, {
value: {
onItemClick: function onItemClick() {
return handleClose(true);
},
onItemMouseOver: function onItemMouseOver(itemIndex) {
setPreventScroll(true);
itemMouseOver(itemIndex);
},
activeDescendantIndex: activeChild,
parentId: parentId || ''
}
}, /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, {
role: "menu",
id: menuId,
tabIndex: -1,
className: languageMenuPopoverClassNames.list,
forwardedRef: menuRef
}, menuItems(children))), /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDivWithRef, {
forwardedRef: arrowRef,
className: languageMenuPopoverClassNames.floatinguiArrow,
"data-floatingui-placement": (_b = middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.offset) === null || _b === void 0 ? void 0 : _b.placement,
"aria-hidden": true,
style: {
position: 'absolute',
left: (_c = middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.x,
top: (_d = middlewareData.arrow) === null || _d === void 0 ? void 0 : _d.y
}
}));
};
var StyledLanguageMenuPopover = styled.styled(function (_a) {
_a.theme;
var passProps = tslib.__rest(_a, ["theme"]);
return /*#__PURE__*/React__default.default.createElement(BaseLanguageMenuPopover, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-1xc0eyf-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme;
return LanguageMenuPopover_baseStyles.baseStyles(theme);
});
var LanguageMenuPopover = function LanguageMenuPopover(props) {
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(StyledLanguageMenuPopover, tslib.__assign({
theme: suomifiTheme
}, props));
});
};
LanguageMenuPopover.displayName = 'LanguageMenuPopover';
var templateObject_1;
exports.BaseLanguageMenuPopover = BaseLanguageMenuPopover;
exports.LanguageMenuConsumer = LanguageMenuConsumer;
exports.LanguageMenuPopover = LanguageMenuPopover;
exports.LanguageMenuProvider = LanguageMenuProvider;
exports.languageMenuPopoverClassNames = languageMenuPopoverClassNames;
//# sourceMappingURL=LanguageMenuPopover.js.map