Merge pull request #88 from React-Proto/feat/multiple_parents

Allow component to have multiple parents.

src/actionTypes/index.js

@@ -2,8 +2,7 @@ export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
 export const ADD_COMPONENT = 'ADD_COMPONENT';
 export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
 export const DELETE_COMPONENT = 'DELETE_COMPONENT';
-export const ADD_NEW_CHILD = 'ADD_NEW_CHILD';
-export const DELETE_CHILD = 'DELETE_CHILD';
+export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
 export const REASSIGN_PARENT = 'REASSIGN_PARENT';
 export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';
 export const EXPORT_FILES = 'EXPORT_FILES';

src/actions/components.js

@@ -3,8 +3,7 @@ import {
   ADD_COMPONENT,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
-  ADD_NEW_CHILD,
-  DELETE_CHILD,
+  UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
   EXPORT_FILES,
@@ -40,30 +39,21 @@ export const loadInitData = () => (dispatch) => {
     }));
 };
 
-export const addNewChild = (({
-  id, childIndex, childId,
+export const updateChildren = (({
+  parentIds, childIndex, childId,
 }) => ({
-  type: ADD_NEW_CHILD,
+  type: UPDATE_CHILDREN,
   payload: {
-    id, childIndex, childId,
+    parentIds, childIndex, childId,
   },
 }));
 
-export const deleteChild = (({
-  parent, childIndex, childId,
-}) => ({
-  type: DELETE_CHILD,
-  payload: {
-    parent, childIndex, childId,
-  },
-}));
-
-export const parentReassignment = (({ index, id, parent }) => ({
+export const parentReassignment = (({ index, id, parentIds }) => ({
   type: REASSIGN_PARENT,
   payload: {
     index,
     id,
-    parent,
+    parentIds,
   },
 }));
 
@@ -72,19 +62,20 @@ export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
-export const deleteComponent = ({ index, id, parent }) => (dispatch) => {
-  // Delete Component  from its parent if it has a parent.
-  if (parent && parent.id) {
-    dispatch(deleteChild({ parent, childId: id, childIndex: index }));
+export const deleteComponent = ({ index, id, parentIds = [] }) => (dispatch) => {
+  if (parentIds.length) {
+    // Delete Component  from its parent if it has a parent.
+    dispatch(updateChildren({ parentIds, childId: id, childIndex: index }));
   }
   // Reassign Component's children to its parent if it has one or make them orphans
-  dispatch(parentReassignment({ index, id, parent }));
+  dispatch(parentReassignment({ index, id, parentIds }));
+
   dispatch({ type: DELETE_COMPONENT, payload: { index, id } });
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
 export const updateComponent = ({
-  id, index, parent = null, newParentId = null, color = null, stateful = null,
+  id, index, newParentId = null, color = null, stateful = null,
 }) => (dispatch) => {
   dispatch({
     type: UPDATE_COMPONENT,
@@ -93,12 +84,8 @@ export const updateComponent = ({
     },
   });
 
-  if (newParentId && newParentId !== 'null') {
-    dispatch(addNewChild({ id: newParentId, childId: id, childIndex: index }));
-  }
-
-  if (parent && parent.id) {
-    dispatch(deleteChild({ parent, index, childId: id }));
+  if (newParentId) {
+    dispatch(updateChildren({ parentIds: [newParentId], childId: id, childIndex: index }));
   }
 
   dispatch({ type: SET_SELECTABLE_PARENTS });

src/components/LeftColExpansionPanel.jsx

@@ -7,8 +7,12 @@ import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 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 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';
@@ -28,6 +32,13 @@ const styles = theme => ({
     fontSize: theme.typography.pxToRem(15),
     fontWeight: theme.typography.fontWeightRegular,
   },
+  chips: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  chip: {
+    margin: theme.spacing.unit / 4,
+  },
   panel: {
     backgroundColor: '#333333',
   },
@@ -60,6 +71,15 @@ const styles = theme => ({
   group: {
     margin: `${theme.spacing.unit}px 0`,
   },
+  icon: {
+    fontSize: '20px',
+    color: '#000',
+    transition: 'all .2s ease',
+
+    '&:hover': {
+      color: 'red',
+    },
+  },
 });
 
 const LeftColExpansionPanel = (props) => {
@@ -79,23 +99,24 @@ const LeftColExpansionPanel = (props) => {
     id,
     stateful,
     color,
-    parent,
+    parents,
+    parentIds,
     selectableParents,
   } = component;
 
-  const parentOptions = [
-    <option value='null' key=''>
-      None
-    </option>,
-    ...selectableParents.map(
-      selectableParent => <option
-        value={selectableParent.id}
-        key={selectableParent.id}
-      >
-        {selectableParent.title}
-      </option>,
-    ),
-  ];
+  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,
+    });
+  };
 
   return (
     <div className={classes.root}>
@@ -130,24 +151,35 @@ const LeftColExpansionPanel = (props) => {
             />
           </div>
           <div className={classes.column}>
-            <InputLabel className={classes.label} htmlFor='parentSelect'>Parent</InputLabel>
+            <InputLabel className={classes.label} htmlFor='parentSelect'>selectedParents</InputLabel>
             <Select
               className={classes.light}
-              native
-              value={parent.id}
+              multiple
+              value={parents}
               id='parentSelect'
               name='parentName'
-              onChange={(event) => {
-                const newParentId = event.target.value;
-                updateComponent({
-                  newParentId,
-                  index,
-                  id,
-                  parent,
-                });
-              }}
+              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>
+              )}
             >
-              {parentOptions}
+            {selectableParents.map(parentObj => (
+              <MenuItem key={parentObj.id} value={parentObj}>
+                <ListItemText primary={parentObj.title} />
+              </MenuItem>
+            ))}
             </Select>
           </div>
         </ExpansionPanelDetails>
@@ -173,7 +205,7 @@ const LeftColExpansionPanel = (props) => {
             className={classes.button}
             onClick={() => {
               deleteComponent({
-                index, id, parent,
+                index, id, parentIds,
               });
             }}
             aria-label='Delete'>

src/components/SortableComponent.jsx

@@ -5,15 +5,16 @@ import 'react-sortable-tree/style.css';
 
 const SortableComponent = (props) => {
   const rootComponents = props.components.filter(
-    comp => comp.parentId.length === 0,
+    comp => comp.parentIds.length === 0,
   ).reverse();
+
   return (
     <div className="sortable-tree">
       <SortableTree
         style={{ backgroundColor: 'rgb(37, 37, 38)' }}
         treeData={rootComponents}
         canDrag={false}
-        onChange={treeData => this.setState({ treeData })}
+        onChange={() => {}}
       />
     </div>
   );
@@ -22,5 +23,5 @@ const SortableComponent = (props) => {
 export default SortableComponent;
 
 SortableComponent.propTypes = {
-  components: PropTypes.array,
+  components: PropTypes.array.isRequired,
 };

src/containers/AppContainer.jsx

@@ -6,7 +6,7 @@ import LinearProgress from '@material-ui/core/LinearProgress';
 import LeftContainer from './LeftContainer.jsx';
 import MainContainer from './MainContainer.jsx';
 import RightContainer from './RightContainer.jsx';
-import convertIdToObjs from '../utils/convertIdsToObjs.util';
+import convertIdsToObjs from '../utils/convertIdsToObjs.util';
 import theme from '../components/theme';
 import { loadInitData } from '../actions/components';
 
@@ -51,7 +51,7 @@ class AppContainer extends Component {
       loading,
     } = this.props;
     const { width, rightColumnOpen } = this.state;
-    const updatedComponents = convertIdToObjs(components);
+    const updatedComponents = convertIdsToObjs(components);
 
     return (
       <MuiThemeProvider theme={theme}>

src/containers/LeftContainer.jsx

@@ -16,20 +16,20 @@ const mapDispatchToProps = dispatch => ({
   addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
   updateComponent:
     ({
-      id, index, parent = null, newParentId = null, color = null, stateful = null,
+      id, index, newParentId = null, color = null, stateful = null,
     }) => dispatch(actions.updateComponent({
-      id, index, parent, newParentId, color, stateful,
+      id, index, newParentId, color, stateful,
     })),
   deleteComponent: ({
-    index, id, parent,
-  }) => dispatch(actions.deleteComponent({ index, id, parent })),
+    index, id, parentIds,
+  }) => dispatch(actions.deleteComponent({ index, id, parentIds })),
   moveToBottom: componentId => dispatch(actions.moveToBottom(componentId)),
   moveToTop: componentId => dispatch(actions.moveToTop(componentId)),
   openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
   deleteAllData: () => dispatch(actions.deleteAllData()),
 });
 
-const styles = theme => ({
+const styles = () => ({
   cssLabel: {
     color: 'white',
 

src/containers/MainContainer.jsx

@@ -221,10 +221,13 @@ class MainContainer extends Component {
       showGenerateAppModal,
       setImage,
     } = this;
+    const cursor = this.state.draggable ? 'move' : 'default';
 
     return (
       <MuiThemeProvider theme={theme}>
-        <div className="main-container">
+        <div
+          className="main-container"
+          style={{ cursor }}>
           <MainContainerHeader
             image={image}
             increaseHeight={increaseHeight}

src/containers/RightContainer.jsx

@@ -77,6 +77,7 @@ RightContainer.propTypes = {
   deleteProp: PropTypes.func.isRequired,
   addProp: PropTypes.func.isRequired,
   width: PropTypes.number.isRequired,
+  rightColumnOpen: PropTypes.bool.isRequired,
 };
 
 

src/localStorage.js

@@ -1,5 +1,4 @@
 import localforage from 'localforage';
 
-export const saveState = state => localforage.setItem('state', state);
-
-export const loadState = () => localforage.getItem('state');
+export const saveState = state => localforage.setItem('state-v1.0.1', state);
+export const loadState = () => localforage.getItem('state-v1.0.1');

src/reducers/componentReducer.js

@@ -3,8 +3,7 @@ import {
   ADD_COMPONENT,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
-  ADD_NEW_CHILD,
-  DELETE_CHILD,
+  UPDATE_CHILDREN,
   REASSIGN_PARENT,
   SET_SELECTABLE_PARENTS,
   EXPORT_FILES,
@@ -28,8 +27,7 @@ import {
   addComponent,
   updateComponent,
   deleteComponent,
-  addChild,
-  deleteChild,
+  updateChildren,
   reassignParent,
   setSelectableP,
   exportFilesSuccess,
@@ -74,10 +72,8 @@ const componentReducer = (state = initialApplicationState, action) => {
       return updateComponent(state, action.payload);
     case DELETE_COMPONENT:
       return deleteComponent(state, action.payload);
-    case ADD_NEW_CHILD:
-      return addChild(state, action.payload);
-    case DELETE_CHILD:
-      return deleteChild(state, action.payload);
+    case UPDATE_CHILDREN:
+      return updateChildren(state, action.payload);
     case REASSIGN_PARENT:
       return reassignParent(state, action.payload);
     case SET_SELECTABLE_PARENTS: