Menu Input Handling

Last Updated on February 28, 2018 by Neil Murray

Function

Visual.clickMenu(rowInfo, menu)

Parameters

  • rowInfo (object) – current node is rowInfo.node passed from InputItemMenu
  • menu (object) – clicked menu contains name as menu name and index as clicked menu value plus key, title, items and types

Component

rc-menu | GitHub | Demo – React menu component

Method

Clicking menu item will trigger Visual.clickMenu() function to update or save current rowInfo.

On init, rowInfo is passed down from Visual to child component. Visual menu is placed in the FormItems child component. While clicking menu item, rowInfo is sent back to Visual. Then Visual will know what rowInfo is being processed.

The function:

  • receives rowInfo and
  • looks for current key (i.e. cf7sItems prop) in rowInfo.node
  • creates it if it does not exist.

then:

  • reads the array value of the key
  • finds menu item index array
  • adds it into array if does not exist – rc-menu item (selected)
  • or delete it if already added in the array – rc-menu item (deselected)

After updating the value, this function updates global rowInfo state.

Any functions existing in Visual can be used inside the Visual.clickMenu() function.

Options

rc-menu has multiple prop options that enable multi selection of menu items.

const testSingle = () => {
	let menu = {};
	menu.key = 'cf7sSingle';
	menu.types = ['list-ol', 'list-li'];
	menu.title = 'Single Test';
	menu.items = [
		{ value: 'one',		label: 'One'}, 
		{ value: 'two',		label: 'Two'}, 
		{ value: 'three',	label: 'Three'},
		{ value: 'four',	label: 'Four'},
	];
	menu.multiple = false; // set here
	return menu;
}

window.cf7svisual.addons.register('menu', testSingle); // register

We treat a menu like a group of checkboxes for input handling. It is stored as an JavaScript array.

Add-on menu will need to set multiple to false to disable multi-select. If multiple is not set, it will be recognized as true.

1. Single Selection

  • Overwrite or create empty array [ ] for rowInfo.node.cf7sReady.
  • Push selected menu into array.
  • Update node.

2. Multiple Selection

  • Check if menu name exists in rowInfo.node. For example: rowInfo.node.cf7sReady.
    • Create empty array [ ] if it does not exist.
  • Find index value in array:
    • append, if does not exist – menu item selected.
    • delete, if exists – menu item deselected.
  • Update node.

Further reading: