Commit e0c173c5 by Alexander Zobnin Committed by Torkel Ödegaard

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

* grid: dont animate panels on initial render

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