Merge pull request #361 from Alexsus87/bugfix/pagination-controlled

Fixed controlled mode on Pagination component

Author: FlorianRappl

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Precise UI Changelog
 
+## 2.1.6
+
+- Fixed controlled mode on Pagination component
+
 ## 2.1.5
 
 - Improved trigger and added CNAME to kitchen sink

package.json

@@ -1,6 +1,6 @@
 {
   "name": "precise-ui",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "Precise UI React component library powered by Styled Components.",
   "keywords": [
     "react",
@@ -125,4 +125,4 @@
   "engines": {
     "node": ">=10.0.0"
   }
-}
+}

src/components/Pagination/index.test.tsx

@@ -62,4 +62,22 @@ describe('<Pagination />', () => {
     );
     expect(wrapper.find('.foo')).toHaveLength(2);
   });
+
+  it('should respect the `value` property', () => {
+    const wrapper = enzyme.mount(
+      <Pagination size={3}>
+        <div className="foo">First</div>
+        <div className="foo">Second</div>
+        <div className="foo">3</div>
+        <div className="foo">4</div>
+        <div className="foo">5</div>
+        <div className="foo">6</div>
+        <div className="foo">7</div>
+      </Pagination>,
+    );
+    
+    wrapper.setProps({value: 2})
+
+    expect(wrapper.find('.foo')).toHaveLength(1);
+  });
 });

src/components/Pagination/index.tsx

@@ -108,6 +108,18 @@ export class Pagination extends React.Component<PaginationProps, PaginationState
     };
   }
 
+  static getDerivedStateFromProps(props: PaginationProps, state: PaginationState) {
+    const { value } = props;
+
+    if (typeof value === 'number' && state.current !== value) {
+      return {
+        current: value,
+      };
+    }
+
+    return state;
+  }
+
   private handlePageChange = ({ page }: PaginationBarPageChangedEvent) => {
     const { onChange, value } = this.props;