react-smtc-ui-utils
Version:
react-smtc-ui-utils React component
223 lines (219 loc) • 8.79 kB
JavaScript
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { Component } from 'react';
import { Dropdown, Label, Table } from 'semantic-ui-react';
import PropTypes from "prop-types";
import TablePagination from "./TablePagination";
import { getRandomNumber } from "../static/ObjectsUtils";
//{key: 't', text: '1', value: '1'},
var pageOptions = [{
key: 's',
text: '10',
value: 10
}, {
key: 'm',
text: '20',
value: 20
}, {
key: 'l',
text: '50',
value: 50
}];
/**
* pagination footer example:
* using data count and page size to calculate the pagination bar
*
* @type {{ colCount: *, pageSize: *, handlePageClick: *, dataCount: *}}
*/
export var PaginationFooter = /*#__PURE__*/function (_Component) {
function PaginationFooter(props) {
var _this;
_this = _Component.call(this, props) || this;
_defineProperty(_this, "handlePageSizeChange", function (e, _ref) {
var value = _ref.value;
//Auto set page to page 1
_this.props.handlePageClick(1);
_this.setState({
pageSize: value,
footerKey: getRandomNumber()
});
_this.props.onPageSizeChange(value);
});
_this.state = {
footerKey: getRandomNumber()
};
return _this;
}
_inheritsLoose(PaginationFooter, _Component);
var _proto = PaginationFooter.prototype;
_proto.handlePageClick = function handlePageClick(val) {
this.props.handlePageClick(val);
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.currentPage !== prevProps.currentPage) {
this.setState({
footerKey: getRandomNumber()
});
}
};
_proto.render = function render() {
var _this2 = this;
//currently only show the first Item of "footerMap" by default
var _this$props = this.props,
colCount = _this$props.colCount,
pageSize = _this$props.pageSize,
dataCount = _this$props.dataCount,
currentPage = _this$props.currentPage,
footerMap = _this$props.footerMap,
paginationProps = _this$props.paginationProps;
var footerKey = this.state.footerKey;
return /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.HeaderCell, {
colSpan: 1
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Label, {
color: "purple",
ribbon: true
}, "Page Size:"), /*#__PURE__*/React.createElement(Dropdown, {
upward: true,
floating: true,
inline: true,
options: pageOptions,
defaultValue: pageSize,
name: "pageSize",
onChange: this.handlePageSizeChange
}))), /*#__PURE__*/React.createElement(Table.HeaderCell, {
key: footerKey,
colSpan: colCount - 1 <= 0 ? 1 : colCount - 1
}, footerMap.map(function (elm, j) {
return elm;
}), /*#__PURE__*/React.createElement(TablePagination, {
currentPage: currentPage,
totalPages: Math.ceil((dataCount === undefined ? 1 : dataCount) / pageSize),
getActivePages: function getActivePages(val) {
return _this2.handlePageClick(val);
},
paginationProps: paginationProps
})));
};
return PaginationFooter;
}(Component);
// Secondary do not have page size selection label
PaginationFooter.propTypes = process.env.NODE_ENV !== "production" ? {
colCount: PropTypes.number.isRequired,
pageSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
handlePageClick: PropTypes.func.isRequired,
dataCount: PropTypes.number.isRequired,
currentPage: PropTypes.number.isRequired,
onPageSizeChange: PropTypes.func.isRequired,
footerMap: PropTypes.array,
paginationProps: PropTypes.object
} : {};
export var PaginationFooterSecondary = /*#__PURE__*/function (_Component2) {
function PaginationFooterSecondary() {
var _this3;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this3 = _Component2.call.apply(_Component2, [this].concat(args)) || this;
_defineProperty(_this3, "state", {
footerKey: getRandomNumber()
});
return _this3;
}
_inheritsLoose(PaginationFooterSecondary, _Component2);
var _proto2 = PaginationFooterSecondary.prototype;
_proto2.componentDidUpdate = function componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.currentPage !== prevProps.currentPage) {
this.setState({
footerKey: getRandomNumber()
});
}
};
_proto2.handlePageClick = function handlePageClick(val) {
this.props.handlePageClick(val);
};
_proto2.render = function render() {
var _this4 = this;
//currently only show the first Item of "footerMap" by default
var _this$props2 = this.props,
colCount = _this$props2.colCount,
pageSize = _this$props2.pageSize,
dataCount = _this$props2.dataCount,
currentPage = _this$props2.currentPage,
footerMap = _this$props2.footerMap,
paginationProps = _this$props2.paginationProps;
var footerKey = this.state.footerKey;
return /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.HeaderCell, {
key: footerKey,
colSpan: colCount
}, footerMap.map(function (elm, j) {
return elm;
}), /*#__PURE__*/React.createElement(TablePagination, {
currentPage: currentPage,
totalPages: Math.ceil((dataCount === undefined ? 1 : dataCount) / pageSize),
getActivePages: function getActivePages(val) {
return _this4.handlePageClick(val);
},
paginationProps: paginationProps
})));
};
return PaginationFooterSecondary;
}(Component);
//CustomizedFooter
PaginationFooterSecondary.propTypes = process.env.NODE_ENV !== "production" ? {
colCount: PropTypes.number.isRequired,
pageSize: PropTypes.number.isRequired,
handlePageClick: PropTypes.func.isRequired,
dataCount: PropTypes.number.isRequired,
currentPage: PropTypes.number.isRequired,
footerMap: PropTypes.array,
paginationProps: PropTypes.object
} : {};
export var CustomizedFooter = /*#__PURE__*/function (_Component3) {
function CustomizedFooter(props) {
var _this5;
_this5 = _Component3.call(this, props) || this;
_this5.state = {};
return _this5;
}
_inheritsLoose(CustomizedFooter, _Component3);
var _proto3 = CustomizedFooter.prototype;
_proto3.render = function render() {
return /*#__PURE__*/React.createElement("div", null);
};
return CustomizedFooter;
}(Component);
_defineProperty(CustomizedFooter, "defaultProps", {
tableElementType: "CustomizedFooter"
});
CustomizedFooter.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
export var NoPaginationUserFooter = /*#__PURE__*/function (_Component4) {
function NoPaginationUserFooter() {
var _this6;
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this6 = _Component4.call.apply(_Component4, [this].concat(args)) || this;
_defineProperty(_this6, "state", {});
return _this6;
}
_inheritsLoose(NoPaginationUserFooter, _Component4);
var _proto4 = NoPaginationUserFooter.prototype;
_proto4.render = function render() {
var _this$props3 = this.props,
colCount = _this$props3.colCount,
footerMap = _this$props3.footerMap;
return /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.HeaderCell, {
colSpan: colCount
}, footerMap.map(function (elm, j) {
return elm;
})));
};
return NoPaginationUserFooter;
}(Component);
NoPaginationUserFooter.propTypes = process.env.NODE_ENV !== "production" ? {
colCount: PropTypes.number.isRequired,
footerMap: PropTypes.array
} : {};