Commit 52724644 authored by Imran Salam's avatar Imran Salam
Browse files

use react ref instead of query selector and implement track toggling

parent 8753727f
import React, { FunctionComponent, useCallback } from 'react'; import React, { FunctionComponent, useCallback, useRef } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import BrowserBar from './browser-bar/BrowserBar'; import BrowserBar from './browser-bar/BrowserBar';
...@@ -37,6 +37,8 @@ type BrowserProps = StateProps & DispatchProps & OwnProps; ...@@ -37,6 +37,8 @@ type BrowserProps = StateProps & DispatchProps & OwnProps;
export const Browser: FunctionComponent<BrowserProps> = ( export const Browser: FunctionComponent<BrowserProps> = (
props: BrowserProps props: BrowserProps
) => { ) => {
const browserRef: React.RefObject<HTMLDivElement> = useRef(null);
const closeTrack = useCallback(() => { const closeTrack = useCallback(() => {
if (props.drawerOpened === false) { if (props.drawerOpened === false) {
return; return;
...@@ -47,7 +49,7 @@ export const Browser: FunctionComponent<BrowserProps> = ( ...@@ -47,7 +49,7 @@ export const Browser: FunctionComponent<BrowserProps> = (
return ( return (
<section className={styles.browser}> <section className={styles.browser}>
<BrowserBar /> <BrowserBar browserRef={browserRef} />
<div className={styles.browserInnerWrapper}> <div className={styles.browserInnerWrapper}>
<div <div
className={`${styles.browserImageWrapper} ${ className={`${styles.browserImageWrapper} ${
...@@ -55,10 +57,10 @@ export const Browser: FunctionComponent<BrowserProps> = ( ...@@ -55,10 +57,10 @@ export const Browser: FunctionComponent<BrowserProps> = (
}`} }`}
onClick={closeTrack} onClick={closeTrack}
> >
{props.browserNavOpened && <BrowserNavBar />} {props.browserNavOpened && <BrowserNavBar browserRef={browserRef} />}
<BrowserImage /> <BrowserImage browserRef={browserRef} />
</div> </div>
<TrackPanel /> <TrackPanel browserRef={browserRef} />
{props.drawerOpened && <Drawer />} {props.drawerOpened && <Drawer />}
</div> </div>
</section> </section>
......
import React, { FunctionComponent, useEffect } from 'react'; import React, { FunctionComponent, RefObject, useEffect } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import styles from './BrowserImage.scss';
import { updateBrowserNavStates, updateChrLocation } from '../browserActions'; import { updateBrowserNavStates, updateChrLocation } from '../browserActions';
import { BrowserNavStates, ChrLocation } from '../browserState'; import { BrowserNavStates, ChrLocation } from '../browserState';
import { getBrowserNavOpened } from '../browserSelectors'; import { getBrowserNavOpened } from '../browserSelectors';
import { RootState } from 'src/rootReducer'; import { RootState } from 'src/rootReducer';
import styles from './BrowserImage.scss';
type StateProps = { type StateProps = {
browserNavOpened: boolean; browserNavOpened: boolean;
}; };
...@@ -16,7 +17,9 @@ type DispatchProps = { ...@@ -16,7 +17,9 @@ type DispatchProps = {
updateChrLocation: (chrLocation: ChrLocation) => void; updateChrLocation: (chrLocation: ChrLocation) => void;
}; };
type OwnProps = {}; type OwnProps = {
browserRef: RefObject<HTMLDivElement>;
};
type BrowserImageProps = StateProps & DispatchProps & OwnProps; type BrowserImageProps = StateProps & DispatchProps & OwnProps;
...@@ -30,8 +33,6 @@ type BpaneOutEvent = Event & { ...@@ -30,8 +33,6 @@ type BpaneOutEvent = Event & {
export const BrowserImage: FunctionComponent<BrowserImageProps> = ( export const BrowserImage: FunctionComponent<BrowserImageProps> = (
props: BrowserImageProps props: BrowserImageProps
) => { ) => {
const browserCanvas: React.RefObject<HTMLDivElement> = React.createRef();
const listenBpaneOut = (event: Event) => { const listenBpaneOut = (event: Event) => {
const bpaneOutEvent = event as BpaneOutEvent; const bpaneOutEvent = event as BpaneOutEvent;
const navIconStates = bpaneOutEvent.detail.bumper as BrowserNavStates; const navIconStates = bpaneOutEvent.detail.bumper as BrowserNavStates;
...@@ -49,8 +50,8 @@ export const BrowserImage: FunctionComponent<BrowserImageProps> = ( ...@@ -49,8 +50,8 @@ export const BrowserImage: FunctionComponent<BrowserImageProps> = (
useEffect(() => { useEffect(() => {
let currentEl: HTMLDivElement | null = null; let currentEl: HTMLDivElement | null = null;
if (browserCanvas) { if (props.browserRef) {
currentEl = browserCanvas.current as HTMLDivElement; currentEl = props.browserRef.current as HTMLDivElement;
activateIfPossible(currentEl as HTMLDivElement); activateIfPossible(currentEl as HTMLDivElement);
...@@ -67,7 +68,7 @@ export const BrowserImage: FunctionComponent<BrowserImageProps> = ( ...@@ -67,7 +68,7 @@ export const BrowserImage: FunctionComponent<BrowserImageProps> = (
return ( return (
<div <div
className={getBrowserImageClasses(props.browserNavOpened)} className={getBrowserImageClasses(props.browserNavOpened)}
ref={browserCanvas} ref={props.browserRef}
/> />
); );
}; };
......
import React, { FunctionComponent, useEffect } from 'react'; import React, { FunctionComponent, RefObject, useEffect } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import TrackPanelBar from './track-panel-bar/TrackPanelBar'; import TrackPanelBar from './track-panel-bar/TrackPanelBar';
...@@ -38,7 +38,9 @@ type DispatchProps = { ...@@ -38,7 +38,9 @@ type DispatchProps = {
toggleTrackPanel: (trackPanelOpened?: boolean) => void; toggleTrackPanel: (trackPanelOpened?: boolean) => void;
}; };
type OwnProps = {}; type OwnProps = {
browserRef: RefObject<HTMLDivElement>;
};
type TrackPanelProps = StateProps & DispatchProps & OwnProps; type TrackPanelProps = StateProps & DispatchProps & OwnProps;
...@@ -64,6 +66,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = ( ...@@ -64,6 +66,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
/> />
{props.trackPanelOpened ? ( {props.trackPanelOpened ? (
<TrackPanelList <TrackPanelList
browserRef={props.browserRef}
currentTrack={props.currentTrack} currentTrack={props.currentTrack}
launchbarExpanded={props.launchbarExpanded} launchbarExpanded={props.launchbarExpanded}
toggleDrawer={props.toggleDrawer} toggleDrawer={props.toggleDrawer}
......
import React, { FunctionComponent } from 'react'; import React, { FunctionComponent, RefObject } from 'react';
import TrackPanelListItem from './TrackPanelListItem'; import TrackPanelListItem from './TrackPanelListItem';
import { import {
...@@ -10,6 +10,7 @@ import { ...@@ -10,6 +10,7 @@ import {
import styles from './TrackPanelList.scss'; import styles from './TrackPanelList.scss';
type TrackPanelListProps = { type TrackPanelListProps = {
browserRef: RefObject<HTMLDivElement>;
currentTrack: string; currentTrack: string;
launchbarExpanded: boolean; launchbarExpanded: boolean;
toggleDrawer: (drawerOpened: boolean) => void; toggleDrawer: (drawerOpened: boolean) => void;
...@@ -19,6 +20,8 @@ type TrackPanelListProps = { ...@@ -19,6 +20,8 @@ type TrackPanelListProps = {
const TrackPanelList: FunctionComponent<TrackPanelListProps> = ( const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
props: TrackPanelListProps props: TrackPanelListProps
) => { ) => {
const browserImageEl = props.browserRef.current as HTMLDivElement;
const changeTrack = (currentTrack: string) => { const changeTrack = (currentTrack: string) => {
const { toggleDrawer, updateTrack } = props; const { toggleDrawer, updateTrack } = props;
...@@ -48,10 +51,11 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = ( ...@@ -48,10 +51,11 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
const getTrackListItem = (track: TrackPanelItem) => ( const getTrackListItem = (track: TrackPanelItem) => (
<TrackPanelListItem <TrackPanelListItem
key={track.id} browserImageEl={browserImageEl}
className={getTrackClass(track.name)} className={getTrackClass(track.name)}
track={track}
changeTrack={changeTrack} changeTrack={changeTrack}
key={track.id}
track={track}
> >
{track.childTrackList && {track.childTrackList &&
track.childTrackList.map((childTrack: TrackPanelItem) => track.childTrackList.map((childTrack: TrackPanelItem) =>
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
background: lighten($ens-blue, 40%); background: lighten($ens-blue, 40%);
} }
&.gene { &.main {
font-weight: $bold; font-weight: $bold;
} }
......
...@@ -7,6 +7,7 @@ import chevronUpIcon from 'static/img/shared/chevron-up.svg'; ...@@ -7,6 +7,7 @@ import chevronUpIcon from 'static/img/shared/chevron-up.svg';
import styles from './TrackPanelListItem.scss'; import styles from './TrackPanelListItem.scss';
type TrackPanelListItemProps = { type TrackPanelListItemProps = {
browserImageEl: HTMLDivElement | null;
children?: ReactNode[]; children?: ReactNode[];
className: string; className: string;
track: TrackPanelItem; track: TrackPanelItem;
...@@ -17,8 +18,10 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = ( ...@@ -17,8 +18,10 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
props: TrackPanelListItemProps props: TrackPanelListItemProps
) => { ) => {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const [trackStatus, setTrackStatus] = useState('on');
const { className, track } = props; const { browserImageEl, className, track } = props;
const { ellipsis, eye } = trackPanelIconConfig;
const listItemClass = styles[className] || ''; const listItemClass = styles[className] || '';
const changeTrackHandler = () => { const changeTrackHandler = () => {
...@@ -29,6 +32,23 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = ( ...@@ -29,6 +32,23 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
setExpanded(!expanded); setExpanded(!expanded);
}; };
const toggleTrack = () => {
const currentTrackStatus = trackStatus === 'on' ? 'off' : 'on';
const navEvent = new CustomEvent('bpane', {
bubbles: true,
detail: {
[currentTrackStatus]: track.name
}
});
if (browserImageEl) {
browserImageEl.dispatchEvent(navEvent);
}
setTrackStatus(currentTrackStatus);
};
return ( return (
<Fragment> <Fragment>
<dd className={`${styles.listItem} ${listItemClass}`}> <dd className={`${styles.listItem} ${listItemClass}`}>
...@@ -55,15 +75,12 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = ( ...@@ -55,15 +75,12 @@ const TrackPanelListItem: FunctionComponent<TrackPanelListItemProps> = (
)} )}
</label> </label>
<button onClick={changeTrackHandler}> <button onClick={changeTrackHandler}>
<img <img src={ellipsis.icon.on} alt={`Go to ${track.label}`} />
src={trackPanelIconConfig.ellipsis.icon.on}
alt={`Go to ${track.label}`}
/>
</button> </button>
<button> <button onClick={toggleTrack}>
<img <img
src={trackPanelIconConfig.eye.icon.on} src={trackStatus === 'on' ? eye.icon.on : eye.icon.off}
alt={trackPanelIconConfig.ellipsis.description} alt={eye.description}
/> />
</button> </button>
</dd> </dd>
......
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