{"_id":"@bandwidth/redux-facet-pagination","_rev":"24-fa9a202619aab0013c29d9e5d3431372","name":"@bandwidth/redux-facet-pagination","description":"Pagination behaviors for redux-facet","dist-tags":{"latest":"1.0.0"},"versions":{"0.3.1":{"name":"@bandwidth/redux-facet-pagination","version":"0.3.1","description":"Pagination behaviors for redux-facet","main":"./dist/index.js","files":["README.md","dist","immutable.js"],"npmName":"@bandwidth/redux-facet-pagination","npmFileMap":[{"basePath":"/dist/","files":["*.js"]}],"scripts":{"test":"jest","example":"node ./example/webpack.devserver.js","build:example":"webpack --config ./example/webpack.config.js --output-path docs --env.publicPath=/redux-facet-pagination/ ./example","build:library":"babel src --out-dir dist","build":"npm-run-all build:*","prepublish":"npm run build","precommit":"lint-staged"},"lint-staged":{"*.js":["prettier --single-quote --trailing-comma all --write \"{src,example,__tests__}/**/*.js\"","git add"]},"keywords":["redux-facet","redux","pagination"],"author":{"name":"Grant Forrest","email":"gaforres@gmail.com"},"license":"MIT","peerDependencies":{"@bandwidth/redux-facet":"^0.3.3","react":"^16.0.0","react-dom":"^16.0.0","react-redux":"^5.0.6"},"dependencies":{"immutable":"^3.8.2","lodash":"^4.17.4","redux":"^3.7.2","redux-actions":"^2.2.1","recompose":"^0.26.0","reselect":"^3.0.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","css-loader":"^0.28.7","file-loader":"^1.1.5","html-webpack-plugin":"^2.30.1","husky":"^0.14.3","lint-staged":"^4.3.0","npm-run-all":"^4.1.1","prettier":"^1.7.4","prop-types":"^15.6.0","react":"^16.0.0","react-dom":"^16.0.0","react-redux":"^5.0.6","redux-immutable":"^4.0.0","style-loader":"^0.19.0","webpack":"^3.7.1","webpack-dev-server":"^2.9.1"},"gitHead":"89f66161df3f7af7b3ba143c6af13afd62bfbf7c","_id":"@bandwidth/redux-facet-pagination@0.3.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.1","_npmUser":{"name":"a-type","email":"gaforres@gmail.com"},"dist":{"integrity":"sha512-VJ90a0hm93cAi9MtpBWPjG3Kclc8cDaq7D8DGxW++HAK1tutk6cEBKSRzEVLL96KZukkWu96Z1Rs292/j9XTvQ==","shasum":"31792c44b25e6f80e09e3eb9bfa4673075268d86","tarball":"https://registry.npmjs.org/@bandwidth/redux-facet-pagination/-/redux-facet-pagination-0.3.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDK5gKcTUZAczl3YJ7+C7Uihhv8DtivHPGdOzAEY4ZCZAIgVQmyWgZpsN3evcqW3gbVGU76nW97jO7dqQA54SqtxM8="}]},"maintainers":[{"name":"a-type","email":"gaforres@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/redux-facet-pagination-0.3.1.tgz_1512597071351_0.1803450530860573"},"directories":{}},"1.0.0":{"name":"@bandwidth/redux-facet-pagination","version":"1.0.0","description":"Pagination behaviors for redux-facet","main":"./dist/index.js","files":["README.md","dist","immutable.js"],"npmName":"@bandwidth/redux-facet-pagination","npmFileMap":[{"basePath":"/dist/","files":["*.js"]}],"scripts":{"test":"jest","example":"node ./example/webpack.devserver.js","build:example":"webpack --config ./example/webpack.config.js --output-path docs --env.publicPath=/redux-facet-pagination/ ./example","build:library":"babel src --out-dir dist","build":"npm-run-all build:*","prepublish":"npm run build","precommit":"lint-staged"},"lint-staged":{"*.js":["prettier --single-quote --trailing-comma all --write \"{src,example,__tests__}/**/*.js\"","git add"]},"keywords":["redux-facet","redux","pagination"],"author":{"name":"Grant Forrest","email":"gaforres@gmail.com"},"license":"MIT","peerDependencies":{"@bandwidth/redux-facet":"^1.0.0","react":"^16.0.0","react-dom":"^16.0.0","react-redux":"^5.0.6"},"dependencies":{"immutable":"^3.8.2","lodash":"^4.17.4","redux":"^3.7.2","redux-actions":"^2.2.1","recompose":"^0.26.0","reselect":"^3.0.1"},"devDependencies":{"@bandwidth/redux-facet":"^1.0.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","css-loader":"^0.28.7","file-loader":"^1.1.5","html-webpack-plugin":"^2.30.1","husky":"^0.14.3","lint-staged":"^4.3.0","npm-run-all":"^4.1.1","prettier":"^1.7.4","prop-types":"^15.6.0","react":"^16.0.0","react-dom":"^16.0.0","react-redux":"^5.0.6","redux-immutable":"^4.0.0","style-loader":"^0.19.0","webpack":"^3.7.1","webpack-dev-server":"^2.9.1"},"gitHead":"5a03ac9329eaa39316ed63e83f94d9bf4711c627","_id":"@bandwidth/redux-facet-pagination@1.0.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.1","_npmUser":{"name":"a-type","email":"gaforres@gmail.com"},"dist":{"integrity":"sha512-5hLZdWxhqUJyAQoEpSA3S3nWwTKwc77W2ZT9dZCsd5xGq/pRvHHIMR6WCE7HtX+zIUz9TqD6/YUACeRs18XQWw==","shasum":"05fad01f2875d0e93abc0d0178d1b17211708a20","tarball":"https://registry.npmjs.org/@bandwidth/redux-facet-pagination/-/redux-facet-pagination-1.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICOU5NomKAKwlypyrRzlnyMljzurcGlNIWUQGDyon2CtAiBxus+TW8mV0RyU6SRMprZwCmbsSkIE9wwKj+vSPfhSjQ=="}]},"maintainers":[{"name":"avb","email":"belchikovs@gmail.com"},{"name":"dtolb","email":"dtolb.me@gmail.com"},{"name":"a-type","email":"gaforres@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/redux-facet-pagination-1.0.0.tgz_1512686915277_0.9772918066009879"},"directories":{}}},"readme":"# redux-facet-pagination\n\nA plug-in pagination system for [`redux-facet`](https://github.com/Bandwidth/redux-facet) which lets you add pagination to various types of collections without repeating yourself too much.\n\nAfter you've integrated `redux-facet`, you can enhance your containers and reducers to enable them to keep track of pagination state and render paginated data.\n\n[Check out a simple example here](http://dev.bandwidth.com/redux-facet-pagination/). The source is located in [/example](https://github.com/Bandwidth/redux-facet-pagination/tree/master/example).\n\n## Immutable.js Support\n\nTo use `redux-facet-pagination` with `immutable`, import all modules from `@bandwidth/redux-facet-pagination/immutable`. Module names and usages stay the same.\n\n## Documentation\n\n### Default export: `withPaginatedData(selectItems: Function|String, options: Object)`\n\nA higher-order-component which enhances a `facet` container with:\n\n1. Access to a paginated slice of provided data\n2. Access to pagination information (current page, page size)\n3. A set of action creator props which allow page navigation\n\nThe first parameter of `withPaginatedData` is required. If you provide a function, this function must be a selector function which will retrieve your items list from the Redux state. If you provide a string, this string must be a prop name. The container will assume that this prop is provided with your items list and will paginate the data accordingly.\n\nThe last parameter for `withPaginatedData()` is `options`:\n\n```js\n{\n  dataPropName: String = 'filteredData',\n}\n```\n\n`dataPropName` will let you change the prop name of the paginated data when it's provided to your wrapped component.\n\n#### Using `withPaginatedData()`\n\nCompose `withPaginatedData()` after `facet()` before passing in your component:\n\n```javascript\n// selector function version\nfacet('users')(\n  withPaginatedData(selectUsers)( // selecting our own data list from the store\n    ViewComponent\n  ),\n);\n\n// prop name version\nfacet('users')(\n  withPaginatedData('users')( // assuming that the container is provided with a `users` prop\n    ViewComponent\n  )\n)\n```\n\nTo make things more idiomatic, it's recommented to use [`recompose`](https://github.com/acdlite/recompose):\n\n```javascript\ncompose(\n  facet('users'),\n  withPaginatedData(selectUsers),\n)(ViewComponent);\n```\n\nRemember, `withPaginatedData()` must come *after* `facet()`.\n\n#### Properties provided\n\nA component enhanced using `withPaginatedData()` will receive the following props:\n\n* `paginatedData | [dataPropName]`\n  * The paginated dataset will be supplied to a prop name you can define yourself via `options`. By default, this prop will be `paginatedData`.\n* `currentPage`\n  * The page number of the currently displayed page\n* `pageSize`\n  * The size of a page. You can specify pageSize as a prop to your container, which will seed this value.\n* `pageCount`\n  * The total number of pages, based on the length of the raw data array.\n* `setPage(page: Number, pageSize: Number)`\n  * Action creator function which is already bound to this facet.\n  * Call it to set the current page and/or change the page size.\n* `nextPage()`\n  * Action creator function which is already bound to this facet.\n  * Call it to advance to the next page.\n  * This will not advance past the last page according to `pageCount`.\n* `previousPage()`\n  * Action creator function which is already bound to this facet.\n  * Call it to go back one page.\n  * This will not go below page 0.\n\n#### Setting the Page Size\n\n`redux-facet-pagination` defaults to a page size of `10`. To initialize, a container enhanced with `redux-facet-pagination` will dispatch a `setPage` action on mount with the current page properties (so if the component was mounted with `currentPage=2` and `pageSize=3`, an action will be dispatched which sets those values in the store).\n\nTo set the page size, you can provide the `pageSize` prop to your container. When the container dispatches the initializing action, it will utilize your provided value. Consider using `recompose`'s `withProps` helper within your container definition if you don't need the page size to change.\n\nYou can also change the page size at any time by providing it as a second parameter to `setPage`. This can enable patterns where the user is allowed to customize the number of items they want to see on the screen.\n\n### `withPagination(selectItems)`\n\nA lighter-weight higher-order-component that just provides pagination data, but does not compute a paginated list. `withPagination` will provide `currentPage`, `pageSize`, `pageCount`, `setPage`, `nextPage`, and `previousPage`.\n\n`selectItems` has the same usage as `withPaginatedData`. It's required to calculate the total page count.\n\nThis smaller container may be useful if you want to implement your pagination controls as a separate container from your data view.\n\n### `paginationReducer`\n\nInclude this reducer within your facet reducers to track pagination state.\n\nThis reducer expects to be mounted within a facet reducer. If this is done correctly, it will therefore only listen to pagination actions related to its facet.\n\n#### Basic usage\n\nTo mount it manually, please reference the `.key` property to mount it at the correct location in your facet reducer, or the library will not work.\n\n```javascript\nconst facetReducr = facetReducer('users', combineReducers({\n  foo: fooReducer,\n  bar: barReducer,\n  [paginationReducer.key]: paginationReducer,\n}));\n```\n\n#### Automatic usage\n\n> Note: `mount` will not work with `combineReducers`, since `combineReducers` ignores any 'extra' keys that get added to the resulting map.\n\nYou can mount the `paginationReducer` automatically into your facet reducer using its `.mount(facetReducer: Function)` function. By calling it with your facet reducer, it will return a new reducer and mount itself at the correct key. Your base reducer must return a state which is an object so that a key can be created for the alert reducer.\n\n```javascript\nconst enhancedFacetReducer = paginationReducer.mount(facetReducer);\n```\n\n### `paginationActions`\n\nThe library exports a set of action creators which you can use to manage pagination within sagas or other parts of your code.\n\nThe action creators are:\n\n* `paginationActions.setPage(page: Number, pageSize: Number)`: sets the current page, and optionally updates the page size.\n\n#### NOTE: facet name metadata is required\n\n`redux-facet-pagination` does not apply facet names to actions created by its action creators. It's up to you to apply them if necessary. If you use the action creators provided to your component by `withPagination`, these will be applied automatically. Likewise, if you use these action creators in a saga which is created with `facetSaga`, the facet name will be applied.\n\nTo apply a facet name to an action, use `redux-facet`'s `withFacet` helper function.\n\n### `createPaginationSelectors(itemsSelector: Function)`\n\nA helper factory which returns a set of facet selectors you can use to select data based on pagination.\n\nPass a selector function which returns an array of items. An object will be returned which contains a few selector creators you can use in your `facet` container:\n\n* `createPageSelector(facetName)`: creates a selector which returns the current page of data from your items.\n* `createPageCountSelector(facetName)`: creates a selector which returns the total number of pages based on the number of items and the page size.\n\n#### Example Usage\n\n```javascript\nconst selectors = createPaginationSelectors(selectUsers);\n\nconst FacetContainer = facet(\n  'users',\n  // a helper from the redux-facet library\n  // which applies the facetName to all selector creators\n  createStructuredFacetSelector({\n    pageCount: selectors.createPageCountSelector,\n    items: selectors.createPageSelector,\n  }),\n)(ViewComponent);\n```\n\n### `paginationSelectors`\n\n`redux-facet-pagination` ships with a few selector creators and selectors which can be used to read pagination data from the store and construct pages from your data.\n\n* `paginationSelectors.createPaginationSelector(facetName: String)`\n  * A function which creates a selector. Takes one parmeter, `facetName`.\n  * The created selector returns all pagination info from the store as a JS object.\n* `paginationSelectors.createCurrentPageSelector(facetName: String)`\n  * A function which creates a selector. Takes one parmeter, `facetName`.\n  * The created selector returns the current page.\n* `paginationSelectors.createPageSizeSelector(facetName: String)`\n  * A function which creates a selector. Takes one parmeter, `facetName`.\n  * The created selector returns the page size.\n* `paginationSelectors.selectPage(items: Array|List, currentPage: Number, pageSize: Number)`\n  * A selector computation function. The parameters should be computed by other selectors.\n  * Use this as the 'combining' final parameter in `reselect`'s `createSelector`, for instance.\n  * Using the provided inputs, this will return a page of your `items` collection.\n  * Defaults `pageSize` to `10` if no other value is present.\n* `paginationSelectors.selectPageCount(itemCount: Number, pageSize: Number)`\n  * A selector computation function. The parameters should be computed by other selectors.\n  * Use this as the 'combining' final parameter in `reselect`'s `createSelector`, for instance.\n  * Using the provided inputs, this will return the number of pages present.\n  * This may seem trivial, but why not?\n","maintainers":[{"email":"mhamer@bandwidth.com","name":"mhamer-bw"},{"email":"jmulford@bandwidth.com","name":"jmulford-bandwidth"},{"email":"tbowen@bandwidth.com","name":"tbowen"},{"email":"zacklitzsinger@gmail.com","name":"zelitzsi"},{"email":"mike.zarandona@gmail.com","name":"themikez"},{"email":"nguyer@gmail.com","name":"nguyer"},{"email":"dx@bandwidth.com","name":"developerhelp-bandwidth"},{"email":"cejohnson@bandwidth.com","name":"cejohnson-bw"}],"time":{"modified":"2022-04-04T17:41:24.711Z","created":"2017-12-06T21:51:12.410Z","0.3.1":"2017-12-06T21:51:12.410Z","1.0.0":"2017-12-07T22:48:36.275Z"},"keywords":["redux-facet","redux","pagination"],"author":{"name":"Grant Forrest","email":"gaforres@gmail.com"},"license":"MIT","readmeFilename":"README.md"}