Przeglądaj źródła

make add panel panel scrollbar adjust when panel/dashboard grid are resized

Marcus Efraimsson 7 lat temu
rodzic
commit
ce97f89de6

+ 4 - 0
public/app/core/components/ScrollBar/ScrollBar.tsx

@@ -54,6 +54,10 @@ export default class ScrollBar extends React.Component<Props, any> {
     return false;
   }
 
+  update() {
+    this.scrollbar.update();
+  }
+
   handleRef = ref => {
     this.container = ref;
   };

+ 18 - 1
public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

@@ -22,10 +22,13 @@ export interface AddPanelPanelState {
 }
 
 export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> {
+  private scrollbar: ScrollBar;
+
   constructor(props) {
     super(props);
     this.handleCloseAddPanel = this.handleCloseAddPanel.bind(this);
     this.renderPanelItem = this.renderPanelItem.bind(this);
+    this.panelSizeChanged = this.panelSizeChanged.bind(this);
 
     this.state = {
       panelPlugins: this.getPanelPlugins(''),
@@ -35,6 +38,20 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     };
   }
 
+  componentDidMount() {
+    this.props.panel.events.on('panel-size-changed', this.panelSizeChanged);
+  }
+
+  componentWillUnmount() {
+    this.props.panel.events.off('panel-size-changed', this.panelSizeChanged);
+  }
+
+  panelSizeChanged() {
+    setTimeout(() => {
+      this.scrollbar.update();
+    });
+  }
+
   getPanelPlugins(filter) {
     let panels = _.chain(config.panels)
       .filter({ hideFromList: false })
@@ -207,7 +224,7 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
               <i className="fa fa-close" />
             </button>
           </div>
-          <ScrollBar className="add-panel__items">
+          <ScrollBar ref={element => (this.scrollbar = element)} className="add-panel__items">
             <div className="add-panel__searchbar">
               <label className="gf-form gf-form--grow gf-form--has-input-icon">
                 <input

+ 0 - 3
public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -140,7 +140,6 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     for (const panel of this.dashboard.panels) {
       panel.resizeDone();
     }
-    this.triggerForceUpdate();
   }
 
   updateGridPos(item, layout) {
@@ -153,13 +152,11 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
 
   onResize(layout, oldItem, newItem) {
     this.panelMap[newItem.i].updateGridPos(newItem);
-    this.triggerForceUpdate();
   }
 
   onResizeStop(layout, oldItem, newItem) {
     this.updateGridPos(newItem, layout);
     this.panelMap[newItem.i].resizeDone();
-    this.triggerForceUpdate();
   }
 
   onDragStop(layout, oldItem, newItem) {