updated demo and fixes transition

projectsbydan · projectsbydan · commit 44e4a3c41877 · 2020-06-01T21:55:12.000+02:00
diff --git a/demo/custom.d.ts b/demo/custom.d.ts
diff --git a/demo/example.ts b/demo/example.ts
@@ -1,4 +1,4 @@
-import { ITimeEntry } from "./interfaces/iTimeEntry";
+import { ITimeEntry } from "../src/interfaces/iTimeEntry";
 
 export const getTimeEntries = (): ITimeEntry[] => {
   const result: ITimeEntry[] = [];
diff --git a/demo/index.tsx b/demo/index.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { render } from "react-dom";
+import { ITimeEntry } from "../src/interfaces/iTimeEntry";
+import { TimeHeatMap } from "../src/timeHeatMap";
 import { getTimeEntries } from "./example";
-import { ITimeEntry } from "./interfaces/iTimeEntry";
-import { TimeHeatMap } from "./timeHeatMap";
 
 const App = () => {
   const [entries, setEntries] = useState<ITimeEntry[]>([]);
diff --git a/demo/public/index.html b/demo/public/index.html
@@ -4,6 +4,11 @@
 <head>
     <meta charset="utf-8">
     <title>Debugging</title>
+    <style>
+        body {
+            font-family: Arial, Helvetica, sans-serif
+        }
+    </style>
 </head>
 
 <body>
diff --git a/src/common/index.sass b/src/common/index.sass
@@ -22,6 +22,7 @@ $borderRadius: .1em
                 min-height: .5em
                 border-radius: $borderRadius
                 cursor: pointer
+                transition: opacity 161ms linear
 
                 &.withCount
                     background-color: $blue
diff --git a/src/timeHeatMap.tsx b/src/timeHeatMap.tsx
@@ -71,9 +71,9 @@ export const TimeHeatMap = (props: ITimeHeapMapProps) => {
           className={styles.map}
           style={{ gridTemplateColumns: `repeat(${numberOfDays},1fr)` }}
         >
-          {timeEntries.map((x) => (
+          {timeEntries.map((x, i) => (
             <div
-              key={x.time.getTime()}
+              key={i}
               title={`${x.count}`}
               className={getEntryClassName(x)}
               style={{
diff --git a/webpack.config.js b/webpack.config.js
@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 module.exports = {
   // webpack will take the files from ./src/app.tsx
   entry: {
-    demo: "./src/index.tsx",
+    demo: "./demo/index.tsx",
   },
   // and output it into /dist as bundle.js
   output: {
@@ -63,7 +63,7 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: "./src/public/index.html",
+      template: "./demo/public/index.html",
     }),
   ],
 };

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { ITimeEntry } from "./interfaces/iTimeEntry";`
	`1`	`+import { ITimeEntry } from "../src/interfaces/iTimeEntry";`
`2`	`2`
`3`	`3`	`export const getTimeEntries = (): ITimeEntry[] => {`
`4`	`4`	`const result: ITimeEntry[] = [];`