Skip to content

Commit 0db08b3

Browse files
spincycle01spincycle01
authored
Merge pull request #12 from ChristianEdwardPadilla/development
addChild button functionality started
2 parents 4e4d8d9 + 36adf98 commit 0db08b3

File tree

7 files changed

+338
-480
lines changed

7 files changed

+338
-480
lines changed

‎.eslintrc.json

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
11
{
2-
"extends": [
3-
"plugin:react/recommended",
4-
"airbnb-base"
5-
],
2+
"extends": ["plugin:react/recommended", "airbnb-base"],
63
"parserOptions": {
74
"ecmaFeatures": {
85
"jsx": true
96
},
107
"ecmaVersion": 2018,
118
"sourceType": "module"
129
},
13-
"plugins": [
14-
"import",
15-
"react",
16-
"jest",
17-
"jsx-a11y",
18-
"babel"
19-
],
10+
"plugins": ["import", "react", "jest", "jsx-a11y", "babel"],
2011
"parser": "babel-eslint",
2112
"env": {
2213
"browser": true,
@@ -25,6 +16,7 @@
2516
"jest": true
2617
},
2718
"rules": {
28-
"class-methods-use-this": "off"
19+
"class-methods-use-this": "off",
20+
"linebreak-style": 0
2921
}
30-
}
22+
}

‎src/components/KonvaStage.tsx renamed to ‎src/components/KonvaStage.jsx

File renamed without changes.

‎src/components/LeftColExpansionPanel.jsx

Lines changed: 91 additions & 205 deletions
Original file line numberDiff line numberDiff line change
@@ -1,224 +1,95 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
22
import PropTypes from 'prop-types';
33
import { withStyles } from '@material-ui/core/styles';
4-
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
5-
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
6-
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
7-
import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
4+
// import ExpansionPanel from '@material-ui/core/ExpansionPanel';
5+
// import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
6+
// import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
87
import Typography from '@material-ui/core/Typography';
9-
import Input from '@material-ui/core/Input';
10-
import MenuItem from '@material-ui/core/MenuItem';
11-
import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';
8+
// import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
9+
// 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';
1213
import ListItemText from '@material-ui/core/ListItemText';
13-
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
14-
import Switch from '@material-ui/core/Switch';
15-
import Chip from '@material-ui/core/Chip';
1614
import IconButton from '@material-ui/core/IconButton';
17-
import DeleteIcon from '@material-ui/icons/Delete';
18-
import FlipToBackIcon from '@material-ui/icons/FlipToBack';
19-
import FlipToFrontIcon from '@material-ui/icons/FlipToFront';
20-
import Select from '@material-ui/core/Select';
21-
import Tooltip from '@material-ui/core/Tooltip';
22-
import InputLabel from '@material-ui/core/InputLabel';
23-
import Divider from '@material-ui/core/Divider';
24-
25-
const styles = theme => ({
26-
root: {
27-
width: '100%',
28-
marginTop: 10,
29-
// backgroundColor: '#333333',
30-
},
31-
heading: {
32-
fontSize: theme.typography.pxToRem(15),
33-
fontWeight: theme.typography.fontWeightRegular,
34-
},
35-
chips: {
36-
display: 'flex',
37-
flexWrap: 'wrap',
38-
},
39-
chip: {
40-
margin: theme.spacing.unit / 4,
41-
},
42-
panel: {
43-
backgroundColor: '#333333',
44-
},
45-
details: {
46-
display: 'flex',
47-
flexDirection: 'column',
48-
},
49-
actions: {
50-
padding: 0,
51-
},
52-
column: {
53-
display: 'flex',
54-
alignItems: 'center',
55-
},
56-
light: {
57-
color: '#eee',
58-
// opacity: '0.8',
59-
60-
'&:hover': {
61-
color: '#1de9b6',
62-
},
63-
},
64-
label: {
65-
color: '#eee',
66-
marginRight: '10px',
67-
},
68-
formControl: {
69-
margin: theme.spacing.unit * 3,
70-
},
71-
group: {
72-
margin: `${theme.spacing.unit}px 0`,
73-
},
74-
icon: {
75-
fontSize: '20px',
76-
color: '#000',
77-
transition: 'all .2s ease',
78-
79-
'&:hover': {
80-
color: 'red',
81-
},
82-
},
83-
});
15+
import Grid from '@material-ui/core/Grid';
16+
import AddIcon from '@material-ui/icons/Add';
8417

8518
const LeftColExpansionPanel = (props) => {
8619
const {
87-
index,
88-
classes,
89-
focusComponent,
90-
component,
91-
updateComponent,
92-
deleteComponent,
93-
onExpansionPanelChange,
94-
moveToBottom,
95-
moveToTop,
20+
index, classes, focusComponent, component, deleteComponent, addChild,
9621
} = props;
97-
const {
98-
title,
99-
id,
100-
stateful,
101-
color,
102-
parents,
103-
parentIds,
104-
selectableParents,
105-
} = component;
106-
107-
const handleParentChange = (event, parentId = null) => {
108-
let newParentId = parentId;
109-
if (event) {
110-
const selectedParents = event.target.value;
111-
newParentId = selectedParents[selectedParents.length - 1].id;
112-
}
113-
114-
return updateComponent({
115-
index,
116-
id,
117-
newParentId,
118-
});
119-
};
22+
const { title, id, color } = component;
12023

12124
return (
12225
<div className={classes.root}>
123-
<ExpansionPanel
124-
className={classes.panel}
125-
expanded={focusComponent.id === id}
126-
onChange={() => onExpansionPanelChange(component)}
127-
elevation={4}
128-
>
129-
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{ color }} />}>
130-
<Typography className={classes.light}>{title}</Typography>
131-
</ExpansionPanelSummary>
132-
<ExpansionPanelDetails className={classes.details}>
133-
<div className={classes.column}>
134-
<InputLabel className={classes.label} htmlFor='stateful'>Stateful?</InputLabel>
135-
<Switch
136-
checked={stateful}
137-
onChange={event => updateComponent({ stateful: event.target.checked, index, id })}
138-
value='stateful'
139-
color='primary'
140-
id='stateful'
141-
/>
142-
</div>
143-
<div className={classes.column}>
144-
<InputLabel className={classes.label} htmlFor='boxColor'>Box Color</InputLabel>
145-
<Input
146-
type='color'
147-
id='boxColor'
148-
disableUnderline={true}
149-
value={color}
150-
onChange={event => updateComponent({ color: event.target.value, index, id })}
151-
/>
152-
</div>
153-
<div className={classes.column}>
154-
<InputLabel className={classes.label} htmlFor='parentSelect'>selectedParents</InputLabel>
155-
<Select
26+
<Grid item xs={12} md={6}>
27+
<List>
28+
<ListItem button component="a">
29+
<ListItemText
30+
disableTypography
15631
className={classes.light}
157-
multiple
158-
value={parents}
159-
id='parentSelect'
160-
name='parentName'
161-
disabled={selectableParents.length < 1}
162-
onChange={handleParentChange}
163-
input={<Input id='parentSelect' />}
164-
renderValue={selectedP => (
165-
<div className={classes.chips}>
166-
{selectedP.map(parent => (
167-
<Chip
168-
key={parent.id}
169-
label={parent.title}
170-
className={classes.chip}
171-
onDelete={() => handleParentChange(null, parent.id)}
172-
deleteIcon={<RemoveCircleOutlineIcon className={classes.icon} />}
173-
/>
174-
))}
175-
</div>
176-
)}
177-
>
178-
{selectableParents.map(parentObj => (
179-
<MenuItem key={parentObj.id} value={parentObj}>
180-
<ListItemText primary={parentObj.title} />
181-
</MenuItem>
182-
))}
183-
</Select>
184-
</div>
185-
</ExpansionPanelDetails>
186-
<Divider />
187-
<ExpansionPanelActions className={classes.actions}>
188-
<Tooltip title="move layer up">
189-
<IconButton
190-
className={classes.button}
191-
onClick={() => moveToTop(id)}
192-
aria-label='Flip to back'>
193-
<FlipToFrontIcon className={classes.light} />
194-
</IconButton>
195-
</Tooltip>
196-
<Tooltip title="move layer down">
197-
<IconButton
198-
className={classes.button}
199-
onClick={() => moveToBottom(id)}
200-
aria-label='Flip to back'>
201-
<FlipToBackIcon className={classes.light} />
202-
</IconButton>
203-
</Tooltip>
204-
<IconButton
205-
className={classes.button}
206-
onClick={() => {
207-
deleteComponent({
208-
index, id, parentIds,
209-
});
210-
}}
211-
aria-label='Delete'>
212-
<DeleteIcon className={classes.light} />
213-
</IconButton>
214-
</ExpansionPanelActions>
215-
</ExpansionPanel>
216-
</div >
32+
primary={
33+
<Typography type="body2" style={{ color: '#FFFFFF' }}>
34+
{title}
35+
</Typography>
36+
}
37+
secondary={'focused'}
38+
style={{ color }}
39+
/>
40+
<ListItemSecondaryAction>
41+
<IconButton aria-label="Add">
42+
<AddIcon
43+
style={{ color, float: 'right' }}
44+
onClick={() => {
45+
console.log(title);
46+
addChild(title);
47+
}}
48+
/>
49+
</IconButton>
50+
</ListItemSecondaryAction>
51+
</ListItem>
52+
</List>
53+
</Grid>
54+
</div>
21755
);
21856
};
21957

22058
export default withStyles(styles)(LeftColExpansionPanel);
22159

60+
/**
61+
//button and functionality for deleting a component:
62+
<IconButton
63+
className={classes.button}
64+
onClick={() => {
65+
deleteComponent({
66+
index,
67+
id,
68+
parentIds,
69+
});
70+
}}
71+
aria-label="Delete"
72+
>
73+
<DeleteIcon className={classes.light} />
74+
</IconButton>
75+
*/
76+
77+
/*
78+
//expansion panel and some functionality
79+
<div className={classes.root}>
80+
<ExpansionPanel
81+
className={classes.panel}
82+
expanded={focusComponent.id === id}
83+
onChange={() => onExpansionPanelChange(component)}
84+
elevation={4}
85+
>
86+
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{ color }} />}>
87+
<Typography className={classes.light}>{title}</Typography>
88+
</ExpansionPanelSummary>
89+
</ExpansionPanel>
90+
</div>
91+
*/
92+
22293
LeftColExpansionPanel.propTypes = {
22394
classes: PropTypes.object.isRequired,
22495
component: PropTypes.object,
@@ -227,6 +98,21 @@ LeftColExpansionPanel.propTypes = {
22798
onExpansionPanelChange: PropTypes.func,
22899
updateComponent: PropTypes.func,
229100
deleteComponent: PropTypes.func,
230-
moveToBottom: PropTypes.func,
231-
moveToTop: PropTypes.func,
232101
};
102+
103+
function styles(theme) {
104+
return {
105+
root: {
106+
width: '100%',
107+
flexGrow: 1,
108+
marginTop: 10,
109+
backgroundColor: '#333333',
110+
},
111+
light: {
112+
color: '#eee',
113+
'&:hover': {
114+
color: '#1de9b6',
115+
},
116+
},
117+
};
118+
}

0 commit comments

Comments
 (0)