Working tab example

src/core/client/ui/components/Tabs/Tab.mdx

@@ -1,52 +0,0 @@
----
-name: Tab
-menu: UI Kit
----
-
-import { Playground, PropsTable } from 'docz'
-import HorizontalGutter from '../HorizontalGutter'
-
-
-import TabBar from './TabBar'
-import Tab from './Tab'
-
-
-# Tab
-
-## Basic Use
-<Playground>
-  <HorizontalGutter>
-
-    <TabBar defaultActiveId="one">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveId="one" activeId="second">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-    <TabBar defaultActiveId="one" activeId="three">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-  </HorizontalGutter>
-</Playground>
-
-## Secondary Color
-<Playground>
-  <HorizontalGutter>
-
-    <TabBar defaultActiveId="one" color="secondary">
-      <Tab tabId="one">Tab one</Tab>
-      <Tab tabId="second">Active Tab</Tab>
-      <Tab tabId="three">Tab Three</Tab>
-    </TabBar>
-
-  </HorizontalGutter>
-</Playground>

src/core/client/ui/components/Tabs/Tab.tsx

@@ -16,44 +16,44 @@ export interface TabBarProps {
   tabId: string;
   active: boolean;
   color: string;
-  onTabClick?: () => void;
+  onTabClick?: (tabId: string) => void;
 }
 
-const TabBar: StatelessComponent<TabBarProps> = props => {
-  const {
-    className,
-    classes,
-    children,
-    tabId,
-    active,
-    color,
-    onTabClick,
-  } = props;
+class TabBar extends React.Component<TabBarProps> {
+  public handleTabClick = () => {
+    if (this.props.onTabClick) {
+      this.props.onTabClick(this.props.tabId);
+    }
+  };
 
-  const rootClassName = cn(
-    classes.root,
-    {
-      [classes.primary]: color === "primary",
-      [classes.secondary]: color === "secondary",
-      [classes.active]: active,
-    },
-    className
-  );
+  public render() {
+    const { className, classes, children, tabId, active, color } = this.props;
 
-  return (
-    <li
-      className={rootClassName}
-      key={tabId}
-      id={`${tabId}-tab`}
-      role="tab"
-      onClick={onTabClick}
-      aria-controls={tabId}
-      aria-selected={active}
-    >
-      {children}
-    </li>
-  );
-};
+    const rootClassName = cn(
+      classes.root,
+      {
+        [classes.primary]: color === "primary",
+        [classes.secondary]: color === "secondary",
+        [classes.active]: active,
+      },
+      className
+    );
+
+    return (
+      <li
+        className={rootClassName}
+        key={tabId}
+        id={`${tabId}-tab`}
+        role="tab"
+        onClick={this.handleTabClick}
+        aria-controls={tabId}
+        aria-selected={active}
+      >
+        {children}
+      </li>
+    );
+  }
+}
 
 const enhanced = withStyles(styles)(TabBar);
 export default enhanced;

src/core/client/ui/components/Tabs/TabBar.mdx

@@ -10,7 +10,6 @@ import HorizontalGutter from '../HorizontalGutter'
 import TabBar from './TabBar'
 import Tab from './Tab'
 
-
 # TabBar
 
 ## Basic Use

src/core/client/ui/components/Tabs/TabBar.tsx

@@ -14,10 +14,12 @@ export interface TabBarProps {
   classes: typeof styles;
 
   color: "primary" | "secondary";
+
   activeId?: string;
   defaultActiveId?: string;
+
   onChange?: (activeId: string) => void;
-  onTabClick?: () => void;
+  onTabClick?: (tabId: string) => void;
 }
 
 const TabBar: StatelessComponent<TabBarProps> = props => {
@@ -44,8 +46,9 @@ const TabBar: StatelessComponent<TabBarProps> = props => {
 
   const tabs = React.Children.toArray(children).map(
     (child: React.ReactElement<any>, index: number) =>
+      console.log(child) ||
       React.cloneElement(child, {
-        tabId: index,
+        index,
         active:
           defaultActiveId && !activeId
             ? child.props.tabId === defaultActiveId

src/core/client/ui/components/Tabs/TabContent.tsx

@@ -1,8 +1,24 @@
 import React, { StatelessComponent } from "react";
 
-const TabContent: StatelessComponent<{}> = props => {
-  const { children } = props;
-  return <>{children}</>;
+export interface TabContentProps {
+  activeTab?: string;
+}
+
+const TabContent: StatelessComponent<TabContentProps> = props => {
+  const { children, activeTab } = props;
+  return (
+    <>
+      {React.Children.toArray(children)
+        .filter(
+          (child: React.ReactElement<any>) => child.props.tabId === activeTab
+        )
+        .map((child: React.ReactElement<any>, i) =>
+          React.cloneElement(child, {
+            tabId: child.props.tabId !== undefined ? child.props.tabId : i,
+          })
+        )}
+    </>
+  );
 };
 
 export default TabContent;

src/core/client/ui/components/Tabs/index.ts

@@ -1 +1,4 @@
-export { default } from "./TabBar";
+export { default as TabBar } from "./TabBar";
+export { default as Tab } from "./Tab";
+export { default as TabPane } from "./TabPane";
+export { default as TabContent } from "./TabContent";

src/core/client/ui/components/index.ts

@@ -20,3 +20,4 @@ export { default as Spinner } from "./Spinner";
 export { default as HorizontalGutter } from "./HorizontalGutter";
 export { default as Icon } from "./Icon";
 export { default as AriaInfo } from "./AriaInfo";
+export { Tab, TabBar, TabContent, TabPane } from "./Tabs";

src/docs/tabs.mdx

@@ -0,0 +1,25 @@
+---
+name: Tabs
+route: '/Tabs'
+---
+
+# Tabs
+
+### Examples
+
+import { Playground, PropsTable } from 'docz'
+import { Flex, TabBar, Tab, TabContent, TabPane } from '../core/client/ui/components'
+import Container from "react-with-state-props"
+
+## Simple Form
+<Playground>
+  <Container
+    state={{ activeId: "two" }}
+    render={props => (
+      <TabBar activeId={props.activeId} onTabClick={(id)=> props.setActiveId(id)}>
+        <Tab tabId="one">One</Tab>
+        <Tab tabId="two">Two</Tab>
+        <Tab tabId="three">Three</Tab>
+      </TabBar>
+    )}/>
+</Playground>