fix(TablePagination): page max filter removed

Author: Utzel-Butzel

examples/create-react-app/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@wfp/icons": "^0.0.57",
-    "@wfp/ui": "^1.1.42",
+    "@wfp/ui": "^1.2.0-alpha.4",
     "node-sass": "^4.9.3",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",

examples/create-react-app/src/App.js

@@ -13,6 +13,7 @@ import {
   Search,
   SubNavigation,
   User,
+  InlineLoading,
 } from '@wfp/ui';
 import logo from './logo.svg';
 import './App.scss';
@@ -80,6 +81,7 @@ class App extends Component {
             Primary button as link
           </Button>
         </article>
+        <InlineLoading />
         <Footer
           className="some-class"
           metaContent="WFP UI Kit version 1.0 – powered by RMT with full …"

examples/create-react-app/yarn.lock

@@ -892,9 +892,9 @@
   version "0.0.57"
   resolved "https://registry.yarnpkg.com/@wfp/icons/-/icons-0.0.57.tgz#a8042f75e2017ef46470f983f9d3e1ad20c2f9b6"
 
-"@wfp/ui@^1.1.42":
-  version "1.1.42"
-  resolved "https://registry.yarnpkg.com/@wfp/ui/-/ui-1.1.42.tgz#40bb3c08ae2cffefa82db3348c7116c06fbd4441"
+"@wfp/ui@^1.2.0-alpha.4":
+  version "1.2.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@wfp/ui/-/ui-1.2.0-alpha.4.tgz#0f0a68a73bf928c4ca893905f02d777afe47ac8c"
   dependencies:
     classnames "2.2.6"
     downshift "^1.31.14"

src/components/InlineLoading/InlineLoading-story.js

@@ -29,7 +29,7 @@ const props = () => ({
 
 storiesOf('InlineLoading', module)
   .addDecorator(withKnobs)
-  .add('Inline loading', () => (
+  .add('Inline loading (draft)', () => (
     <div>
       <InlineLoading {...props()} />
     </div>

src/components/Loading/Loading-story.js

@@ -19,6 +19,6 @@ const props = () => ({
 
 storiesOf('Loading', module)
   .addDecorator(withKnobs)
-  .add('Default', () => {
+  .add('Default (Draft)', () => {
     return <Loading {...props()} className={'some-class'} />;
   });

src/components/Loading/README.md

@@ -1,68 +1,20 @@
-### SCSS
+Use the **Loading** spinner to indicate a loading time between 1 and 7 seconds. For shorter loading times don't use any loader and for longer use a progress bar to indicate the remaining time.
 
-#### Modifiers
-
-Use these modifiers with `.wfp--loading` class.
-
-| Selector                   | Description                              |
-| -------------------------- | ---------------------------------------- |
-| .wfp--loading--small        | Class for small loading spinner          |
-| .wfp--loading--stop         | Class for stopping the loading animation |
-| .wfp--loading-overlay--stop | Class for hiding the overlay             |
-
-### JavaScript
-
-#### Getting component class reference
-
-##### ES2015
-
-```javascript
-import { Loading } from 'carbon-components';
-```
-
-##### With pre-build bundle (`carbon-components.min.js`)
-
-```javascript
-var Loading = CarbonComponents.Loading;
-```
-
-#### Instantiating
+### Usage (react)
 
 ```javascript
-// `#my-loading` is an element with `[data-loading]` attribute
-Loading.create(document.getElementById('my-loading'));
-```
+import { Loading } from '@wfp/ui';
 
-#### Public Methods
 
-| Name     | Params           | Description                                                 |
-| -------- | ---------------- | ----------------------------------------------------------- |
-| release  |                  | Deletes the instance                                        |
-| set      | active : Boolean | Sets the active/inactive state                              |
-| toggle   |                  | Toggles active/inactive state                               |
-| isActive |                  | Returns current state                                       |
-| end      |                  | Runs end animation and then delete the element from the DOM |
-
-##### Example - Activating the loading spinner
-
-```javascript
-// `#my-loading` is an element with `[data-loading]` attribute
-var loadingInstance = Loading.create(document.getElementById('my-loading'));
-loadingInstance.set(true);
+<Loading withOverlay={false} active />
 ```
 
-#### Options
-
-| Option                  | Default Selector          | Description                                                      |
-| ----------------------- | ------------------------- | ---------------------------------------------------------------- |
-| selectorInit            | [data-loading]            | The CSS selector to find the loading component                   |
-| selectorLoadingOverlay  | .wfp--loading-overlay      | The selector for the loading overlay.                            |
-| classLoadingOverlayStop | wfp--loading-overlay--stop | The class for the loading overlay's stopped state.               |
-| active                  | true                      | A boolean value representing the initial state of the component. |
+#### css Modifiers
 
-##### Example - Activating upon instantiating
+Use these modifiers with `.wfp--loading` class.
 
-```javascript
-// `#my-loading` is an element with `[data-loading]` attribute
-Loading.create(document.getElementById('my-loading'), { active: true });
-```
+| Selector                   | Description                              |
+| -------------------------- | ---------------------------------------- |
+| .wfp--loading--small        | Class for small loading spinner          |
+| .wfp--loading--stop         | Class for stopping the loading animation |
+| .wfp--loading-overlay--stop | Class for hiding the overlay             |

src/components/Table/README.md

@@ -2,14 +2,19 @@ We recommend [React-Table](https://react-table.js.org/) for Tables.
 
 ### Pagination
 
-To use the custom Pagination you can use the TablePagination component.
+To use the custom Pagination you can use the TablePagination component. Additional props for the TablePagination can be directly added to the `ReactTable` component (see Pagination component).
+
 
 ```js
 import { TablePagination } from '@wfp/ui';
 
 // Replacing the Pagination Component of React-Table
 
-<ReactTable PaginationComponent={TablePagination} />;
+<ReactTable
+  PaginationComponent={TablePagination}
+  {...yourOtherProps}
+  {...otherPropsForThePaginationToo}
+/>
 ```
 
 ### Responsive

src/components/TablePagination/TablePagination.js

@@ -34,7 +34,7 @@ const ReactTablePagination = ({
     if (isNaN(newPage)) {
       newPage = page;
     }
-    return Math.min(Math.max(newPage, 0), pages - 1);
+    return newPage;
   };
 
   const changePage = page => {