@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
328 lines (327 loc) • 12 kB
JavaScript
"use client";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
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; }
import "core-js/modules/web.dom-collections.iterator.js";
import React from 'react';
import PropTypes from 'prop-types';
import Context from '../../shared/Context';
import { isTrue, dispatchCustomElementEvent } from '../../shared/component-helper';
import { ContentObject } from './PaginationHelpers';
import PaginationContext from './PaginationContext';
export default class PaginationProvider extends React.PureComponent {
static getDerivedStateFromProps(props, state) {
if (props.page_count !== null) {
state.pageCount = parseFloat(props.page_count) || 1;
}
if (props.current_page !== null && typeof state.currentPage === 'undefined') {
state.currentPage = parseFloat(props.current_page) || 1;
}
if (typeof state.startupPage !== 'number') {
state.startupPage = parseFloat(props.startup_page) || parseFloat(props.current_page) || state.currentPage;
}
state.parallelLoadCount = parseFloat(props.parallel_load_count) || 1;
state.minTime = parseFloat(props.min_wait_time) || 0;
state.placeMakerBeforeContent = isTrue(props.place_maker_before_content) || isTrue(props.place_marker_before_content);
if (props.useMarkerOnly && isTrue(props.reset_pagination_handler)) {
state.lowerPage = undefined;
state.upperPage = undefined;
}
if (props.useMarkerOnly) {
if (typeof state.lowerPage === 'undefined') {
state.lowerPage = state.startupPage || 1;
}
const cur = parseFloat(props.current_page);
if (!isNaN(cur) && cur < state.lowerPage) {
state.lowerPage = cur;
}
if (typeof state.upperPage === 'undefined') {
state.upperPage = state.startupPage + (parseFloat(props.startup_count) || 1) - 1 || 1;
}
}
if (isTrue(props.reset_content_handler)) {
state.items = [];
state.pageCount = parseFloat(props.page_count) || 1;
}
if (typeof props.items === 'string' && props.items[0] === '[') {
state.items = JSON.parse(props.items);
} else if (Array.isArray(props.items)) {
state.items = props.items;
}
return state;
}
constructor(_props) {
var _this;
super(_props);
_this = this;
_defineProperty(this, "setContent", function (newContent) {
let content = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
if (!Array.isArray(newContent) && content) {
newContent = [newContent, content];
}
const pageNumber = parseFloat(newContent[0]) || 1;
newContent = newContent[1];
if (typeof newContent === 'function') {
content = newContent();
} else if (React.isValidElement(newContent)) {
content = newContent;
}
if (content) {
let itemToPrepare = _this.state.items.find(_ref => {
let {
pageNumber: p
} = _ref;
return p === pageNumber;
});
let items = null;
if (!itemToPrepare) {
items = _this.prefillItems(pageNumber, {
position
});
itemToPrepare = items.find(_ref2 => {
let {
pageNumber: p
} = _ref2;
return p === pageNumber;
});
}
if (itemToPrepare.content) {
itemToPrepare.update(content);
} else {
itemToPrepare.insert(content);
}
_this.setState({
items: [...(items || _this.state.items)],
currentPage: pageNumber
}, _this.callOnPageUpdate);
}
});
_defineProperty(this, "resetContent", () => {
clearTimeout(this.resetContentTimeout);
this.resetContentTimeout = setTimeout(() => {
this.setState({
items: []
});
}, 10);
});
_defineProperty(this, "resetInfinity", function () {
let pageNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.startupPage;
const lowerPage = pageNumber;
const upperPage = pageNumber + parseFloat(_this.props.startup_count) - 1;
const currentPage = pageNumber;
_this.setState({
items: [],
hasEndedInfinity: true,
lowerPage,
upperPage,
currentPage
});
_this.startInfinity();
});
_defineProperty(this, "startInfinity", () => {
this.setState({
hasEndedInfinity: false
});
});
_defineProperty(this, "endInfinity", () => {
this.setState({
hasEndedInfinity: true
}, () => {
const pageNumber = this.state.currentPage + 1;
dispatchCustomElementEvent(this, 'on_end', _objectSpread({
pageNumber
}, this));
});
});
_defineProperty(this, "setItems", (items, cb) => {
this.setState({
items
}, cb);
});
_defineProperty(this, "prefillItems", function (pageNumber) {
let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
let items = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.state.items;
const position = props.position || (pageNumber < _this.state.currentPage ? 'before' : 'after');
if (isNaN(pageNumber)) {
pageNumber = 1;
}
const exists = items.findIndex(_ref3 => {
let {
pageNumber: p
} = _ref3;
return p === pageNumber;
}) > -1;
if (exists) {
return items;
}
const obj = _objectSpread({
pageNumber,
position,
skipObserver: false
}, props);
switch (position) {
case 'before':
return [new ContentObject(obj), ...items];
case 'after':
return [...items, new ContentObject(obj)];
}
});
_defineProperty(this, "setStateHandler", (state, cb) => {
this.setState(_objectSpread({}, state), cb);
});
_defineProperty(this, "callOnPageUpdate", () => {
if (Array.isArray(this._updateStack)) {
this._updateStack.forEach(cb => {
if (typeof cb === 'function') {
cb();
}
});
this._updateStack = [];
}
});
_defineProperty(this, "updatePageContent", function () {
let pageNumber = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.currentPage;
let potentialElement = _this.props.internalContent;
if (typeof _this.props.internalContent === 'function') {
potentialElement = _this.props.internalContent(_objectSpread(_objectSpread({}, _this), {}, {
pageNumber,
page: pageNumber
}));
}
if (potentialElement && React.isValidElement(potentialElement)) {
_this.setContent([pageNumber, potentialElement]);
}
});
_defineProperty(this, "onPageUpdate", fn => {
this._updateStack = this._updateStack || [];
this._updateStack.push(fn);
});
this.state = {
items: [],
isLoading: false
};
if (_props.rerender) {
this.rerender = _ref4 => {
let {
current: store
} = _ref4;
if (store && store.pageNumber > 0) {
clearTimeout(this.rerenderTimeout);
this.rerenderTimeout = setTimeout(() => this.setContent(store.pageNumber, store.content), 1);
}
};
_props.rerender.current = this.rerender;
}
}
componentDidMount() {
const {
set_content_handler,
reset_content_handler,
reset_pagination_handler,
end_infinity_handler
} = this.props;
if (typeof set_content_handler === 'function') {
set_content_handler(this.setContent);
}
if (typeof reset_content_handler === 'function') {
reset_content_handler(this.resetContent);
}
if (typeof reset_pagination_handler === 'function') {
reset_pagination_handler(this.resetInfinity);
}
if (typeof end_infinity_handler === 'function') {
end_infinity_handler(this.endInfinity);
}
if (this.props.store && this.props.store.current) {
const store = this.props.store.current;
this.setContent(store.pageNumber, store.content);
}
this._isMounted = true;
this.updatePageContent(this.state.startupPage || this.state.currentPage);
}
componentWillUnmount() {
clearTimeout(this.rerenderTimeout);
clearTimeout(this.resetContentTimeout);
clearTimeout(this.resetInfinityTimeout);
clearTimeout(this.callOnPageUpdateTimeout);
this._isMounted = false;
}
componentDidUpdate(_ref5) {
let {
current_page: current,
internalContent: content
} = _ref5;
const {
internalContent,
current_page
} = this.props;
const currentPage = parseFloat(current_page);
if (current_page !== current) {
this.setState({
currentPage
});
this.updatePageContent(currentPage);
} else if (internalContent !== content) {
this.updatePageContent();
}
}
render() {
const {
children
} = this.props;
if (this.props.useMarkerOnly) {
clearTimeout(this.callOnPageUpdateTimeout);
this.callOnPageUpdateTimeout = setTimeout(this.callOnPageUpdate, 1);
}
return React.createElement(PaginationContext.Provider, {
value: _objectSpread(_objectSpread({}, this.context), {}, {
pagination: _objectSpread(_objectSpread({
updatePageContent: this.updatePageContent,
setContent: this.setContent,
resetContent: this.resetContent,
resetInfinity: this.resetInfinity,
endInfinity: this.endInfinity,
setItems: this.setItems,
prefillItems: this.prefillItems,
setState: this.setStateHandler,
onPageUpdate: this.onPageUpdate
}, this.props), this.state)
})
}, children);
}
}
_defineProperty(PaginationProvider, "contextType", Context);
_defineProperty(PaginationProvider, "defaultProps", {
startup_page: null,
current_page: null,
page_count: null,
set_content_handler: null,
reset_content_handler: null,
reset_pagination_handler: null,
end_infinity_handler: null,
rerender: null,
store: null,
useMarkerOnly: null,
internalContent: null,
children: null
});
process.env.NODE_ENV !== "production" ? PaginationProvider.propTypes = {
startup_page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
current_page: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
page_count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
set_content_handler: PropTypes.func,
reset_content_handler: PropTypes.func,
reset_pagination_handler: PropTypes.func,
end_infinity_handler: PropTypes.func,
rerender: PropTypes.shape({
current: PropTypes.func
}),
store: PropTypes.shape({
current: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
}),
useMarkerOnly: PropTypes.bool,
internalContent: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object, PropTypes.array]),
children: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node, PropTypes.object, PropTypes.array])
} : void 0;
//# sourceMappingURL=PaginationProvider.js.map