Skip to content

addChild button functionality started #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 20, 2019
Merged

addChild button functionality started #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f56dcbc
small config changes
ChristianEdwardPadilla Apr 19, 2019
0f5621f
leftExpansionCol changed to MUI list, functionality stripped
ChristianEdwardPadilla Apr 20, 2019
36adf98
addChild button added
ChristianEdwardPadilla Apr 20, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 5 additions & 13 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,13 @@
{
"extends": [
"plugin:react/recommended",
"airbnb-base"
],
"extends": ["plugin:react/recommended", "airbnb-base"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"import",
"react",
"jest",
"jsx-a11y",
"babel"
],
"plugins": ["import", "react", "jest", "jsx-a11y", "babel"],
"parser": "babel-eslint",
"env": {
"browser": true,
Expand All @@ -25,6 +16,7 @@
"jest": true
},
"rules": {
"class-methods-use-this": "off"
"class-methods-use-this": "off",
"linebreak-style": 0
}
}
}
0 src/components/KonvaStage.tsx → src/components/KonvaStage.jsx
View file
Open in desktop
File renamed without changes.
296 changes: 91 additions & 205 deletions src/components/LeftColExpansionPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,224 +1,95 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
// import ExpansionPanel from '@material-ui/core/ExpansionPanel';
// import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
// import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
import Typography from '@material-ui/core/Typography';
import Input from '@material-ui/core/Input';
import MenuItem from '@material-ui/core/MenuItem';
import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';
// import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
// import Divider from '@material-ui/core/Divider';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import Switch from '@material-ui/core/Switch';
import Chip from '@material-ui/core/Chip';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import FlipToBackIcon from '@material-ui/icons/FlipToBack';
import FlipToFrontIcon from '@material-ui/icons/FlipToFront';
import Select from '@material-ui/core/Select';
import Tooltip from '@material-ui/core/Tooltip';
import InputLabel from '@material-ui/core/InputLabel';
import Divider from '@material-ui/core/Divider';

const styles = theme => ({
root: {
width: '100%',
marginTop: 10,
// backgroundColor: '#333333',
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
chips: {
display: 'flex',
flexWrap: 'wrap',
},
chip: {
margin: theme.spacing.unit / 4,
},
panel: {
backgroundColor: '#333333',
},
details: {
display: 'flex',
flexDirection: 'column',
},
actions: {
padding: 0,
},
column: {
display: 'flex',
alignItems: 'center',
},
light: {
color: '#eee',
// opacity: '0.8',

'&:hover': {
color: '#1de9b6',
},
},
label: {
color: '#eee',
marginRight: '10px',
},
formControl: {
margin: theme.spacing.unit * 3,
},
group: {
margin: `${theme.spacing.unit}px 0`,
},
icon: {
fontSize: '20px',
color: '#000',
transition: 'all .2s ease',

'&:hover': {
color: 'red',
},
},
});
import Grid from '@material-ui/core/Grid';
import AddIcon from '@material-ui/icons/Add';

const LeftColExpansionPanel = (props) => {
const {
index,
classes,
focusComponent,
component,
updateComponent,
deleteComponent,
onExpansionPanelChange,
moveToBottom,
moveToTop,
index, classes, focusComponent, component, deleteComponent, addChild,
} = props;
const {
title,
id,
stateful,
color,
parents,
parentIds,
selectableParents,
} = component;

const handleParentChange = (event, parentId = null) => {
let newParentId = parentId;
if (event) {
const selectedParents = event.target.value;
newParentId = selectedParents[selectedParents.length - 1].id;
}

return updateComponent({
index,
id,
newParentId,
});
};
const { title, id, color } = component;

return (
<div className={classes.root}>
<ExpansionPanel
className={classes.panel}
expanded={focusComponent.id === id}
onChange={() => onExpansionPanelChange(component)}
elevation={4}
>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{ color }} />}>
<Typography className={classes.light}>{title}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails className={classes.details}>
<div className={classes.column}>
<InputLabel className={classes.label} htmlFor='stateful'>Stateful?</InputLabel>
<Switch
checked={stateful}
onChange={event => updateComponent({ stateful: event.target.checked, index, id })}
value='stateful'
color='primary'
id='stateful'
/>
</div>
<div className={classes.column}>
<InputLabel className={classes.label} htmlFor='boxColor'>Box Color</InputLabel>
<Input
type='color'
id='boxColor'
disableUnderline={true}
value={color}
onChange={event => updateComponent({ color: event.target.value, index, id })}
/>
</div>
<div className={classes.column}>
<InputLabel className={classes.label} htmlFor='parentSelect'>selectedParents</InputLabel>
<Select
<Grid item xs={12} md={6}>
<List>
<ListItem button component="a">
<ListItemText
disableTypography
className={classes.light}
multiple
value={parents}
id='parentSelect'
name='parentName'
disabled={selectableParents.length < 1}
onChange={handleParentChange}
input={<Input id='parentSelect' />}
renderValue={selectedP => (
<div className={classes.chips}>
{selectedP.map(parent => (
<Chip
key={parent.id}
label={parent.title}
className={classes.chip}
onDelete={() => handleParentChange(null, parent.id)}
deleteIcon={<RemoveCircleOutlineIcon className={classes.icon} />}
/>
))}
</div>
)}
>
{selectableParents.map(parentObj => (
<MenuItem key={parentObj.id} value={parentObj}>
<ListItemText primary={parentObj.title} />
</MenuItem>
))}
</Select>
</div>
</ExpansionPanelDetails>
<Divider />
<ExpansionPanelActions className={classes.actions}>
<Tooltip title="move layer up">
<IconButton
className={classes.button}
onClick={() => moveToTop(id)}
aria-label='Flip to back'>
<FlipToFrontIcon className={classes.light} />
</IconButton>
</Tooltip>
<Tooltip title="move layer down">
<IconButton
className={classes.button}
onClick={() => moveToBottom(id)}
aria-label='Flip to back'>
<FlipToBackIcon className={classes.light} />
</IconButton>
</Tooltip>
<IconButton
className={classes.button}
onClick={() => {
deleteComponent({
index, id, parentIds,
});
}}
aria-label='Delete'>
<DeleteIcon className={classes.light} />
</IconButton>
</ExpansionPanelActions>
</ExpansionPanel>
</div >
primary={
<Typography type="body2" style={{ color: '#FFFFFF' }}>
{title}
</Typography>
}
secondary={'focused'}
style={{ color }}
/>
<ListItemSecondaryAction>
<IconButton aria-label="Add">
<AddIcon
style={{ color, float: 'right' }}
onClick={() => {
console.log(title);
addChild(title);
}}
/>
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</List>
</Grid>
</div>
);
};

export default withStyles(styles)(LeftColExpansionPanel);

/**
//button and functionality for deleting a component:
<IconButton
className={classes.button}
onClick={() => {
deleteComponent({
index,
id,
parentIds,
});
}}
aria-label="Delete"
>
<DeleteIcon className={classes.light} />
</IconButton>
*/

/*
//expansion panel and some functionality
<div className={classes.root}>
<ExpansionPanel
className={classes.panel}
expanded={focusComponent.id === id}
onChange={() => onExpansionPanelChange(component)}
elevation={4}
>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon style={{ color }} />}>
<Typography className={classes.light}>{title}</Typography>
</ExpansionPanelSummary>
</ExpansionPanel>
</div>
*/

LeftColExpansionPanel.propTypes = {
classes: PropTypes.object.isRequired,
component: PropTypes.object,
Expand All @@ -227,6 +98,21 @@ LeftColExpansionPanel.propTypes = {
onExpansionPanelChange: PropTypes.func,
updateComponent: PropTypes.func,
deleteComponent: PropTypes.func,
moveToBottom: PropTypes.func,
moveToTop: PropTypes.func,
};

function styles(theme) {
return {
root: {
width: '100%',
flexGrow: 1,
marginTop: 10,
backgroundColor: '#333333',
},
light: {
color: '#eee',
'&:hover': {
color: '#1de9b6',
},
},
};
}
Loading