From 04d8f8a9c9816bc978fe97fdd204eba2f545632a Mon Sep 17 00:00:00 2001 From: Gabriel Ramirez Date: Sat, 27 May 2017 01:40:06 -0400 Subject: [PATCH] Add ability to navigate using keyboard (#83) Signed-off-by: Gabriel Ramirez Signed-off-by: Patrick Oyarzun Signed-off-by: Gabriel Ramirez Signed-off-by: Patrick Oyarzun --- .gitignore | 3 ++- package.json | 11 ++++++----- src/Pager.jsx | 9 ++++++++- src/Pagination.jsx | 22 ++++++++++++++++++++++ tests/Pagination.spec.js | 5 ++--- tests/helper/two-pagination.jsx | 2 +- 6 files changed, 41 insertions(+), 11 deletions(-) diff --git a/.gitignore b/.gitignore index 1d490d5b..57e8338b 100644 --- a/.gitignore +++ b/.gitignore @@ -26,4 +26,5 @@ assets/**/*.css build lib es -.vscode \ No newline at end of file +.vscode +coverage/ diff --git a/package.json b/package.json index 94b5ceb4..19c5d4cd 100644 --- a/package.json +++ b/package.json @@ -36,16 +36,17 @@ "pub": "rc-tools run pub --babel-runtime", "lint": "rc-tools run lint", "lint:fix": "rc-tools run lint --fix", - "karma": "rc-tools run karma", - "saucelabs": "rc-tools run saucelabs", - "test": "rc-tools run test", - "chrome-test": "rc-tools run chrome-test", - "coverage": "rc-tools run coverage" + "karma": "rc-test run karma", + "saucelabs": "rc-test run saucelabs", + "test": "rc-test run test", + "chrome-test": "rc-test run chrome-test", + "coverage": "rc-test run coverage" }, "devDependencies": { "expect.js": "0.3.x", "pre-commit": "1.x", "rc-select": "5.x", + "rc-test": "^6.0.1", "rc-tools": "6.x", "react": "^15.2.1", "react-addons-test-utils": "^15.3.1", diff --git a/src/Pager.jsx b/src/Pager.jsx index bb623763..d471c2e8 100644 --- a/src/Pager.jsx +++ b/src/Pager.jsx @@ -14,7 +14,13 @@ const Pager = (props) => { } return ( -
  • +
  • {props.page}
    • ); @@ -29,6 +35,7 @@ Pager.propTypes = { showTitle: PropTypes.bool, rootPrefixCls: PropTypes.string, onClick: PropTypes.func, + onKeyPress: PropTypes.func, }; export default Pager; diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 07bc0e87..cdba2bbf 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -190,6 +190,12 @@ class Pagination extends React.Component { return this.state.current < this._calcPage(); } + _runIfEnter(event, callback) { + if (event.key === 'Enter' || event.charCode === 13) { + callback(); + } + } + render() { const props = this.props; const locale = props.locale; @@ -211,6 +217,8 @@ class Pagination extends React.Component {
  • this._runIfEnter(evt, this._prev)} className={`${this._hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`} aria-disabled={!this._hasPrev()} > @@ -233,6 +241,8 @@ class Pagination extends React.Component {
  • this._runIfEnter(evt, this._next)} className={`${this._hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`} aria-disabled={!this._hasNext()} > @@ -250,6 +260,7 @@ class Pagination extends React.Component { locale={locale} rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, i)} + onKeyPress={(evt) => this._runIfEnter(evt, this._handleChange.bind(this, i))} key={i} page={i} active={active} @@ -265,6 +276,8 @@ class Pagination extends React.Component { title={props.showTitle ? prevItemTitle : null} key="prev" onClick={this._jumpPrev} + tabIndex="0" + onKeyPress={(evt) => this._runIfEnter(evt, this._jumpPrev)} className={`${prefixCls}-jump-prev`} > @@ -274,7 +287,9 @@ class Pagination extends React.Component {
  • this._runIfEnter(evt, this._jumpNext)} className={`${prefixCls}-jump-next`} > @@ -286,6 +301,7 @@ class Pagination extends React.Component { last rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, allPages)} + onKeyPress={(evt) => this._runIfEnter(evt, this._handleChange.bind(this, allPages))} key={allPages} page={allPages} active={false} @@ -297,6 +313,7 @@ class Pagination extends React.Component { locale={props.locale} rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, 1)} + onKeyPress={(evt) => this._runIfEnter(evt, this._handleChange.bind(this, 1))} key={1} page={1} active={false} @@ -322,6 +339,7 @@ class Pagination extends React.Component { locale={props.locale} rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, i)} + onKeyPress={(evt) => this._runIfEnter(evt, this._handleChange.bind(this, i))} key={i} page={i} active={active} @@ -378,6 +396,8 @@ class Pagination extends React.Component {
  • this._runIfEnter(evt, this._prev)} className={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`} aria-disabled={prevDisabled} > @@ -387,6 +407,8 @@ class Pagination extends React.Component {
  • this._runIfEnter(evt, this._next)} className={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`} aria-disabled={nextDisabled} > diff --git a/tests/Pagination.spec.js b/tests/Pagination.spec.js index ae48c77e..59c471df 100644 --- a/tests/Pagination.spec.js +++ b/tests/Pagination.spec.js @@ -1,9 +1,10 @@ /* eslint func-names: 0, no-console: 0 */ import expect from 'expect.js'; -import Pagination from '../'; +import Pagination from '../src'; import React from 'react'; import TestUtils from 'react-addons-test-utils'; import ReactDOM from 'react-dom'; +import TwoPagination from './helper/two-pagination'; const Simulate = TestUtils.Simulate; @@ -185,8 +186,6 @@ describe('Controlled Pagination', () => { }); describe('Controlled Pagination', () => { - const TwoPagination = require('./helper/two-pagination'); - let entry = null; const container = document.createElement('div'); document.body.appendChild(container); diff --git a/tests/helper/two-pagination.jsx b/tests/helper/two-pagination.jsx index 9f9b773e..a95140aa 100644 --- a/tests/helper/two-pagination.jsx +++ b/tests/helper/two-pagination.jsx @@ -1,5 +1,5 @@ import 'rc-select/assets/index.css'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; import React from 'react'; import Select from 'rc-select';