vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

* fixed code linting

old
Maxim Komlev 2016-10-06 11:18:15 -07:00
parent 183dfe031c
commit ff7dd4d2ff
2 changed files with 117 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
components/pager/pager.js
View File

@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import Button from '../button';
import InjectButton from '../button';
import { PAGER } from '../identifiers.js';
const isOnePage = (first, last) => {
@ -21,7 +21,17 @@ const factory = (Button) => {
class Pager extends Component {
static propTypes = {
currentPage: React.PropTypes.number.isRequired,
lastPage: React.PropTypes.number.isRequired,
leftRightArrowButtonTypes: React.PropTypes.object,
leftRightRangeButtonTypes: React.PropTypes.object,
nextButtonContent: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
onPageChange: React.PropTypes.func,
pagerClassName: PropTypes.string,
pagesButtonTypes: React.PropTypes.object,
prevButtonContent: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
@ -34,13 +44,6 @@ const factory = (Button) => {
React.PropTypes.string,
React.PropTypes.element
]),
nextButtonContent: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
leftRightArrowButtonTypes :React.PropTypes.object,
leftRightRangeButtonTypes :React.PropTypes.object,
pagesButtonTypes :React.PropTypes.object,
theme: PropTypes.shape({
pager: PropTypes.string,
active: PropTypes.string,
@ -48,49 +51,45 @@ const factory = (Button) => {
leftRightRangeButton: PropTypes.string,
pagesButton: PropTypes.string
}),
currentPage: React.PropTypes.number.isRequired,
lastPage: React.PropTypes.number.isRequired,
visiblePagesBlockSize: React.PropTypes.number.isRequired,
onPageChange: React.PropTypes.func
};
visiblePagesBlockSize: React.PropTypes.number.isRequired
}
static defaultProps = {
currentPage: initialCurrentPage,
lastPage: initialCurrentPage,
leftRightArrowButtonTypes: {raised: true},
leftRightRangeButtonTypes: {flat: true},
nextButtonContent: '\u003E',
pagesButtonTypes: {flat: true},
prevButtonContent: '\u003C',
rangeLeftButtonContent: '...',
rangeRightButtonContent: '...',
nextButtonContent: '\u003E',
leftRightArrowButtonTypes: {raised: true},
leftRightRangeButtonTypes: {flat: true},
pagesButtonTypes: {flat: true},
visiblePagesBlockSize: initialVisiblePagesBlockSize,
currentPage: initialCurrentPage,
lastPage: initialCurrentPage
};
visiblePagesBlockSize: initialVisiblePagesBlockSize
}
state = {
currentPage: this.props.currentPage,
lastPage: this.props.lastPage
};
}
componentWillReceiveProps (nextProps) {
if (nextProps.currentPage && !isNaN(Number(nextProps.currentPage)) &&
this.state.currentPage !== nextProps.currentPage) {
if (nextProps.currentPage && !isNaN(Number(nextProps.currentPage))
&& this.state.currentPage !== nextProps.currentPage) {
this.setState({
currentPage: Number(nextProps.currentPage < first ? first : nextProps.currentPage)
});
}
if (nextProps.lastPage && !isNaN(Number(nextProps.lastPage)) &&
this.state.lastPage !== nextProps.lastPage) {
if (nextProps.lastPage && !isNaN(Number(nextProps.lastPage))
&& this.state.lastPage !== nextProps.lastPage) {
this.setState({
lastPage: Number(nextProps.lastPage < first ? first : nextProps.lastPage)
});
}
};
}
handlerPageClick(page)
{
var oldValue = this.state.currentPage;
var newValue = page;
handlerPageClick (page) {
const oldValue = this.state.currentPage;
const newValue = page;
if (this.props.onPageChange) {
this.props.onPageChange(oldValue, newValue);
@ -99,23 +98,21 @@ const factory = (Button) => {
this.setState({
currentPage: newValue
});
};
handlerRangeClick(key)
{
var curr = this.state.currentPage;
var last = this.state.lastPage;
var right = !this._ranges.rightStart ? last : this._ranges.rightStart;
var left = !this._ranges.leftEnd ? first : this._ranges.leftEnd;
var newValue = curr;
if (key === 'prev') {
var sum = first + left;
newValue = (sum >> 1); //rounding to left
}
else {
var sum = last + right;
handlerRangeClick (key) {
const curr = this.state.currentPage;
const last = this.state.lastPage;
const right = !this._ranges.rightStart ? last : this._ranges.rightStart;
const left = !this._ranges.leftEnd ? first : this._ranges.leftEnd;
let newValue = curr;
let sum = first + left;
if (key === 'prev') {
newValue = (sum >> 1); //rounding to left
} else {
sum = last + right;
newValue = (sum >> 1) + (sum % 2); //rounding to right
}
@ -126,12 +123,11 @@ const factory = (Button) => {
this.setState({
currentPage: newValue
});
};
}
handlerPrevNextClick(key)
{
var oldValue = this.state.currentPage;
var newValue = key === 'prev' ? oldValue - 1 : oldValue + 1;
handlerPrevNextClick (key) {
const oldValue = this.state.currentPage;
const newValue = key === 'prev' ? oldValue - 1 : oldValue + 1;
if (this.props.onPageChange) {
this.props.onPageChange(oldValue, newValue);
@ -140,21 +136,20 @@ const factory = (Button) => {
this.setState({
currentPage: newValue
});
};
}
//fields
_ranges = {
leftEnd: null,
rightStart: null
};
}
//rendering
//private methods
renderPages(curr, last)
{
last = last < first ? first : last;
if (curr < first || curr > last)
{
renderPages (currPage, lastPage) {
let curr = currPage;
let last = lastPage < first ? first : lastPage;
if (curr < first || curr > last) {
curr = curr < first ? first : curr > last ? last : curr;
this.setState({
currentPage: curr
@ -165,20 +160,20 @@ const factory = (Button) => {
* adjustment of start and end elements at range to have equal elements during navigation
* 2 - because we already have the rendered first and last button
*/
var adjustment = 2;
var content = [];
const adjustment = 2;
const content = [];
var blockSize = this.props.visiblePagesBlockSize === 1 ? adjustment : this.props.visiblePagesBlockSize;
const blockSize = this.props.visiblePagesBlockSize === 1 ? adjustment : this.props.visiblePagesBlockSize;
var padding = blockSize >> 1;
var left = curr - padding * (blockSize % 2); //in case of even visiblePagesBlockSize
var right = curr + padding;
const padding = blockSize >> 1;
const left = curr - padding * (blockSize % 2); //in case of even visiblePagesBlockSize
const right = curr + padding;
var blocksNumber = Math.ceil(last / blockSize);
var currentBlock = Math.ceil(curr / blockSize);
const blocksNumber = Math.ceil(last / blockSize);
let currentBlock = Math.ceil(curr / blockSize);
var start = ((currentBlock - 1) * blockSize) + first;
var end = start + blockSize - first;
let start = ((currentBlock - 1) * blockSize) + first;
let end = start + blockSize - first;
if (currentBlock === 1) { //adjust set of buttons if current is on the left boundary
end += adjustment;
@ -218,7 +213,7 @@ const factory = (Button) => {
);
}
for(var i = start; i <= last && i <= end; ++i) {
for (let i = start; i <= last && i <= end; ++i) {
content.push(
<Button
key={i}
@ -257,15 +252,14 @@ const factory = (Button) => {
this._ranges.rightStart = end - 1;
return content;
};
}
render () {
const {leftRightArrowButtonTypes, prevButtonContent, nextButtonContent,
pagerClassName, currentPage, lastPage, theme, ...other} = this.props;
pagerClassName, lastPage, theme} = this.props;
if (lastPage < first)
{
console.error("ArgumentOutOfRangeException: last Page must be bigger or equal first = 1.");
if (lastPage < first) {
console.error('ArgumentOutOfRangeException: last Page must be bigger or equal first = 1.');
}
return (
@ -290,13 +284,13 @@ const factory = (Button) => {
</Button>
</div>);
};
}
}
return Pager;
};
const Pager = factory(Button);
const Pager = factory(InjectButton);
export default themr(PAGER)(Pager);
export {

27
spec/components/pager.js
View File

@ -1,4 +1,4 @@
import React, { Component, PropTypes } from 'react';
import React, { PropTypes } from 'react';
import Pager from '../../components/pager';
import FontIcon from '../../components/font_icon';
import Input from '../../components/input';
@ -12,27 +12,26 @@ class PagerTest extends React.Component {
static defaultProps = {
visiblePagesBlockSize: 3
};
}
state = {
lastPage: 29,
currentPage: 5
};
}
onInputChange = (name, value) => {
var state = this.state;
const state = this.state;
state[name] = value;
this.setState({
...state
});
};
}
onPageChange(oldPage, newPage)
{
console.info("Previous page : " + oldPage + ", Selected page: " + newPage);
};
onPageChange (oldPage, newPage) {
console.info('Previous page : ' + oldPage + ', Selected page: ' + newPage);
}
render () {
@ -43,10 +42,10 @@ class PagerTest extends React.Component {
<div className={style.pager}>
<Pager
prevButtonContent={ (<FontIcon value='chevron_left' />) }
nextButtonContent={ (<FontIcon value='chevron_right' />) }
rangeLeftButtonContent={(<FontIcon value='more_horiz' />)}
rangeRightButtonContent={(<FontIcon value='more_horiz' />)}
prevButtonContent={<FontIcon value='chevron_left' />}
nextButtonContent={<FontIcon value='chevron_right' />}
rangeLeftButtonContent={<FontIcon value='more_horiz' />}
rangeRightButtonContent={<FontIcon value='more_horiz' />}
lastPage={this.state.lastPage}
currentPage={this.state.currentPage}
visiblePagesBlockSize={this.props.visiblePagesBlockSize}
@ -63,6 +62,6 @@ class PagerTest extends React.Component {
</section>
);
}
}
};
export default PagerTest;