gantt and timeline has separated, added OOB list

example/src/App.tsx

@@ -1,13 +1,19 @@
 import React from "react";
 import "gantt-task-react/dist/index.css";
-import { Task, ViewMode } from "gantt-task-react";
+import { Task, ViewMode, Gantt } from "gantt-task-react";
 import { ViewSwitcher } from "./components/view-switcher";
-import { GanttTableExample } from "./components/gantt-table";
 
 //Init
 const App = () => {
   const currentDate = new Date();
   const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
+  const [isChecked, setIsChecked] = React.useState(true);
+  let columnWidth = 60;
+  if (view === ViewMode.Month) {
+    columnWidth = 300;
+  } else if (view === ViewMode.Week) {
+    columnWidth = 250;
+  }
   let tasks: Task[] = [
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
@@ -21,7 +27,6 @@ const App = () => {
       name: "Idea",
       id: "Task 0",
       progress: 45,
-      isDisabled: true,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
@@ -58,12 +63,20 @@ const App = () => {
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
       end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 16),
-      name: "Release & Eat Burgers",
+      name: "Release & Eat Pizza",
       id: "Task 6",
       progress: currentDate.getMonth(),
       dependencies: ["Task 4"],
       styles: { progressColor: "#ffbb54", progressSelectedColor: "#ff9e0d" },
     },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 24),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 25),
+      name: "Closing",
+      id: "Task 9",
+      progress: 0,
+      isDisabled: true,
+    },
   ];
 
   let onTaskChange = (task: Task) => {
@@ -85,14 +98,33 @@ const App = () => {
 
   return (
     <div>
-      <ViewSwitcher onViewChange={viewMode => setView(viewMode)} />
-      <GanttTableExample
+      <ViewSwitcher
+        onViewModeChange={viewMode => setView(viewMode)}
+        onViewListChange={setIsChecked}
+        isChecked={isChecked}
+      />
+      <h3>Gantt With Unlimited Height</h3>
+      <Gantt
         tasks={tasks}
         viewMode={view}
         onDateChange={onTaskChange}
         onTaskDelete={onTaskDelete}
         onProgressChange={onProgressChange}
         onDoubleClick={onDblClick}
+        listCellWidth={isChecked ? "150px" : ""}
+        columnWidth={columnWidth}
+      />
+      <h3>Gantt With Limited Height</h3>
+      <Gantt
+        tasks={tasks}
+        viewMode={view}
+        onDateChange={onTaskChange}
+        onTaskDelete={onTaskDelete}
+        onProgressChange={onProgressChange}
+        onDoubleClick={onDblClick}
+        listCellWidth={isChecked ? "150px" : ""}
+        ganttHeight={300}
+        columnWidth={columnWidth}
       />
     </div>
   );

example/src/components/gantt-table.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-import "gantt-task-react/dist/index.css";
-import {
-  Gantt,
-  Task,
-  EventOption,
-  StylingOption,
-  ViewMode,
-  DisplayOption,
-} from "gantt-task-react";
-
-//Gantt with Custom table example
-type GanttTableExampleProps = { tasks: Task[] } & EventOption & DisplayOption;
-export const GanttTableExample: React.SFC<GanttTableExampleProps> = props => {
-  const gridColumnWidth = 150;
-  let options: StylingOption = {
-    fontSize: "14px",
-    fontFamily:
-      "Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue",
-    headerHeight: 50,
-    rowHeight: 50,
-  };
-  if (props.viewMode === ViewMode.Month) {
-    options.columnWidth = 300;
-  } else if (props.viewMode === ViewMode.Week) {
-    options.columnWidth = 250;
-  }
-
-  return (
-    <div className="Wrapper">
-      <div
-        className="GanttTable"
-        style={{
-          fontFamily: options.fontFamily,
-          fontSize: options.fontSize,
-        }}
-      >
-        <div
-          className="GanttTable-header"
-          style={{
-            height: options.headerHeight,
-          }}
-        >
-          <div
-            className="GanttTable-headerItem"
-            style={{
-              minWidth: gridColumnWidth,
-            }}
-          >
-            <span role="img" aria-label="fromDate" className="GanttTable-icon">
-              📃
-            </span>
-            Name
-          </div>
-          <div
-            className="GanttTable-headerItem"
-            style={{
-              minWidth: gridColumnWidth,
-            }}
-          >
-            <span role="img" aria-label="fromDate" className="GanttTable-icon">
-              📅
-            </span>
-            From
-          </div>
-          <div
-            className="GanttTable-headerItem"
-            style={{
-              minWidth: gridColumnWidth,
-            }}
-          >
-            <span role="img" aria-label="toDate" className="GanttTable-icon">
-              📅
-            </span>
-            To
-          </div>
-        </div>
-        {props.tasks.map(t => {
-          return (
-            <div
-              className="GanttTable-row"
-              style={{ height: options.rowHeight }}
-            >
-              <div className="GanttTable-cell">{t.name}</div>
-              <div className="GanttTable-cell">{t.start.toDateString()}</div>
-              <div className="GanttTable-cell">{t.end.toDateString()}</div>
-            </div>
-          );
-        })}
-      </div>
-      <div style={{ overflowX: "scroll" }}>
-        <Gantt {...props} {...options} />
-      </div>
-    </div>
-  );
-};

example/src/components/view-switcher.tsx

@@ -2,31 +2,56 @@ import React from "react";
 import "gantt-task-react/dist/index.css";
 import { ViewMode } from "gantt-task-react";
 type ViewSwitcherProps = {
-  onViewChange: (viewMode: ViewMode) => void;
+  isChecked: boolean;
+  onViewListChange: (isChecked: boolean) => void;
+  onViewModeChange: (viewMode: ViewMode) => void;
 };
 export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
-  onViewChange,
+  onViewModeChange,
+  onViewListChange,
+  isChecked,
 }) => {
   return (
     <div className="ViewContainer">
       <button
         className="Button"
-        onClick={() => onViewChange(ViewMode.QuarterDay)}
+        onClick={() => onViewModeChange(ViewMode.QuarterDay)}
       >
         Quarter of Day
       </button>
-      <button className="Button" onClick={() => onViewChange(ViewMode.HalfDay)}>
+      <button
+        className="Button"
+        onClick={() => onViewModeChange(ViewMode.HalfDay)}
+      >
         Half of Day
       </button>
-      <button className="Button" onClick={() => onViewChange(ViewMode.Day)}>
+      <button className="Button" onClick={() => onViewModeChange(ViewMode.Day)}>
         Day
       </button>
-      <button className="Button" onClick={() => onViewChange(ViewMode.Week)}>
+      <button
+        className="Button"
+        onClick={() => onViewModeChange(ViewMode.Week)}
+      >
         Week
       </button>
-      <button className="Button" onClick={() => onViewChange(ViewMode.Month)}>
+      <button
+        className="Button"
+        onClick={() => onViewModeChange(ViewMode.Month)}
+      >
         Month
       </button>
+
+      <div className="Switch">
+        <label className="Switch_Toggle">
+          <input
+            type="checkbox"
+            defaultChecked={isChecked}
+            onClick={() => onViewListChange(!isChecked)}
+          />
+          <span className="Slider" />
+        </label>
+        Show Task List
+      </div>
     </div>
   );
 };

example/src/index.css

@@ -1,57 +1,10 @@
-/*Styles for Example Table*/
-.Wrapper {
-  display: flex;
-  justify-content: space-around;
-  background: #ffff;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.GanttTable {
-  display: table;
-}
-
-.GanttTable-header {
-  display: table-row;
-  list-style: none;
-}
-
-.GanttTable-headerItem {
-  display: table-cell;
-  padding-top: 24px;
-  vertical-align: text-bottom;
-
-  border-left: #e6e4e4 1px solid;
-  border-top: #e6e4e4 1px solid;
-  border-bottom: #e6e4e4 1px solid;
-}
-
-.GanttTable-row {
-  display: table-row;
-  text-overflow: ellipsis;
-}
-
-.GanttTable-row:nth-of-type(odd) {
-  background-color: #f5f5f5;
-}
-
-.GanttTable-cell {
-  display: table-cell;
-  vertical-align: middle;
-  border-left: #e6e4e4 1px solid;
-}
-
-.GanttTable-icon {
-  padding-right: 2px;
-}
-
 .ViewContainer {
   list-style: none;
   -ms-box-orient: horizontal;
   display: flex;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .Button {
@@ -59,9 +12,68 @@
   color: black;
   border: none;
   padding: 7px 16px;
-  text-align: center;
   text-decoration: none;
-  font-size: 14px;
   margin: 4px 2px;
   cursor: pointer;
+  font-size: 14px;
+  text-align: center;
+}
+.Switch {
+  margin: 4px 15px;
+  font-size: 14px;
+  font-family: "Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue";
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.Switch_Toggle {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+  margin-right: 5px;
+}
+
+.Switch_Toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.Slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.Slider:before {
+  position: absolute;
+  content: "";
+  height: 21px;
+  width: 21px;
+  left: 6px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .Slider {
+  background-color: #2196f3;
+}
+
+input:focus + .Slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .Slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
 }