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

210
components/pager/pager.js
View File

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

31
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 Pager from '../../components/pager';
import FontIcon from '../../components/font_icon'; import FontIcon from '../../components/font_icon';
import Input from '../../components/input'; import Input from '../../components/input';
@ -7,32 +7,31 @@ import style from '../style';
class PagerTest extends React.Component { class PagerTest extends React.Component {
static propTypes = { static propTypes = {
visiblePagesBlockSize: PropTypes.number visiblePagesBlockSize: PropTypes.number
}; };
static defaultProps = { static defaultProps = {
visiblePagesBlockSize: 3 visiblePagesBlockSize: 3
}; }
state = { state = {
lastPage: 29, lastPage: 29,
currentPage: 5 currentPage: 5
}; }
onInputChange = (name, value) => { onInputChange = (name, value) => {
var state = this.state; const state = this.state;
state[name] = value; state[name] = value;
this.setState({ this.setState({
...state ...state
}); });
}; }
onPageChange(oldPage, newPage) onPageChange (oldPage, newPage) {
{ console.info('Previous page : ' + oldPage + ', Selected page: ' + newPage);
console.info("Previous page : " + oldPage + ", Selected page: " + newPage); }
};
render () { render () {
@ -42,11 +41,11 @@ class PagerTest extends React.Component {
<p>Pager based on Material design.</p> <p>Pager based on Material design.</p>
<div className={style.pager}> <div className={style.pager}>
<Pager <Pager
prevButtonContent={ (<FontIcon value='chevron_left' />) } prevButtonContent={<FontIcon value='chevron_left' />}
nextButtonContent={ (<FontIcon value='chevron_right' />) } nextButtonContent={<FontIcon value='chevron_right' />}
rangeLeftButtonContent={(<FontIcon value='more_horiz' />)} rangeLeftButtonContent={<FontIcon value='more_horiz' />}
rangeRightButtonContent={(<FontIcon value='more_horiz' />)} rangeRightButtonContent={<FontIcon value='more_horiz' />}
lastPage={this.state.lastPage} lastPage={this.state.lastPage}
currentPage={this.state.currentPage} currentPage={this.state.currentPage}
visiblePagesBlockSize={this.props.visiblePagesBlockSize} visiblePagesBlockSize={this.props.visiblePagesBlockSize}
@ -63,6 +62,6 @@ class PagerTest extends React.Component {
</section> </section>
); );
} }
} };
export default PagerTest; export default PagerTest;