react-admin-ui
Version:
React Admin Panel based on material-ui interface Edit
238 lines (191 loc) • 11.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');
var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n a{\n padding: 5px 10px;\n margin: 0px 5px;\n border: 1px solid lightgrey;\n border-radius: 2px;\n color: black;\n display: block;\n }\n a.active{\n background: #37474f;\n color: white;\n border: 0;\n }\n \n'], ['\n a{\n padding: 5px 10px;\n margin: 0px 5px;\n border: 1px solid lightgrey;\n border-radius: 2px;\n color: black;\n display: block;\n }\n a.active{\n background: #37474f;\n color: white;\n border: 0;\n }\n \n']),
_templateObject2 = (0, _taggedTemplateLiteral3.default)(['\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 10px;\n'], ['\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 10px;\n']),
_templateObject3 = (0, _taggedTemplateLiteral3.default)(['\n text-align: center; \n padding: 1rem 0;\n'], ['\n text-align: center; \n padding: 1rem 0;\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactIsomorphicTools = require('react-isomorphic-tools');
var _reactRouterDom = require('react-router-dom');
var _qs = require('qs');
var _lib = require('../../../../lib');
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _utils = require('../../../../utils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = function (Component) {
var _class;
return (0, _reactRouterDom.withRouter)(_class = function (_React$Component) {
(0, _inherits3.default)(Pagination, _React$Component);
function Pagination() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, Pagination);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Pagination.__proto__ || (0, _getPrototypeOf2.default)(Pagination)).call.apply(_ref, [this].concat(args))), _this), _this.isActive = function (page) {
return function () {
return _this.getCurrentPage(_this.props.list.request) == page;
};
}, _this.getPageNumber = function (i) {
if (_this.settings.type == 'offset') {
return (i - 1) * _this.settings.itemsPerPage;
}
return i;
}, _this.getCurrentPage = function (request) {
if (_this.settings.type == 'offset') {
return Math.ceil((0, _utils.showField)(_this.settings.pageLink, request.params) / _this.settings.itemsPerPage) + 1 || 1;
}
return (0, _utils.showField)(_this.settings.pageLink, request.params) || 1;
}, _this.getQuery = function (i) {
return (0, _utils.mergeDeep)((0, _qs.parse)(_this.props.location.search, { ignoreQueryPrefix: true }), (0, _qs.parse)(_this.settings.pageName + '=' + i, { ignoreQueryPrefix: true }));
}, _this.configure = function () {
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
itemsPerPage = _ref2.itemsPerPage,
visible = _ref2.visible,
disable = _ref2.disable,
totalItemsLink = _ref2.totalItemsLink,
itemsLink = _ref2.itemsLink,
pageName = _ref2.pageName,
type = _ref2.type,
pageLink = _ref2.pageLink;
_this.settings = {
itemsPerPage: itemsPerPage || 10,
visible: visible || 4,
disable: disable || false,
totalItemsLink: totalItemsLink || 'totalItemCount',
itemsLink: itemsLink || 'items',
pageName: pageName || 'page',
pageLink: pageLink || 'page',
type: type || 'pages'
};
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(Pagination, [{
key: 'render',
value: function render() {
var entity = (0, _lib.getEntity)(this.props.entityName);
//configure pagination settings
this.configure(entity.pagination);
//give back Component if pagination is disabled
if (this.settings.disable) return _react2.default.createElement(Component, this.props);
var _props$list = this.props.list,
response = _props$list.response,
request = _props$list.request;
//configure base constants
var currentPage = this.getCurrentPage(request);
var totalItems = (0, _utils.showField)(this.settings.totalItemsLink, response);
var items = (0, _utils.showField)(this.settings.itemsLink, response);
var countPages = Math.ceil(totalItems / this.settings.itemsPerPage);
var pathname = this.props.location.pathname;
var pages = [];
for (var i = 1; i <= countPages; i++) {
if (i >= currentPage - 1 && pages.length < this.settings.visible) {
pages.push(_react2.default.createElement(
Page,
{ key: i },
_react2.default.createElement(
_reactIsomorphicTools.NavLink,
{ isActive: this.isActive(i),
to: {
pathname: pathname,
query: this.getQuery(this.getPageNumber(i))
} },
i
)
));
}
}
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(Component, (0, _extends3.default)({}, this.props, { items: items,
query: (0, _qs.parse)(this.props.location.search, { ignoreQueryPrefix: true }) })),
items.length > 0 ? _react2.default.createElement(
'div',
null,
_react2.default.createElement(
Pages,
null,
countPages && currentPage != 1 && _react2.default.createElement(
Page,
null,
_react2.default.createElement(
_reactIsomorphicTools.Link,
{ to: {
pathname: pathname,
query: this.getQuery(currentPage - 1 == 0 ? this.getPageNumber(1) : this.getPageNumber(currentPage - 1))
} },
'<'
)
),
pages,
countPages != currentPage && _react2.default.createElement(
Page,
null,
_react2.default.createElement(
_reactIsomorphicTools.Link,
{
to: {
pathname: pathname,
query: this.getQuery(this.getPageNumber(parseInt(currentPage) + 1))
} },
'>'
)
)
),
_react2.default.createElement(
'div',
{ className: 'row' },
_react2.default.createElement(
'div',
{ className: 'col' },
_react2.default.createElement(
Info,
null,
'Total items: ',
totalItems || 0
)
)
)
) : _react2.default.createElement(
'div',
{ className: 'row' },
_react2.default.createElement(
'div',
{ className: 'col' },
_react2.default.createElement(
Info,
null,
'No ',
entity.title || entity.name,
' have been found.'
)
)
)
);
}
}]);
return Pagination;
}(_react2.default.Component)) || _class;
};
var Page = _styledComponents2.default.div(_templateObject);
var Pages = _styledComponents2.default.div(_templateObject2);
var Info = _styledComponents2.default.div(_templateObject3);