Commit e03abde7 by Torkel Ödegaard

refactoring: #10130

parent 974d4d97
......@@ -11,7 +11,7 @@ import sizeMe from 'react-sizeme';
let lastGridWidth = 1200;
function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) {
function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange, className}) {
if (size.width === 0) {
console.log('size is zero!');
}
......@@ -25,7 +25,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize
return (
<ReactGridLayout
width={lastGridWidth}
className="layout"
className={className}
isDraggable={true}
isResizable={true}
measureBeforeMount={false}
......@@ -64,6 +64,8 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.onResizeStop = this.onResizeStop.bind(this);
this.onWidthChange = this.onWidthChange.bind(this);
this.state = {animated: false};
// subscribe to dashboard events
this.dashboard = this.panelContainer.getDashboard();
this.dashboard.on('panel-added', this.triggerForceUpdate.bind(this));
......@@ -134,6 +136,14 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
this.panelMap[newItem.i].resizeDone();
}
componentDidMount() {
setTimeout(() => {
this.setState(() => {
return {animated: true};
});
});
}
renderPanels() {
const panelElements = [];
......@@ -150,8 +160,10 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
}
render() {
console.log('animated', this.state.animated);
return (
<SizedReactLayoutGrid
className={classNames({'layout': true, 'animated': this.state.animated})}
layout={this.buildLayout()}
onLayoutChange={this.onLayoutChange}
onWidthChange={this.onWidthChange}
......
......@@ -19,7 +19,7 @@ module.directive('graphLegend', function(popoverSrv, $timeout) {
var legendScrollbar;
scope.$on("$destroy", function() {
if (!legendScrollbar) {
if (legendScrollbar) {
legendScrollbar.destroy();
}
});
......
......@@ -53,3 +53,12 @@
.react-grid-item.react-draggable-dragging.panel {
z-index: $zindex-dropdown;
}
// Disable animation on initial rendering and enable it when component has been mounted.
.react-grid-item.cssTransforms.panel {
transition-property: none;
}
.animated .react-grid-item.cssTransforms.panel {
transition-property: transform;
}
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