Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
3dea32da
Commit
3dea32da
authored
Feb 05, 2019
by
Imran Salam
Browse files
change non-lifecycle using component classes into function components
parent
58ba5859
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
298 additions
and
343 deletions
+298
-343
src/ensembl/src/content/Content.tsx
src/ensembl/src/content/Content.tsx
+14
-14
src/ensembl/src/content/app/browser/Browser.tsx
src/ensembl/src/content/app/browser/Browser.tsx
+30
-36
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.tsx
...mbl/src/content/app/browser/browser-nav/BrowserNavBar.tsx
+10
-14
src/ensembl/src/content/app/browser/browser-nav/BrowserNavIcon.tsx
...bl/src/content/app/browser/browser-nav/BrowserNavIcon.tsx
+17
-26
src/ensembl/src/content/app/browser/drawer/DrawerBar.tsx
src/ensembl/src/content/app/browser/drawer/DrawerBar.tsx
+34
-35
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
...nsembl/src/content/app/browser/track-panel/TrackPanel.tsx
+23
-22
src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx
...app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx
+32
-40
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
...p/browser/track-panel/track-panel-list/TrackPanelList.tsx
+41
-47
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx
...owser/track-panel/track-panel-list/TrackPanelListItem.tsx
+41
-48
src/ensembl/src/header/account/Account.tsx
src/ensembl/src/header/account/Account.tsx
+14
-16
src/ensembl/src/header/launchbar/Launchbar.tsx
src/ensembl/src/header/launchbar/Launchbar.tsx
+42
-45
No files found.
src/ensembl/src/content/Content.tsx
View file @
3dea32da
import
React
,
{
Component
}
from
'
react
'
;
import
React
,
{
Function
Component
}
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
c
lass
Content
extends
Component
<
ContentProps
>
{
p
ublic
render
()
{
return
(
<
main
className
=
{
`
${
styles
.
content
}
${
this
.
getExpandClass
()}
`
}
>
<
Route
path
=
"/app"
component
=
{
App
}
/>
</
main
>
);
}
private
getExpandClass
():
string
{
return
this
.
props
.
launchbarExpanded
?
''
:
styles
.
expanded
;
}
}
export
c
onst
Content
:
Function
Component
<
ContentProps
>
=
(
p
rops
:
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
)
...
...
src/ensembl/src/content/app/browser/Browser.tsx
View file @
3dea32da
import
React
,
{
Component
}
from
'
react
'
;
import
React
,
{
Function
Component
}
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
),
...
...
src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.tsx
View file @
3dea32da
import
React
,
{
Component
}
from
'
react
'
;
import
React
,
{
Function
Component
}
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
;
src/ensembl/src/content/app/browser/browser-nav/BrowserNavIcon.tsx
View file @
3dea32da
import
React
,
{
Pure
Component
}
from
'
react
'
;
import
React
,
{
Function
Component
,
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
;
src/ensembl/src/content/app/browser/drawer/DrawerBar.tsx
View file @
3dea32da
import
React
,
{
Component
,
ReactEventHandler
}
from
'
react
'
;
import
React
,
{
Function
Component
,
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
;
src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx
View file @
3dea32da
import
React
,
{
Component
}
from
'
react
'
;
import
React
,
{
Function
Component
}
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
),
...
...
src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.tsx
View file @
3dea32da
import
React
,
{
Pure
Component
}
from
'
react
'
;
import
React
,
{
Function
Component
}
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
;
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx
View file @
3dea32da
import
React
,
{
Component
}
from
'
react
'
;
import
React
,
{
Function
Component
}
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
;
src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.tsx
View file @
3dea32da
import
React
,
{
Pure
Component
}
from
'
react
'
;
import
React
,
{
Function
Component
}
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
);
}