Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Render navigation and addons panels even when they are hidden #2336

Merged
merged 7 commits into from
Nov 24, 2017
Merged

Render navigation and addons panels even when they are hidden #2336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b141f45
Render navigation and addons panels even when they are hidden
Hypnosphi Nov 18, 2017
e97f325
mock react-split-pane in test to avoid useragent-dependent snapshots
Hypnosphi Nov 18, 2017
3981050
Merge branch 'master' into always-render-panels
Hypnosphi Nov 23, 2017
ef947ad
Update test snapshot
Hypnosphi Nov 23, 2017
f47dd05
Merge branch 'master' into always-render-panels
Hypnosphi Nov 23, 2017
2af6fa1
Test styles directly instead of using snapshots
Hypnosphi Nov 23, 2017
4159954
Merge branch 'master' into always-render-panels
Hypnosphi Nov 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 12 additions & 27 deletions lib/ui/src/modules/ui/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ const rootStyle = {
backgroundColor: '#F7F7F7',
};

const leftPanelStyle = leftPanelOnTop => ({
const leftPanelStyle = (showLeftPanel, leftPanelOnTop) => ({
width: '100%',
display: 'flex',
display: showLeftPanel ? 'flex' : 'none',
flexDirection: leftPanelOnTop ? 'column' : 'row',
alignItems: 'stretch',
paddingRight: leftPanelOnTop ? 10 : 0,
});

const downPanelStyle = downPanelInRight => ({
display: 'flex',
const downPanelStyle = (showDownPanel, downPanelInRight) => ({
display: showDownPanel ? 'flex' : 'none',
flexDirection: downPanelInRight ? 'row' : 'column',
alignItems: 'stretch',
position: 'absolute',
Expand Down Expand Up @@ -117,8 +117,6 @@ const getSavedSizes = sizes => {
}
};

const conditionalRender = (condition, positive, negative) => (condition ? positive() : negative());

class Layout extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -201,17 +199,10 @@ class Layout extends React.Component {
onDragFinished={onDragEnd}
onChange={this.onResize('storiesPanel', leftPanelOnTop ? 'top' : 'left')}
>
{conditionalRender(
showLeftPanel,
() => (
<div style={leftPanelStyle(leftPanelOnTop)}>
<div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{leftPanel()}</div>
<USplit shift={5} split={storiesSplit} />
</div>
),
() => <span />
)}

<div style={leftPanelStyle(showLeftPanel, leftPanelOnTop)}>
<div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{leftPanel()}</div>
<USplit shift={5} split={storiesSplit} />
</div>
<SplitPane
split={addonSplit}
allowResize={showDownPanel}
Expand All @@ -236,16 +227,10 @@ class Layout extends React.Component {
</div>
<Dimensions {...previewPanelDimensions} />
</div>
{conditionalRender(
showDownPanel,
() => (
<div style={downPanelStyle(downPanelInRight)}>
<USplit shift={-5} split={addonSplit} />
{downPanel()}
</div>
),
() => <span />
)}
<div style={downPanelStyle(showDownPanel, downPanelInRight)}>
<USplit shift={-5} split={addonSplit} />
{downPanel()}
</div>
</SplitPane>
</SplitPane>
</div>
Expand Down
74 changes: 45 additions & 29 deletions lib/ui/src/modules/ui/components/layout/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@ import React from 'react';
import { shallow } from 'enzyme';
import Layout from './index';

const LeftPanel = () => null;
const DownPanel = () => null;
const Preview = () => null;

const hides = (wrap, Component) =>
wrap
.find(Component)
.parents('[style]')
.someWhere(parent => parent.prop('style').display === 'none');

describe('manager.ui.components.layout.index', () => {
describe('with default options', () => {
test('should render provided components', () => {
Expand All @@ -11,37 +21,45 @@ describe('manager.ui.components.layout.index', () => {
showDownPanel
goFullScreen={false}
downPanelInRight={false}
leftPanel={() => 'LeftPanel'}
downPanel={() => 'DownPanel'}
preview={() => 'Preview'}
leftPanel={() => <LeftPanel />}
downPanel={() => <DownPanel />}
preview={() => <Preview />}
/>
);

const markup = wrap.html();
expect(markup).toMatch(/LeftPanel/);
expect(markup).toMatch(/DownPanel/);
expect(markup).toMatch(/Preview/);
expect(hides(wrap, LeftPanel)).toBe(false);
expect(hides(wrap, DownPanel)).toBe(false);
expect(hides(wrap, Preview)).toBe(false);
});
});

describe('with goFullScreen=true', () => {
test('should only render preview', () => {
test('should render preview in fullscreen mode', () => {
const wrap = shallow(
<Layout
goFullScreen
showDownPanel={false}
showLeftPanel={false}
downPanelInRight={false}
leftPanel={() => 'LeftPanel'}
downPanel={() => 'DownPanel'}
preview={() => 'Preview'}
leftPanel={() => <LeftPanel />}
downPanel={() => <DownPanel />}
preview={() => <Preview />}
/>
);

const markup = wrap.html();
expect(markup).not.toMatch(/LeftPanel/);
expect(markup).not.toMatch(/DownPanel/);
expect(markup).toMatch(/Preview/);
expect(hides(wrap, Preview)).toBe(false);

const previewParentStyle = wrap
.find(Preview)
.parent()
.prop('style');
expect(previewParentStyle).toMatchObject({
position: 'fixed',
left: '0px',
right: '0px',
top: '0px',
zIndex: 1,
});
});
});

Expand All @@ -53,16 +71,15 @@ describe('manager.ui.components.layout.index', () => {
showDownPanel
downPanelInRight={false}
goFullScreen={false}
leftPanel={() => 'LeftPanel'}
downPanel={() => 'DownPanel'}
preview={() => 'Preview'}
leftPanel={() => <LeftPanel />}
downPanel={() => <DownPanel />}
preview={() => <Preview />}
/>
);

const markup = wrap.html();
expect(markup).not.toMatch(/LeftPanel/);
expect(markup).toMatch(/DownPanel/);
expect(markup).toMatch(/Preview/);
expect(hides(wrap, LeftPanel)).toBe(true);
expect(hides(wrap, DownPanel)).toBe(false);
expect(hides(wrap, Preview)).toBe(false);
});
});

Expand All @@ -74,16 +91,15 @@ describe('manager.ui.components.layout.index', () => {
showDownPanel={false}
goFullScreen={false}
downPanelInRight={false}
leftPanel={() => 'LeftPanel'}
downPanel={() => 'DownPanel'}
preview={() => 'Preview'}
leftPanel={() => <LeftPanel />}
downPanel={() => <DownPanel />}
preview={() => <Preview />}
/>
);

const markup = wrap.html();
expect(markup).toMatch(/LeftPanel/);
expect(markup).not.toMatch(/DownPanel/);
expect(markup).toMatch(/Preview/);
expect(hides(wrap, LeftPanel)).toBe(false);
expect(hides(wrap, DownPanel)).toBe(true);
expect(hides(wrap, Preview)).toBe(false);
});
});
});