@carbon/ibm-security
Version:
Carbon for Cloud & Cognitive IBM Security UI components
241 lines (240 loc) • 9.97 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["className", "useBackendPagination", "rows", "backwardText", "disabled", "forwardText", "id", "isLastPage", "itemsPerPageText", "itemRangeText", "itemText", "onChange", "page", "pageInputDisabled", "pageNumberText", "pageRangeText", "pageSize", "pageSizes", "pageText", "pagesUnknown", "totalItems"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @file Data table pagination.
* @copyright IBM Security 2019, 2021
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { DataTable, defaultProps as dataTableDefaultProps, propTypes as dataTablePropTypes } from '../DataTable';
import Pagination from '../../Pagination';
import { getComponentNamespace } from '../../../globals/namespace';
var namespace = getComponentNamespace('data-table-pagination');
var DataTablePagination = /*#__PURE__*/function (_Component) {
function DataTablePagination() {
var _this;
_classCallCheck(this, DataTablePagination);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, DataTablePagination, [].concat(args));
_defineProperty(_this, "state", {
page: _this.props.page,
pageSize: _this.props.pageSize
});
/**
* Update the state with the newest view values, `page` and `pageSize`.
* @param {object} configuration
* @param {number} configuration.page The current page.
* @param {number} configuration.pageSize The current page size.
*/
_defineProperty(_this, "paginationChange", function (_ref) {
var page = _ref.page,
pageSize = _ref.pageSize;
_this.setState({
page: page,
pageSize: pageSize
});
if (_this.props.onChange) {
_this.props.onChange({
page: page,
pageSize: pageSize
});
}
});
return _this;
}
_inherits(DataTablePagination, _Component);
return _createClass(DataTablePagination, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this$props = this.props,
totalItems = _this$props.totalItems,
useBackendPagination = _this$props.useBackendPagination;
if (useBackendPagination && !totalItems) {
console.warn('Please provide `totalItems` if `useBackendPagination` is `true`.');
}
}
}, {
key: "paginateRows",
value:
/**
* Slice the data to only show between the range.
* @param {Array.<Record<string, any>>} rows The rows to update.
* @returns {Array.<Record<string, any>>} The data between the range values.
*/
function paginateRows(rows) {
var start = this.state.pageSize * (this.state.page - 1);
var end = start + this.state.pageSize;
return rows.slice(start, end);
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
className = _this$props2.className,
useBackendPagination = _this$props2.useBackendPagination,
rows = _this$props2.rows,
backwardText = _this$props2.backwardText,
disabled = _this$props2.disabled,
forwardText = _this$props2.forwardText,
id = _this$props2.id,
isLastPage = _this$props2.isLastPage,
itemsPerPageText = _this$props2.itemsPerPageText,
itemRangeText = _this$props2.itemRangeText,
itemText = _this$props2.itemText,
_ = _this$props2.onChange,
page = _this$props2.page,
pageInputDisabled = _this$props2.pageInputDisabled,
pageNumberText = _this$props2.pageNumberText,
pageRangeText = _this$props2.pageRangeText,
pageSize = _this$props2.pageSize,
pageSizes = _this$props2.pageSizes,
pageText = _this$props2.pageText,
pagesUnknown = _this$props2.pagesUnknown,
totalItems = _this$props2.totalItems,
other = _objectWithoutProperties(_this$props2, _excluded);
return /*#__PURE__*/React.createElement("div", {
className: classnames(className, namespace)
}, /*#__PURE__*/React.createElement(DataTable, _extends({
rows: useBackendPagination ? rows : this.paginateRows(rows)
}, other)), /*#__PURE__*/React.createElement(Pagination, {
backwardText: backwardText,
disabled: disabled,
forwardText: forwardText,
id: id,
isLastPage: isLastPage,
itemsPerPageText: itemsPerPageText,
itemRangeText: itemRangeText,
itemText: itemText,
onChange: this.paginationChange,
page: page,
pageInputDisabled: pageInputDisabled,
pageNumberText: pageNumberText,
pageRangeText: pageRangeText,
pageSize: pageSize,
pageSizes: pageSizes,
pageText: pageText,
pagesUnknown: pagesUnknown,
totalItems: useBackendPagination ? totalItems : rows.length
}));
}
}]);
}(Component);
_defineProperty(DataTablePagination, "propTypes", _objectSpread(_objectSpread({}, dataTablePropTypes), {}, {
/**
* @type {string} The description for the backward icon.
*/
backwardText: PropTypes.string,
/** @type {string} Additional classes applied to the wrapper. */
className: PropTypes.string,
/**
* @type {boolean} `true` if the backward/forward buttons should be disabled.
*/
disabled: PropTypes.bool,
/**
* @type {string} The description for the forward icon.
*/
forwardText: PropTypes.string,
/**
* @type {string|number} The unique ID of this component instance.
*/
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**
* @type {boolean} `true` if the current page should be the last page.
*/
isLastPage: PropTypes.bool,
/**
* @type {Function} The function returning a translatable text showing where the current page is,
* in a manner of the range of items.
*/
itemRangeText: PropTypes.func,
/**
* @type {Function} A variant of `itemRangeText`, used if the total number of items is unknown.
*/
itemText: PropTypes.func,
/**
* @type {string} The translatable text indicating the number of items per page.
*/
itemsPerPageText: PropTypes.string,
/**
* @type {string} The callback function called when the current page changes.
*/
onChange: PropTypes.func,
/**
* @type {number} The current page.
*/
page: PropTypes.number,
/**
* @type {boolean} `true` if the select box to change the page should be disabled.
*/
pageInputDisabled: PropTypes.bool,
/**
* @type {string}
*/
pageNumberText: PropTypes.string,
/**
* @type {Function} A function returning PII showing where the current page is.
*/
pageRangeText: PropTypes.func,
/**
* @type {number} The number dictating how many items a page contains.
*/
pageSize: PropTypes.number,
/**
* @type {Array<number>} The choices for `pageSize`.
*/
pageSizes: PropTypes.arrayOf(PropTypes.number).isRequired,
/**
* @type {Function} The translatable text showing the current page.
*/
pageText: PropTypes.func,
/**
* @type {boolean} `true` if the total number of items is unknown.
*/
pagesUnknown: PropTypes.bool,
/**
* @type {number} The total number of items.
*/
totalItems: PropTypes.number,
/** @type {boolean} Indicates whether the component relies on a backend to paginate. */
useBackendPagination: PropTypes.bool
}));
_defineProperty(DataTablePagination, "defaultProps", _objectSpread(_objectSpread({}, dataTableDefaultProps), {}, {
useBackendPagination: false,
className: '',
backwardText: 'Backward',
disabled: false,
forwardText: 'Forward',
isLastPage: false,
itemsPerPageText: 'Items per page',
itemText: function itemText(min, max) {
return "".concat(min, "-").concat(max, " items");
},
itemRangeText: function itemRangeText(min, max, total) {
return "".concat(min, "-").concat(max, " of ").concat(total, " items");
},
page: 1,
pageInputDisabled: false,
pageNumberText: 'Page Number',
pageRangeText: function pageRangeText(current, total) {
return "".concat(current, " of ").concat(total, " pages");
},
pagesUnknown: false,
pageText: function pageText(page) {
return "page ".concat(page);
}
}));
export default DataTablePagination;