@navinc/base-react-components
Version:
Nav's Pattern Library
54 lines • 2.59 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.KebabMenu = exports.KebabItemIcon = exports.KebabItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_onclickoutside_1 = __importDefault(require("react-onclickoutside"));
const styled_components_1 = __importDefault(require("styled-components"));
const copy_js_1 = __importDefault(require("../../../copy.js"));
const StyledKebabMenu = styled_components_1.default.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 rgba(0, 0, 0, 0.14), 0 2px 12px 4px rgba(0, 0, 0, 0.12), 0 4px 4px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
`;
StyledKebabMenu.displayName = 'KebabMenu';
exports.KebabItem = styled_components_1.default.div.withConfig({ displayName: "brc-sc-KebabItem", componentId: "brc-sc-10io1tb" }) `
display: flex;
flex-flow: row nowrap;
cursor: pointer;
`;
exports.KebabItem.displayName = 'KebabItem';
exports.KebabItemIcon = styled_components_1.default.img.withConfig({ displayName: "brc-sc-KebabItemIcon", componentId: "brc-sc-160yjc8" }) `
width: 16px;
height: 16px;
margin-right: 8px;
align-self: center;
vertical-align: middle;
`;
exports.KebabItemIcon.displayName = 'KebabItemIcon';
class KebabMenu extends react_1.Component {
handleClickOutside(event) {
this.props.toggleKebabMenu(event);
}
render() {
const { onHide, kebabMenuItems = [], togglehideCard } = this.props;
return ((0, jsx_runtime_1.jsx)(StyledKebabMenu, Object.assign({ "data-testid": "deprecated-card:kebab-menu" }, { children: kebabMenuItems.map(({ label, icon, onClick }, index) => ((0, jsx_runtime_1.jsxs)(exports.KebabItem, Object.assign({ onClick: (event) => {
if (label === 'Hide') {
togglehideCard(event);
onHide();
}
onClick();
} }, { children: [(0, jsx_runtime_1.jsx)(exports.KebabItemIcon, { src: icon }), (0, jsx_runtime_1.jsx)(copy_js_1.default, { children: label })] }), index))) })));
}
}
exports.KebabMenu = KebabMenu;
exports.default = (0, react_onclickoutside_1.default)(KebabMenu);
//# sourceMappingURL=kebab-menu.js.map