make addon aware of active prop so storybook renders in its own panel

src/Themes.tsx

@@ -6,6 +6,7 @@ import {Theme} from "./types/Theme";
 export interface ThemeProps {
     channel: any;
     api: any;
+    active: Boolean;
 }
 
 interface ThemeState {
@@ -22,13 +23,15 @@ interface ThemeHandler {
 
 type BaseComponentProps = ThemeProps & ThemeState & ThemeHandler;
 
-const BaseComponent: React.SFC<BaseComponentProps> = ({onSelectTheme, themes, theme}) => (
+const BaseComponent: React.SFC<BaseComponentProps> = ({onSelectTheme, themes, theme, active}) => (
+    active ? (
     <div style={RowStyle}>
         {themes.map((th, i) => {
             const buttonStyle = th === theme ? SelectedButtonStyle : ButtonStyle;
             return <div style={buttonStyle} key={i} onClick={() => onSelectTheme(th)}>{th.name}</div>;
         }).toArray()}
-    </div>
+    </div> )
+    : (<div />)
 );
 
 export const Themes = compose<BaseComponentProps, ThemeProps>(

src/__tests__/Themes.spec.tsx

@@ -11,7 +11,7 @@ describe("Themes spec", () => {
             removeListener: stub(),
         };
 
-        const component = mount(<Themes api={null} channel={channel} />);
+        const component = mount(<Themes api={null} active={true} channel={channel} />);
         expect(component.render()).toMatchSnapshot();
         expect(channel.on.calledOnce).toBeTruthy();
         expect(channel.emit.notCalled).toBeTruthy();

src/register.tsx

@@ -6,6 +6,6 @@ addons.register("storybook/themes", (api) => {
     // Also need to set a unique name to the panel.
     addons.addPanel("storybook/themes/panel", {
         title: "Themes",
-        render: () => (<Themes channel={addons.getChannel()} api={api} />),
+        render: ({ active }) => (<Themes channel={addons.getChannel()} api={api} active={active} />),
     });
 });