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