From a6e912725299e979d05bd59125b76f04b9cc5d91 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sat, 8 Dec 2018 11:45:44 +0300
Subject: [PATCH] problems panel: preserve expanded state

---
 src/panel-triggers/components/Problems.tsx | 30 +++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/panel-triggers/components/Problems.tsx b/src/panel-triggers/components/Problems.tsx
index 8661c4f..24f29d6 100644
--- a/src/panel-triggers/components/Problems.tsx
+++ b/src/panel-triggers/components/Problems.tsx
@@ -12,10 +12,23 @@ export interface ProblemListProps {
   loading?: boolean;
 }
 
-export class ProblemList extends PureComponent<ProblemListProps, any> {
+interface ProblemListState {
+  expanded: any;
+  page: number;
+}
+
+export class ProblemList extends PureComponent<ProblemListProps, ProblemListState> {
   rootWidth: number;
   rootRef: any;
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      expanded: {},
+      page: 0,
+    };
+  }
+
   setRootRef = ref => {
     this.rootRef = ref;
   }
@@ -48,6 +61,18 @@ export class ProblemList extends PureComponent<ProblemListProps, any> {
     return result;
   }
 
+  getExpandedPage = (page: number) => {
+    return this.state.expanded[page] || {};
+  }
+
+  handleExpandedChange = expanded => {
+    const nextExpanded = {...this.state.expanded};
+    nextExpanded[this.state.page] = expanded;
+    this.setState({
+      expanded: nextExpanded
+    });
+  }
+
   render() {
     // console.log(this.props.problems, this.props.panelOptions);
     const columns = this.buildColumns();
@@ -61,6 +86,9 @@ export class ProblemList extends PureComponent<ProblemListProps, any> {
           defaultPageSize={10}
           loading={this.props.loading}
           SubComponent={props => <ProblemDetails rootWidth={this.rootWidth} {...props} />}
+          expanded={this.getExpandedPage(this.state.page)}
+          onExpandedChange={this.handleExpandedChange}
+          onPageChange={page => this.setState({ page })}
         />
       </div>
     );