Skip to content

Commit 87baba0

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #29 from tolgamizrakci/development
selectable children and ancestors (&state) working and rendering +bu…
2 parents cea86c2 + e6bc35b commit 87baba0

File tree

8 files changed

+216
-125
lines changed

8 files changed

+216
-125
lines changed

‎src/actionTypes/index.js

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
2-
export const ADD_COMPONENT = 'ADD_COMPONENT';
3-
export const ADD_CHILD = 'ADD_CHILD';
4-
export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
5-
export const DELETE_COMPONENT = 'DELETE_COMPONENT';
6-
export const CHANGE_FOCUS_COMPONENT = 'CHANGE_FOCUS_COMPONENT';
7-
export const CHANGE_FOCUS_CHILD = 'CHANGE_FOCUS_CHILD';
8-
export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
9-
export const REASSIGN_PARENT = 'REASSIGN_PARENT';
10-
export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';
11-
export const EXPORT_FILES = 'EXPORT_FILES';
12-
export const EXPORT_FILES_SUCCESS = 'EXPORT_FILES_SUCCESS';
13-
export const EXPORT_FILES_ERROR = 'EXPORT_FILES_ERROR';
14-
export const HANDLE_CLOSE = 'HANDLE_CLOSE';
15-
export const HANDLE_TRANSFORM = 'HANDLE_TRANSFORM';
16-
export const CREATE_APPLICATION = 'CREATE_APPLICATION';
17-
export const CREATE_APPLICATION_SUCCESS = 'CREATE_APPLICATION_SUCCESS';
18-
export const CREATE_APPLICATION_ERROR = 'CREATE_APPLICATION_ERROR';
19-
export const TOGGLE_DRAGGING = 'TOGGLE_DRAGGING';
20-
export const MOVE_TO_BOTTOM = 'MOVE_TO_BOTTOM';
21-
export const MOVE_TO_TOP = 'MOVE_TO_TOP';
22-
export const OPEN_EXPANSION_PANEL = 'OPEN_EXPANSION_PANEL';
23-
export const DELETE_PROP = 'DELETE_PROP';
24-
export const ADD_PROP = 'ADD_PROP';
25-
export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
26-
export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
1+
export const LOAD_INIT_DATA = "LOAD_INIT_DATA";
2+
export const ADD_COMPONENT = "ADD_COMPONENT";
3+
export const ADD_CHILD = "ADD_CHILD";
4+
export const UPDATE_COMPONENT = "UPDATE_COMPONENT";
5+
export const DELETE_COMPONENT = "DELETE_COMPONENT";
6+
export const CHANGE_FOCUS_COMPONENT = "CHANGE_FOCUS_COMPONENT";
7+
export const CHANGE_FOCUS_CHILD = "CHANGE_FOCUS_CHILD";
8+
export const UPDATE_CHILDREN = "UPDATE_CHILDREN";
9+
export const REASSIGN_PARENT = "REASSIGN_PARENT";
10+
export const SET_SELECTABLE_PARENTS = "SET_SELECTABLE_PARENTS";
11+
export const EXPORT_FILES = "EXPORT_FILES";
12+
export const EXPORT_FILES_SUCCESS = "EXPORT_FILES_SUCCESS";
13+
export const EXPORT_FILES_ERROR = "EXPORT_FILES_ERROR";
14+
export const HANDLE_CLOSE = "HANDLE_CLOSE";
15+
export const HANDLE_TRANSFORM = "HANDLE_TRANSFORM";
16+
export const CREATE_APPLICATION = "CREATE_APPLICATION";
17+
export const CREATE_APPLICATION_SUCCESS = "CREATE_APPLICATION_SUCCESS";
18+
export const CREATE_APPLICATION_ERROR = "CREATE_APPLICATION_ERROR";
19+
export const TOGGLE_DRAGGING = "TOGGLE_DRAGGING";
20+
export const MOVE_TO_BOTTOM = "MOVE_TO_BOTTOM";
21+
export const MOVE_TO_TOP = "MOVE_TO_TOP";
22+
export const OPEN_EXPANSION_PANEL = "OPEN_EXPANSION_PANEL";
23+
export const DELETE_PROP = "DELETE_PROP";
24+
export const ADD_PROP = "ADD_PROP";
25+
export const DELETE_ALL_DATA = "DELETE_ALL_DATA";
26+
export const CHANGE_IMAGE_PATH = "CHANGE_IMAGE_PATH";

‎src/actions/components.js

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -24,52 +24,54 @@ import {
2424
DELETE_PROP,
2525
ADD_PROP,
2626
DELETE_ALL_DATA,
27-
CHANGE_IMAGE_PATH,
28-
} from '../actionTypes/index';
27+
CHANGE_IMAGE_PATH
28+
} from "../actionTypes/index";
2929

30-
import { loadState } from '../localStorage';
30+
import { loadState } from "../localStorage";
3131

3232
// import createFiles from '../utils/createFiles.util';
3333
// import createApplicationUtil from '../utils/createApplication.util';
3434

35-
export const loadInitData = () => (dispatch) => {
36-
loadState().then(data => dispatch({
37-
type: LOAD_INIT_DATA,
38-
payload: {
39-
data: data ? data.workspace : {},
40-
},
41-
}));
35+
export const loadInitData = () => dispatch => {
36+
loadState().then(data =>
37+
dispatch({
38+
type: LOAD_INIT_DATA,
39+
payload: {
40+
data: data ? data.workspace : {}
41+
}
42+
})
43+
);
4244
};
4345

4446
export const updateChildren = ({ parentIds, childIndex, childId }) => ({
4547
type: UPDATE_CHILDREN,
4648
payload: {
4749
parentIds,
4850
childIndex,
49-
childId,
50-
},
51+
childId
52+
}
5153
});
5254

5355
export const parentReassignment = ({ index, id, parentIds }) => ({
5456
type: REASSIGN_PARENT,
5557
payload: {
5658
index,
5759
id,
58-
parentIds,
59-
},
60+
parentIds
61+
}
6062
});
6163

62-
export const addComponent = ({ title }) => (dispatch) => {
64+
export const addComponent = ({ title }) => dispatch => {
6365
dispatch({ type: ADD_COMPONENT, payload: { title } });
6466
// dispatch({ type: SET_SELECTABLE_PARENTS });
6567
};
6668

67-
export const addChild = ({ title }) => (dispatch) => {
69+
export const addChild = ({ title }) => dispatch => {
6870
dispatch({ type: ADD_CHILD, payload: { title } });
6971
// dispatch({ type: SET_SELECTABLE_PARENTS });
7072
};
7173

72-
export const deleteComponent = ({ index, id, parentIds = [] }) => (dispatch) => {
74+
export const deleteComponent = ({ index, id, parentIds = [] }) => dispatch => {
7375
if (parentIds.length) {
7476
// Delete Component from its parent if it has a parent.
7577
dispatch(updateChildren({ parentIds, childId: id, childIndex: index }));
@@ -86,32 +88,38 @@ export const updateComponent = ({
8688
index,
8789
newParentId = null,
8890
color = null,
89-
stateful = null,
90-
}) => (dispatch) => {
91+
stateful = null
92+
}) => dispatch => {
9193
dispatch({
9294
type: UPDATE_COMPONENT,
9395
payload: {
9496
id,
9597
index,
9698
newParentId,
9799
color,
98-
stateful,
99-
},
100+
stateful
101+
}
100102
});
101103

102104
if (newParentId) {
103-
dispatch(updateChildren({ parentIds: [newParentId], childId: id, childIndex: index }));
105+
dispatch(
106+
updateChildren({
107+
parentIds: [newParentId],
108+
childId: id,
109+
childIndex: index
110+
})
111+
);
104112
}
105113

106114
dispatch({ type: SET_SELECTABLE_PARENTS });
107115
};
108116

109-
export const changeFocusComponent = ({ title }) => (dispatch) => {
117+
export const changeFocusComponent = ({ title }) => dispatch => {
110118
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
111119
};
112120

113121
// make sure childId is being sent in
114-
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
122+
export const changeFocusChild = ({ title, childId }) => dispatch => {
115123
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
116124
};
117125

@@ -133,21 +141,23 @@ export const changeFocusChild = ({ title, childId }) => (dispatch) => {
133141

134142
export const handleClose = () => ({
135143
type: HANDLE_CLOSE,
136-
payload: false,
144+
payload: false
137145
});
138146

139-
export const handleTransform = (componentId, childId, {
140-
x, y, width, height,
141-
}) => ({
147+
export const handleTransform = (
148+
componentId,
149+
childId,
150+
{ x, y, width, height }
151+
) => ({
142152
type: HANDLE_TRANSFORM,
143153
payload: {
144154
componentId,
145155
childId,
146156
x,
147157
y,
148158
width,
149-
height,
150-
},
159+
height
160+
}
151161
});
152162

153163
// export const createApplication = ({
@@ -177,7 +187,7 @@ export const handleTransform = (componentId, childId, {
177187

178188
export const toggleDragging = status => ({
179189
type: TOGGLE_DRAGGING,
180-
payload: status,
190+
payload: status
181191
});
182192

183193
// export const moveToBottom = componentId => ({
@@ -192,7 +202,7 @@ export const toggleDragging = status => ({
192202

193203
export const openExpansionPanel = component => ({
194204
type: OPEN_EXPANSION_PANEL,
195-
payload: { component },
205+
payload: { component }
196206
});
197207

198208
// export const deleteAllData = () => ({

‎src/components/LeftColExpansionPanel.jsx

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,47 @@
1-
import React, { Fragment } from 'react';
1+
import React, { Fragment } from "react";
22
// import PropTypes from 'prop-types';
3-
import { withStyles } from '@material-ui/core/styles';
3+
import { withStyles } from "@material-ui/core/styles";
44
// import ExpansionPanel from '@material-ui/core/ExpansionPanel';
55
// import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
66
// import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
7-
import Typography from '@material-ui/core/Typography';
7+
import Typography from "@material-ui/core/Typography";
88
// import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
99
// import Divider from '@material-ui/core/Divider';
10-
import List from '@material-ui/core/List';
11-
import ListItem from '@material-ui/core/ListItem';
12-
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
13-
import ListItemText from '@material-ui/core/ListItemText';
14-
import IconButton from '@material-ui/core/IconButton';
15-
import Grid from '@material-ui/core/Grid';
16-
import AddIcon from '@material-ui/icons/Add';
17-
import { openExpansionPanel } from '../utils/componentReducer.util';
10+
import List from "@material-ui/core/List";
11+
import ListItem from "@material-ui/core/ListItem";
12+
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
13+
import ListItemText from "@material-ui/core/ListItemText";
14+
import IconButton from "@material-ui/core/IconButton";
15+
import Grid from "@material-ui/core/Grid";
16+
import AddIcon from "@material-ui/icons/Add";
17+
import { openExpansionPanel } from "../utils/componentReducer.util";
1818

19-
const LeftColExpansionPanel = (props) => {
19+
const LeftColExpansionPanel = props => {
2020
const {
21-
index,
21+
// index,
2222
classes,
2323
focusComponent,
2424
component,
25-
deleteComponent,
25+
// deleteComponent,
2626
addChild,
2727
changeFocusComponent,
28-
changeFocusChild,
28+
// changeFocusChild,
29+
selectableChildren
2930
} = props;
3031
const { title, id, color } = component;
3132

3233
function isFocused() {
33-
return focusComponent.title === title ? 'focused' : '';
34-
}
35-
36-
function isAncestorOfFocused() {
37-
// add logic for determining if given component is an ancestor of focusedComponent
38-
return false;
34+
return focusComponent.title === title ? "focused" : "";
3935
}
4036

4137
return (
4238
<div className={classes.root}>
43-
<Grid item xs={12} md={6} style={{ color: 'red' }}>
44-
<List style={{ color: 'red' }}>
39+
<Grid item xs={12} md={6} style={{ color: "red" }}>
40+
<List style={{ color: "red" }}>
4541
<ListItem
4642
button
4743
component="a"
48-
style={{ color: 'red' }}
44+
style={{ color: "red" }}
4945
onClick={() => {
5046
changeFocusComponent({ title });
5147
}}
@@ -54,20 +50,20 @@ const LeftColExpansionPanel = (props) => {
5450
disableTypography
5551
className={classes.light}
5652
primary={
57-
<Typography type="body2" style={{ color: '#FFFFFF' }}>
53+
<Typography type="body2" style={{ color: "#FFFFFF" }}>
5854
{title}
5955
</Typography>
6056
}
6157
secondary={isFocused()}
6258
style={{ color }}
6359
/>
6460
<ListItemSecondaryAction>
65-
{isFocused() || isAncestorOfFocused() ? (
61+
{isFocused() || !selectableChildren.includes(id) ? (
6662
<div />
6763
) : (
6864
<IconButton aria-label="Add">
6965
<AddIcon
70-
style={{ color, float: 'right' }}
66+
style={{ color, float: "right" }}
7167
onClick={() => {
7268
addChild({ title });
7369
}}
@@ -130,16 +126,16 @@ export default withStyles(styles)(LeftColExpansionPanel);
130126
function styles(theme) {
131127
return {
132128
root: {
133-
width: '100%',
129+
width: "100%",
134130
flexGrow: 1,
135131
marginTop: 10,
136-
backgroundColor: '#333333',
132+
backgroundColor: "#333333"
137133
},
138134
light: {
139-
color: '#eee',
140-
'&:hover': {
141-
color: '#1de9b6',
142-
},
143-
},
135+
color: "#eee",
136+
"&:hover": {
137+
color: "#1de9b6"
138+
}
139+
}
144140
};
145141
}

0 commit comments

Comments
 (0)