suomifi-ui-components
Version:
Suomi.fi UI component library
105 lines (102 loc) • 4.41 kB
JavaScript
import { __makeTemplateObject, __rest, __assign } from 'tslib';
import React from 'react';
import classnames from 'classnames';
import '../../../reset/HtmlA/HtmlA.js';
import { HtmlButton } from '../../../reset/HtmlButton/HtmlButton.js';
import '../../../reset/HtmlDiv/HtmlDiv.js';
import '../../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../../reset/HtmlH/HtmlH.js';
import '../../../reset/HtmlInput/HtmlInput.js';
import '../../../reset/HtmlLabel/HtmlLabel.js';
import '../../../reset/HtmlLegend/HtmlLegend.js';
import '../../../reset/HtmlLi/HtmlLi.js';
import '../../../reset/HtmlNav/HtmlNav.js';
import '../../../reset/HtmlOl/HtmlOl.js';
import '../../../reset/HtmlSpan/HtmlSpan.js';
import '../../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../../reset/HtmlUl/HtmlUl.js';
import '../../../reset/HtmlTable/HtmlTable.js';
import '../../../reset/HtmlTable/HtmlTableCaption.js';
import '../../../reset/HtmlTable/HtmlTableHeader.js';
import '../../../reset/HtmlTable/HtmlTableRow.js';
import '../../../reset/HtmlTable/HtmlTableBody.js';
import '../../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../../reset/HtmlTable/HtmlTableCell.js';
import { SuomifiThemeConsumer } from '../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../theme/SuomifiTheme/SuomifiTheme.js';
import '../../theme/SpacingProvider/SpacingProvider.js';
import { baseStyles } from './ActionMenuItem.baseStyles.js';
import { styled } from 'styled-components';
import { ActionMenuConsumer } from '../ActionMenuPopover/ActionMenuPopover.js';
var baseClassName = 'fi-action-menu-item';
var disabledClassName = "".concat(baseClassName, "--disabled");
var selectedClassName = "".concat(baseClassName, "--selected");
var BaseActionMenuItem = function BaseActionMenuItem(props) {
var _a;
var className = props.className,
children = props.children,
disabled = props.disabled,
consumer = props.consumer,
_b = props.itemIndex,
itemIndex = _b === void 0 ? -1 : _b,
icon = props.icon,
_onClick = props.onClick;
props.theme;
var passProps = __rest(props, ["className", "children", "disabled", "consumer", "itemIndex", "icon", "onClick", "theme"]);
var hasKeyboardFocus = consumer.activeDescendantIndex === itemIndex;
var listElementRef = React.useRef(null);
React.useLayoutEffect(function () {
var _a;
if (hasKeyboardFocus) {
(_a = listElementRef.current) === null || _a === void 0 ? void 0 : _a.focus({
preventScroll: false
});
}
}, [consumer.activeDescendantIndex]);
return /*#__PURE__*/React.createElement(HtmlButton, __assign({
forwardedRef: listElementRef,
className: classnames(baseClassName, className, (_a = {}, _a[selectedClassName] = itemIndex === consumer.activeDescendantIndex, _a[disabledClassName] = disabled, _a)),
onClick: function onClick(event) {
if (!disabled) {
event.preventDefault();
if (_onClick) _onClick(event);
consumer.onItemClick(itemIndex);
}
},
onMouseOver: function onMouseOver() {
consumer.onItemMouseOver(itemIndex);
},
onKeyDown: function onKeyDown(event) {
var _a;
if (!disabled && (event.key === 'Enter' || event.key === ' ')) {
event.preventDefault();
(_a = listElementRef.current) === null || _a === void 0 ? void 0 : _a.click();
}
},
tabIndex: hasKeyboardFocus ? 0 : -1,
id: "".concat(consumer.parentId, "-list-item-").concat(itemIndex),
role: "menuitem",
"aria-disabled": disabled
}, passProps), icon, children);
};
var StyledActionMenuItem = styled(BaseActionMenuItem).withConfig({
componentId: "sc-kloc8-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme;
return baseStyles(theme);
});
var ActionMenuItem = function ActionMenuItem(props) {
return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React.createElement(ActionMenuConsumer, null, function (consumer) {
return /*#__PURE__*/React.createElement(StyledActionMenuItem, __assign({
theme: suomifiTheme,
consumer: consumer
}, props));
});
});
};
ActionMenuItem.displayName = 'ActionMenuItem';
var templateObject_1;
export { ActionMenuItem };
//# sourceMappingURL=ActionMenuItem.js.map