IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Don't animate panels on initial render (#10130)"

Browse Source 
This reverts commit e0c173c5af.
This commit is contained in:
Torkel Ödegaard 2017-12-08 11:53:51 +01:00
parent b59d06cab6
commit 974d4d9739
2 changed files with 27 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
View File

@ -11,59 +11,37 @@ import sizeMe from 'react-sizeme';
let lastGridWidth = 1200; let lastGridWidth = 1200;
export interface GridWrapperProps { function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange}) {
size: any; if (size.width === 0) {
layout: any; console.log('size is zero!');
children: any;
onResize: any;
onResizeStop: any;
onWidthChange: any;
onLayoutChange: any;
}
class GridWrapper extends React.Component<GridWrapperProps, any> {
animated: boolean;
constructor(props) {
super(props);
if (this.props.size.width === 0) {
console.log('size is zero!');
}
const width = this.props.size.width > 0 ? this.props.size.width : lastGridWidth;
if (width !== lastGridWidth) {
this.props.onWidthChange();
lastGridWidth = width;
}
} }
componentDidMount() { const width = size.width > 0 ? size.width : lastGridWidth;
// Disable animation on initial rendering and enable it when component has been mounted. if (width !== lastGridWidth) {
this.animated = true; onWidthChange();
lastGridWidth = width;
} }
render() { return (
return ( <ReactGridLayout
<ReactGridLayout width={lastGridWidth}
width={lastGridWidth} className="layout"
className={this.animated ? 'layout animated' : 'layout'} isDraggable={true}
isDraggable={true} isResizable={true}
isResizable={true} measureBeforeMount={false}
measureBeforeMount={false} containerPadding={[0, 0]}
containerPadding={[0, 0]} useCSSTransforms={true}
useCSSTransforms={true} margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}
margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]} cols={GRID_COLUMN_COUNT}
cols={GRID_COLUMN_COUNT} rowHeight={GRID_CELL_HEIGHT}
rowHeight={GRID_CELL_HEIGHT} draggableHandle=".grid-drag-handle"
draggableHandle=".grid-drag-handle" layout={layout}
layout={this.props.layout} onResize={onResize}
onResize={this.props.onResize} onResizeStop={onResizeStop}
onResizeStop={this.props.onResizeStop} onLayoutChange={onLayoutChange}>
onLayoutChange={this.props.onLayoutChange}> {children}
{this.props.children} </ReactGridLayout>
</ReactGridLayout> );
);
}
} }
const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper); const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper);

9
public/sass/components/_dashboard_grid.scss
View File

@ -53,12 +53,3 @@
.react-grid-item.react-draggable-dragging.panel { .react-grid-item.react-draggable-dragging.panel {
z-index: $zindex-dropdown; 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;
}