From f038e2fc0b7debbb3887a91969e250878e1269a8 Mon Sep 17 00:00:00 2001
From: Val Erastov <xibyte@gmail.com>
Date: Fri, 26 Jan 2018 21:04:04 -0800
Subject: [PATCH] hints for menu items

---
 modules/ui/components/Menu.jsx                    |  4 ++--
 web/app/cad/actions/actionButtonBehavior.js       |  4 ++--
 web/app/cad/dom/components/PlugableControlBar.jsx |  2 +-
 web/app/cad/dom/components/PlugableToolbar.jsx    |  2 +-
 web/app/cad/dom/menu/MenuHolder.jsx               | 10 ++++++----
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/modules/ui/components/Menu.jsx b/modules/ui/components/Menu.jsx
index dcb51f2c..74d1210e 100644
--- a/modules/ui/components/Menu.jsx
+++ b/modules/ui/components/Menu.jsx
@@ -23,7 +23,7 @@ export function MenuSeparator() {
 }
 
 
-export function MenuItem({icon, label, hotKey, style, disabled, onClick}, {closeAllUpPopups}) {
+export function MenuItem({icon, label, hotKey, style, disabled, onClick, ...props}, {closeAllUpPopups}) {
 
   if (hotKey) {
     hotKey = hotKey.replace(/\s/g, '');
@@ -36,7 +36,7 @@ export function MenuItem({icon, label, hotKey, style, disabled, onClick}, {close
     onClick();
   };
   return <div className={cx(ls.item, disabled && ls.disabled)} 
-              onMouseDown={e => e.stopPropagation()} style={style} onClick={clickHandler}>
+              onMouseDown={e => e.stopPropagation()} style={style} onClick={clickHandler} {...props}>
     {icon}
     <span className={ls.label}>{label}</span>
     {hotKey && <span className={ls.hotKey}>{hotKey}</span>}
diff --git a/web/app/cad/actions/actionButtonBehavior.js b/web/app/cad/actions/actionButtonBehavior.js
index f40abd49..04fcad6d 100644
--- a/web/app/cad/actions/actionButtonBehavior.js
+++ b/web/app/cad/actions/actionButtonBehavior.js
@@ -1,8 +1,8 @@
 import {TOKENS as ACTION_TOKENS} from "./actionSystemPlugin";
 
-export function mapActionBehavior(actionIdProp) {
+export function mapActionBehavior(actionIdGetter) {
   return ({dispatch}, props) => {
-    const actionId = props[actionIdProp];
+    const actionId = actionIdGetter(props);
     const actionRunToken = ACTION_TOKENS.actionRun(actionId);
 
     let request = {actionId, x:0, y:0};
diff --git a/web/app/cad/dom/components/PlugableControlBar.jsx b/web/app/cad/dom/components/PlugableControlBar.jsx
index e081b210..a6b6367f 100644
--- a/web/app/cad/dom/components/PlugableControlBar.jsx
+++ b/web/app/cad/dom/components/PlugableControlBar.jsx
@@ -52,7 +52,7 @@ const ConnectedActionButton = connect(ActionButton,
             ACTION_TOKENS.actionState(props.actionId)],
   {
     mapProps: (state, props) => Object.assign(DEFAULT_MAPPER(state), props),
-    mapActions: mapActionBehavior('actionId'),
+    mapActions: mapActionBehavior(props => props.actionId),
   }
 );
 
diff --git a/web/app/cad/dom/components/PlugableToolbar.jsx b/web/app/cad/dom/components/PlugableToolbar.jsx
index 4e14c8b2..72282a25 100644
--- a/web/app/cad/dom/components/PlugableToolbar.jsx
+++ b/web/app/cad/dom/components/PlugableToolbar.jsx
@@ -37,7 +37,7 @@ function ActionButton({label, icon96, cssIcons, small, enabled, visible, actionI
 const ConnectedActionButton = connect(ActionButton,  
   ({actionId}) => [ACTION_TOKENS.actionAppearance(actionId), ACTION_TOKENS.actionState(actionId)], {
     mapProps: (state, props) => Object.assign(DEFAULT_MAPPER(state), props),
-    mapActions: mapActionBehavior('actionId'),
+    mapActions: mapActionBehavior(props => props.actionId),
   });
 
 export function createPlugableToolbar(configToken, small) {
diff --git a/web/app/cad/dom/menu/MenuHolder.jsx b/web/app/cad/dom/menu/MenuHolder.jsx
index dde80a01..801c155e 100644
--- a/web/app/cad/dom/menu/MenuHolder.jsx
+++ b/web/app/cad/dom/menu/MenuHolder.jsx
@@ -7,6 +7,7 @@ import Fa from "../../../../../modules/ui/components/Fa";
 import Filler from "../../../../../modules/ui/components/Filler";
 import {TOKENS as KeyboardTokens} from "../../keyboard/keyboardPlugin";
 import {DEFAULT_MAPPER} from "../../../../../modules/ui/connect";
+import {mapActionBehavior} from "../../actions/actionButtonBehavior";
 
 function MenuHolder({menus}) {
   return menus.map(({id, actions}) => <ConnectedActionMenu key={id} menuId={id} actions={actions} />); 
@@ -23,7 +24,7 @@ function ActionMenu({actions, keymap, ...menuState}) {
   </Menu>;
 }
 
-function ActionMenuItem({label, cssIcons, icon32, icon96, onClick, enabled, hotKey, visible}) {
+function ActionMenuItem({label, cssIcons, icon32, icon96, enabled, hotKey, visible, ...props}) {
   if (!visible) {
     return null;
   }
@@ -45,7 +46,7 @@ function ActionMenuItem({label, cssIcons, icon32, icon96, onClick, enabled, hotK
     icon = <Fa fw fa={cssIcons} />;    
   }
   
-  return <MenuItem {...{label, icon,  style, disabled: !enabled, hotKey, onClick}} />;
+  return <MenuItem {...{label, icon,  style, disabled: !enabled, hotKey, ...props}} />;
 }
 
 const ConnectedActionMenu = connect(ActionMenu, 
@@ -58,9 +59,10 @@ const ConnectedActionMenu = connect(ActionMenu,
 let ConnectedMenuItem = connect(ActionMenuItem, 
   ({actionId}) => [ACTION_TOKENS.actionState(actionId), ACTION_TOKENS.actionAppearance(actionId)], 
   {
-    mapActions: ({dispatch}, {actionId}) => ({
-      onClick: () => dispatch(ACTION_TOKENS.actionRun(actionId))
+    mapProps: ([{enabled, visible}, {label, cssIcons, icon32, icon96}]) => ({
+      enabled, visible, label, cssIcons, icon32, icon96
     }),
+    mapActions: mapActionBehavior(props => props.actionId),
     mapSelfProps: ({hotKey}) => ({hotKey})
   }
 );