Allow className property in MenuItem and extend it instead of overrid…

…ing (#294) * fix: linter errors and warnings * feat: extend MenuItem className correctly Closes #293
vkbansal · Sep 3, 2019 · 2874903 · 2874903
1 parent 22d299e
commit 2874903
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 27 deletions.
diff --git a/src/ContextMenu.js b/src/ContextMenu.js
@@ -66,8 +66,8 @@ export default class ContextMenu extends AbstractMenu {
                 const { x, y } = this.state;
 
                 const { top, left } = this.props.rtl
-                                    ? this.getRTLMenuPosition(x, y)
-                                    : this.getMenuPosition(x, y);
+                    ? this.getRTLMenuPosition(x, y)
+                    : this.getMenuPosition(x, y);
 
                 wrapper(() => {
                     if (!this.menu) return;
@@ -229,9 +229,9 @@ export default class ContextMenu extends AbstractMenu {
         const { children, className, style } = this.props;
         const { isVisible } = this.state;
         const inlineStyle = assign(
-          {},
-          style,
-          { position: 'fixed', opacity: 0, pointerEvents: 'none' }
+            {},
+            style,
+            { position: 'fixed', opacity: 0, pointerEvents: 'none' }
         );
         const menuClassnames = cx(cssClasses.menu, className, {
             [cssClasses.menuVisible]: isVisible

diff --git a/src/MenuItem.js b/src/MenuItem.js
@@ -8,29 +8,31 @@ import { callIfExists, cssClasses, store } from './helpers';
 
 export default class MenuItem extends Component {
     static propTypes = {
-        children: PropTypes.node,
         attributes: PropTypes.object,
+        children: PropTypes.node,
+        className: PropTypes.string,
         data: PropTypes.object,
         disabled: PropTypes.bool,
         divider: PropTypes.bool,
-        preventClose: PropTypes.bool,
         onClick: PropTypes.func,
-        selected: PropTypes.bool,
+        onMouseLeave: PropTypes.func,
         onMouseMove: PropTypes.func,
-        onMouseLeave: PropTypes.func
+        preventClose: PropTypes.bool,
+        selected: PropTypes.bool
     };
 
     static defaultProps = {
-        disabled: false,
+        attributes: {},
+        children: null,
+        className: '',
         data: {},
+        disabled: false,
         divider: false,
-        attributes: {},
-        preventClose: false,
         onClick() { return null; },
-        children: null,
-        selected: false,
         onMouseMove: () => null,
-        onMouseLeave: () => null
+        onMouseLeave: () => null,
+        preventClose: false,
+        selected: false
     };
 
     handleClick = (event) => {
@@ -53,12 +55,25 @@ export default class MenuItem extends Component {
     }
 
     render() {
-        const { disabled, divider, children, attributes, selected } = this.props;
-        const menuItemClassNames = cx(cssClasses.menuItem, attributes.className, {
-            [cx(cssClasses.menuItemDisabled, attributes.disabledClassName)]: disabled,
-            [cx(cssClasses.menuItemDivider, attributes.dividerClassName)]: divider,
-            [cx(cssClasses.menuItemSelected, attributes.selectedClassName)]: selected
-        });
+        const {
+            attributes,
+            children,
+            className,
+            disabled,
+            divider,
+            selected
+        } = this.props;
+
+        const menuItemClassNames = cx(
+            className,
+            cssClasses.menuItem,
+            attributes.className,
+            {
+                [cx(cssClasses.menuItemDisabled, attributes.disabledClassName)]: disabled,
+                [cx(cssClasses.menuItemDivider, attributes.dividerClassName)]: divider,
+                [cx(cssClasses.menuItemSelected, attributes.selectedClassName)]: selected
+            }
+        );
 
         return (
             <div

diff --git a/src/SubMenu.js b/src/SubMenu.js
@@ -69,8 +69,8 @@ export default class SubMenu extends AbstractMenu {
             const wrapper = window.requestAnimationFrame || setTimeout;
             wrapper(() => {
                 const styles = this.props.rtl
-                                ? this.getRTLMenuPosition()
-                                : this.getMenuPosition();
+                    ? this.getRTLMenuPosition()
+                    : this.getMenuPosition();
 
                 this.subMenu.style.removeProperty('top');
                 this.subMenu.style.removeProperty('bottom');

diff --git a/src/actions.js b/src/actions.js
@@ -7,8 +7,8 @@ export const MENU_HIDE = 'REACT_CONTEXTMENU_HIDE';
 
 
 export function dispatchGlobalEvent(eventName, opts, target = window) {
-  // Compatibale with IE
-  // @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work
+    // Compatibale with IE
+    // @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work
     let event;
 
     if (typeof window.CustomEvent === 'function') {

diff --git a/src/connectMenu.js b/src/connectMenu.js
@@ -10,7 +10,7 @@ const ignoredTriggerProps = [...Object.keys(ContextMenuTrigger.propTypes), 'chil
 export default function (menuId) {
     // expect menu component to connect as inner parameter
     // <Child/> is presumably a wrapper of <ContextMenu/>
-    return function (Child) {
+    return function connect(Child) {
         // return wrapper for <Child/> that forwards the ContextMenuTrigger's additional props
         return class ConnectMenu extends Component {
             constructor(props) {

diff --git a/src/helpers.js b/src/helpers.js
@@ -25,5 +25,5 @@ export const cssClasses = {
 export const store = {};
 
 export const canUseDOM = Boolean(
-  typeof window !== 'undefined' && window.document && window.document.createElement
+    typeof window !== 'undefined' && window.document && window.document.createElement
 );
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -23,6 +23,7 @@ declare module "react-contextmenu" {
 
     interface MenuItemProps {
         attributes?: React.HTMLAttributes<HTMLDivElement>,
+        className?: string;
         data?: Object,
         disabled?: boolean,
         divider?: boolean,

diff --git a/tests/MenuItem.test.js b/tests/MenuItem.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import MenuItem from '../src/MenuItem';
+
+describe('MenuItem tests', () => {
+    test('extends className correctly', () => {
+        const className = 'CLASSNAME_PROP';
+        const attributes = {
+            className: 'CLASSNAME_ATTRIBUTE'
+        };
+
+        const wrapper = shallow(
+            <MenuItem className={className} attributes={attributes} />
+        );
+
+        expect(wrapper.hasClass(className)).toBe(true);
+        expect(wrapper.hasClass(attributes.className)).toBe(true);
+    });
+});