Skip to content

Commit faf072f

Browse files
ShlomoPorgesShlomoPorges
committed
sort children
1 parent 1a1e08d commit faf072f

File tree

5 files changed

+113
-59
lines changed

5 files changed

+113
-59
lines changed

‎src/actions/components.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -254,9 +254,9 @@ export const updateHtmlAttr = ({ attr, value }) => (dispatch) => {
254254
});
255255
};
256256

257-
export const updateChildrenSort = ({ newChildrenArray }) => (dispatch) => {
257+
export const updateChildrenSort = ({ newSortValues }) => (dispatch) => {
258258
dispatch({
259259
type: UPDATE_CHILDREN_SORT,
260-
payload: { newChildrenArray },
260+
payload: { newSortValues },
261261
});
262262
};

‎src/components/SortChildren.jsx‎

Lines changed: 82 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,88 @@
11

2+
"use strict" ;
3+
24
import React, { Component} from "react";
35
import { connect } from "react-redux";
46
import { updateChildrenSort } from "../actions/components";
7+
import { width } from "window-size";
8+
import cloneDeep from "../utils/cloneDeep";
59

610
const mapStateToProps = store => ({
711
focusComponent: store.workspace.focusComponent,
812
});
913

1014
const mapDispatchToProps = dispatch => ({
11-
updateChildrenSort: ({ newChildrenArray }) => dispatch(updateChildrenSort({ newChildrenArray }))
15+
updateChildrenSort: ({ newSortValues }) => dispatch(updateChildrenSort({ newSortValues }))
1216
});
1317

1418
class SortChildren extends Component {
1519
constructor(props) {
1620
super(props);
1721

1822
this.state = {
19-
localChildrenArray: this.setLocalArray()
20-
//localChildrenArray: this.props.focusComponent.childrenArray,
21-
//shortArray: this.setLocalArray()
22-
};
23-
24-
}
25-
23+
draggedIndex: null,
24+
draggedOverIndex: null
25+
};
26+
} // end constrcutor
27+
2628
setLocalArray = () =>{
2729
const localArray = this.props.focusComponent.childrenArray.map((child,idx) => {
28-
return {Childid: child.childId, childSort: child.childSort}
30+
return {childId: child.childId, childSort: child.childSort}
2931
} )
3032
return localArray ;
3133
}
3234

35+
3336
onDragStart = (e,idx) => {
34-
console.log('dragging index: ',idx)
35-
this.draggedIndex = idx;
37+
38+
this.setState({draggedIndex:idx})
39+
3640
e.dataTransfer.effectAllowed = "move";
3741
e.dataTransfer.setData("text/html", e.target.parentNode);
3842
e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
3943
};
4044

4145

42-
onDragOver = (draggedOverIndex) => {
43-
//const draggedOverIndex = idx;
46+
onDragOver = (idx) => {
47+
48+
this.setState({draggedOverIndex:idx})
49+
// console.log(`onDragOver idx=${idx} this.state.draggedOverIndex:${this.state.draggedOverIndex}`)
50+
};
4451

45-
// if the item is dragged over itself, ignore
46-
if (this.draggedIndex === draggedOverIndex) {
52+
onDragEnd(e) {
53+
console.log(`dragEnd this
54+
state.draggedIndex: ${this.state.draggedIndex}
55+
this.state.draggedOverIndex: ${this.state.draggedOverIndex}`
56+
)
57+
//const {draggedIndex, draggedOverIndex } = this.state;
58+
if (this.state.draggedIndex === this.state.draggedOverIndex
59+
// || !this.state.draggedIndex || this.state.draggedOverIndex
60+
) {
4761
return;
4862
}
4963

50-
//console.log(`OnDrageOver: draggedOverIndex: ${draggedOverIndex} this.draggedIndex:${this.draggedIndex}`)
51-
// filter out the currently dragged item
52-
let draggedChild = this.state.localChildrenArray[this.draggedIndex] ;
53-
//console.log(`dragged item:`,draggedChild)
64+
let currentSortValues = this.setLocalArray();
65+
// console.log(`currentSortValues`,JSON.stringify((currentSortValues)))
5466

55-
let localChildrenArray = [...this.state.localChildrenArray]
56-
//console.log('localChildrenArray BEFORE removing ',JSON.stringify(localChildrenArray))
67+
// remove the dragged Item and save it, we will use add it back in a moment.
68+
const draggedBaby = currentSortValues[this.state.draggedIndex] ;
69+
currentSortValues.splice(this.state.draggedIndex,1) ;
70+
71+
// put back the dragge item after the dragged Over
72+
currentSortValues.splice(this.state.draggedOverIndex, 0, draggedBaby)
73+
//console.log(`currentSortValues after reAdding the dragged baby `,JSON.stringify(currentSortValues))
5774

75+
currentSortValues = currentSortValues.map((child,idx) => {
76+
return {childId:child.childId, childSort: idx+1}
77+
})
5878

59-
localChildrenArray.splice(this.draggedIndex,1)
60-
//console.log('localChildrenArray after removing ',JSON.stringify(localChildrenArray))
79+
console.log(`currentSortValues after updating the sort `,JSON.stringify(currentSortValues))
6180

62-
//add the dragged item after the dragged over item
63-
localChildrenArray.splice(draggedOverIndex, 0, draggedChild);
64-
//console.log('localChildrenArray final: ',JSON.stringify(localChildrenArray))
65-
this.setState({localChildrenArray });
81+
this.props.updateChildrenSort({newSortValues: currentSortValues});
6682

67-
this.props.updateChildrenSort({newChildrenArray: localChildrenArray});
68-
69-
};
83+
this.setState({draggedIndex: 0, draggedOverIndex: 0 })
84+
85+
}
7086

7187
render() {
7288
const ulStyle = {
@@ -84,46 +100,66 @@ render() {
84100
lineHeight: 1,
85101
cursor: "move",
86102
}
87-
const children = this.props.focusComponent.childrenArray;
88-
const List = children
103+
//const children = this.props.focusComponent.childrenArray;
104+
// const List = children
105+
const List = cloneDeep(this.props.focusComponent.childrenArray)
89106
.sort( (a,b) => a.childSort - b.childSort )
90107
.map( (child,idx) => {
91-
//console.log(`mappping...... ${idx} ${child.componentName + child.childId} childSort ${child.childSort}`)
92108
return (
93109
<li
94110
style={liStyle}
95-
id={child.Childid}
111+
id={child.childId}
96112
key={idx}
97113
>
98114
<div className="drag" draggable
99115
onDragStart={e => this.onDragStart(e,idx) }
100116
onDragOver ={e => this.onDragOver(idx)}
117+
onDragEnd ={e => this.onDragEnd() }
101118
>
102119
{child.componentName + child.childId}
103120
</div>
104121

105122
</li>
106123
)})
107-
console.log('children')
108-
console.log(children)
109-
console.log('List')
110-
console.log(List)
111124
return (
112-
<div style={{
125+
<div
126+
style={{
127+
minWidth: '200px',
113128
position: 'relative',
114-
float: 'right',
129+
float: 'left',
115130
marginTop: '20px',
116131
marginRIght: '20px',
117-
}} >
132+
}}
133+
>
118134
<h3>Childrens List</h3>
119135
<ul style={ulStyle}>
120-
{List}
136+
137+
{cloneDeep(this.props.focusComponent.childrenArray)
138+
.sort( (a,b) => a.childSort - b.childSort )
139+
.map( (child,idx) => {
140+
return (
141+
<li
142+
style={liStyle}
143+
id={child.childId}
144+
key={idx}
145+
>
146+
<div className="drag" draggable
147+
onDragStart={e => this.onDragStart(e,idx) }
148+
onDragOver ={e => this.onDragOver(idx)}
149+
onDragEnd ={e => this.onDragEnd() }
150+
>
151+
{child.componentName + child.childId}
152+
</div>
153+
154+
</li>
155+
)})}
156+
157+
158+
{/* {List} */}
121159
</ul>
122160
</div>
123-
)
124-
125-
}
126-
161+
)
162+
}
127163
}
128164

129165
export default connect(

src/components/SortableComponent.jsx renamed to src/components/xxxSortableComponent.jsx

File renamed without changes.

‎src/utils/componentReducer.util.ts‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -613,17 +613,31 @@ export const updateHtmlAttr = (state: ApplicationStateInt, { attr, value }: {att
613613
};
614614

615615

616-
export const updateChildrenSort = (state: ApplicationStateInt, { newChildrenArray }: {newChildrenArray: ChildrenInt }) => {
617-
console.log('hello from updateChildrenSort. newChildrenArray: ',newChildrenArray )
618-
// the new Array has the same data exactly. the array index is the new sort...
619-
// const modifiedChldrenArray = cloneDeep(state.focusComponent.childrenArray)
620-
// modifiedChldrenArray.forEach( (child: ChildInt, idx:number, arr:any ) => {
621-
// console.log(`chidl id:${child.childId} currSort:${child.childSort}`)
622-
// const newSort = newChildrenArray.findIndex( (newChild:ChildInt) => newChild.childId === child.childId) + 1 ;
623-
// console.log(`new sort: ${newSort}`)
624-
// })
625-
//console.log('modifiedCHildArrrrrr',modifiedChldrenArray)
616+
export const updateChildrenSort = (state: ApplicationStateInt, { newSortValues }: {newSortValues: any }) => {
617+
console.log('hello from updateChildrenSort. newSortValues: ',newSortValues )
618+
619+
//const modifiedChildrenArray:ChildrenInt = JSON.parse(JSON.stringify(state.focusComponent.childrenArray)) ;
620+
const modifiedChildrenArray:ChildrenInt = cloneDeep(state.focusComponent.childrenArray)
621+
622+
for (let i = 0 ; i < modifiedChildrenArray.length; i+=1){
623+
const currChild = modifiedChildrenArray[i]
624+
const currChildId = currChild.childId
625+
const newValueObj = newSortValues.find( (n:any) => n.childId === currChildId)
626+
const newSortValue = newValueObj.childSort ;
627+
console.log(` currChildId ${ currChildId } currSortValue: ${ currChild.childSort} newSortValue:${newSortValue}`)
628+
currChild.childSort = newSortValue ;
629+
}
630+
631+
632+
const modifiedComponent = state.components.find( comp => comp.id === state.focusComponent.id)
633+
modifiedComponent.childrenArray = modifiedChildrenArray ;
634+
635+
const modifiedComponentsArray = state.components.filter( comp => comp.id !== state.focusComponent.id)
636+
modifiedComponentsArray.push(modifiedComponent) ;
637+
626638
return {
627639
...state,
640+
components:modifiedComponentsArray,
641+
focusComponent: modifiedComponent,
628642
};
629643
};

‎src/utils/componentRender.util.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import cloneDeep from "./cloneDeep";
2+
3+
14
const componentRender = (component, data) => {
25
const {
36
stateful, id, position, childrenArray, title, props,
@@ -124,7 +127,8 @@ const componentRender = (component, data) => {
124127
125128
return (
126129
<div>
127-
${childrenArray
130+
${cloneDeep(childrenArray)
131+
.sort( (a,b) => a.childSort - b.childSort )
128132
.map(child => `<${componentNameGenerator(child)} ${propDrillTextGenerator(child)}/>`)
129133
.join('\n')}
130134
</div>

0 commit comments

Comments
 (0)