@navinc/base-react-components
Version:
Nav's Pattern Library
50 lines • 1.96 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component } from 'react';
import onClickOutside from 'react-onclickoutside';
import styled from 'styled-components';
import { Copy } from '../../../copy.js';
const StyledKebabMenu = styled.div.withConfig({ displayName: "brc-sc-StyledKebabMenu", componentId: "brc-sc-r1m12g" }) `
position: absolute;
right: 16px;
top: 48px;
padding: 8px 16px;
background-color: ${({ theme }) => theme.neutral100};
border-radius: 4px;
box-shadow:
0 6px 8px 2px rgb(0 0 0 / 14%),
0 2px 12px 4px rgb(0 0 0 / 12%),
0 4px 4px 0 rgb(0 0 0 / 20%);
cursor: pointer;
`;
StyledKebabMenu.displayName = 'KebabMenu';
const KebabItem = styled.div.withConfig({ displayName: "brc-sc-KebabItem", componentId: "brc-sc-10io1tb" }) `
display: flex;
flex-flow: row nowrap;
cursor: pointer;
`;
KebabItem.displayName = 'KebabItem';
const KebabItemIcon = styled.img.withConfig({ displayName: "brc-sc-KebabItemIcon", componentId: "brc-sc-160yjc8" }) `
width: 16px;
height: 16px;
margin-right: 8px;
align-self: center;
vertical-align: middle;
`;
KebabItemIcon.displayName = 'KebabItemIcon';
class _KebabMenu extends Component {
handleClickOutside(event) {
this.props.toggleKebabMenu(event);
}
render() {
const { onHide, kebabMenuItems = [], togglehideCard } = this.props;
return (_jsx(StyledKebabMenu, { "data-testid": "deprecated-card:kebab-menu", children: kebabMenuItems.map(({ label, icon, onClick }, index) => (_jsxs(KebabItem, { onClick: (event) => {
if (label === 'Hide') {
togglehideCard(event);
onHide();
}
onClick();
}, children: [_jsx(KebabItemIcon, { src: icon }), _jsx(Copy, { children: label })] }, index))) }));
}
}
export const KebabMenu = onClickOutside(_KebabMenu);
//# sourceMappingURL=kebab-menu.js.map