suomifi-ui-components
Version:
Suomi.fi UI component library
193 lines (187 loc) • 7.65 kB
JavaScript
'use strict';
var tslib = require('tslib');
var React = require('react');
var styled = require('styled-components');
var classnames = require('classnames');
var AutoId = require('../utils/AutoId/AutoId.js');
var SuomifiThemeProvider = require('../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../theme/SuomifiTheme/SuomifiTheme.js');
var SpacingProvider = require('../theme/SpacingProvider/SpacingProvider.js');
var spacing = require('../theme/utils/spacing.js');
var LanguageMenuPopover = require('./LanguageMenuPopover/LanguageMenuPopover.js');
require('../../reset/HtmlA/HtmlA.js');
var HtmlButton = 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 aria = require('../../utils/aria/aria.js');
var LanguageMenu_baseStyles = require('./LanguageMenu.baseStyles.js');
var suomifiIcons = require('suomifi-icons');
var common = require('../../utils/common/common.js');
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';
var languageMenuClassNames = {
baseClassName: baseClassName,
button: "".concat(baseClassName, "_button"),
icon: "".concat(baseClassName, "_button_icon"),
menuOpen: "".concat(baseClassName, "_button--open")
};
var BaseLanguageMenu = function BaseLanguageMenu(props) {
var _a;
var className = props.className,
menuClassName = props.menuClassName,
style = props.style,
id = props.id,
forwardedRef = props.forwardedRef,
buttonText = props.buttonText,
children = props.children,
onOpen = props.onOpen,
onClose = props.onClose,
_onBlur = props.onBlur,
ariaLabel = props["aria-label"],
rest = tslib.__rest(props, ["className", "menuClassName", "style", "id", "forwardedRef", "buttonText", "children", "onOpen", "onClose", "onBlur", 'aria-label']);
var _b = spacing.separateMarginProps(rest),
passProps = _b[1];
var openButtonRef = forwardedRef || React.useRef(null);
var _c = React.useState(false),
menuVisible = _c[0],
setMenuVisible = _c[1];
var _d = React.useState(false),
ariaExpanded = _d[0],
setAriaExpanded = _d[1];
var _e = React.useState('none'),
selectFirstItem = _e[0],
setSelectFirstItem = _e[1];
var menuId = "".concat(id, "-menu");
var buttonId = "".concat(id);
var openMenu = function openMenu() {
if (onOpen) {
onOpen();
}
setSelectFirstItem('first');
setMenuVisible(true);
setAriaExpanded(true);
};
var closeMenu = function closeMenu(moveFocus) {
var _a;
if (moveFocus === void 0) {
moveFocus = false;
}
setAriaExpanded(false);
setMenuVisible(false);
if (moveFocus) (_a = openButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
if (onClose) onClose();
};
var handleButtonClick = function handleButtonClick() {
if (menuVisible) {
closeMenu();
} else {
openMenu();
}
};
var handleKeyDown = function handleKeyDown(event) {
if (event.key === 'ArrowUp' && !menuVisible) {
event.preventDefault();
openMenu();
setSelectFirstItem('last');
}
if ((event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') && !menuVisible) {
event.preventDefault();
openMenu();
setSelectFirstItem('first');
}
};
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(baseClassName, className),
style: style
}, /*#__PURE__*/React__default.default.createElement(HtmlButton.HtmlButton, tslib.__assign({
id: buttonId,
"aria-expanded": ariaExpanded,
"aria-controls": menuId,
"aria-haspopup": "menu"
}, aria.getConditionalAriaProp('aria-label', [ariaLabel]), {
forwardedRef: openButtonRef,
className: classnames__default.default(languageMenuClassNames.button, (_a = {}, _a[languageMenuClassNames.menuOpen] = menuVisible, _a)),
onClick: handleButtonClick,
onKeyDown: handleKeyDown,
onBlur: function onBlur(event) {
if (_onBlur) {
_onBlur(event);
}
}
}, passProps), buttonText, menuVisible ? ( /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconChevronUp, {
className: languageMenuClassNames.icon
})) : ( /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconChevronDown, {
className: languageMenuClassNames.icon
}))), /*#__PURE__*/React__default.default.createElement(LanguageMenuPopover.LanguageMenuPopover, {
isOpen: menuVisible,
menuId: menuId,
parentId: id,
openButtonRef: openButtonRef,
onClose: function onClose(moveFocus) {
return closeMenu(moveFocus);
},
children: children,
initialActiveDescendant: selectFirstItem,
className: menuClassName
}));
};
var StyledLanguageMenu = styled.styled(function (_a) {
_a.theme;
_a.globalMargins;
var passProps = tslib.__rest(_a, ["theme", "globalMargins"]);
return /*#__PURE__*/React__default.default.createElement(BaseLanguageMenu, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-1pbq2r2-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = tslib.__rest(_a, ["theme", "globalMargins"]);
var _b = spacing.separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = common.filterDuplicateKeys(globalMargins.languageMenu, marginProps);
return LanguageMenu_baseStyles.baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var LanguageMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
var propId = props.id,
passProps = tslib.__rest(props, ["id"]);
return /*#__PURE__*/React__default.default.createElement(SpacingProvider.SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(AutoId.AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React__default.default.createElement(StyledLanguageMenu, tslib.__assign({
theme: suomifiTheme,
globalMargins: margins,
id: id,
forwardedRef: ref
}, passProps));
});
});
});
});
LanguageMenu.displayName = 'LanguageMenu';
var templateObject_1;
exports.LanguageMenu = LanguageMenu;
exports.languageMenuClassNames = languageMenuClassNames;
//# sourceMappingURL=LanguageMenu.js.map