From 089c5b69f7e22bbe2bb05c1f3dac675e61d8aa16 Mon Sep 17 00:00:00 2001 From: Maxim Komlev Date: Fri, 7 Oct 2016 16:16:08 -0700 Subject: [PATCH] + pushed file browser button branch --- components/identifiers.js | 1 - components/index.js | 1 - components/pager/_config.scss | 3 - components/pager/index.d.ts | 111 ------------- components/pager/index.js | 11 -- components/pager/pager.js | 299 ---------------------------------- components/pager/readme.md | 63 ------- components/pager/theme.scss | 25 --- spec/components/pager.js | 67 -------- spec/root.js | 2 - spec/style.scss | 7 - 11 files changed, 590 deletions(-) delete mode 100644 components/pager/_config.scss delete mode 100644 components/pager/index.d.ts delete mode 100644 components/pager/index.js delete mode 100644 components/pager/pager.js delete mode 100644 components/pager/readme.md delete mode 100644 components/pager/theme.scss delete mode 100644 spec/components/pager.js diff --git a/components/identifiers.js b/components/identifiers.js index 863ca6b5..fa5902dc 100644 --- a/components/identifiers.js +++ b/components/identifiers.js @@ -25,4 +25,3 @@ export const TABLE = 'RTTable'; export const TABS = 'RTTabs'; export const TOOLTIP = 'RTTooltip'; export const TIME_PICKER = 'RTTimePicker'; -export const PAGER = 'RTPager'; diff --git a/components/index.js b/components/index.js index a8c4fa62..4d83a958 100644 --- a/components/index.js +++ b/components/index.js @@ -28,4 +28,3 @@ export Table from './table'; export * from './tabs'; export Tooltip from './tooltip'; export TimePicker from './time_picker'; -export Pager from './pager'; diff --git a/components/pager/_config.scss b/components/pager/_config.scss deleted file mode 100644 index 14cb04d9..00000000 --- a/components/pager/_config.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "../button/config"; - -$button-margin: 0rem .5rem 0rem 0rem !default; \ No newline at end of file diff --git a/components/pager/index.d.ts b/components/pager/index.d.ts deleted file mode 100644 index fd98d878..00000000 --- a/components/pager/index.d.ts +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from "react"; -import ReactToolbox from "./index"; - -export interface PagerTheme { - /** - * Used for the root element. - */ - pager?: string; - /** - * Used for the active page. - */ - active?: string; - /** - * Used for the next and previous page buttons. - */ - leftRightArrowButton?: string; - /** - * Used for the next and previous range pages buttons. - */ - leftRightRangeButton?: string; - /** - * Used for the regular page buttons. - */ - pagesButton?: string; -} - -interface PagerProps extends ReactToolbox.Props { - /** - * Used for the previous button content. - */ - prevButtonContent?: string; - /** - * Used for the left range button content - */ - rangeLeftButtonContent?: string; - /** - * Used for the right range button content - */ - rangeRightButtonContent?: string; - /** - * Used for the next button content - */ - nextButtonContent?: string; - /** - * A Number with the currently selected page - */ - currentPage?: number; - /** - * A Number of last page. - */ - lastPage?: number; - /** - * A Number of pages visible in control except next, previous and ranges buttons, the minimum value is 2. - */ - visiblePagesBlockSize?: number; - /** - * Callback called when the page is changing. - */ - onPageChange?: Function; - /** - * Classnames object defining the component style. - */ - theme?: PagerTheme; - /** - * This class will be applied to the root elemt. - */ - pagerClassName?: string; - /** - * Defining default style of next, previous buttons. - * it can have following styles: - * accent, - * flat, - * inverse, - * mini, - * neutral, - * primary, - * raised, - * toggle - */ - leftRightArrowButtonTypes?: object; - /** - * Defining default style of left, right range buttons. - * it can have following styles: - * accent, - * flat, - * inverse, - * mini, - * neutral, - * primary, - * raised, - * toggle - */ - leftRightRangeButtonTypes?: object; - /** - * Defining default style of regular page buttons. - * it can have following styles: - * accent, - * flat, - * inverse, - * mini, - * neutral, - * primary, - * raised, - * toggle - */ - pagesButtonTypes?: object; -} - -export class Pager extends React.Component { } - -export default Pager; diff --git a/components/pager/index.js b/components/pager/index.js deleted file mode 100644 index 0e5348ac..00000000 --- a/components/pager/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import { themr } from 'react-css-themr'; -import { PAGER } from '../identifiers.js'; -import { pagerFactory } from './pager.js'; -import { Button } from '../button'; -import theme from './theme.scss'; - -const Pager = pagerFactory(Button); - -const ThemedPager = themr(PAGER, theme)(Pager); -export default ThemedPager; -export { ThemedPager as Pager }; diff --git a/components/pager/pager.js b/components/pager/pager.js deleted file mode 100644 index 85f2e48e..00000000 --- a/components/pager/pager.js +++ /dev/null @@ -1,299 +0,0 @@ -import React, { Component, PropTypes } from 'react'; -import classnames from 'classnames'; -import { themr } from 'react-css-themr'; - -import InjectButton from '../button'; -import { PAGER } from '../identifiers.js'; - -const isOnePage = (first, last) => { - return first === last || !last; -}; - -const isBorderPage = (curr, border) => { - return curr === border; -}; - -const initialVisiblePagesBlockSize = 3; -const initialCurrentPage = 1; -const first = 1; - -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 - ]), - 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, - leftRightArrowButton: PropTypes.string, - leftRightRangeButton: PropTypes.string, - pagesButton: PropTypes.string - }), - 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: '...', - 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({ - currentPage: Number(nextProps.currentPage < first ? first : nextProps.currentPage) - }); - } - if (nextProps.lastPage && !isNaN(Number(nextProps.lastPage)) - && this.state.lastPage !== nextProps.lastPage) { - this.setState({ - lastPage: Number(nextProps.lastPage < first ? first : nextProps.lastPage) - }); - } - } - - handlerPageClick (page) { - const oldValue = this.state.currentPage; - const newValue = page; - - if (this.props.onPageChange) { - this.props.onPageChange(oldValue, newValue); - } - - this.setState({ - currentPage: newValue - }); - } - - 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 - } - - if (this.props.onPageChange) { - this.props.onPageChange(curr, newValue); - } - - this.setState({ - currentPage: newValue - }); - } - - handlerPrevNextClick (key) { - const oldValue = this.state.currentPage; - const newValue = key === 'prev' ? oldValue - 1 : oldValue + 1; - - if (this.props.onPageChange) { - this.props.onPageChange(oldValue, newValue); - } - - this.setState({ - currentPage: newValue - }); - } - - //fields - _ranges = { - leftEnd: null, - rightStart: null - } - - //rendering - //private methods - 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 - }); - } - - /* - * 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 - */ - const adjustment = 2; - const content = []; - - const blockSize = this.props.visiblePagesBlockSize === 1 ? adjustment : this.props.visiblePagesBlockSize; - - const padding = blockSize >> 1; - const left = curr - padding * (blockSize % 2); //in case of even visiblePagesBlockSize - const right = curr + padding; - - const blocksNumber = Math.ceil(last / blockSize); - let currentBlock = Math.ceil(curr / blockSize); - - 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; - end = (last - first) === end ? last : end; - } else if (currentBlock < blocksNumber) { //adjustment set of buttons if current is between boundaries - start = left; - end = right; - - 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; - end = last; - } - - if (currentBlock > 1 && (start - 1) > first) { - content.push( - - ); - - content.push( - - ); - } - - for (let i = start; i <= last && i <= end; ++i) { - content.push( - - ); - } - - if (currentBlock < blocksNumber && end < last) { - content.push( - - ); - - content.push( - - ); - } - - // 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, lastPage, theme} = this.props; - - 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(InjectButton); - -export default themr(PAGER)(Pager); -export { - factory as pagerFactory -}; -export { Pager }; diff --git a/components/pager/readme.md b/components/pager/readme.md deleted file mode 100644 index 3fee2f6f..00000000 --- a/components/pager/readme.md +++ /dev/null @@ -1,63 +0,0 @@ -# Pager - -Provides functionality of pagination control, actually the component is not defined at(https://www.google.com/design/spec/components), but designed by using standart components from material design. -It is easy to use and configure, also it is highly customizable. - - -```jsx -import Pager from 'react-toolbox/lib/pager'; -import FontIcon from 'react-toolbox/lib/font_icon'; - -const ProgressTest = () => { - - var onPageChange = function (oldPage, newPage) - { - //server call to update content according current page - console.info("Previous page : " + oldPage + ", Selected page: " + newPage); - } - - return ( - ) } - nextButtonContent={ () } - rangeLeftButtonContent={()} - rangeRightButtonContent={()} - lastPage={29} - currentPage={5} - visiblePagesBlockSize={3} - onPageChange={onPageChange} - /> - ); -}; -``` - -If you want to provide a theme via context, the component key is `RTPager`. - -## Properties - -| Name | Type | Default | Description| -|:-----|:-----|:-----|:-----| -| `prevButtonContent` | `String` | `\u003C` | Used for the previous button content.| -| `nextButtonContent` | `String` | `\u003E` | Used for the next button content.| -| `rangeLeftButtonContent` | `String` | `...` | Used for the left range button content.| -| `rangeRightButtonContent` | `String` | `...` | Used for the right range button content.| -| `currentPage` | `Number` | `1` | A Number with the currently selected page.| -| `lastPage` | `Number` | `1` | A Number of last page.| -| `visiblePagesBlockSize` | `Number` | `3` | A Number of pages visible in control except next, previous and ranges buttons, the minimum value is 2.| -| `onPageChange` | `Function` | | Callback called when the page is changing.| -| `theme` | `String` | | Classnames object defining the component style.| -| `pagerClassName` | `String` | | This class will be applied to the root elemt.| -| `leftRightArrowButtonTypes` | `Object` | {raised: true} | Defining default style of next, previous buttons.| -| `leftRightRangeButtonTypes` | `Object` | {flat: true} | Defining default style of left, right range buttons.| -| `pagesButtonTypes` | `Object` | {flat: true} | Defining default style of regular page buttons.| - - -## Theme - -| Name | Description| -|:---------|:-----------| -| `pager` | Used for the root element.| -| `active` | Used for the active page.| -| `leftRightArrowButton` | Used for the next and previous page buttons.| -| `leftRightRangeButton` | Used for the next and previous range pages buttons.| -| `pagesButton` | Used for the regular page buttons.| \ No newline at end of file diff --git a/components/pager/theme.scss b/components/pager/theme.scss deleted file mode 100644 index 9d481fe4..00000000 --- a/components/pager/theme.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import "../colors"; -@import "../globals"; -@import "../mixins"; -@import "./config"; - -.pager { - display: flex; - flex-flow: row nowrap; - justify-content: center; - align-items: center; - - .leftRightArrowButton, - .leftRightRangeButton, - .pagesButton { - display: flex; - flex-shrink: 0; - - min-width: $button-height; - margin: $button-margin; - } - - .active { - text-decoration: underline; - } -} \ No newline at end of file diff --git a/spec/components/pager.js b/spec/components/pager.js deleted file mode 100644 index 16ce7ed3..00000000 --- a/spec/components/pager.js +++ /dev/null @@ -1,67 +0,0 @@ -import React, { PropTypes } from 'react'; -import Pager from '../../components/pager'; -import FontIcon from '../../components/font_icon'; -import Input from '../../components/input'; -import style from '../style'; - -class PagerTest extends React.Component { - - static propTypes = { - visiblePagesBlockSize: PropTypes.number - }; - - static defaultProps = { - visiblePagesBlockSize: 3 - } - - state = { - lastPage: 29, - currentPage: 5 - } - - onInputChange = (name, value) => { - const state = this.state; - - state[name] = value; - - this.setState({ - ...state - }); - } - - onPageChange (oldPage, newPage) { - console.info('Previous page : ' + oldPage + ', Selected page: ' + newPage); - } - - render () { - - return ( -
-
Pager
-

Pager based on Material design.

- -
- } - nextButtonContent={} - rangeLeftButtonContent={} - rangeRightButtonContent={} - lastPage={this.state.lastPage} - currentPage={this.state.currentPage} - visiblePagesBlockSize={this.props.visiblePagesBlockSize} - onPageChange={this.onPageChange} - /> -
- - - -
- ); - } -} - -export default PagerTest; diff --git a/spec/root.js b/spec/root.js index 1dd37150..ddf1a6b9 100644 --- a/spec/root.js +++ b/spec/root.js @@ -19,7 +19,6 @@ import Input from './components/input'; import Layout from './components/layout'; import List from './components/list'; import Menu from './components/menu'; -import Pager from './components/pager'; import Pickers from './components/pickers'; import Progress from './components/progress'; import Radio from './components/radio'; @@ -64,7 +63,6 @@ const Root = () => ( - diff --git a/spec/style.scss b/spec/style.scss index 7b19fe42..ac92d051 100644 --- a/spec/style.scss +++ b/spec/style.scss @@ -146,10 +146,3 @@ $offset: 1.8 * $unit; height: 40px; } } - -.pager - { - display: flex; - flex-flow: row nowrap; - justify-content: center; - } \ No newline at end of file