falcon-ui: Fixed Tab spacing

falcon-client · Aug 23, 2018 · 7d3930e · 7d3930e
1 parent 986f3e7
commit 7d3930e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 31 deletions.
diff --git 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,22 +38,26 @@ export default class Tab extends React.Component<Props> {
       // className,
       // disabled,
       // disabledClassName,
-      title
       // focus, // unused
       // id,
       // panelId,
       // selected,
       // 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
@@ -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
@@ -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() {