Frontend Page - Configure MenuConfig - Revision history

Kik: /* DragDrop */

2023-06-26T01:57:52Z

DragDrop

@@ Line 66: / Line 66: @@
 <syntaxhighlight lang="json">
-	//...
+	<CellTabButton
 </syntaxhighlight>

2023-06-26T01:45:30Z

OnDrag

← Older revision		Revision as of 01:45, 26 June 2023
Line 30:		Line 30:

	== OnDrag ==		== OnDrag ==
	~~Under Construction~~
	<syntaxhighlight lang="json">		<syntaxhighlight lang="json">
	const dragStartRowIndex = useRef(null);		const dragStartRowIndex = useRef(null);
Line 61:		Line 61:
	* set variable by useRef : for save data immediately		* set variable by useRef : for save data immediately
	* set variable by useState : for Re-render		* set variable by useState : for Re-render

			== DragDrop ==
			Under Construction

			<syntaxhighlight lang="json">
			//...
			</syntaxhighlight>

	== menuElements recursion ==		== menuElements recursion ==

2023-06-22T04:26:44Z

visibleObj Object

← Older revision		Revision as of 04:26, 22 June 2023
Line 28:		Line 28:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	* visibleRowIndex : identify visible position row
	* visibleRenameRowIndex : identify row being renamed
	* show : expand or collapse elements

	== OnDrag ==		== OnDrag ==
Line 62:		Line 59:
	* onDragEnter : when you passed element		* onDragEnter : when you passed element
	* onDragEnd : when you released holding		* onDragEnd : when you released holding
	* set variable by useRef : ~~Unnecessary~~ for ~~re-render~~		* set variable by useRef : for save data immediately
	* set variable by useState : ~~Necessary~~ for ~~change data immediately~~		* set variable by useState : for Re-render

	== menuElements recursion ==		== menuElements recursion ==

2023-06-19T09:46:40Z

OnDrag

← Older revision		Revision as of 09:46, 19 June 2023
Line 45:		Line 45:
	onDragStart={(e) => {		onDragStart={(e) => {
	dragStartRowIndex.current = rowIndex; //set value when clicked element		dragStartRowIndex.current = rowIndex; //set value when clicked element
	dragPassRowIndex.current = null;		dragPassRowIndex.current = null; //set null when departed original position
	setdragnamerow("row");		setdragnamerow("row");
	}}		}}
	onDragEnter={(e) => {		onDragEnter={(e) => {
	if (dragnamerow === "row") {		if (dragnamerow === "row") {
	dragPassRowIndex.current = rowIndex;		dragPassRowIndex.current = rowIndex;// change value when passed others element
	setDragPassRowIndexState(rowIndex);		setDragPassRowIndexState(rowIndex);
	}		}

2023-06-19T09:33:03Z

OnDrag

← Older revision		Revision as of 09:33, 19 June 2023
Line 62:		Line 62:
	* onDragEnter : when you passed element		* onDragEnter : when you passed element
	* onDragEnd : when you released holding		* onDragEnd : when you released holding
	* set variable by useRef : //Unnecessary for re-render		* set variable by useRef : Unnecessary for re-render
	* set variable by useState : //Necessary for change data immediately		* set variable by useState : Necessary for change data immediately

	== menuElements recursion ==		== menuElements recursion ==

2023-06-19T09:14:05Z

OnDrag

← Older revision		Revision as of 09:14, 19 June 2023
Line 44:		Line 44:
	dragable		dragable
	onDragStart={(e) => {		onDragStart={(e) => {
	dragStartRowIndex.current = rowIndex; //set value when clicked element		dragStartRowIndex.current = rowIndex; //set value when clicked element
	dragPassRowIndex.current = null;		dragPassRowIndex.current = null;
	setdragnamerow("row");		setdragnamerow("row");
	}}		}}
	onDragEnter={(e) => {		onDragEnter={(e) => {
	if (dragnamerow === "row") {		if (dragnamerow === "row") {
	dragPassRowIndex.current = rowIndex;		dragPassRowIndex.current = rowIndex;
	setDragPassRowIndexState(rowIndex);		setDragPassRowIndexState(rowIndex);

2023-06-19T08:49:50Z

OnDrag

← Older revision		Revision as of 08:49, 19 June 2023
Line 44:		Line 44:
	dragable		dragable
	onDragStart={(e) => {		onDragStart={(e) => {
	dragStartRowIndex.current = rowIndex;		dragStartRowIndex.current = rowIndex; //set value when clicked element
	dragPassRowIndex.current = null;		dragPassRowIndex.current = null;
	setdragnamerow("row");		setdragnamerow("row");
Line 51:		Line 51:
	if (dragnamerow === "row") {		if (dragnamerow === "row") {
	dragPassRowIndex.current = rowIndex;		dragPassRowIndex.current = rowIndex;
	setDragPassRowIndexState(rowIndex)		setDragPassRowIndexState(rowIndex);
	}		}
	}}		}}
Line 62:		Line 62:
	* onDragEnter : when you passed element		* onDragEnter : when you passed element
	* onDragEnd : when you released holding		* onDragEnd : when you released holding
			* set variable by useRef : //Unnecessary for re-render
			* set variable by useState : //Necessary for change data immediately

	== menuElements recursion ==		== menuElements recursion ==

2023-06-19T06:36:03Z

OnDrag

← Older revision		Revision as of 06:36, 19 June 2023
Line 35:		Line 35:
	Under Construction		Under Construction
	<syntaxhighlight lang="json">		<syntaxhighlight lang="json">
			const dragStartRowIndex = useRef(null);
			const dragPassRowIndex = useRef(null);
			const [dragnamerow, setdragnamerow] = useState(null);
			const [dragPassRowIndexState, setDragPassRowIndexState] = useState(null);


	<div		<div
	dragable		dragable
	onDragStart={(e) => {}}		onDragStart={(e) => {
	onDragEnter={(e) => {}}		dragStartRowIndex.current = rowIndex;
	onDragEnd={}		dragPassRowIndex.current = null;
			setdragnamerow("row");
			}}
			onDragEnter={(e) => {
			if (dragnamerow === "row") {
			dragPassRowIndex.current = rowIndex;
			setDragPassRowIndexState(rowIndex)
			}
			}}
			onDragEnd={moveRows}
	>		>
	{"text"}		{"text"}

2023-06-19T06:10:18Z

OnDrag

← Older revision		Revision as of 06:10, 19 June 2023
Line 37:		Line 37:
	<div		<div
	dragable		dragable
	onDragStart={(e) => {}		onDragStart={(e) => {}}
	onDragEnter={(e) => {}		onDragEnter={(e) => {}}
	onDragEnd={}		onDragEnd={}
	>		>
Line 47:		Line 47:
	* onDragEnter : when you passed element		* onDragEnter : when you passed element
	* onDragEnd : when you released holding		* onDragEnd : when you released holding


	== menuElements recursion ==		== menuElements recursion ==

2023-06-16T10:02:28Z

visibleObj Object

@@ Line 31: / Line 31: @@
 * visibleRenameRowIndex : identify row being renamed
 * show : expand or collapse elements
 == menuElements recursion ==