Nuke the Viewport component, FCize Canvas (#1767)

* Replace Canvas placeholders with top/bottom padding

* Move Viewport scroll state and logic into Canvas

* Nuke Viewport component

* Nuke Viewport file

* FCize Canvas

* completely unwrap the props object

* Clean up a few props, fix tests

* Cleanup Canvas getRows

* fix new scrollLeft/Top usage in handleScroll

* Fix rowVisible{Start,End}Idx, improve top/bottom navigation accuracy

* Don't use useMemo to get the clientHeight

* Fix rowOverscanEndIdx usage

* Fix the tests

* Move handleRowSelectionChange back in the root component to prevent some row/cell re-renders

* improve isScrolling example

* Remove viewportWidth props

* Remove scrollToRow, simplify/fix scrollToRowIndex usage

* Add a comment

* Don't disable the eslint rule

examples/scripts/example31-isScrolling.js

@@ -1,6 +1,6 @@
+import React, { useRef, useState } from 'react';
 import ReactDataGrid from 'react-data-grid';
 import exampleWrapper from '../components/exampleWrapper';
-import React from 'react';
 import { AreaChart, Area } from 'Recharts';
 
 const getRandom = (min, max) => {
@@ -10,10 +10,17 @@ const getRandom = (min, max) => {
 };
 
 const ExpensiveFormatter = ({ isScrolling }) => {
-  if (isScrolling) {
+  const isReady = useRef(!isScrolling);
+  const [items] = useState(() => {
+    return [...Array(1000).keys()].map(i => ({ name: `Page ${i}`, uv: getRandom(0, 4000), pv: getRandom(0, 4000), amt: getRandom(0, 4000) })).slice(0, 50);
+  });
+
+  if (isScrolling && !isReady.current) {
     return <div>is scrolling</div>;
   }
-  const items = [...Array(1000).keys()].map(i => ({ name: `Page ${i}`, uv: getRandom(0, 4000), pv: getRandom(0, 4000), amt: getRandom(0, 4000) })).slice(0, 50);
+
+  isReady.current = true;
+
   return (
     <AreaChart
       width={500}