Frontend Page - Configure MenuConfig

Overview

Frontend page for creating and editing MenuConfigs

visibleObj Object

let visibleObj = {
	visibleRowIndex: 0, // row index we have open on page
	visibleRenameRowIndex: 0, // row index currently renaming
	rows:[
		{
			menuElements: [
				{
					show: false, // whether the menuElement settings are expanded
					menuText
					menuElements: [ // if menuElement is elementType menu, will have child menuElements
					
					],
				},
				// ..
			]
		},
		// ..
	]
}

• visibleRowIndex : identify visible position row
• visibleRenameRowIndex : identify row being renamed
• show : expand or collapse elements

OnDrag

Under Construction

const dragStartRowIndex = useRef(null);
const dragPassRowIndex = useRef(null);
const [dragnamerow, setdragnamerow] = useState(null);
const [dragPassRowIndexState, setDragPassRowIndexState] = useState(null);
	
	
	<div
		dragable
		onDragStart={(e) => {
			            dragStartRowIndex.current = rowIndex; //set value when clicked element
                        dragPassRowIndex.current = null; //set null when departed original position 
                        setdragnamerow("row");
		}}
		onDragEnter={(e) => {
			            if (dragnamerow === "row") {
                            dragPassRowIndex.current = rowIndex;// change value when passed others element
                            setDragPassRowIndexState(rowIndex);
                          }
		}}
		onDragEnd={moveRows}
	>
	{"text"}
	</div>

• onDragStart : when you started to click element
• onDragEnter : when you passed element
• onDragEnd : when you released holding
• set variable by useRef : Unnecessary for re-render
• set variable by useState : Necessary for change data immediately

menuElements recursion

• Menu elements are nested to any level
• Structure of rows and menuElements in visible object matches structure of menuConfig/menuConfigSetting