hints for menu items

This commit is contained in:
Val Erastov 2018-01-26 21:04:04 -08:00
parent 64fee05995
commit f038e2fc0b
5 changed files with 12 additions and 10 deletions

View file

@ -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>}

View file

@ -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};

View file

@ -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),
}
);

View file

@ -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) {

View file

@ -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})
}
);