├── .vs ├── slnx.sqlite ├── VSWorkspaceState.json └── pagination │ └── v15 │ └── .suo ├── src ├── pagination-lib │ ├── index.js │ ├── utils.js │ ├── createPaginator.js │ ├── selectors.js │ ├── paginationReducer.js │ ├── VirtualizedListWrapper │ │ └── VirtualList.js │ └── paginationActions.js ├── index.js ├── index.css ├── Demo │ ├── PageLayout │ │ ├── TwoRowsLayout.js │ │ ├── FixedMiddleWithFlexMargins.js │ │ ├── NavigationLink.js │ │ ├── Header.js │ │ └── PageContentContainer.js │ ├── StandardPagination │ │ ├── ElementCard.js │ │ ├── SearchForm.js │ │ ├── StandardPaginationDemo.js │ │ ├── Paginator.js │ │ ├── PageItem.js │ │ └── standardPaginationConfig.js │ ├── VirtualListPaged │ │ ├── VirtualListPagedDemo.js │ │ ├── VirtualListWrapper.js │ │ ├── SearchForm.js │ │ ├── SimpleRowWithoutPage.js │ │ └── paginationConfig.js │ ├── StandardPaginationUpdateEntity │ │ ├── SearchForm.js │ │ ├── ElementCard.js │ │ ├── PaginationWithUpdateDemo.js │ │ ├── Paginator.js │ │ ├── PageItem.js │ │ ├── store │ │ │ └── updateElement.js │ │ └── paginationWithUpdateConfig.js │ └── ExaminationsGenerator.js ├── App.css ├── AppMainContainer.js ├── store.js ├── App.js ├── logo.svg └── registerServiceWorker.js ├── dist ├── index.js.map ├── index.js ├── utils.js ├── utils.js.map ├── createPaginator.js ├── selectors.js ├── createPaginator.js.map ├── selectors.js.map ├── paginationReducer.js ├── paginationReducer.js.map ├── paginationActions.js ├── VirtualizedListExtensions │ ├── VirtualList.js.map │ └── VirtualList.js ├── VirtualizedListWrapper │ ├── VirtualList.js.map │ └── VirtualList.js └── paginationActions.js.map ├── public ├── manifest.json └── index.html ├── .gitignore ├── LICENSE ├── package.json └── Readme.md /.vs/slnx.sqlite: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tranzystor/redux-cached-pagination/HEAD/.vs/slnx.sqlite -------------------------------------------------------------------------------- /.vs/VSWorkspaceState.json: -------------------------------------------------------------------------------- 1 | { 2 | "ExpandedNodes": [ 3 | "" 4 | ], 5 | "PreviewInSolutionExplorer": false 6 | } -------------------------------------------------------------------------------- /.vs/pagination/v15/.suo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tranzystor/redux-cached-pagination/HEAD/.vs/pagination/v15/.suo -------------------------------------------------------------------------------- /src/pagination-lib/index.js: -------------------------------------------------------------------------------- 1 | import { createPaginator } from './createPaginator'; 2 | import VirtualList from './VirtualizedListWrapper/VirtualList'; 3 | 4 | export { createPaginator, VirtualList }; 5 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | 7 | #react-paginate ul { 8 | display: inline-block; 9 | padding-left: 15px; 10 | padding-right: 15px; 11 | } 12 | 13 | #react-paginate li { 14 | display: inline-block; 15 | } 16 | 17 | #react-paginate .break a { 18 | cursor: default; 19 | } 20 | 21 | -------------------------------------------------------------------------------- /dist/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/pagination-lib/index.js"],"names":["createPaginator","VirtualList"],"mappings":";;;;;;;AAAA;;AACA;;;;;;QAESA,e;QAAiBC,W","file":"index.js","sourcesContent":["import { createPaginator } from './createPaginator';\r\nimport VirtualList from './VirtualizedListWrapper/VirtualList';\r\n\r\nexport { createPaginator, VirtualList };\r\n"]} -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /src/Demo/PageLayout/TwoRowsLayout.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const TwoRowsLayout = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | height: 100%; 7 | background: #f7f7f7; 8 | 9 | & > :nth-child(1) { 10 | height: 60px; 11 | flex: 0 0 auto; 12 | } 13 | 14 | & > :nth-child(2) { 15 | flex: 1 1 100%; 16 | } 17 | `; 18 | 19 | export default TwoRowsLayout; 20 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /src/Demo/StandardPagination/ElementCard.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | const StyledCard = styled.div` 5 | border-radius: 2px; 6 | box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px; 7 | padding: 10px; 8 | `; 9 | 10 | class ElementCard extends Component { 11 | render() { 12 | return ( 13 | 14 | id: {this.props.id} data: {this.props.examData} 15 | 16 | ); 17 | } 18 | } 19 | 20 | export default ElementCard; 21 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.VirtualList = exports.createPaginator = undefined; 7 | 8 | var _createPaginator = require('./createPaginator'); 9 | 10 | var _VirtualList = require('./VirtualizedListWrapper/VirtualList'); 11 | 12 | var _VirtualList2 = _interopRequireDefault(_VirtualList); 13 | 14 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 15 | 16 | exports.createPaginator = _createPaginator.createPaginator; 17 | exports.VirtualList = _VirtualList2.default; 18 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /src/AppMainContainer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import { connect } from 'react-redux'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | class AppMainContainer extends Component { 7 | render() { 8 | return ( 9 | 14 | ); 15 | } 16 | } 17 | 18 | export default connect(null, null)(AppMainContainer) 19 | -------------------------------------------------------------------------------- /src/Demo/VirtualListPaged/VirtualListPagedDemo.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import SearchForm from './SearchForm'; 3 | import VirtualListWrapper from './VirtualListWrapper'; 4 | import styled from 'styled-components'; 5 | 6 | const DemoContainer = styled.div` 7 | display: flex; 8 | flex-direction: column; 9 | width: 100%; 10 | 11 | & > *:nth-of-type(1) { 12 | margin-bottom: 10px; 13 | } 14 | `; 15 | 16 | class VirtualListPagedDemo extends Component { 17 | render() { 18 | return ( 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | } 26 | 27 | export default VirtualListPagedDemo; 28 | -------------------------------------------------------------------------------- /src/Demo/PageLayout/FixedMiddleWithFlexMargins.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | //Trzy kolumny 5 | //środkowa ma ustaloną szerokość 6 | //lewa i prawa dopasowuje się do pozostałego wolnego miejsca 7 | 8 | const Wrapper = styled.div` 9 | display: flex; 10 | height: 100%; 11 | 12 | & > :nth-child(1) { 13 | flex: 1 1 auto; 14 | } 15 | 16 | & > :nth-child(2) { 17 | flex: 0 0 800px; 18 | } 19 | 20 | & > :nth-child(3) { 21 | flex: 1 1 auto; 22 | } 23 | `; 24 | 25 | class FixedMiddleWithFlexMargins extends Component { 26 | render() { 27 | return ( 28 | 29 |
30 | {this.props.children} 31 |
32 | 33 | ); 34 | } 35 | } 36 | 37 | export default FixedMiddleWithFlexMargins; 38 | -------------------------------------------------------------------------------- /src/Demo/PageLayout/NavigationLink.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import styled from 'styled-components'; 3 | import { NavLink } from 'react-router-dom'; 4 | 5 | const activeLinkClassName = 'activeLinkClassName'; 6 | const StyledLink = styled(NavLink)` 7 | padding: 3px 0px; 8 | display: block; 9 | 10 | &:visited { 11 | color: #0a202d; 12 | } 13 | 14 | &:hover { 15 | color: black; 16 | } 17 | 18 | &:link { 19 | text-decoration: none; 20 | } 21 | 22 | &.${activeLinkClassName} > div { 23 | color: #2673a0; 24 | } 25 | `; 26 | 27 | class NavigationLink extends Component { 28 | render() { 29 | return ( 30 | 31 |
{this.props.children}
32 | 33 | ); 34 | } 35 | } 36 | 37 | export default NavigationLink; 38 | -------------------------------------------------------------------------------- /src/Demo/VirtualListPaged/VirtualListWrapper.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import VirtualList from './../../pagination-lib/VirtualizedListWrapper/VirtualList'; 3 | import { examinationsPaginator } from './paginationConfig'; 4 | import SimpleRowWithoutPage from './SimpleRowWithoutPage'; 5 | 6 | const ROW_HEIGHT = 35; 7 | 8 | class VirtualListWrapper extends Component { 9 | constructor(props) { 10 | super(props); 11 | this.rowRenderer = this.rowRenderer.bind(this); 12 | } 13 | 14 | rowRenderer(index) { 15 | return ( 16 | 17 | ); 18 | } 19 | 20 | render() { 21 | return ( 22 | 27 | ); 28 | } 29 | } 30 | export default VirtualListWrapper; -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware, compose, combineReducers } from 'redux'; 2 | import reduxThunk from 'redux-thunk'; 3 | import { examinationsPaginatorReducers, examinationsStoreName } from './Demo/VirtualListPaged/paginationConfig'; 4 | import { examsPaginatorReducers, examsStoreName } from './Demo/StandardPagination/standardPaginationConfig'; 5 | import { paginationUpdateReducers, paginationUpdateStoreName } from './Demo/StandardPaginationUpdateEntity/paginationWithUpdateConfig'; 6 | import { globalExaminationsReducer } from './Demo/StandardPaginationUpdateEntity/store/updateElement'; 7 | 8 | const rootReducer = combineReducers({ 9 | [examinationsStoreName]: examinationsPaginatorReducers, 10 | [examsStoreName]: examsPaginatorReducers, 11 | [paginationUpdateStoreName]: paginationUpdateReducers, 12 | globalEntities: globalExaminationsReducer 13 | }); 14 | 15 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 16 | export const store = createStore( 17 | rootReducer, 18 | composeEnhancers( 19 | applyMiddleware(reduxThunk) 20 | ) 21 | ); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Tranzystor 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/Demo/PageLayout/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import styled from 'styled-components'; 3 | import FixedMiddleWithFlexMargins from './FixedMiddleWithFlexMargins'; 4 | 5 | const HeaderStyle = styled.div` 6 | height: 100%; 7 | background: #015f82; 8 | `; 9 | 10 | const CenterVertically = styled.div` 11 | display: flex; 12 | align-items: center; 13 | justify-content: space-between; 14 | `; 15 | 16 | const HeaderLabel = styled.div` 17 | font-size: 24px; 18 | color: white; 19 | `; 20 | 21 | class Header extends Component { 22 | render() { 23 | return ( 24 | 25 | 26 | 27 | DEMO redux-cached-pagination 28 |