falcon-ui: Added initial Tabs to HomePage

falcon-client · Aug 22, 2018 · 96f62f8 · 96f62f8
1 parent 2fe3c15
commit 96f62f8
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 13 deletions.
diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js
@@ -4,6 +4,13 @@ import React, { Component } from 'react';
 import { ResizableBox } from 'react-resizable';
 import { ipcRenderer } from 'electron';
 import { Switch, Route } from 'react-router';
+import {
+  Tabs,
+  Tab,
+  TabPanel,
+  TabList,
+  HTMLTabs
+} from '@falcon-client/falcon-ui';
 import Loadable from 'react-loadable';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
@@ -358,6 +365,13 @@ export default class HomePage extends Component<Props, State> {
                   activeConnections={this.state.activeConnections}
                 />
               </ResizableBox>
+              {/* <HTMLTabs></HTMLTabs> */}
+              <Tabs width={this.state.widthGrid}>
+                <TabList clientWidth={this.state.widthGrid}>
+                  <Tab title="falcon-ui" />
+                  <Tab title="compat-db" />
+                </TabList>
+              </Tabs>
               <div
                 className="Grid"
                 style={{

diff --git a/packages/falcon-ui/src/components/HTMLTabs.js b/packages/falcon-ui/src/components/HTMLTabs.js
@@ -21,11 +21,13 @@ let instanceId = 0;
 
 class ChromeTabs {
   constructor() {
+    console.log('In ChromeTabs constructor');
     this.draggabillyInstances = [];
   }
 
   // @1. Should be ran after each javascript initialization of ChromeTabs
   init(el, options) {
+    console.log('In init');
     this.el = el; // @1a. Root HTML element of ChromeTabs object
     this.options = options; // @1b. { tabOverlapDistance: 14, minWidth: 45, maxWidth: 243 }
 
@@ -43,15 +45,18 @@ class ChromeTabs {
 
   /** Utility tool that dispatches events related to chrome tabs*/
   emit(eventName, data) {
+    console.log('In emit');
     this.el.dispatchEvent(new CustomEvent(eventName, { detail: data }));
   }
 
   setupStyleEl() {
+    console.log('In setupStyleEl');
     this.animationStyleEl = document.createElement('style');
     this.el.appendChild(this.animationStyleEl);
   }
 
   setupEvents() {
+    console.log('In setupEvents');
     window.addEventListener('resize', event => this.layoutTabs());
 
     this.el.addEventListener('dblclick', event => {
@@ -74,15 +79,18 @@ class ChromeTabs {
 
   /** Returns array of all tab elements */
   get tabEls() {
+    console.log('In get tabEls');
     return Array.from(this.el.querySelectorAll('.chrome-tab'));
   }
 
   get tabContentEl() {
+    console.log('In get tabContentEl');
     return this.el.querySelector('.chrome-tabs-content');
   }
 
   /** Gets width of tabs */
   get tabWidth(): number {
+    console.log('In get tabWidth');
     const tabsContentWidth =
       this.tabContentEl.clientWidth - this.options.tabOverlapDistance;
     const width =
@@ -99,6 +107,7 @@ class ChromeTabs {
 
   /** Gets the positions of each tabs */
   get tabPositions() {
+    console.log('In tabPositions');
     const tabEffectiveWidth = this.tabEffectiveWidth;
     let left = 0;
     const positions = [];
@@ -112,6 +121,7 @@ class ChromeTabs {
 
   /** Lays out all the current tabs  */
   layoutTabs() {
+    console.log('In layoutTabs');
     const tabWidth = this.tabWidth;
 
     this.cleanUpPreviouslyDraggedTabs();
@@ -132,6 +142,7 @@ class ChromeTabs {
   }
 
   fixZIndexes() {
+    console.log('In fixZIndexes');
     const bottomBarEl = this.el.querySelector('.chrome-tabs-bottom-bar');
     const tabEls = this.tabEls;
 
@@ -148,13 +159,15 @@ class ChromeTabs {
 
   /** Create a tab's HTML representation */
   createNewTabEl() {
+    console.log('In createNewTabEl');
     const div = document.createElement('div');
     div.innerHTML = tabTemplate;
     return div.firstElementChild;
   }
 
   /** Adds additional tabs. Performs necessary HTML/CSS modifications */
   addTab(tabProperties) {
+    console.log('In addTab');
     const tabEl = this.createNewTabEl();
 
     tabEl.classList.add('chrome-tab-just-added');
@@ -172,6 +185,7 @@ class ChromeTabs {
 
   /** Sets the selected tab. Performs necessary HTML/CSS modifications */
   setCurrentTab(tabEl) {
+    console.log('In setCurrentTab');
     const currentTab = this.el.querySelector('.chrome-tab-current');
     if (currentTab) currentTab.classList.remove('chrome-tab-current');
     tabEl.classList.add('chrome-tab-current');
@@ -180,6 +194,7 @@ class ChromeTabs {
   }
 
   removeTab(tabEl) {
+    console.log('In removeTab');
     if (tabEl.classList.contains('chrome-tab-current')) {
       if (tabEl.previousElementSibling) {
         this.setCurrentTab(tabEl.previousElementSibling);
@@ -196,19 +211,22 @@ class ChromeTabs {
 
   /** Updates the contents of a Tab (in the TabList) */
   updateTab(tabEl, tabProperties) {
+    console.log('In updateTab');
     tabEl.querySelector('.chrome-tab-title').textContent = tabProperties.title;
     tabEl.querySelector('.chrome-tab-favicon').style.backgroundImage = `url('${
       tabProperties.favicon
     }')`;
   }
 
   cleanUpPreviouslyDraggedTabs() {
+    console.log('In cleanUpPreviouslyDraggedTabs');
     this.tabEls.forEach(tabEl =>
       tabEl.classList.remove('chrome-tab-just-dragged')
     );
   }
 
   setupDraggabilly() {
+    console.log('In setupDraggabilly');
     const tabEls = this.tabEls;
     const tabEffectiveWidth = this.tabEffectiveWidth;
     const tabPositions = this.tabPositions;
@@ -282,6 +300,7 @@ class ChromeTabs {
   }
 
   animateTabMove(tabEl, originIndex, destinationIndex) {
+    console.log('In animateTabMove');
     if (destinationIndex < originIndex) {
       tabEl.parentNode.insertBefore(tabEl, this.tabEls[destinationIndex]);
     } else {

diff --git a/packages/falcon-ui/src/components/Tabs/Tab.js b/packages/falcon-ui/src/components/Tabs/Tab.js
@@ -6,12 +6,14 @@ type Props = {
   disabled?: boolean,
   tabIndex: string,
   disabledClassName?: string,
+  title: string,
   focus: boolean, // private
   id: string, // private
   panelId: string, // private
   selected: boolean, // private
   selectedClassName: string,
-  tabRef: Function // private
+  tabRef: Function, // private
+  left: number // private
 };
 
 export default class Tab extends React.Component<Props> {
@@ -45,6 +47,13 @@ export default class Tab extends React.Component<Props> {
       ...attributes
     } = this.props;
 
-    return <div />;
+    return (
+      <div className="chrome-tab">
+        <div className="chrome-tab-background" />
+        <div className="chrome-tab-favicon" />
+        <div className="chrome-tab-title">{this.props.title}</div>
+        <div className="chrome-tab-close" />
+      </div>
+    );
   }
 }
diff --git a/packages/falcon-ui/src/components/Tabs/TabList.js b/packages/falcon-ui/src/components/Tabs/TabList.js
@@ -2,13 +2,59 @@ import * as React from 'react';
 
 type Props = {
   children: React.ReactNode,
-  className: string
+  className: string,
+  id: string, // private
+  selected: boolean, // private
+  selectedClassName: string,
+  clientWidth: number,
+  minTabWidth: number,
+  maxTabWidth: number,
+  tabOverlapDistance: number,
+  tabId: string // private
 };
 
 export default class TabList extends React.Component<Props> {
-  render = () => (
-    <div className={className} role="tablist">
-      {children}
-    </div>
-  );
+  getTabWidth = (): number => {
+    console.log('In get tabWidth');
+    const tabsContentWidth =
+      this.props.clientWidth - this.props.tabOverlapDistance;
+    const width =
+      tabsContentWidth / this.tabEls.length + this.props.tabOverlapDistance;
+    return Math.max(
+      this.props.minTabWidth,
+      Math.min(this.props.maxTabWidth, width)
+    );
+  };
+
+  getTabEffectiveWidth = () =>
+    this.getTabWidth() - this.props.tabOverlapDistance;
+
+  getTabPositions = () => {
+    console.log('In getTabPositions');
+    const tabEffectiveWidth = this.getTabEffectiveWidth();
+    let left = 0;
+    const positions = [];
+
+    this.tabEls.forEach((tabEl, i) => {
+      positions.push(left);
+      left += tabEffectiveWidth;
+    });
+    return positions;
+  };
+
+  renderChildren = () =>
+    React.Children.map(this.props.children, child => {
+      console.log('In TabList.js');
+      console.dir(child);
+      return React.cloneElement(child, {});
+    });
+
+  render() {
+    return (
+      <div className="chrome-tabs">
+        <div className="chrome-tabs-content">{this.renderChildren()}</div>
+        <div className="chrome-tabs-bottom-bar" />
+      </div>
+    );
+  }
 }
diff --git a/packages/falcon-ui/src/components/Tabs/Tabs.js b/packages/falcon-ui/src/components/Tabs/Tabs.js
@@ -1,20 +1,48 @@
 // @flow
-import * as React from 'react';
+import React, { Children, Component } from 'react';
 
 type Props = {
   children: React.ReactNode,
   className: string,
   defaultFocus: boolean,
   defaultIndex: number,
   disabledTabClassName: string,
-  onSelect: (index: number, lastIndex: number, event: Event) => ?boolean,
   selectedIndex: number,
   selectedTabClassName: string,
-  selectedTabPanelClassName: string
+  selectedTabPanelClassName: string,
+  width: number,
+  onSelect: (index: number, lastIndex: number, event: Event) => ?boolean
 };
 
-export default class Tabs extends React.Component<Props> {
+export default class Tabs extends Component<Props> {
+  renderChildren = () =>
+    React.Children.map(this.props.children, child =>
+      // console.log('In Tab.js');
+      // console.dir(child);
+      React.cloneElement(child, {})
+    );
+
+  3;
+
+  gettabWidth(): number {
+    const tabsContentWidth =
+      this.tabContentEl.clientWidth - this.options.tabOverlapDistance;
+    const width =
+      tabsContentWidth / this.tabEls.length + this.options.tabOverlapDistance;
+    return Math.max(
+      this.options.minWidth,
+      Math.min(this.options.maxWidth, width)
+    );
+  }
+
+  renderSelectedTab = (i: number) => {};
+
   render() {
-    return <div />;
+    return (
+      <div className="chrome-tabs" style={{ width: this.props.width }}>
+        <div className="chrome-tabs-content">{this.renderChildren()}</div>
+        <div className="chrome-tabs-bottom-bar" />
+      </div>
+    );
   }
 }