Skip to content

Commit

Permalink
feat(ui, mobile): add initialActive option parameter
Browse files Browse the repository at this point in the history
  • Loading branch information
alexandre-lelain committed Dec 13, 2019
1 parent b65aab2 commit 50fc83c
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 11 deletions.
9 changes: 9 additions & 0 deletions docs/src/pages/configurations/options-parameter/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,15 @@ addons.setConfig({
* @type {String}
*/
selectedPanel: undefined,

/**
* Select the default active tab on Mobile.
* 0 - Sidebar
* 1 - Canvas
* 2 - Addons
* @type {Number}
*/
initialActive: 0,
});
```

Expand Down
7 changes: 6 additions & 1 deletion lib/api/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ import initStories, {
SubAPI as StoriesAPI,
StoriesRaw,
} from './modules/stories';
import initLayout, { SubState as LayoutSubState, SubAPI as LayoutAPI } from './modules/layout';
import initLayout, {
ActiveTabs,
SubState as LayoutSubState,
SubAPI as LayoutAPI,
} from './modules/layout';
import initShortcuts, {
SubState as ShortcutsSubState,
SubAPI as ShortcutsAPI,
Expand All @@ -35,6 +39,7 @@ import initVersions, {
} from './modules/versions';

export { Options as StoreOptions, Listener as ChannelListener };
export { ActiveTabs };

const ManagerContext = createContext({ api: undefined, state: getInitialState({}) });

Expand Down
7 changes: 7 additions & 0 deletions lib/api/src/modules/layout.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,14 @@ import Store from '../store';
import { Provider } from '../init-provider-api';

export type PanelPositions = 'bottom' | 'right';
export const ActiveTabs = {
SIDEBAR: 0,
CANVAS: 1,
ADDONS: 2,
};

export interface Layout {
initialActive: number;
isFullscreen: boolean;
showPanel: boolean;
panelPosition: PanelPositions;
Expand Down Expand Up @@ -137,6 +143,7 @@ const initial: SubState = {
docsMode: false,
},
layout: {
initialActive: ActiveTabs.SIDEBAR,
isToolshown: true,
isFullscreen: false,
showPanel: true,
Expand Down
22 changes: 12 additions & 10 deletions lib/ui/src/components/layout/mobile.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React, { Component, Children } from 'react';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';
import { ActiveTabs } from '@storybook/api';

import { TabButton } from '@storybook/components';
import { Root } from './container';

const { SIDEBAR, CANVAS, ADDONS } = ActiveTabs;

const Pane = styled.div(
{
transition: 'transform .2s ease',
Expand Down Expand Up @@ -52,22 +55,22 @@ const Pane = styled.div(
},
({ active, index }) => {
switch (true) {
case index === 0 && active === 0: {
case index === 0 && active === SIDEBAR: {
return {
transform: 'translateX(-0px)',
};
}
case index === 1 && active === 0: {
case index === 1 && active === SIDEBAR: {
return {
transform: 'translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2)',
};
}
case index === 1 && active === 2: {
case index === 1 && active === ADDONS: {
return {
transform: 'translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2)',
};
}
case index === 2 && active === 2: {
case index === 2 && active === ADDONS: {
return {
transform: 'translateX(0px)',
};
Expand Down Expand Up @@ -125,10 +128,9 @@ const Bar = styled.nav(
class Mobile extends Component {
constructor(props) {
super();

const { options } = props;
this.state = {
active: options.initialActive || 0,
active: options.initialActive || SIDEBAR,
};
}

Expand Down Expand Up @@ -165,20 +167,20 @@ class Mobile extends Component {
<Panel hidden={!viewMode} />
</Panels>
<Bar active={active}>
<TabButton onClick={() => this.setState({ active: 0 })} active={active === 0}>
<TabButton onClick={() => this.setState({ active: SIDEBAR })} active={active === SIDEBAR}>
Sidebar
</TabButton>
<TabButton
onClick={() => this.setState({ active: 1 })}
active={active === 1 || active === false}
onClick={() => this.setState({ active: CANVAS })}
active={active === CANVAS || active === false}
>
{viewMode ? 'Canvas' : null}
{pages.map(({ key, route: Route }) => (
<Route key={key}>{key}</Route>
))}
</TabButton>
{viewMode ? (
<TabButton onClick={() => this.setState({ active: 2 })} active={active === 2}>
<TabButton onClick={() => this.setState({ active: ADDONS })} active={active === ADDONS}>
Addons
</TabButton>
) : null}
Expand Down

0 comments on commit 50fc83c

Please sign in to comment.