chore: update examples

monext · Jan 30, 2022 · 1441840 · 1441840
1 parent d95a8c5
commit 1441840
Show file tree

Hide file tree

Showing 15 changed files with 397 additions and 61 deletions.
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/package.json b/examples/package.json
@@ -10,10 +10,12 @@
     "@types/node": "16.11.11",
     "@types/react": "17.0.37",
     "@types/react-dom": "17.0.11",
-    "canvasbar-react": "1.0.0-beta.2",
+    "canvasbar-react": "1.0.0",
     "lorem-ipsum": "2.0.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router": "6.2.1",
+    "react-router-dom": "6.2.1",
     "react-scripts": "4.0.3",
     "typescript": "4.5.2",
     "web-vitals": "1.1.2"
@@ -41,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-router": "5.1.18"
   }
 }
diff --git a/examples/src/App.css b/examples/src/App.css
@@ -1,11 +1,17 @@
-.app {
+.grid-page {
   display: grid;
   grid-template-rows: 1fr 1fr;
   grid-template-columns: 1fr 1fr;
   grid-gap: 10px;
   padding: 10px;
 }
 
+.overflow-page {
+  min-width: 150vw;
+  min-height: 300vh;
+  padding: 10px;
+}
+
 .my-scrollable-container {
   border: 1px solid gray;
   width: 400px;
@@ -18,3 +24,38 @@
   width: 600px;
   height: 600px;
 }
+
+.my-scrollable-table,
+.my-scrollable-table-sticky {
+  border: 1px solid gray;
+  width: 800px;
+  height: 500px;
+  margin: auto;
+  overflow: auto;
+}
+
+.my-scrollable-table th,
+.my-scrollable-table td,
+.my-scrollable-table-sticky th,
+.my-scrollable-table-sticky td {
+  white-space: nowrap;
+}
+
+.my-scrollable-table-sticky table {
+  position: relative;
+}
+
+.my-scrollable-table-sticky thead {
+  position: sticky;
+  top: 0;
+  left: 0;
+  background: white;
+  z-index: 1;
+}
+
+.my-scrollable-table-sticky tbody td:first-child {
+  position: sticky;
+  left: 0;
+  background: white;
+  font-weight: bold;
+}
diff --git a/examples/src/App.tsx b/examples/src/App.tsx
@@ -1,60 +1,36 @@
-import { loremIpsum } from 'lorem-ipsum';
-import { CanvasBar, useBodyCanvasBar, CanvasBarConfigContext } from  'canvasbar-react';
+import {
+  Route,
+  Routes,
+} from 'react-router-dom';
+import { useBodyCanvasBar } from  'canvasbar-react';
 
-import './App.css';
+import { Nav } from './Nav';
+import { Basic } from './examples/Basic';
+import { Heavy } from './examples/Heavy';
+import { Customization } from './examples/Customization';
+import { BodyScrollbars } from './examples/BodyScrollbars';
+import { Table } from './examples/Table';
+import { Sticky } from './examples/Sticky';
 
-const TEXT = loremIpsum({ count: 100 });
-const TEXT_SMALL = loremIpsum({ count: 7 });
-const IMAGES_IDS = Array.from(Array(10).keys());
+import './App.css';
 
-function App() {
+export default function App() {
   useBodyCanvasBar();
 
   return (
-    <div className="app">
-        <CanvasBar className="my-scrollable-container">
-            <div style={{ width: 600 }}>
-                <h3>Container with both scrollbars</h3>
-                <p>{TEXT}</p>
-            </div>
-        </CanvasBar>
-        <CanvasBar className="my-scrollable-container">
-            <h3>Container with 10 large images (3000x3000 resized to 600x600) and both scrollbars</h3>
-            {IMAGES_IDS.map(id => (
-                <img key={id} src={`https://picsum.photos/id/${id}/3000/3000`} alt="test" />
-            ))}
-        </CanvasBar>
-        <CanvasBar className="my-scrollable-container">
-            <h3>Container with vertical scrollbar only</h3>
-            <p>{TEXT}</p>
-        </CanvasBar>
-        <CanvasBar className="my-scrollable-container">
-            <div style={{ width: 600 }}>
-                <h3>Container with horizontal scrollbar only</h3>
-                <p>{TEXT_SMALL}</p>
-            </div>
-        </CanvasBar>
-      <CanvasBar className="my-scrollable-container" config={{ thumbColor: 'rgba(166, 56, 220, .8)' }}>
-        <div style={{ width: 600 }}>
-          <h3>Container with customized scrollbars via config props</h3>
-          <p>{TEXT}</p>
-        </div>
-      </CanvasBar>
-      <CanvasBarConfigContext.Provider value={{ thumbColor: 'rgba(47, 226, 158, .8)' }}>
-        <CanvasBar className="my-scrollable-container">
-          <div style={{ width: 600 }}>
-            <h3>Container with customized scrollbars via context</h3>
-            <b>It's better to use it for customization all (or multiple) scrollbars on the page.</b>
-            <p>{TEXT}</p>
-          </div>
-        </CanvasBar>
-      </CanvasBarConfigContext.Provider>
-        <CanvasBar className="my-scrollable-container">
-            <h3>Container without scrollbar</h3>
-            <p>{TEXT_SMALL}</p>
-        </CanvasBar>
+    <div>
+      <Nav />
+      <main>
+        <Routes>
+          <Route path="/" element={<Basic />} />
+          <Route path="/heavy" element={<Heavy />} />
+          <Route path="/customization" element={<Customization />} />
+          <Route path="/body-scrollbars" element={<BodyScrollbars />} />
+          <Route path="/table" element={<Table />} />
+          <Route path="/sticky" element={<Sticky />} />
+          <Route path="*" element={<Basic />} />
+        </Routes>
+      </main>
     </div>
   );
 }
-
-export default App;
diff --git a/examples/src/Nav/Nav.css b/examples/src/Nav/Nav.css
@@ -0,0 +1,20 @@
+.nav-menu {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.nav-link,
+.nav-link-active {
+    display: block;
+    margin: 12px;
+    white-space: nowrap;
+    text-decoration: none;
+}
+
+.nav-link-active {
+    font-weight: bold;
+    text-decoration: underline;
+}