Merge branch 'main' into add-viewmode-year

example/package.json

@@ -24,7 +24,6 @@
     "react-scripts": "file:../node_modules/react-scripts"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
   },
   "browserslist": {
     "production": [

example/src/App.test.tsx

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

example/src/App.tsx

@@ -54,6 +54,10 @@ const App = () => {
     alert("On Double Click event Id:" + task.id);
   };
 
+  const handleClick = (task: Task) => {
+    console.log("On Click event Id:" + task.id);
+  };
+
   const handleSelect = (task: Task, isSelected: boolean) => {
     console.log(task.name + " has " + (isSelected ? "selected" : "unselected"));
   };
@@ -64,7 +68,7 @@ const App = () => {
   };
 
   return (
-    <div>
+    <div className="Wrapper">
       <ViewSwitcher
         onViewModeChange={viewMode => setView(viewMode)}
         onViewListChange={setIsChecked}
@@ -78,6 +82,7 @@ const App = () => {
         onDelete={handleTaskDelete}
         onProgressChange={handleProgressChange}
         onDoubleClick={handleDblClick}
+        onClick={handleClick}
         onSelect={handleSelect}
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
@@ -91,6 +96,7 @@ const App = () => {
         onDelete={handleTaskDelete}
         onProgressChange={handleProgressChange}
         onDoubleClick={handleDblClick}
+        onClick={handleClick}
         onSelect={handleSelect}
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}

example/src/components/view-switcher.tsx

@@ -6,7 +6,7 @@ type ViewSwitcherProps = {
   onViewListChange: (isChecked: boolean) => void;
   onViewModeChange: (viewMode: ViewMode) => void;
 };
-export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
+export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
   onViewModeChange,
   onViewListChange,
   isChecked,

example/src/index.css

@@ -1,3 +1,6 @@
+.Wrapper {
+  margin-bottom: 2rem;
+}
 .ViewContainer {
   list-style: none;
   -ms-box-orient: horizontal;

example/src/index.tsx

@@ -1,7 +1,9 @@
 import "./index.css";
 
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+const container = document.getElementById("root");
+const root = createRoot(container!);
+root.render(<App />);