moved to create-react-library

example/.npmignore

@@ -1,3 +0,0 @@
-node_modules
-.cache
-dist

example/README.md

@@ -0,0 +1,5 @@
+This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+It is linked to the gantt-task-react package in the parent directory for development purposes.
+
+You can run `npm install` and then `npm start` to test your package.

example/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Playground</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-
-  <body>
-    <div id="root"></div>
-    <script src="./index.tsx"></script>
-  </body>
-</html>

example/index.tsx

@@ -1,259 +0,0 @@
-import 'react-app-polyfill/ie11';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import {
-  Gantt,
-  Task,
-  EventOption,
-  StylingOption,
-  ViewMode,
-  DisplayOption,
-} from '../src/index';
-
-//Init
-const App = () => {
-  const currentDate = new Date();
-  const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
-  let tasks: Task[] = [
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
-      end: new Date(
-        currentDate.getFullYear(),
-        currentDate.getMonth(),
-        2,
-        12,
-        28
-      ),
-      name: 'Idea',
-      id: 'Task 0',
-      progress: 45,
-      isDisabled: true,
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
-      name: 'Research',
-      id: 'Task 1',
-      progress: 25,
-      dependencies: ['Task 0'],
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
-      name: 'Discussion with team',
-      id: 'Task 2',
-      progress: 10,
-      dependencies: ['Task 1'],
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
-      name: 'Developing',
-      id: 'Task 3',
-      progress: 2,
-      dependencies: ['Task 2'],
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
-      name: 'Review',
-      id: 'Task 4',
-      progress: 70,
-      dependencies: ['Task 2'],
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 26),
-      name: 'Release',
-      id: 'Task 6',
-      progress: currentDate.getMonth(),
-      dependencies: ['Task 4'],
-      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
-    },
-  ];
-
-  let onTaskChange = (task: Task) => {
-    console.log('On date change');
-  };
-
-  let onTaskDelete = (task: Task) => {
-    const conf = confirm('Are you sure?');
-    if (!conf) throw 'No del';
-  };
-
-  let onProgressChange = (task: Task) => {
-    console.log('On progress change');
-  };
-
-  let onDblClick = (task: Task) => {
-    alert('On Double Click event');
-  };
-
-  return (
-    <div>
-      <ViewSwitcher onViewChange={viewMode => setView(viewMode)} />
-      <GanttTableExample
-        tasks={tasks}
-        viewMode={view}
-        onDateChange={onTaskChange}
-        onTaskDelete={onTaskDelete}
-        onProgressChange={onProgressChange}
-        onDoubleClick={onDblClick}
-      />
-    </div>
-  );
-};
-
-//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;
-  }
-
-  const [tasks, setTasks] = React.useState(props.tasks);
-  const onTaskDateChange = async (task: Task) => {
-    if (props.onDateChange) {
-      try {
-        await props.onDateChange(task);
-      } catch (e) {
-        throw e;
-      }
-      setTasks(tasks.map(t => (t.id === task.id ? task : t)));
-    }
-  };
-
-  const onTaskProgressChange = async (task: Task) => {
-    if (props.onProgressChange) {
-      try {
-        await props.onProgressChange(task);
-      } catch (e) {
-        setTasks(props.tasks.slice());
-        throw e;
-      }
-
-      setTasks(tasks.map(t => (t.id === task.id ? task : t)));
-    }
-  };
-
-  const onTaskItemDelete = async (task: Task) => {
-    if (props.onTaskDelete) {
-      await props.onTaskDelete(task);
-      setTasks(tasks.filter(t => t.id !== task.id));
-    }
-  };
-
-  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>
-        {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
-          {...options}
-          {...props}
-          tasks={tasks}
-          onDateChange={onTaskDateChange}
-          onTaskDelete={onTaskItemDelete}
-          onProgressChange={onTaskProgressChange}
-        />
-      </div>
-    </div>
-  );
-};
-
-type ViewSwitcherProps = {
-  onViewChange: (viewMode: ViewMode) => void;
-};
-const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({ onViewChange }) => {
-  return (
-    <div className="ViewContainer">
-      <button
-        className="Button"
-        onClick={() => onViewChange(ViewMode.QuarterDay)}
-      >
-        Quarter of Day
-      </button>
-      <button className="Button" onClick={() => onViewChange(ViewMode.HalfDay)}>
-        Half of Day
-      </button>
-      <button className="Button" onClick={() => onViewChange(ViewMode.Day)}>
-        Day
-      </button>
-      <button className="Button" onClick={() => onViewChange(ViewMode.Week)}>
-        Week
-      </button>
-      <button className="Button" onClick={() => onViewChange(ViewMode.Month)}>
-        Month
-      </button>
-    </div>
-  );
-};
-ReactDOM.render(<App />, document.getElementById('root'));

example/package.json

@@ -1,24 +1,44 @@
 {
-  "name": "example",
-  "version": "1.0.0",
-  "main": "index.js",
-  "license": "MIT",
+  "name": "gantt-task-react-example",
+  "homepage": ".",
+  "version": "0.0.0",
+  "private": true,
   "scripts": {
-    "start": "parcel index.html",
-    "build": "parcel build index.html"
+    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
+    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
+    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
+    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
   },
   "dependencies": {
-    "react-app-polyfill": "^1.0.0"
-  },
-  "alias": {
-    "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom/profiling",
-    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+    "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
+    "@testing-library/react": "file:../node_modules/@testing-library/react",
+    "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
+    "@types/jest": "file:../node_modules/@types/jest",
+    "@types/node": "file:../node_modules/@types/node",
+    "@types/react": "file:../node_modules/@types/react",
+    "@types/react-dom": "file:../node_modules/@types/react-dom",
+    "react": "file:../node_modules/react",
+    "react-dom": "file:../node_modules/react-dom",
+    "react-scripts": "file:../node_modules/react-scripts",
+    "typescript": "file:../node_modules/typescript",
+    "gantt-task-react": "file:.."
   },
   "devDependencies": {
-    "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.8.4",
-    "parcel": "^1.12.3",
-    "typescript": "^3.4.5"
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

example/public/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>gantt-task-react</title>
+  </head>
+
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

example/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "gantt-task-react",
+  "name": "gantt-task-react",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

example/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+  ReactDOM.unmountComponentAtNode(div)
+})

example/src/App.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import "gantt-task-react/dist/index.css";
+import { Task, ViewMode } 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);
+  let tasks: Task[] = [
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
+      end: new Date(
+        currentDate.getFullYear(),
+        currentDate.getMonth(),
+        2,
+        12,
+        28
+      ),
+      name: "Idea",
+      id: "Task 0",
+      progress: 45,
+      isDisabled: true,
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
+      name: "Research",
+      id: "Task 1",
+      progress: 25,
+      dependencies: ["Task 0"],
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
+      name: "Discussion with team",
+      id: "Task 2",
+      progress: 10,
+      dependencies: ["Task 1"],
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
+      name: "Developing",
+      id: "Task 3",
+      progress: 2,
+      dependencies: ["Task 2"],
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
+      name: "Review",
+      id: "Task 4",
+      progress: 70,
+      dependencies: ["Task 2"],
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 26),
+      name: "Release",
+      id: "Task 6",
+      progress: currentDate.getMonth(),
+      dependencies: ["Task 4"],
+      styles: { progressColor: "#ffbb54", progressSelectedColor: "#ff9e0d" },
+    },
+  ];
+
+  let onTaskChange = (task: Task) => {
+    console.log("On date change Id:" + task.id);
+  };
+
+  let onTaskDelete = (task: Task) => {
+    const conf = window.confirm("Are you sure?");
+    if (!conf) throw "No del Id:" + task.id;
+  };
+
+  let onProgressChange = (task: Task) => {
+    console.log("On progress change Id:" + task.id);
+  };
+
+  let onDblClick = (task: Task) => {
+    alert("On Double Click event Id:" + task.id);
+  };
+
+  return (
+    <div>
+      <ViewSwitcher onViewChange={viewMode => setView(viewMode)} />
+      <GanttTableExample
+        tasks={tasks}
+        viewMode={view}
+        onDateChange={onTaskChange}
+        onTaskDelete={onTaskDelete}
+        onProgressChange={onProgressChange}
+        onDoubleClick={onDblClick}
+      />
+    </div>
+  );
+};
+
+export default App;

example/src/components/gantt-table.tsx

@@ -0,0 +1,135 @@
+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;
+  }
+
+  const [tasks, setTasks] = React.useState(props.tasks);
+  const onTaskDateChange = async (task: Task) => {
+    if (props.onDateChange) {
+      try {
+        await props.onDateChange(task);
+      } catch (e) {
+        throw e;
+      }
+      setTasks(tasks.map(t => (t.id === task.id ? task : t)));
+    }
+  };
+
+  const onTaskProgressChange = async (task: Task) => {
+    if (props.onProgressChange) {
+      try {
+        await props.onProgressChange(task);
+      } catch (e) {
+        setTasks(props.tasks.slice());
+        throw e;
+      }
+
+      setTasks(tasks.map(t => (t.id === task.id ? task : t)));
+    }
+  };
+
+  const onTaskItemDelete = async (task: Task) => {
+    if (props.onTaskDelete) {
+      await props.onTaskDelete(task);
+      setTasks(tasks.filter(t => t.id !== task.id));
+    }
+  };
+
+  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>
+        {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
+          {...options}
+          {...props}
+          tasks={tasks}
+          onDateChange={onTaskDateChange}
+          onTaskDelete={onTaskItemDelete}
+          onProgressChange={onTaskProgressChange}
+        />
+      </div>
+    </div>
+  );
+};

example/src/components/view-switcher.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import "gantt-task-react/dist/index.css";
+import { ViewMode } from "gantt-task-react";
+type ViewSwitcherProps = {
+  onViewChange: (viewMode: ViewMode) => void;
+};
+export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
+  onViewChange,
+}) => {
+  return (
+    <div className="ViewContainer">
+      <button
+        className="Button"
+        onClick={() => onViewChange(ViewMode.QuarterDay)}
+      >
+        Quarter of Day
+      </button>
+      <button className="Button" onClick={() => onViewChange(ViewMode.HalfDay)}>
+        Half of Day
+      </button>
+      <button className="Button" onClick={() => onViewChange(ViewMode.Day)}>
+        Day
+      </button>
+      <button className="Button" onClick={() => onViewChange(ViewMode.Week)}>
+        Week
+      </button>
+      <button className="Button" onClick={() => onViewChange(ViewMode.Month)}>
+        Month
+      </button>
+    </div>
+  );
+};

example/src/index.tsx

@@ -0,0 +1,7 @@
+import './index.css'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))

example/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

example/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

example/tsconfig.json

@@ -1,19 +1,38 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": false,
-    "target": "es5",
-    "module": "commonjs",
-    "jsx": "react",
+    "outDir": "dist",
+    "module": "esnext",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "moduleResolution": "node",
-    "noImplicitAny": false,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "removeComments": true,
-    "strictNullChecks": true,
-    "preserveConstEnums": true,
+    "jsx": "react",
     "sourceMap": true,
-    "lib": ["es2015", "es2016", "dom"],
-    "baseUrl": ".",
-    "types": ["node"]
-  }
+    "declaration": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es5",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "build"
+  ]
 }