Added withModal HOC demo

rajeshpillai · rajeshpillai · commit 126d13812554 · 2018-05-08T16:10:51.000+05:30
diff --git a/src/App.js b/src/App.js
@@ -9,7 +9,7 @@ import withBorder from './components/HOC/withBorder';
 
 class App extends Component {
   state = {
-    show: false
+    show: false,
   }
 
   showModal = () => {
@@ -20,6 +20,7 @@ class App extends Component {
   }
   render() {
     let WithBorderInput = withBorder (InputTag);
+
     return (
       <div className="App">
         {/* <WithBorderInput placeholder="press enter/space to + tag" /> */}
@@ -31,7 +32,6 @@ class App extends Component {
         <Modal onClose={this.showModal} show={this.state.show}>
               This message is from Modal!
         </Modal>
-
       </div>
     );
   }
diff --git a/src/AppWithModal.js b/src/AppWithModal.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import withModal from './components/HOC/withModal';
+import TodoItem from './features/todo/todo-item';
+import './appwithmodal.css';
+
+export default class AppWithModal extends Component {
+  state = {
+    todos: [
+      {id: 1, title: "Learn React"},
+      {id: 2, title: "Learn Angular"},
+      {id: 3, title: "Learn Vue"},
+      {id: 4, title: "Learn Node"},
+      {id: 5, title: "Learn MongoDB"},
+      {id: 6, title: "Learn GraphQL"},
+      {id: 7, title: "Learn Redux"},
+      {id: 8, title: "Learn .NET Core"},
+    ]
+  }
+
+  render() {
+    let taskUI = this.state.todos.map((todo) => {
+      let TodoItemWithModal = withModal(TodoItem);
+      return (
+         <TodoItemWithModal key={todo.id} todo={todo} />
+      );
+    });
+
+    return (
+      <div>
+         <h2>HOC - Modal Dialog Demo</h2>
+         <div className="todo-list">
+          {taskUI}
+         </div>
+      </div>
+    );
+  }
+}
diff --git a/src/appwithmodal.css b/src/appwithmodal.css
@@ -0,0 +1,19 @@
+body {
+    margin: 20px;
+}
+.todo-list {
+    display: flex;
+    flex: 1;  /* All items same length, regardless of content */
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.todo-item {
+    padding: 20px;
+    width: 200px;
+    background-color: coral;
+    color: white;
+    margin: 10px;
+    user-select: none;
+
+}
diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
@@ -83,5 +83,6 @@ export default class Modal extends React.Component {
 }
 
 Modal.propTypes = {
-    onClose: PropTypes.func.isRequired
+    onClose: PropTypes.func.isRequired,
+    show: PropTypes.bool.isRequired
 }
diff --git a/src/features/todo/todo-item.js b/src/features/todo/todo-item.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const todoItem = ({todo}) => {
+    return(
+        <div className="todo-item">
+            <h2>{todo.title}</h2>
+        </div>
+    );
+}
+
+export default todoItem;
diff --git a/src/index.js b/src/index.js
@@ -4,8 +4,9 @@ import './index.css';
 import App from './App';
 import AppDragDropDemo from './AppDragDropDemo';
 import AppSlideShow from './AppSlideShow';
+import AppWithModal from './AppWithModal';
 
 import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<AppWithModal />, document.getElementById('root'));
 registerServiceWorker();

Original file line number	Diff line number	Diff line change
`@@ -83,5 +83,6 @@ export default class Modal extends React.Component {`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`Modal.propTypes = {`
`86`		`- onClose: PropTypes.func.isRequired`
	`86`	`+ onClose: PropTypes.func.isRequired,`
	`87`	`+ show: PropTypes.bool.isRequired`
`87`	`88`	`}`