Testing

Author: aeagle

demo/src/App.tsx

@@ -1,13 +1,14 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import './App.scss';
 import ReactGA from 'react-ga';
-import { UI } from './ui-demo/UI';
+import { Test } from './Test';
+//import { UI } from './ui-demo/UI';
 
 ReactGA.initialize("UA-144490437-1");
 ReactGA.pageview(window.location.pathname + window.location.search);
 
 const App: React.FC = () => {
-  return <UI />
+  return <Test />
 }
 
 export default App;

demo/src/Test.scss

@@ -0,0 +1,5 @@
+.test {
+    .spaces-space {
+        // transition: width 0.5s ease;
+    }
+}

demo/src/Test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import * as Space from "react-spaces";
+import './Test.scss';
+
+const COLLAPSED_SIZE = 20;
+const MINIMUM_SIZE = 200;
+
+export const Test : React.FC = () => {
+    const [ size, setSize ] = React.useState(300);
+
+    const onResizeStart = () => {
+    };
+  
+    const onResizeEnd = (width: number) => {
+        setSize(width);
+    }
+  
+    return (
+        <Space.ViewPort className="test">
+
+            <Space.LeftResizable 
+                style={{ backgroundColor: 'yellow', padding: 10 }} 
+                size={size}
+                handleSize={60}
+                maximumSize={600}
+                minimumSize={100}
+                onResizeStart={onResizeStart}
+                onResizeEnd={onResizeEnd}
+                order={1}>
+                    Hello
+            </Space.LeftResizable>
+
+            <Space.Left
+                style={{ backgroundColor: 'navy', color: 'white', padding: 10 }}
+                size={200}
+                order={2}>
+                    Something
+            </Space.Left>
+
+            <Space.Fill 
+                style={{ backgroundColor: 'red', padding: 10 }}>
+                    World
+            </Space.Fill>
+
+        </Space.ViewPort>
+    )
+  }