Skip to content

Commit 2b8e4ed

Browse files
tonyitotonyito
committed
Disabled sortchildren component and actions attached to it
1 parent 35db9d4 commit 2b8e4ed

File tree

3 files changed

+158
-158
lines changed

3 files changed

+158
-158
lines changed

‎src/actions/components.ts

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -257,11 +257,12 @@ export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string })
257257
});
258258
};
259259

260-
export const updateChildrenSort = ({ newSortValues }: { newSortValues: any }) => (
261-
dispatch: (arg: Action) => void,
262-
) => {
263-
dispatch({
264-
type: UPDATE_CHILDREN_SORT,
265-
payload: { newSortValues },
266-
});
267-
};
260+
//Action reserved for SortChildren component not written yet
261+
// export const updateChildrenSort = ({ newSortValues }: { newSortValues: any }) => (
262+
// dispatch: (arg: Action) => void,
263+
// ) => {
264+
// dispatch({
265+
// type: UPDATE_CHILDREN_SORT,
266+
// payload: { newSortValues },
267+
// });
268+
// };

‎src/components/CodePreview.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { format } from 'prettier';
33
import componentRender from '../utils/componentRender.util';
44
import { ComponentInt, ComponentsInt } from '../utils/Interfaces';
55
/** ** SortCHildren will be fixed , dont XXX the file *** */
6-
// import SortChildren from './SortChildren.jsx';
6+
// import SortChildren from './SortChildren.tsx';
77
import SyntaxHighlighter from 'react-syntax-highlighter';
88
import { hybrid } from 'react-syntax-highlighter/dist/styles/hljs/';
99

‎src/components/SortChildren.tsx

Lines changed: 148 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,148 @@
1-
'use strict';
2-
3-
import React, { Component } from 'react';
4-
import { connect } from 'react-redux';
5-
import { updateChildrenSort } from '../actions/components.ts';
6-
import cloneDeep from '../utils/cloneDeep.ts';
7-
8-
const mapStateToProps = store => ({
9-
focusComponent: store.workspace.focusComponent,
10-
});
11-
12-
const mapDispatchToProps = dispatch => ({
13-
updateChildrenSort: ({ newSortValues }) => dispatch(updateChildrenSort({ newSortValues })),
14-
});
15-
16-
class SortChildren extends Component {
17-
constructor(props) {
18-
super(props);
19-
20-
this.state = {
21-
draggedIndex: null,
22-
draggedOverIndex: null,
23-
};
24-
} // end constrcutor
25-
26-
setLocalArray = () => {
27-
const localArray = this.props.focusComponent.childrenArray.map((child, idx) => ({
28-
childId: child.childId,
29-
childSort: child.childSort,
30-
}));
31-
return localArray;
32-
};
33-
34-
onDragStart = (e, idx) => {
35-
this.setState({ draggedIndex: idx });
36-
37-
e.dataTransfer.effectAllowed = 'move';
38-
e.dataTransfer.setData('text/html', e.target.parentNode);
39-
e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
40-
};
41-
42-
onDragOver = idx => {
43-
this.setState({ draggedOverIndex: idx });
44-
};
45-
46-
onDragEnd(e) {
47-
console.log(`dragEnd this
48-
state.draggedIndex: ${this.state.draggedIndex}
49-
this.state.draggedOverIndex: ${this.state.draggedOverIndex}`);
50-
if (
51-
this.state.draggedIndex === this.state.draggedOverIndex
52-
// || !this.state.draggedIndex || this.state.draggedOverIndex
53-
) {
54-
return;
55-
}
56-
57-
let currentSortValues = this.setLocalArray();
58-
59-
// remove the dragged Item and save it, we will use add it back in a moment.
60-
const draggedBaby = currentSortValues[this.state.draggedIndex];
61-
currentSortValues.splice(this.state.draggedIndex, 1);
62-
63-
// put back the dragge item after the dragged Over
64-
currentSortValues.splice(this.state.draggedOverIndex, 0, draggedBaby);
65-
66-
currentSortValues = currentSortValues.map((child, idx) => ({
67-
childId: child.childId,
68-
childSort: idx + 1,
69-
}));
70-
71-
console.log('currentSortValues after updating the sort ', JSON.stringify(currentSortValues));
72-
73-
this.props.updateChildrenSort({ newSortValues: currentSortValues });
74-
75-
this.setState({ draggedIndex: 0, draggedOverIndex: 0 });
76-
}
77-
78-
render() {
79-
const ulStyle = {
80-
margin: 0,
81-
padding: 0,
82-
listStyle: 'none',
83-
};
84-
85-
const liStyle = {
86-
backgroundColor: '#383838',
87-
padding: '10px 20px',
88-
position: 'relative',
89-
display: 'flex',
90-
alignItems: 'flex-start',
91-
lineHeight: 1,
92-
cursor: 'move',
93-
};
94-
// const children = this.props.focusComponent.childrenArray;
95-
// const List = children
96-
const List = cloneDeep(this.props.focusComponent.childrenArray)
97-
.sort((a, b) => a.childSort - b.childSort)
98-
.map((child, idx) => (
99-
<li style={liStyle} id={child.childId} key={idx}>
100-
<div
101-
className="drag"
102-
draggable
103-
onDragStart={e => this.onDragStart(e, idx)}
104-
onDragOver={e => this.onDragOver(idx)}
105-
onDragEnd={e => this.onDragEnd()}
106-
>
107-
{child.componentName + child.childId}
108-
</div>
109-
</li>
110-
));
111-
return (
112-
<div
113-
style={{
114-
minWidth: '200px',
115-
position: 'relative',
116-
float: 'left',
117-
marginTop: '20px',
118-
marginRIght: '20px',
119-
}}
120-
>
121-
<h3>Childrens List</h3>
122-
<ul style={ulStyle}>
123-
{cloneDeep(this.props.focusComponent.childrenArray)
124-
.sort((a, b) => a.childSort - b.childSort)
125-
.map((child, idx) => (
126-
<li style={liStyle} id={child.childId} key={idx}>
127-
<div
128-
className="drag"
129-
draggable
130-
onDragStart={e => this.onDragStart(e, idx)}
131-
onDragOver={e => this.onDragOver(idx)}
132-
onDragEnd={e => this.onDragEnd()}
133-
>
134-
{child.componentName + child.childId}
135-
</div>
136-
</li>
137-
))}
138-
139-
{/* {List} */}
140-
</ul>
141-
</div>
142-
);
143-
}
144-
}
145-
146-
export default connect(
147-
mapStateToProps,
148-
mapDispatchToProps,
149-
)(SortChildren);
1+
// 'use strict';
2+
// import React, { Component } from 'react';
3+
// import { connect } from 'react-redux';
4+
// import { updateChildrenSort } from '../actions/components.ts';
5+
// import cloneDeep from '../utils/cloneDeep.ts';
6+
7+
// const mapStateToProps = store => ({
8+
// focusComponent: store.workspace.focusComponent,
9+
// });
10+
11+
// const mapDispatchToProps = dispatch => ({
12+
// updateChildrenSort: ({ newSortValues }) => dispatch(updateChildrenSort({ newSortValues })),
13+
// });
14+
15+
// class SortChildren extends Component {
16+
// constructor(props) {
17+
// super(props);
18+
19+
// this.state = {
20+
// draggedIndex: null,
21+
// draggedOverIndex: null,
22+
// };
23+
// } // end constrcutor
24+
25+
// setLocalArray = () => {
26+
// const localArray = this.props.focusComponent.childrenArray.map((child, idx) => ({
27+
// childId: child.childId,
28+
// childSort: child.childSort,
29+
// }));
30+
// return localArray;
31+
// };
32+
33+
// onDragStart = (e, idx) => {
34+
// this.setState({ draggedIndex: idx });
35+
36+
// e.dataTransfer.effectAllowed = 'move';
37+
// e.dataTransfer.setData('text/html', e.target.parentNode);
38+
// e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
39+
// };
40+
41+
// onDragOver = idx => {
42+
// this.setState({ draggedOverIndex: idx });
43+
// };
44+
45+
// onDragEnd(e) {
46+
// console.log(`dragEnd this
47+
// state.draggedIndex: ${this.state.draggedIndex}
48+
// this.state.draggedOverIndex: ${this.state.draggedOverIndex}`);
49+
// if (
50+
// this.state.draggedIndex === this.state.draggedOverIndex
51+
// // || !this.state.draggedIndex || this.state.draggedOverIndex
52+
// ) {
53+
// return;
54+
// }
55+
56+
// let currentSortValues = this.setLocalArray();
57+
58+
// // remove the dragged Item and save it, we will use add it back in a moment.
59+
// const draggedBaby = currentSortValues[this.state.draggedIndex];
60+
// currentSortValues.splice(this.state.draggedIndex, 1);
61+
62+
// // put back the dragge item after the dragged Over
63+
// currentSortValues.splice(this.state.draggedOverIndex, 0, draggedBaby);
64+
65+
// currentSortValues = currentSortValues.map((child, idx) => ({
66+
// childId: child.childId,
67+
// childSort: idx + 1,
68+
// }));
69+
70+
// console.log('currentSortValues after updating the sort ', JSON.stringify(currentSortValues));
71+
72+
// this.props.updateChildrenSort({ newSortValues: currentSortValues });
73+
74+
// this.setState({ draggedIndex: 0, draggedOverIndex: 0 });
75+
// }
76+
77+
// render() {
78+
// const ulStyle = {
79+
// margin: 0,
80+
// padding: 0,
81+
// listStyle: 'none',
82+
// };
83+
84+
// const liStyle = {
85+
// backgroundColor: '#383838',
86+
// padding: '10px 20px',
87+
// position: 'relative',
88+
// display: 'flex',
89+
// alignItems: 'flex-start',
90+
// lineHeight: 1,
91+
// cursor: 'move',
92+
// };
93+
// // const children = this.props.focusComponent.childrenArray;
94+
// // const List = children
95+
// const List = cloneDeep(this.props.focusComponent.childrenArray)
96+
// .sort((a, b) => a.childSort - b.childSort)
97+
// .map((child, idx) => (
98+
// <li style={liStyle} id={child.childId} key={idx}>
99+
// <div
100+
// className="drag"
101+
// draggable
102+
// onDragStart={e => this.onDragStart(e, idx)}
103+
// onDragOver={e => this.onDragOver(idx)}
104+
// onDragEnd={e => this.onDragEnd()}
105+
// >
106+
// {child.componentName + child.childId}
107+
// </div>
108+
// </li>
109+
// ));
110+
// return (
111+
// <div
112+
// style={{
113+
// minWidth: '200px',
114+
// position: 'relative',
115+
// float: 'left',
116+
// marginTop: '20px',
117+
// marginRIght: '20px',
118+
// }}
119+
// >
120+
// <h3>Childrens List</h3>
121+
// <ul style={ulStyle}>
122+
// {cloneDeep(this.props.focusComponent.childrenArray)
123+
// .sort((a, b) => a.childSort - b.childSort)
124+
// .map((child, idx) => (
125+
// <li style={liStyle} id={child.childId} key={idx}>
126+
// <div
127+
// className="drag"
128+
// draggable
129+
// onDragStart={e => this.onDragStart(e, idx)}
130+
// onDragOver={e => this.onDragOver(idx)}
131+
// onDragEnd={e => this.onDragEnd()}
132+
// >
133+
// {child.componentName + child.childId}
134+
// </div>
135+
// </li>
136+
// ))}
137+
138+
// {/* {List} */}
139+
// </ul>
140+
// </div>
141+
// );
142+
// }
143+
// }
144+
145+
// export default connect(
146+
// mapStateToProps,
147+
// mapDispatchToProps,
148+
// )(SortChildren);

0 commit comments

Comments
 (0)