Commit 3dea32da authored by Imran Salam's avatar Imran Salam
Browse files

change non-lifecycle using component classes into function components

parent 58ba5859
import React, { Component } from 'react';
import React, { FunctionComponent } from 'react';
import { Route, withRouter } from 'react-router-dom';
import { RouteComponentProps } from 'react-router';
import { connect } from 'react-redux';
......@@ -18,19 +18,19 @@ type OwnProps = {};
type ContentProps = RouteComponentProps & StateProps & OwnProps;
export class Content extends Component<ContentProps> {
public render() {
return (
<main className={`${styles.content} ${this.getExpandClass()}`}>
<Route path="/app" component={App} />
</main>
);
}
private getExpandClass(): string {
return this.props.launchbarExpanded ? '' : styles.expanded;
}
}
export const Content: FunctionComponent<ContentProps> = (
props: ContentProps
) => {
const getExpandClass = (): string => {
return props.launchbarExpanded ? '' : styles.expanded;
};
return (
<main className={`${styles.content} ${getExpandClass()}`}>
<Route path="/app" component={App} />
</main>
);
};
const mapStateToProps = (state: RootState): StateProps => ({
launchbarExpanded: getLaunchbarExpanded(state)
......
import React, { Component } from 'react';
import React, { FunctionComponent } from 'react';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
......@@ -29,46 +29,40 @@ type BrowserProps = {
toggleBrowserNav: () => void;
};
export class Browser extends Component<BrowserProps> {
constructor(props: BrowserProps) {
super(props);
this.closeTrack = this.closeTrack.bind(this);
}
public closeTrack() {
if (this.props.drawerOpened === false) {
export const Browser: FunctionComponent<BrowserProps> = (
props: BrowserProps
) => {
const closeTrack = () => {
if (props.drawerOpened === false) {
return;
}
this.props.closeDrawer();
}
props.closeDrawer();
};
public render() {
return (
<section className={styles.browser}>
<BrowserBar
browserNavOpened={this.props.browserNavOpened}
expanded={true}
toggleBrowserNav={this.props.toggleBrowserNav}
/>
<div className={styles.browserInnerWrapper}>
<div
className={`${styles.browserImageWrapper} ${
styles[this.props.browserOpenState]
}`}
onClick={this.closeTrack}
>
{this.props.browserNavOpened && <BrowserNavBar />}
<BrowserImage />
</div>
<TrackPanel />
{this.props.drawerOpened && <Drawer />}
return (
<section className={styles.browser}>
<BrowserBar
browserNavOpened={props.browserNavOpened}
expanded={true}
toggleBrowserNav={props.toggleBrowserNav}
/>
<div className={styles.browserInnerWrapper}>
<div
className={`${styles.browserImageWrapper} ${
styles[props.browserOpenState]
}`}
onClick={closeTrack}
>
{props.browserNavOpened && <BrowserNavBar />}
<BrowserImage />
</div>
</section>
);
}
}
<TrackPanel />
{props.drawerOpened && <Drawer />}
</div>
</section>
);
};
const mapStateToProps = (state: RootState) => ({
browserNavOpened: getBrowserNavOpened(state),
......
import React, { Component } from 'react';
import React, { FunctionComponent } from 'react';
import { browserNavConfig, BrowserNavItem } from '../browserConfig';
......@@ -8,18 +8,14 @@ import styles from './BrowserNavBar.scss';
type BrowserNavBarProps = {};
class BrowserNavBar extends Component<BrowserNavBarProps> {
public render() {
return (
<div className={styles.browserNavBar}>
<dl>
{browserNavConfig.map((item: BrowserNavItem) => (
<BrowserNavIcon key={item.name} browserNavItem={item} />
))}
</dl>
</div>
);
}
}
const BrowserNavBar: FunctionComponent<BrowserNavBarProps> = () => (
<div className={styles.browserNavBar}>
<dl>
{browserNavConfig.map((item: BrowserNavItem) => (
<BrowserNavIcon key={item.name} browserNavItem={item} />
))}
</dl>
</div>
);
export default BrowserNavBar;
import React, { PureComponent } from 'react';
import React, { FunctionComponent, memo } from 'react';
import { BrowserNavItem } from '../browserConfig';
......@@ -8,40 +8,31 @@ type BrowserNavIconProps = {
browserNavItem: BrowserNavItem;
};
class BrowserNavIcon extends PureComponent<BrowserNavIconProps> {
constructor(props: BrowserNavIconProps) {
super(props);
const BrowserNavIcon: FunctionComponent<BrowserNavIconProps> = memo(
(props: BrowserNavIconProps) => {
const navigateBrowser = () => {
const { detail } = props.browserNavItem;
this.navigateBrowser = this.navigateBrowser.bind(this);
}
const navEvent = new CustomEvent('bpane', {
bubbles: true,
detail
});
const browserCanvas = document.querySelector('.bpane-canv') as Element;
public render() {
const { browserNavItem } = this.props;
browserCanvas.dispatchEvent(navEvent);
};
const { browserNavItem } = props;
return (
<dd className={styles.browserNavIcon}>
<button
title={browserNavItem.description}
onClick={this.navigateBrowser}
>
<button title={browserNavItem.description} onClick={navigateBrowser}>
<img src={browserNavItem.icon.on} alt={browserNavItem.description} />
</button>
</dd>
);
}
private navigateBrowser() {
const { detail } = this.props.browserNavItem;
const navEvent = new CustomEvent('bpane', {
bubbles: true,
detail
});
const browserCanvas = document.querySelector('#bpane-canv') as Element;
browserCanvas.dispatchEvent(navEvent);
}
}
);
export default BrowserNavIcon;
import React, { Component, ReactEventHandler } from 'react';
import React, { FunctionComponent, ReactEventHandler } from 'react';
import { DrawerSection } from './drawerSectionConfig';
import { EventHandlers } from 'src/objects';
......@@ -14,44 +14,43 @@ type DrawerBarProps = {
drawerSections: DrawerSection[];
};
class DrawerBar extends Component<DrawerBarProps> {
public drawerSections: DrawerSection[] = [];
public clickHandlers: EventHandlers = {};
public render() {
return (
<div className={styles.drawerBar}>
<dl className={styles.pageList}>
<dt>
<button onClick={this.getClickHandler('main')}>{'Main'}</button>
</dt>
{this.props.drawerSections &&
this.props.drawerSections.map((section: DrawerSection) => (
<dt key={section.name}>
<button onClick={this.getClickHandler(section.name)}>
{section.label}
</button>
</dt>
))}
</dl>
<button className={styles.closeButton} onClick={this.props.closeDrawer}>
<img src={closeIcon} alt="close drawer" />
</button>
</div>
);
}
private getClickHandler(key: string) {
if (!this.clickHandlers.hasOwnProperty(key)) {
const DrawerBar: FunctionComponent<DrawerBarProps> = (
props: DrawerBarProps
) => {
const clickHandlers: EventHandlers = {};
const getClickHandler = (key: string) => {
if (!clickHandlers.hasOwnProperty(key)) {
const handler: ReactEventHandler = () => {
this.props.changeCurrentDrawerSection(key);
props.changeCurrentDrawerSection(key);
};
this.clickHandlers[key] = handler;
clickHandlers[key] = handler;
}
return this.clickHandlers[key];
}
}
return clickHandlers[key];
};
return (
<div className={styles.drawerBar}>
<dl className={styles.pageList}>
<dt>
<button onClick={getClickHandler('main')}>{'Main'}</button>
</dt>
{props.drawerSections &&
props.drawerSections.map((section: DrawerSection) => (
<dt key={section.name}>
<button onClick={getClickHandler(section.name)}>
{section.label}
</button>
</dt>
))}
</dl>
<button className={styles.closeButton} onClick={props.closeDrawer}>
<img src={closeIcon} alt="close drawer" />
</button>
</div>
);
};
export default DrawerBar;
import React, { Component } from 'react';
import React, { FunctionComponent } from 'react';
import { connect } from 'react-redux';
import TrackPanelBar from './track-panel-bar/TrackPanelBar';
......@@ -12,6 +12,7 @@ import {
openDrawer,
closeDrawer
} from '../browserActions';
import {
getCurrentTrack,
getDrawerOpened,
......@@ -33,28 +34,28 @@ type TrackPanelProps = {
trackPanelOpened: boolean;
};
class TrackPanel extends Component<TrackPanelProps> {
public render() {
return (
<section className={`${styles.trackPanel} reactSlideDrawer`}>
<TrackPanelBar
closeDrawer={this.props.closeDrawer}
drawerOpened={this.props.drawerOpened}
launchbarExpanded={this.props.launchbarExpanded}
trackPanelOpened={this.props.trackPanelOpened}
toggleTrackPanel={this.props.toggleTrackPanel}
const TrackPanel: FunctionComponent<TrackPanelProps> = (
props: TrackPanelProps
) => {
return (
<section className={`${styles.trackPanel} reactSlideDrawer`}>
<TrackPanelBar
closeDrawer={props.closeDrawer}
drawerOpened={props.drawerOpened}
launchbarExpanded={props.launchbarExpanded}
trackPanelOpened={props.trackPanelOpened}
toggleTrackPanel={props.toggleTrackPanel}
/>
{props.trackPanelOpened ? (
<TrackPanelList
currentTrack={props.currentTrack}
openDrawer={props.openDrawer}
updateTrack={props.changeCurrentTrack}
/>
{this.props.trackPanelOpened ? (
<TrackPanelList
currentTrack={this.props.currentTrack}
openDrawer={this.props.openDrawer}
updateTrack={this.props.changeCurrentTrack}
/>
) : null}
</section>
);
}
}
) : null}
</section>
);
};
const mapStateToProps = (state: RootState) => ({
currentTrack: getCurrentTrack(state),
......
import React, { PureComponent } from 'react';
import React, { FunctionComponent } from 'react';
import { trackPanelBarConfig, TrackPanelBarItem } from './trackPanelBarConfig';
......@@ -17,49 +17,41 @@ type TrackPanelBarProps = {
toggleTrackPanel: () => void;
};
class TrackPanelBar extends PureComponent<TrackPanelBarProps> {
constructor(props: TrackPanelBarProps) {
super(props);
this.moveTrackPanel = this.moveTrackPanel.bind(this);
}
public moveTrackPanel() {
if (this.props.drawerOpened === true) {
this.props.closeDrawer();
const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
props: TrackPanelBarProps
) => {
const moveTrackPanel = () => {
if (props.drawerOpened === true) {
props.closeDrawer();
} else {
this.props.toggleTrackPanel();
props.toggleTrackPanel();
}
}
};
public render() {
return (
<div className={this.getClassNames()}>
<dl>
<dt className={styles.sliderButton}>
<button onClick={this.moveTrackPanel}>
{this.props.trackPanelOpened ? (
<img src={chevronRightIcon} alt="collapse" />
) : (
<img src={chevronLeftIcon} alt="expand" />
)}
</button>
</dt>
{trackPanelBarConfig.map((item: TrackPanelBarItem) => (
<TrackPanelBarIcon key={item.name} iconConfig={item} />
))}
</dl>
</div>
);
}
private getClassNames() {
const expandClass: string = this.props.launchbarExpanded
? ''
: styles.expanded;
const getClassNames = () => {
const expandClass: string = props.launchbarExpanded ? '' : styles.expanded;
return `${styles.trackPanelBar} ${expandClass}`;
}
}
};
return (
<div className={getClassNames()}>
<dl>
<dt className={styles.sliderButton}>
<button onClick={moveTrackPanel}>
{props.trackPanelOpened ? (
<img src={chevronRightIcon} alt="collapse" />
) : (
<img src={chevronLeftIcon} alt="expand" />
)}
</button>
</dt>
{trackPanelBarConfig.map((item: TrackPanelBarItem) => (
<TrackPanelBarIcon key={item.name} iconConfig={item} />
))}
</dl>
</div>
);
};
export default TrackPanelBar;
import React, { Component } from 'react';
import React, { FunctionComponent } from 'react';
import TrackPanelListItem from './TrackPanelListItem';
import {
......@@ -15,59 +15,53 @@ type TrackPanelListProps = {
updateTrack: (currentTrack: string) => void;
};
class TrackPanelList extends Component<TrackPanelListProps> {
constructor(props: TrackPanelListProps) {
super(props);
this.changeTrack = this.changeTrack.bind(this);
}
public changeTrack(currentTrack: string) {
const { openDrawer, updateTrack } = this.props;
const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
props: TrackPanelListProps
) => {
const changeTrack = (currentTrack: string) => {
const { openDrawer, updateTrack } = props;
updateTrack(currentTrack);
openDrawer();
}
public render() {
return (
<div className={styles.trackPanelList}>
<section>
<dl>
<TrackPanelListItem
className="main"
track={trackPanelConfig.main}
changeTrack={this.changeTrack}
additionalInfo="MANE Select transcript /7"
/>
</dl>
</section>
{trackPanelConfig.categories.map((category: TrackPanelCategory) => (
<section>
<h4>{category.name}</h4>
<dl>
{category.trackList.map((track: TrackPanelItem) => (
<TrackPanelListItem
key={track.id}
className={this.getTrackClass(track.name)}
track={track}
changeTrack={this.changeTrack}
/>
))}
</dl>
</section>
))}
</div>
);
}
};
private getTrackClass(trackName: string): string {
if (this.props.currentTrack === trackName) {
const getTrackClass = (trackName: string): string => {
if (props.currentTrack === trackName) {
return 'currentTrack';
} else {
return '';
}
}
}
};
return (
<div className={styles.trackPanelList}>
<section>
<dl>
<TrackPanelListItem
className="main"
track={trackPanelConfig.main}
changeTrack={changeTrack}
additionalInfo="MANE Select transcript /7"
/>
</dl>
</section>
{trackPanelConfig.categories.map((category: TrackPanelCategory) => (
<section key={category.name}>
<h4>{category.name}</h4>
<dl>
{category.trackList.map((track: TrackPanelItem) => (
<TrackPanelListItem
key={track.id}
className={getTrackClass(track.name)}
track={track}
changeTrack={changeTrack}
/>
))}
</dl>
</section>
))}
</div>
);
};
export default TrackPanelList;
import React, { PureComponent } from 'react';
import React, { FunctionComponent } from 'react';
import { TrackPanelItem, trackPanelIconConfig } from '../trackPanelConfig';
import chevronDownIcon from 'static/img/track-panel/chevron-down.svg';
......@@ -13,56 +13,49 @@ type TrackPanelListItemProps = {
additionalInfo?: string;
};
class TrackPanelListItem extends PureComponent<TrackPanelListItemProps> {
private expanded: boolean = false;
constructor(props: TrackPanelListItemProps) {
super(props);
this.changeTrackHandler = this.changeTrackHandler.bind(this);
}