diff --git a/src/Themes.tsx b/src/Themes.tsx index 2d1e823..2d55962 100644 --- a/src/Themes.tsx +++ b/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 = ({onSelectTheme, themes, theme}) => ( +const BaseComponent: React.SFC = ({onSelectTheme, themes, theme, active}) => ( + active ? (
{themes.map((th, i) => { const buttonStyle = th === theme ? SelectedButtonStyle : ButtonStyle; return
onSelectTheme(th)}>{th.name}
; }).toArray()} -
+ ) + : (
) ); export const Themes = compose( diff --git a/src/__tests__/Themes.spec.tsx b/src/__tests__/Themes.spec.tsx index dfeb4c2..9de2881 100644 --- a/src/__tests__/Themes.spec.tsx +++ b/src/__tests__/Themes.spec.tsx @@ -11,7 +11,7 @@ describe("Themes spec", () => { removeListener: stub(), }; - const component = mount(); + const component = mount(); expect(component.render()).toMatchSnapshot(); expect(channel.on.calledOnce).toBeTruthy(); expect(channel.emit.notCalled).toBeTruthy(); diff --git a/src/register.tsx b/src/register.tsx index ef351f6..350b9f1 100644 --- a/src/register.tsx +++ b/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: () => (), + render: ({ active }) => (), }); });