Skip to content

Commit

Permalink
Merge pull request #12 from ChristianEdwardPadilla/development
Browse files Browse the repository at this point in the history 
addChild button functionality started
  • Loading branch information
@spincycle01
spincycle01 authored Apr 20, 2019
2 parents 4e4d8d9 + 36adf98 commit 0db08b3
Show file tree
Hide file tree
Showing 7 changed files with 338 additions and 480 deletions.
18 changes: 5 additions & 13 deletions .eslintrc.json
View file
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
File renamed without changes.
296 changes: 91 additions & 205 deletions src/components/LeftColExpansionPanel.jsx
View file
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

0 comments on commit 0db08b3

Please sign in to comment.