Merge pull request #374 from peterugah/feature/373-add-pageSize-event…

…-to-pagination-component

#373 add page size event to pagination component

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Precise UI Changelog
 
+## 2.1.11
+
+- fixed issue 373, passed onSizeChanged event as a prop to the Pagination component
+
 ## 2.1.10
 
 - Fix WCAG error: Empty table header

package.json

@@ -1,6 +1,6 @@
 {
   "name": "precise-ui",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "Precise UI React component library powered by Styled Components.",
   "keywords": [
     "react",

src/components/Pagination/index.tsx

@@ -9,6 +9,12 @@ export interface PaginationChangeEvent {
    */
   value: number;
 }
+export interface PaginationSizeChangeEvent {
+  /**
+   * The current item size per page.
+   */
+  value: number;
+}
 
 export interface PaginationState {
   current: number;
@@ -68,6 +74,10 @@ export interface PaginationProps extends StandardProps {
    * Event fired when the selected page changes.
    */
   onChange?(e: PaginationChangeEvent): void;
+  /**
+   * Event fired when the size per page changes.
+   */
+  onSizeChanged?(e: PaginationSizeChangeEvent): void;
   /**
    * The optional footer info label override, e.g., for localization.
    */
@@ -137,14 +147,20 @@ export class Pagination extends React.Component<PaginationProps, PaginationState
   };
 
   private handleSizeChange = ({ size }: PaginationBarSizeChangedEvent) => {
-    const { children } = this.props;
+    const { children, onSizeChanged } = this.props;
     const { current } = this.state;
     const total = React.Children.count(children);
     const maxPageCount = Math.max(Math.ceil(total / size) - 1, 0);
     this.setState({
       size,
       current: Math.min(current, maxPageCount),
     });
+
+    if (typeof onSizeChanged === 'function') {
+      onSizeChanged({
+        value: size,
+      });
+    }
   };
 
   private getDim(count: number) {