theme and animations

src/widget.js

@@ -1,35 +1,69 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './widget.scss'
+import { Transition } from 'react-transition-group';
+import './widget.scss';
 
 class Widget extends React.Component {
   state = {
     opened: false,
+    showDock: true,
   }
 
-  handleOpen = () => {
+  handleToggleOpen = () => {
+    this.setState((prev) => {
+      let showDock = prev.showDock;
+      if (!prev.opened) {
+        showDock = false;
+      }
+      return {
+        showDock,
+        opened: !prev.opened,
+      };
+    });
+  }
+
+  handleWidgetExit = () => {
+    this.setState({
+      showDock: true,
+    });
+  }
+
+  renderBody = () => {
+    if (this.state.showDock) {
+      return (
+        <a className="dock" onClick={this.handleToggleOpen}>
+          ^ OPEN ^
+        </a>
+      );
+    }
+    return "";
   }
 
   render() {
-    let body = "";
-    if (this.state.opened) {
-      body = (
-        <div className="widget-dialog">
-          <div className="widget-title">
-            Open
-          </div>
-          <div className="widget-body">
-            Body
-          </div>
-          <div className="widget-footer">
-            Footer
-          </div>
-        </div>
-      );
-    }
+    let body = this.renderBody();
+
     return (
-      <div className="widget">
-        Open
+      <div className="docked-widget">
+        <Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
+          {(status) => (
+            <div className={`widget widget-${status}`}>
+              <div className="widget-header">
+                <div className="widget-header-title">
+                  Header
+                </div>
+                <a className="widget-header-icon" onClick={this.handleToggleOpen}>
+                  X
+                </a>
+              </div>
+              <div className="widget-body">
+                Body
+              </div>
+              <div className="widget-footer">
+                Footer
+              </div>
+            </div>
+          )}
+        </Transition>
         {body}
       </div>
     );