Skip to content
This repository has been archived by the owner on Jan 15, 2022. It is now read-only.

Hello, the commit support bootstrap 4 paginator #366

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Hello, the commit support bootstrap 4 paginator #366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b158d18
feat: add support bootstrap 4 paginator css
claudioDcv Mar 13, 2017
4de0565
feat: paginator support bootstrap 4
claudioDcv Mar 13, 2017
a80954d
feat: result compile paginator suppor bootstrap 4
claudioDcv Mar 13, 2017
70e3369
feat: add support Font Awesome | sort & filter
claudioDcv Mar 13, 2017
afc831e
Update README.md
claudioDcv Mar 13, 2017
805dd11
Update README.md
claudioDcv Mar 13, 2017
ebf8dcf
Update README.md
claudioDcv Mar 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ this the faster we can get to 1.0!
- [Filtering](#filtering)
- [Empty Data Sets](#empty-data-sets)
- [Events](#events)
- [Custom CSS](#custom-css)

## Installation

Expand Down Expand Up @@ -525,3 +526,49 @@ filtering.
Called every time the page changes.

This handler will be passed a number representing the current page, zero based.

## Custom CSS

### Add sort icon (required Font Awesome 4)

```css
.reactable-header-sortable{
position:relative;
padding-right: 40px;
}
.reactable-header-sortable::before{
font: normal normal normal 14px/1 FontAwesome;
content: "\f0dc";
position: absolute;
top: 17px;
right: 15px;
color: #2196F3;
}
.reactable-header-sort-asc::before{
content: "\f0de";
color: #2196F3;
}
.reactable-header-sort-desc::before{
content: "\f0dd";
color: #2196F3;
}
```

### Add search icon in filterer input (required Font Awesome 4)

```css
.reactable-filterer td{
position:relative;
}
.reactable-filterer td::before{
font: normal normal normal 14px/1 FontAwesome;
content: "\f002";
position: absolute;
top: 23px;
left: 24px;
color: #2196F3;
}
.reactable-filterer td input{
padding-left: 35px;
}
```
91 changes: 53 additions & 38 deletions lib/reactable/paginator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
'use strict';

Object.defineProperty(exports, '__esModule', {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Paginator = undefined;

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
var _react = require('react');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react2 = _interopRequireDefault(_react);

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var _react = require('react');
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

var _react2 = _interopRequireDefault(_react);
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function pageHref(num) {
return '#page-' + (num + 1);
}

var Paginator = (function (_React$Component) {
var Paginator = exports.Paginator = function (_React$Component) {
_inherits(Paginator, _React$Component);

function Paginator() {
_classCallCheck(this, Paginator);

_get(Object.getPrototypeOf(Paginator.prototype), 'constructor', this).apply(this, arguments);
return _possibleConstructorReturn(this, (Paginator.__proto__ || Object.getPrototypeOf(Paginator)).apply(this, arguments));
}

_createClass(Paginator, [{
Expand All @@ -53,39 +54,50 @@ var Paginator = (function (_React$Component) {
key: 'renderPrevious',
value: function renderPrevious() {
if (this.props.currentPage > 0) {
return _react2['default'].createElement(
'a',
{ className: 'reactable-previous-page',
href: pageHref(this.props.currentPage - 1),
onClick: this.handlePrevious.bind(this) },
this.props.previousPageLabel || 'Previous'
return _react2.default.createElement(
'li',
{ className: 'page-item' },
_react2.default.createElement(
'a',
{ className: 'reactable-previous-page page-link',
href: pageHref(this.props.currentPage - 1),
onClick: this.handlePrevious.bind(this) },
this.props.previousPageLabel || 'Previous'
)
);
}
}
}, {
key: 'renderNext',
value: function renderNext() {
if (this.props.currentPage < this.props.numPages - 1) {
return _react2['default'].createElement(
'a',
{ className: 'reactable-next-page',
href: pageHref(this.props.currentPage + 1),
onClick: this.handleNext.bind(this) },
this.props.nextPageLabel || 'Next'
return _react2.default.createElement(
'li',
{ className: 'page-item' },
_react2.default.createElement(
'a',
{ className: 'reactable-next-page page-link',
href: pageHref(this.props.currentPage + 1),
onClick: this.handleNext.bind(this) },
this.props.nextPageLabel || 'Next'
)
);
}
}
}, {
key: 'renderPageButton',
value: function renderPageButton(className, pageNum) {

return _react2['default'].createElement(
'a',
{ className: className,
key: pageNum,
href: pageHref(pageNum),
onClick: this.handlePageButton.bind(this, pageNum) },
pageNum + 1
var _className = className + " page-link";
return _react2.default.createElement(
'li',
{ key: pageNum, className: 'page-item' },
_react2.default.createElement(
'a',
{ className: _className,
href: pageHref(pageNum),
onClick: this.handlePageButton.bind(this, pageNum) },
pageNum + 1
)
);
}
}, {
Expand Down Expand Up @@ -132,26 +144,29 @@ var Paginator = (function (_React$Component) {
pageButtons.splice(pageButtonLimit, pageButtons.length - pageButtonLimit);
}

return _react2['default'].createElement(
return _react2.default.createElement(
'tbody',
{ className: 'reactable-pagination' },
_react2['default'].createElement(
_react2.default.createElement(
'tr',
null,
_react2['default'].createElement(
_react2.default.createElement(
'td',
{ colSpan: this.props.colSpan },
this.renderPrevious(),
pageButtons,
this.renderNext()
_react2.default.createElement(
'ul',
{ className: 'pagination' },
this.renderPrevious(),
pageButtons,
this.renderNext()
)
)
)
);
}
}]);

return Paginator;
})(_react2['default'].Component);
}(_react2.default.Component);

exports.Paginator = Paginator;
;
22 changes: 11 additions & 11 deletions src/reactable/paginator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,32 +22,31 @@ export class Paginator extends React.Component {

renderPrevious() {
if(this.props.currentPage > 0) {
return <a className='reactable-previous-page'
return <li className="page-item"><a className='reactable-previous-page page-link'
href={pageHref(this.props.currentPage - 1)}
onClick={this.handlePrevious.bind(this)}>
{this.props.previousPageLabel || 'Previous'}
</a>
{this.props.previousPageLabel || 'Anterior'}
</a></li>
}
}

renderNext() {
if(this.props.currentPage < this.props.numPages - 1) {
return <a className='reactable-next-page'
return <li className="page-item"><a className='reactable-next-page page-link'
href={pageHref(this.props.currentPage + 1)}
onClick={this.handleNext.bind(this)}>
{this.props.nextPageLabel || 'Next'}
</a>
{this.props.nextPageLabel || 'Siguiente'}
</a></li>
}
}

renderPageButton(className, pageNum) {

return <a className={className}
key={pageNum}
let _className = className + " page-link";
return <li key={pageNum} className="page-item"><a className={_className}
href={pageHref(pageNum)}
onClick={this.handlePageButton.bind(this, pageNum)}>
{pageNum + 1}
</a>
</a></li>
}

render() {
Expand Down Expand Up @@ -96,13 +95,14 @@ export class Paginator extends React.Component {
<tbody className="reactable-pagination">
<tr>
<td colSpan={this.props.colSpan}>
<ul className="pagination">
{this.renderPrevious()}
{pageButtons}
{this.renderNext()}
</ul>
</td>
</tr>
</tbody>
);
}
};