From ff7dd4d2ff6199b6b968207d6a243060194bea49 Mon Sep 17 00:00:00 2001 From: Maxim Komlev Date: Thu, 6 Oct 2016 11:18:15 -0700 Subject: [PATCH] * fixed code linting --- components/pager/pager.js | 210 ++++++++++++++++++-------------------- spec/components/pager.js | 31 +++--- 2 files changed, 117 insertions(+), 124 deletions(-) diff --git a/components/pager/pager.js b/components/pager/pager.js index 3e9cf576..85f2e48e 100644 --- a/components/pager/pager.js +++ b/components/pager/pager.js @@ -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,26 +21,29 @@ const factory = (Button) => { class Pager extends Component { static propTypes = { - pagerClassName: PropTypes.string, - 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 - ]), + 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 - ]), - leftRightArrowButtonTypes :React.PropTypes.object, - leftRightRangeButtonTypes :React.PropTypes.object, - pagesButtonTypes :React.PropTypes.object, + 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 + ]), + rangeLeftButtonContent: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.element + ]), + rangeRightButtonContent: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.element + ]), 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 = { - prevButtonContent: '\u003C', - rangeLeftButtonContent: '...', - rangeRightButtonContent: '...', - nextButtonContent: '\u003E', - leftRightArrowButtonTypes: {raised: true}, - leftRightRangeButtonTypes: {flat: true}, - pagesButtonTypes: {flat: true}, - visiblePagesBlockSize: initialVisiblePagesBlockSize, - currentPage: initialCurrentPage, - lastPage: initialCurrentPage - }; + currentPage: initialCurrentPage, + lastPage: initialCurrentPage, + leftRightArrowButtonTypes: {raised: true}, + leftRightRangeButtonTypes: {flat: true}, + nextButtonContent: '\u003E', + pagesButtonTypes: {flat: true}, + prevButtonContent: '\u003C', + rangeLeftButtonContent: '...', + rangeRightButtonContent: '...', + 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) { - this.setState({ + 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) { - this.setState({ + 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; + handlerRangeClick (key) { + const curr = this.state.currentPage; + const 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; + 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') { - var sum = first + left; newValue = (sum >> 1); //rounding to left - } - else { - var sum = last + right; + } else { + sum = last + right; newValue = (sum >> 1) + (sum % 2); //rounding to right } @@ -126,13 +123,12 @@ const factory = (Button) => { this.setState({ 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) { this.props.onPageChange(oldValue, newValue); } @@ -140,21 +136,20 @@ const factory = (Button) => { this.setState({ currentPage: newValue }); - }; + } //fields _ranges = { - leftEnd: null, + 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,22 +160,22 @@ 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 + if (currentBlock === 1) { //adjust set of buttons if current is on the left boundary end += adjustment; end = (last - first) === end ? last : end; } 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); } - + if (currentBlock === blocksNumber) { //adjustment set of buttons if current is on the right boundary start = last - (blockSize + adjustment - first); start = start - 1 <= first ? first : start; @@ -198,10 +193,10 @@ const factory = (Button) => { if (currentBlock > 1 && (start - 1) > first) { content.push( - @@ -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( - @@ -242,61 +237,60 @@ const factory = (Button) => { ); content.push( - ); } - // 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.rightStart = end - 1; return content; - }; + } - render() { - const {leftRightArrowButtonTypes, prevButtonContent, nextButtonContent, - pagerClassName, currentPage, lastPage, theme, ...other} = this.props; + render () { + const {leftRightArrowButtonTypes, prevButtonContent, nextButtonContent, + 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 (
- { this.renderPages(this.state.currentPage, this.state.lastPage) } -
); - }; + } } return Pager; }; -const Pager = factory(Button); +const Pager = factory(InjectButton); export default themr(PAGER)(Pager); export { diff --git a/spec/components/pager.js b/spec/components/pager.js index d0c5cebc..b1394617 100644 --- a/spec/components/pager.js +++ b/spec/components/pager.js @@ -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'; @@ -7,32 +7,31 @@ import style from '../style'; class PagerTest extends React.Component { static propTypes = { - visiblePagesBlockSize: PropTypes.number + visiblePagesBlockSize: PropTypes.number }; 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 () { @@ -42,11 +41,11 @@ class PagerTest extends React.Component {

Pager based on Material design.

- ) } - nextButtonContent={ () } - rangeLeftButtonContent={()} - rangeRightButtonContent={()} + } + nextButtonContent={} + rangeLeftButtonContent={} + rangeRightButtonContent={} lastPage={this.state.lastPage} currentPage={this.state.currentPage} visiblePagesBlockSize={this.props.visiblePagesBlockSize} @@ -63,6 +62,6 @@ class PagerTest extends React.Component { ); } -} +}; export default PagerTest;