Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
1230f3e4
Commit
1230f3e4
authored
Jan 30, 2019
by
Johannes Schill
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
chore: Fix typings and remove bindings for arrow functions in DashboardGrid
parent
a21f6777
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
33 additions
and
23 deletions
+33
-23
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+33
-23
No files found.
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View file @
1230f3e4
import
React
from
'react'
;
import
{
hot
}
from
'react-hot-loader'
;
import
ReactGridLayout
from
'react-grid-layout'
;
import
ReactGridLayout
,
{
ItemCallback
}
from
'react-grid-layout'
;
import
{
GRID_CELL_HEIGHT
,
GRID_CELL_VMARGIN
,
GRID_COLUMN_COUNT
}
from
'app/core/constants'
;
import
{
DashboardPanel
}
from
'./DashboardPanel'
;
import
{
DashboardModel
}
from
'../dashboard_model'
;
...
...
@@ -11,6 +11,21 @@ import sizeMe from 'react-sizeme';
let
lastGridWidth
=
1200
;
let
ignoreNextWidthChange
=
false
;
interface
GridWrapperProps
{
size
:
{
width
:
number
;
};
layout
:
ReactGridLayout
.
Layout
[];
onLayoutChange
:
(
layout
:
ReactGridLayout
.
Layout
[])
=>
void
;
children
:
JSX
.
Element
|
JSX
.
Element
[];
onDragStop
:
ItemCallback
;
onResize
:
ItemCallback
;
onResizeStop
:
ItemCallback
;
onWidthChange
:
()
=>
void
;
className
:
string
;
isResizable
?:
boolean
;
isDraggable
?:
boolean
;
isFullscreen
?:
boolean
;
}
function
GridWrapper
({
size
,
layout
,
...
...
@@ -24,7 +39,7 @@ function GridWrapper({
isResizable
,
isDraggable
,
isFullscreen
,
}
)
{
}
:
GridWrapperProps
)
{
const
width
=
size
.
width
>
0
?
size
.
width
:
lastGridWidth
;
// logic to ignore width changes (optimization)
...
...
@@ -43,7 +58,6 @@ function GridWrapper({
className=
{
className
}
isDraggable=
{
isDraggable
}
isResizable=
{
isResizable
}
measureBeforeMount=
{
false
}
containerPadding=
{
[
0
,
0
]
}
useCSSTransforms=
{
false
}
margin=
{
[
GRID_CELL_VMARGIN
,
GRID_CELL_VMARGIN
]
}
...
...
@@ -71,22 +85,17 @@ export class DashboardGrid extends React.Component<DashboardGridProps> {
gridToPanelMap
:
any
;
panelMap
:
{
[
id
:
string
]:
PanelModel
};
constructor
(
props
)
{
constructor
(
props
:
DashboardGridProps
)
{
super
(
props
);
this
.
onLayoutChange
=
this
.
onLayoutChange
.
bind
(
this
);
this
.
onResize
=
this
.
onResize
.
bind
(
this
);
this
.
onResizeStop
=
this
.
onResizeStop
.
bind
(
this
);
this
.
onDragStop
=
this
.
onDragStop
.
bind
(
this
);
this
.
onWidthChange
=
this
.
onWidthChange
.
bind
(
this
);
// subscribe to dashboard events
const
dashboard
=
this
.
props
.
dashboard
;
dashboard
.
on
(
'panel-added'
,
this
.
triggerForceUpdate
.
bind
(
this
)
);
dashboard
.
on
(
'panel-removed'
,
this
.
triggerForceUpdate
.
bind
(
this
)
);
dashboard
.
on
(
'repeats-processed'
,
this
.
triggerForceUpdate
.
bind
(
this
)
);
dashboard
.
on
(
'view-mode-changed'
,
this
.
onViewModeChanged
.
bind
(
this
)
);
dashboard
.
on
(
'row-collapsed'
,
this
.
triggerForceUpdate
.
bind
(
this
)
);
dashboard
.
on
(
'row-expanded'
,
this
.
triggerForceUpdate
.
bind
(
this
)
);
dashboard
.
on
(
'panel-added'
,
this
.
triggerForceUpdate
);
dashboard
.
on
(
'panel-removed'
,
this
.
triggerForceUpdate
);
dashboard
.
on
(
'repeats-processed'
,
this
.
triggerForceUpdate
);
dashboard
.
on
(
'view-mode-changed'
,
this
.
onViewModeChanged
);
dashboard
.
on
(
'row-collapsed'
,
this
.
triggerForceUpdate
);
dashboard
.
on
(
'row-expanded'
,
this
.
triggerForceUpdate
);
}
buildLayout
()
{
...
...
@@ -123,7 +132,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps> {
return
layout
;
}
onLayoutChange
(
newLayout
)
{
onLayoutChange
=
(
newLayout
:
ReactGridLayout
.
Layout
[])
=>
{
for
(
const
newPos
of
newLayout
)
{
this
.
panelMap
[
newPos
.
i
].
updateGridPos
(
newPos
);
}
...
...
@@ -131,22 +140,22 @@ export class DashboardGrid extends React.Component<DashboardGridProps> {
this
.
props
.
dashboard
.
sortPanelsByGridPos
();
}
triggerForceUpdate
()
{
triggerForceUpdate
=
()
=>
{
this
.
forceUpdate
();
}
onWidthChange
()
{
onWidthChange
=
()
=>
{
for
(
const
panel
of
this
.
props
.
dashboard
.
panels
)
{
panel
.
resizeDone
();
}
}
onViewModeChanged
(
payload
)
{
onViewModeChanged
=
()
=>
{
ignoreNextWidthChange
=
true
;
this
.
forceUpdate
();
}
updateGridPos
(
item
,
layout
)
{
updateGridPos
=
(
item
:
ReactGridLayout
.
Layout
,
layout
:
ReactGridLayout
.
Layout
[])
=>
{
this
.
panelMap
[
item
.
i
].
updateGridPos
(
item
);
// react-grid-layout has a bug (#670), and onLayoutChange() is only called when the component is mounted.
...
...
@@ -154,16 +163,17 @@ export class DashboardGrid extends React.Component<DashboardGridProps> {
this
.
onLayoutChange
(
layout
);
}
onResize
(
layout
,
oldItem
,
newItem
)
{
onResize
:
ItemCallback
=
(
layout
,
oldItem
,
newItem
)
=>
{
console
.
log
();
this
.
panelMap
[
newItem
.
i
].
updateGridPos
(
newItem
);
}
onResizeStop
(
layout
,
oldItem
,
newItem
)
{
onResizeStop
:
ItemCallback
=
(
layout
,
oldItem
,
newItem
)
=>
{
this
.
updateGridPos
(
newItem
,
layout
);
this
.
panelMap
[
newItem
.
i
].
resizeDone
();
}
onDragStop
(
layout
,
oldItem
,
newItem
)
{
onDragStop
:
ItemCallback
=
(
layout
,
oldItem
,
newItem
)
=>
{
this
.
updateGridPos
(
newItem
,
layout
);
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment