Merge pull request #38 from BasicPrimitives/dragtodiag

Added dragging nodes from search drawer to the diagram in org editor demo

Author: BasicPrimitives

client/src/components/Options/TextOption.js

@@ -126,7 +126,7 @@ class TextOption extends Component { // eslint-disable-line react/prefer-statele
     const { caption, propertyName, placeholder, isNullable } = this.props;
     const { value, message } = this.state;
     return (
-      <form className={'option-panel-item'} noValidate autoComplete="off">
+      <form className={'option-panel-item'} noValidate autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
         <TextField 
           required={!isNullable}
           key={propertyName}

client/src/containers/OrgEditor/NodeDragSource.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { useDrag } from 'react-dnd'
+import useStyles from  './styles';
+import { Colors } from 'basicprimitives';
+
+const ItemTypes = {
+    NODE: 'node'
+}
+
+export default function NodeDragSource({ itemConfig }) {
+  const [{ opacity }, dragRef] = useDrag({
+    item: { type: ItemTypes.NODE, id: itemConfig.id },
+    collect: (monitor) => ({
+      opacity: monitor.isDragging() ? 0.5 : 1
+    })
+  })
+  const itemTitleColor = itemConfig.itemTitleColor != null ? itemConfig.itemTitleColor : Colors.RoyalBlue;
+  const styles = useStyles();
+  return (
+    <div style = {{width: "100%", height: "100%"}}>
+        <div ref={dragRef} style={{ opacity }} className={styles.DefaultTemplate}>
+            <div key="title" className={styles.DefaultTitleBackground} style={{ backgroundColor: itemTitleColor }}>
+                <div className={styles.DefaultTitle}>{itemConfig.title}</div>
+            </div>
+            <div key="photo" className={styles.DefaultPhotoFrame}>
+                <img className={styles.DefaultPhoto} src={itemConfig.image} alt={itemConfig.title} />
+            </div>
+            <div key="description" className={styles.DefaultDescription}>{itemConfig.description}</div>
+        </div>
+    </div>
+  )
+}

client/src/containers/OrgEditor/SearchDrawer.js

@@ -11,10 +11,8 @@ import Divider from '@material-ui/core/Divider';
 import { TextOption } from 'components';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import PersonIcon from '@material-ui/icons/Person';
-import ListItemText from '@material-ui/core/ListItemText';
 import { hideDrawer, setFilterText, setCursorItem } from 'redux/modules/demos/orgeditor';
+import NodeDragSource from './NodeDragSource';
 
 const drawerWidth = 350;
 
@@ -33,6 +31,11 @@ const useStyles = makeStyles((theme) => ({
         // necessary for content to be below app bar
         ...theme.mixins.toolbar,
         justifyContent: 'flex-start',
+    },
+    listItem: {
+        margin: theme.spacing(1),
+        width: 220,
+        height: 120
     }
 }));
 
@@ -73,12 +76,9 @@ function SearchDrawer(props) { // eslint-disable-line react/prefer-stateless-fun
                 onChange={value => dispatch(setFilterText(value))}
                 />
             <List aria-label="children-list">
-                {filteredItems.map((value, index) => (
-                    <ListItem key={`item-${value.id}`} button onClick={() => dispatch(setCursorItem(value.id, isPrimary))}>
-                        <ListItemIcon>
-                            <PersonIcon />
-                        </ListItemIcon>
-                        <ListItemText primary={value.title} />
+                {filteredItems.map((itemConfig, index) => (
+                    <ListItem className={styles.listItem} key={`item-${itemConfig.id}`} button onClick={() => dispatch(setCursorItem(itemConfig.id, isPrimary))}>
+                        <NodeDragSource itemConfig={itemConfig}></NodeDragSource>
                     </ListItem>
                 ))}
             </List>