TaskFormLayer now a seperate file

hpe-dev-incubator · Oct 31, 2018 · a8c0518 · a8c0518
1 parent a668306
commit a8c0518
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 36 deletions.
diff --git a/src/Components/TaskFormLayer/index.js b/src/Components/TaskFormLayer/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Layer, Box, TextArea, Select, Button } from 'grommet';
+import { FormAdd, FormClose } from 'grommet-icons'; 
+
+const TaskFormLayer = ({value, description, onDropChange, onClose, onChange, onSubmit, onEdit, edit }) => (
+	<Layer
+		position="center"
+		onClickOutside={onClose}
+		onEsc={onClose}
+    margin="large"
+    modal={true}
+	>
+		<Box margin="medium" direction="column">
+			<TextArea
+        placeholder="Enter the description of your task here"
+        onChange={onChange}
+        style={{ "resize": "none" }}
+        value= {description}
+			>
+			</TextArea>
+      <Box direction="row" justify="center">
+        <Select
+          placeholder="Status"
+          margin="small"
+          size="xsmall"
+          options={['Unassigned', 'In Progress', 'Completed']}
+          value={value}
+          onChange={onDropChange}
+        >
+        </Select>
+        <Button icon={<FormAdd />} onClick={edit ? onEdit : onSubmit}></Button>
+        <Button icon={<FormClose />}onClick={ onClose }></Button>
+      </Box>
+		</Box>
+	</Layer>
+);
+
+export default TaskFormLayer;
diff --git a/src/Components/TaskFormLayer/styles.js b/src/Components/TaskFormLayer/styles.js
diff --git a/src/Components/TaskManager/index.js b/src/Components/TaskManager/index.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { Box, Button, Layer, TextArea, Select, Paragraph } from 'grommet';
-import { Add, FormSubtract, FormClose, FormAdd, FormEdit  } from 'grommet-icons';
+import { Box, Button, Paragraph } from 'grommet';
+import { Add, FormSubtract, FormEdit  } from 'grommet-icons';
+import TaskFormLayer from '../TaskFormLayer';
 
 class TaskManager extends Component {
   constructor(props) {
@@ -226,37 +227,3 @@ class TaskManager extends Component {
 }
 
 export default TaskManager;
-
-/* Task form layer  */
-const TaskFormLayer = ({value, description, onDropChange, onClose, onChange, onSubmit, onEdit, edit }) => (
-	<Layer
-		position="center"
-		onClickOutside={onClose}
-		onEsc={onClose}
-    margin="large"
-    modal={true}
-	>
-		<Box margin="medium" direction="column">
-			<TextArea
-        placeholder="Enter the description of your task here"
-        onChange={onChange}
-        style={{ "resize": "none" }}
-        value= {description}
-			>
-			</TextArea>
-      <Box direction="row" justify="center">
-        <Select
-          placeholder="Status"
-          margin="small"
-          size="xsmall"
-          options={['Unassigned', 'In Progress', 'Completed']}
-          value={value}
-          onChange={onDropChange}
-        >
-        </Select>
-        <Button icon={<FormAdd />} onClick={edit ? onEdit : onSubmit}></Button>
-        <Button icon={<FormClose />}onClick={ onClose }></Button>
-      </Box>
-		</Box>
-	</Layer>
-);