Commit 8016f1a9 authored by Imran Salam's avatar Imran Salam
Browse files

close track panel for non large widths (>1400px) and refactor browser reducer/action

parent 408996e8
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, StrictMode, useEffect } from 'react';
import { BrowserRouter } from 'react-router-dom';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import useResizeObserver from 'use-resize-observer';
import Header from './header/Header';
import Content from './content/Content';
const Root: FunctionComponent = () => (
<BrowserRouter>
<React.StrictMode>
<Header />
<Content />
</React.StrictMode>
</BrowserRouter>
);
import { updateBreakpointWidth } from './globalActions';
import { getBreakpointWidth } from './globalSelectors';
import { RootState } from './rootReducer';
import { BreakpointWidth } from './globalConfig';
type StateProps = {
breakpointWidth: BreakpointWidth;
};
type DispatchProps = {
updateBreakpointWidth: (breakpointWidth: BreakpointWidth) => void;
};
type OwnProps = {};
type RootProps = StateProps & DispatchProps & OwnProps;
const Root: FunctionComponent<RootProps> = (props: RootProps) => {
const [ref, width] = useResizeObserver();
const currentBreakpoint: BreakpointWidth = getBreakpoint(width);
useEffect(() => {
props.updateBreakpointWidth(currentBreakpoint);
}, [props.updateBreakpointWidth, currentBreakpoint]);
return (
<BrowserRouter>
<StrictMode>
<div ref={ref as React.RefObject<HTMLDivElement>}>
<Header />
<Content />
</div>
</StrictMode>
</BrowserRouter>
);
};
function getBreakpoint(width: number): BreakpointWidth {
if (width > BreakpointWidth.LARGE) {
return BreakpointWidth.LARGE;
} else if (width > BreakpointWidth.MEDIUM) {
return BreakpointWidth.MEDIUM;
} else {
return BreakpointWidth.SMALL;
}
}
const mapStateToProps = (state: RootState): StateProps => ({
breakpointWidth: getBreakpointWidth(state)
});
const mapDispatchToProps = { updateBreakpointWidth };
export default hot(module)(Root);
export default connect(
mapStateToProps,
mapDispatchToProps
)(Root);
import React, { FunctionComponent } from 'react';
import { hot } from 'react-hot-loader';
import React, { FunctionComponent, useCallback } from 'react';
import { connect } from 'react-redux';
import BrowserBar from './browser-bar/BrowserBar';
......@@ -10,35 +9,35 @@ import Drawer from './drawer/Drawer';
import { RootState } from 'src/rootReducer';
import { BrowserOpenState } from './browserState';
import { closeDrawer, toggleBrowserNav } from './browserActions';
import { toggleDrawer, toggleBrowserNav } from './browserActions';
import {
getBrowserOpenState,
getDrawerOpened,
getBrowserNavOpened
} from './browserSelectors';
import 'static/browser/browser';
import 'static/browser/browser.js';
import styles from './Browser.scss';
type BrowserProps = {
browserNavOpened: boolean;
browserOpenState: BrowserOpenState;
closeDrawer: () => void;
drawerOpened: boolean;
toggleBrowserNav: () => void;
toggleDrawer: (drawerOpened: boolean) => void;
};
export const Browser: FunctionComponent<BrowserProps> = (
props: BrowserProps
) => {
const closeTrack = () => {
const closeTrack = useCallback(() => {
if (props.drawerOpened === false) {
return;
}
props.closeDrawer();
};
props.toggleDrawer(false);
}, [props.drawerOpened, props.toggleDrawer]);
return (
<section className={styles.browser}>
......@@ -71,13 +70,11 @@ const mapStateToProps = (state: RootState) => ({
});
const mapDispatchToProps = {
closeDrawer,
toggleDrawer,
toggleBrowserNav
};
export default hot(module)(
connect(
mapStateToProps,
mapDispatchToProps
)(Browser)
);
export default connect(
mapStateToProps,
mapDispatchToProps
)(Browser);
......@@ -25,7 +25,11 @@
flex-wrap: nowrap;
font-size: 12px;
margin: 0;
width: calc(100vw - 356px);
width: calc(100vw - 36px);
@include breakpoint(large) {
width: calc(100vw - 356px);
}
label {
color: #555;
......
......@@ -64,9 +64,9 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
</dd>
</dl>
</div>
<dl className={styles.browserTabs}>
<dl className={`${styles.browserTabs} show-for-large`}>
<dd>
<button className={styles.active}>Key Data</button>
<button className={styles.active}>Genomic</button>
</dd>
<dd>
<button>Variation</button>
......
import { createAction } from 'typesafe-actions';
export const toggleTrackPanel = createAction('browser/toggle-track-panel');
export const toggleTrackPanel = createAction(
'browser/toggle-track-panel',
(resolve) => {
return (trackPanelOpened?: boolean) => resolve(trackPanelOpened);
}
);
export const changeCurrentTrack = createAction(
'browser/change-current-track',
(resolve) => {
......@@ -8,9 +14,10 @@ export const changeCurrentTrack = createAction(
}
);
export const toggleDrawer = createAction('browser/toggle-drawer');
export const openDrawer = createAction('browser/open-drawer');
export const closeDrawer = createAction('browser/close-drawer');
export const toggleDrawer = createAction('browser/toggle-drawer', (resolve) => {
return (drawerOpened?: boolean) => resolve(drawerOpened);
});
export const changeCurrentDrawerSection = createAction(
'browser/change-current-drawer-section',
(resolve) => {
......
......@@ -16,7 +16,7 @@ export default (
): BrowserState => {
switch (action.type) {
case getType(browser.toggleTrackPanel):
return trackPanelState(state);
return trackPanelState(state, action.payload);
case getType(browser.changeCurrentTrack):
return {
...state,
......@@ -25,11 +25,7 @@ export default (
drawerSections: drawerSectionConfig[action.payload]
};
case getType(browser.toggleDrawer):
return drawerState(state, !state.drawerOpened);
case getType(browser.openDrawer):
return drawerState(state, true);
case getType(browser.closeDrawer):
return drawerState(state, false);
return drawerState(state, action.payload);
case getType(browser.changeCurrentDrawerSection):
return { ...state, currentDrawerSection: action.payload };
case getType(browser.toggleBrowserNav):
......
......@@ -26,8 +26,10 @@ export const defaultState: BrowserState = {
trackPanelOpened: true
};
export const trackPanelState = (state: BrowserState) => {
const trackPanelOpened: boolean = !state.trackPanelOpened;
export const trackPanelState = (
state: BrowserState,
trackPanelOpened: boolean = !state.trackPanelOpened
) => {
const browserOpenState: BrowserOpenState = trackPanelOpened
? BrowserOpenState.SEMI_EXPANDED
: BrowserOpenState.EXPANDED;
......@@ -39,7 +41,10 @@ export const trackPanelState = (state: BrowserState) => {
};
};
export const drawerState = (state: BrowserState, drawerOpened: boolean) => {
export const drawerState = (
state: BrowserState,
drawerOpened: boolean = !state.drawerOpened
) => {
if (drawerOpened === true) {
return {
...state,
......
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, useEffect } from 'react';
import { connect } from 'react-redux';
import TrackPanelBar from './track-panel-bar/TrackPanelBar';
......@@ -7,10 +7,9 @@ import TrackPanelList from './track-panel-list/TrackPanelList';
import { RootState } from 'src/rootReducer';
import {
toggleDrawer,
toggleTrackPanel,
changeCurrentTrack,
openDrawer,
closeDrawer
changeCurrentTrack
} from '../browserActions';
import {
......@@ -20,36 +19,53 @@ import {
} from '../browserSelectors';
import { getLaunchbarExpanded } from 'src/header/headerSelectors';
import { getBreakpointWidth } from 'src/globalSelectors';
import { BreakpointWidth } from 'src/globalConfig';
import styles from './TrackPanel.scss';
type TrackPanelProps = {
changeCurrentTrack: (currentTrack: string) => void;
closeDrawer: () => void;
type StateProps = {
currentTrack: string;
drawerOpened: boolean;
breakpointWidth: BreakpointWidth;
launchbarExpanded: boolean;
openDrawer: () => void;
toggleTrackPanel: () => void;
trackPanelOpened: boolean;
};
type DispatchProps = {
changeCurrentTrack: (currentTrack: string) => void;
toggleDrawer: (drawerOpened: boolean) => void;
toggleTrackPanel: (trackPanelOpened?: boolean) => void;
};
type OwnProps = {};
type TrackPanelProps = StateProps & DispatchProps & OwnProps;
const TrackPanel: FunctionComponent<TrackPanelProps> = (
props: TrackPanelProps
) => {
useEffect(() => {
if (props.breakpointWidth !== BreakpointWidth.LARGE) {
props.toggleTrackPanel(false);
} else {
props.toggleTrackPanel(true);
}
}, [props.breakpointWidth, props.toggleTrackPanel]);
return (
<section className={`${styles.trackPanel} reactSlideDrawer`}>
<TrackPanelBar
closeDrawer={props.closeDrawer}
drawerOpened={props.drawerOpened}
launchbarExpanded={props.launchbarExpanded}
trackPanelOpened={props.trackPanelOpened}
toggleDrawer={props.toggleDrawer}
toggleTrackPanel={props.toggleTrackPanel}
trackPanelOpened={props.trackPanelOpened}
/>
{props.trackPanelOpened ? (
<TrackPanelList
currentTrack={props.currentTrack}
openDrawer={props.openDrawer}
toggleDrawer={props.toggleDrawer}
updateTrack={props.changeCurrentTrack}
/>
) : null}
......@@ -58,6 +74,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
};
const mapStateToProps = (state: RootState) => ({
breakpointWidth: getBreakpointWidth(state),
currentTrack: getCurrentTrack(state),
drawerOpened: getDrawerOpened(state),
launchbarExpanded: getLaunchbarExpanded(state),
......@@ -66,8 +83,7 @@ const mapStateToProps = (state: RootState) => ({
const mapDispatchToProps = {
changeCurrentTrack,
closeDrawer,
openDrawer,
toggleDrawer,
toggleTrackPanel
};
......
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, useCallback } from 'react';
import { trackPanelBarConfig, TrackPanelBarItem } from './trackPanelBarConfig';
......@@ -10,23 +10,23 @@ import chevronRightIcon from 'static/img/track-panel/chevron-right.svg';
import styles from './TrackPanelBar.scss';
type TrackPanelBarProps = {
closeDrawer: () => void;
toggleDrawer: (drawerOpened: boolean) => void;
drawerOpened: boolean;
launchbarExpanded: boolean;
trackPanelOpened: boolean;
toggleTrackPanel: () => void;
toggleTrackPanel: (trackPanelOpened?: boolean) => void;
};
const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
props: TrackPanelBarProps
) => {
const moveTrackPanel = () => {
const moveTrackPanel = useCallback(() => {
if (props.drawerOpened === true) {
props.closeDrawer();
props.toggleDrawer(false);
} else {
props.toggleTrackPanel();
}
};
}, [props.drawerOpened, props.toggleDrawer, props.toggleTrackPanel]);
const getClassNames = () => {
const expandClass: string = props.launchbarExpanded ? '' : styles.expanded;
......
......@@ -4,6 +4,8 @@
box-sizing: border-box;
display: flex;
flex-direction: column;
height: calc(100vh - 177px);
overflow: auto;
padding: 15px;
width: 320px;
......
......@@ -11,7 +11,7 @@ import styles from './TrackPanelList.scss';
type TrackPanelListProps = {
currentTrack: string;
openDrawer: () => void;
toggleDrawer: (drawerOpened: boolean) => void;
updateTrack: (currentTrack: string) => void;
};
......@@ -19,10 +19,10 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
props: TrackPanelListProps
) => {
const changeTrack = (currentTrack: string) => {
const { openDrawer, updateTrack } = props;
const { toggleDrawer, updateTrack } = props;
updateTrack(currentTrack);
openDrawer();
toggleDrawer(true);
};
const getTrackClass = (trackName: string): string => {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment