Skip to content

Commit 274243f

Browse files
isuruAbisuruAb
committed
FIxes: #22 -made a separate component for page buttons
1 parent 7761e9e commit 274243f

File tree

3 files changed

+114
-65
lines changed

3 files changed

+114
-65
lines changed

‎README.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ npm install @99xt/pagination-react --save
3232
example.react.js
3333

3434
```javascript
35-
3635
constructor(props) {
3736
super(props);
3837
this.state={
@@ -49,12 +48,14 @@ example.react.js
4948
render() {
5049
return <div>
5150
<h1>pagination-react Demo</h1>
52-
<react-pagination total='totalRecordCount' limit='recordsPerPage' returnSelectedPage={this.getSelectedPage} />
51+
<react-pagination
52+
total='totalRecordCount'
53+
limit='recordsPerPage'
54+
returnSelectedPage={this.getSelectedPage} />
5355
<br />
5456
<h2>{"Selected page : " + this.state.selectedPage}</h2>
5557
</div>
5658
}
57-
5859
```
5960

6061
## Contributing Guide

‎src/button.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { Component } from 'react';
2+
import { render } from 'react-dom';
3+
import './style.css';
4+
5+
export default class PageButton extends Component {
6+
constructor(props) {
7+
super(props);
8+
}
9+
render() {
10+
let activeButtonColor = '#ccc'
11+
let buttonColor = '#fff';
12+
13+
let first = this.props.pagination.first.map((n, i) => {
14+
let btnStyle = { backgroundColor: buttonColor };
15+
16+
if (this.props.current === n) {
17+
btnStyle.backgroundColor = activeButtonColor
18+
}
19+
20+
return (
21+
<li
22+
key={i}
23+
onClick={() => this.props.selectPage(n)}
24+
style={btnStyle}
25+
>
26+
<a>{n}</a>
27+
</li >
28+
)
29+
})
30+
let second = this.props.pagination.second.map((n, i) => {
31+
32+
let btnStyle = { backgroundColor: buttonColor };
33+
if (this.props.current === n) {
34+
btnStyle.backgroundColor = activeButtonColor
35+
}
36+
37+
return (
38+
<li
39+
key={i}
40+
onClick={() => this.props.selectPage(n)}
41+
style={btnStyle}
42+
>
43+
<a>{n}</a>
44+
</li >
45+
)
46+
})
47+
let third = this.props.pagination.third.map((n, i) => {
48+
49+
let btnStyle = { backgroundColor: buttonColor };
50+
if (this.props.current === n) {
51+
btnStyle.backgroundColor = activeButtonColor
52+
}
53+
54+
return (
55+
<li
56+
key={i}
57+
onClick={() => this.props.selectPage(n)}
58+
style={btnStyle}
59+
>
60+
<a>{n}</a>
61+
</li >
62+
)
63+
})
64+
let section = null;
65+
switch (this.props.section) {
66+
case 'first':
67+
section = first;
68+
break;
69+
case 'second':
70+
section = second;
71+
break;
72+
case 'third':
73+
section = third;
74+
break;
75+
76+
}
77+
return <div>
78+
{section}
79+
</div>
80+
}
81+
}

‎src/index.js

+29-62
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { Component } from 'react'
22
import './style.css';
3-
3+
import ReactButton from './button';
44

55
export default class ReactPagination extends Component {
66
limit = 20;
@@ -20,6 +20,8 @@ export default class ReactPagination extends Component {
2020
third: []
2121
}
2222
};
23+
this.selectPage = this.selectPage.bind(this);
24+
2325
}
2426
componentDidMount() {
2527
this.limit = this.props.limit;
@@ -118,6 +120,7 @@ export default class ReactPagination extends Component {
118120
}
119121
this.setState(state);
120122
}
123+
121124
selectPage(page) {
122125
this.props.returnSelectedPage(page);
123126
let state = this.state;
@@ -131,73 +134,25 @@ export default class ReactPagination extends Component {
131134
this.setState(state);
132135
}
133136
goPrev() {
134-
if (this.current > 0) {
137+
if (this.state.current > 0) {
135138
this.selectPage(this.state.current - 1);
136139
}
137140
}
138141

139142
goNext() {
140-
this.selectPage(this.state.current + 1);
143+
144+
if (this.pageCount > this.state.current) {
145+
this.selectPage(this.state.current + 1);
146+
}
141147
}
142-
onClick(event,n) {
143-
this.selectPage(n);
144-
func2();
145-
}
148+
146149
render() {
147150

148-
let activeButtonColor= '#ccc'
149-
let buttonColor='#fff';
151+
let activeButtonColor = '#ccc'
152+
let buttonColor = '#fff';
150153

151-
let first = this.state.pagination.first.map((n, i) => {
152-
let btnStyle={backgroundColor:buttonColor};
153-
if (this.state.current === n) {
154-
btnStyle.backgroundColor = activeButtonColor
155-
}
156154

157-
return (
158-
<li
159-
key={i}
160-
onClick={() => this.selectPage(n)}
161-
style={btnStyle}
162-
>
163-
<a>{n}</a>
164-
</li >
165-
)
166-
})
167-
let second = this.state.pagination.second.map((n, i) => {
168-
169-
let btnStyle={backgroundColor:buttonColor};
170-
if (this.state.current === n) {
171-
btnStyle.backgroundColor = activeButtonColor
172-
}
173-
174-
return (
175-
<li
176-
key={i}
177-
onClick={() => this.selectPage(n)}
178-
style={btnStyle}
179-
>
180-
<a>{n}</a>
181-
</li >
182-
)
183-
})
184-
let third = this.state.pagination.third.map((n, i) => {
185-
186-
let btnStyle={backgroundColor:buttonColor};
187-
if (this.state.current === n) {
188-
btnStyle.backgroundColor = activeButtonColor
189-
}
190155

191-
return (
192-
<li
193-
key={i}
194-
onClick={() => this.selectPage(n)}
195-
style={btnStyle}
196-
>
197-
<a>{n}</a>
198-
</li >
199-
)
200-
})
201156
return (
202157
<div>
203158
<div style={{ 'display': this.state.show ? 'block' : 'none' }}>
@@ -210,13 +165,17 @@ export default class ReactPagination extends Component {
210165

211166
<li
212167
style={{ 'display': this.state.current > 1 ? 'block' : 'none' }}
213-
onClick={this.goPrev}
168+
onClick={this.goPrev.bind(this)}
214169
className="prev"
215170
>
216171
<a>Prev</a>
217172
</li>
218173

219-
{first}
174+
<ReactButton
175+
selectPage={this.selectPage}
176+
section="first"
177+
current={this.state.current}
178+
pagination={this.state.pagination} />
220179

221180
<li
222181
style={{ 'display': this.state.pagination.second.length > 0 ? 'block' : 'none' }}
@@ -225,7 +184,11 @@ export default class ReactPagination extends Component {
225184
<a>...</a>
226185
</li>
227186

228-
{second}
187+
<ReactButton
188+
selectPage={this.selectPage}
189+
section="second"
190+
current={this.state.current}
191+
pagination={this.state.pagination} />
229192

230193
<li
231194
style={{ 'display': this.state.pagination.third.length > 0 ? 'block' : 'none' }}
@@ -234,11 +197,15 @@ export default class ReactPagination extends Component {
234197
<a>...</a>
235198
</li>
236199

237-
{third}
200+
<ReactButton
201+
selectPage={this.selectPage}
202+
section="third"
203+
current={this.state.current}
204+
pagination={this.state.pagination} />
238205

239206
<li
240207
style={{ 'display': this.state.next != 0 ? 'block' : 'none' }}
241-
onClick={this.goNext}
208+
onClick={this.goNext.bind(this)}
242209
className="next"
243210
>
244211
<span>Next</span>

0 commit comments

Comments
 (0)