From 7d3930eb4ac9189421afccbfb44b01ea2f39f2eb Mon Sep 17 00:00:00 2001
From: John Tran <jptran318@gmail.com>
Date: Wed, 22 Aug 2018 22:40:36 -0700
Subject: [PATCH] falcon-ui: Fixed Tab spacing

---
 packages/falcon-ui/src/components/Tabs/Tab.js | 15 ++++---
 .../falcon-ui/src/components/Tabs/TabList.js  | 39 ++++++++-----------
 .../falcon-ui/src/components/Tabs/Tabs.js     |  4 +-
 3 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/packages/falcon-ui/src/components/Tabs/Tab.js b/packages/falcon-ui/src/components/Tabs/Tab.js
index 33aa147..a2ff4bd 100644
--- a/packages/falcon-ui/src/components/Tabs/Tab.js
+++ b/packages/falcon-ui/src/components/Tabs/Tab.js
@@ -10,10 +10,11 @@ type Props = {
   focus: boolean, // private
   // id: string, // private
   // panelId: string, // private
-  selected: boolean // private
+  selected: boolean, // private
   // selectedClassName: string,
   // tabRef: Function, // private
-  // left: number // private
+  left: number, // private
+  tabWidth: number // private
 };
 
 export default class Tab extends React.Component<Props> {
@@ -37,7 +38,6 @@ export default class Tab extends React.Component<Props> {
       // className,
       // disabled,
       // disabledClassName,
-      title
       // focus, // unused
       // id,
       // panelId,
@@ -45,14 +45,19 @@ export default class Tab extends React.Component<Props> {
       // selectedClassName,
       // tabIndex,
       // tabRef,
+      tabWidth,
+      left
       // ...attributes
     } = this.props;
 
     return (
-      <div className="chrome-tab">
+      <div
+        className="chrome-tab"
+        style={{ transform: `translate3d(${left}px, 0, 0)`, width: tabWidth }}
+      >
         <div className="chrome-tab-background" />
         <div className="chrome-tab-favicon" />
-        <div className="chrome-tab-title">{title}</div>
+        <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
index 93c70cd..cabef02 100644
--- a/packages/falcon-ui/src/components/Tabs/TabList.js
+++ b/packages/falcon-ui/src/components/Tabs/TabList.js
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { Children, Component } from 'react';
 
 type Props = {
   children: React.ReactNode,
@@ -13,42 +13,35 @@ type Props = {
   // tabId: string // private
 };
 
-export default class TabList extends React.Component<Props> {
+export default class TabList extends Component<Props> {
   getTabWidth = (): number => {
     console.log('In get tabWidth');
     const tabsContentWidth =
       this.props.clientWidth - this.props.tabOverlapDistance;
-    const width =
-      tabsContentWidth / this.tabEls.length + this.props.tabOverlapDistance;
+    const tabWidth =
+      tabsContentWidth / Children.count(this.props.children) +
+      this.props.tabOverlapDistance;
     return Math.max(
       this.props.minTabWidth,
-      Math.min(this.props.maxTabWidth, width)
+      Math.min(this.props.maxTabWidth, tabWidth)
     );
   };
 
   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 = () => {
+    const tabWidth = this.getTabEffectiveWidth();
+    return React.Children.map(this.props.children, (child, i) =>
+      React.cloneElement(child, {
+        left: tabWidth * i,
+        tabWidth,
+        tabIndex: i,
+        key: i
+      })
+    );
   };
 
-  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">
diff --git a/packages/falcon-ui/src/components/Tabs/Tabs.js b/packages/falcon-ui/src/components/Tabs/Tabs.js
index 01ec671..1b43627 100644
--- a/packages/falcon-ui/src/components/Tabs/Tabs.js
+++ b/packages/falcon-ui/src/components/Tabs/Tabs.js
@@ -16,14 +16,12 @@ type Props = {
 
 export default class Tabs extends Component<Props> {
   renderChildren = () =>
-    React.Children.map(this.props.children, child =>
+    Children.map(this.props.children, child =>
       // console.log('In Tab.js');
       // console.dir(child);
       React.cloneElement(child, {})
     );
 
-  3;
-
   renderSelectedTab = (i: number) => {};
 
   render() {