@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
256 lines (255 loc) • 8.54 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Bar = void 0;
exports.InfinityMarker = InfinityMarker;
exports.default = exports.createPagination = void 0;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _PaginationContext = _interopRequireDefault(require("./PaginationContext.js"));
var _PaginationProvider = _interopRequireDefault(require("./PaginationProvider.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _PaginationHelpers = require("./PaginationHelpers.js");
var _PaginationInfinity = _interopRequireDefault(require("./PaginationInfinity.js"));
var _PaginationBar = _interopRequireDefault(require("./PaginationBar.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
var _InfinityScroller;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const paginationDefaultProps = {
startupPage: null,
currentPage: null,
pageCount: null,
mode: 'pagination',
paginationBarLayout: 'vertical',
useLoadButton: false,
items: null,
hideProgressIndicator: false,
setContentHandler: null,
resetContentHandler: null,
pageElement: undefined,
fallbackElement: undefined,
markerElement: undefined,
indicatorElement: undefined,
align: 'left',
buttonTitle: null,
prevTitle: null,
nextTitle: null,
morePages: null,
isLoadingText: null,
loadButton: null,
barSpace: null,
startupCount: 1,
parallelLoadCount: 1,
placeMarkerBeforeContent: false,
minWaitTime: 400,
disabled: null,
skeleton: null,
className: null,
children: null,
onChange: null,
onStartup: null,
onLoad: null,
onEnd: null
};
function PaginationFunc(props) {
const mergedProps = {
...paginationDefaultProps,
...props
};
return (0, _jsxRuntime.jsx)(_PaginationProvider.default, {
tagName: "dnb-pagination",
internalContent: mergedProps.children,
...mergedProps,
children: (0, _jsxRuntime.jsx)(PaginationInstance, {
...mergedProps
})
});
}
const Pagination = PaginationFunc;
var _default = exports.default = Pagination;
const PaginationInstance = _react.default.memo(function PaginationInstance(ownProps) {
const ctx = (0, _react.useContext)(_PaginationContext.default);
const contentRef = (0, _react.useRef)(null);
const props = (0, _componentHelper.extendExistingPropsWithContext)(ownProps, paginationDefaultProps, ctx.getTranslation(ownProps).Pagination, ctx.Pagination);
const {
align: _align,
children: _children,
className: _className,
barSpace: _barSpace,
paginationBarLayout: _paginationBarLayout,
disabled: _disabled,
skeleton: _skeleton,
tagName: _tagName,
pageCount: _page_count,
currentPage: _current_page,
startupPage: _startupPage,
mode: _mode,
hideProgressIndicator: _hideProgressIndicator,
useLoadButton: _useLoadButton,
currentPageInternal: _currentPage,
markerElement: _markerElement,
fallbackElement: _fallbackElement,
setContentHandler: _setContentHandler,
resetContentHandler: _resetContentHandler,
resetPaginationHandler: _resetPaginationHandler,
endInfinityHandler: _endInfinityHandler,
minWaitTime: _minWaitTime,
pageElement: _pageElement,
startupCount: _startupCount,
parallelLoadCount: _parallelLoadCount,
buttonTitle: _buttonTitle,
prevTitle: _prevTitle,
nextTitle: _nextTitle,
morePages: _morePages,
isLoadingText: _isLoadingText,
loadButton: _loadButton,
indicatorElement: _indicatorElement,
placeMarkerBeforeContent: _placeMarkerBeforeContent,
...attributes
} = props;
const {
align,
children,
className,
barSpace,
paginationBarLayout
} = props;
const {
currentPageInternal,
items,
fallbackElement,
indicatorElement
} = ctx.pagination;
if (ctx.pagination.mode === 'pagination') {
var _items$find;
const mainParams = (0, _SpacingUtils.applySpacing)(props, {
className: (0, _clsx.default)('dnb-pagination', className, align && `dnb-pagination--${align}`, paginationBarLayout && `dnb-pagination--layout-${paginationBarLayout}`),
...attributes
});
(0, _componentHelper.validateDOMAttributes)(props, mainParams);
const content = (_items$find = items.find(({
pageNumber
}) => pageNumber === currentPageInternal)) === null || _items$find === void 0 ? void 0 : _items$find.content;
return (0, _jsxRuntime.jsxs)("div", {
...mainParams,
children: [(0, _jsxRuntime.jsx)(_PaginationBar.default, {
contentRef: contentRef,
space: barSpace,
children: children
}), items.length > 0 && (0, _jsxRuntime.jsx)(PaginationContent, {
ref: contentRef,
children: content || (0, _jsxRuntime.jsx)(_PaginationHelpers.PaginationIndicator, {
indicatorElement: indicatorElement || fallbackElement
})
})]
});
}
return _InfinityScroller || (_InfinityScroller = (0, _jsxRuntime.jsx)(_PaginationInfinity.default, {}));
});
function InfinityMarker(props) {
const {
children,
...rest
} = {
...paginationDefaultProps,
...(0, _componentHelper.removeUndefinedProps)({
...props
})
};
return (0, _jsxRuntime.jsx)(_PaginationProvider.default, {
useMarkerOnly: true,
tagName: "dnb-infinity-marker",
...rest,
children: (0, _jsxRuntime.jsx)(_PaginationInfinity.default, {
...rest,
children: children
})
});
}
function PaginationContent({
children,
ref,
...props
}) {
return (0, _jsxRuntime.jsx)("div", {
className: "dnb-pagination__content dnb-no-focus",
tabIndex: -1,
...props,
ref: ref,
children: children
});
}
Pagination.Bar = _PaginationBar.default;
Pagination.Content = PaginationContent;
const PaginationWrapper = PaginationFunc;
const InfinityMarkerWrapper = InfinityMarker;
const Bar = props => (0, _jsxRuntime.jsx)(Pagination, {
fallbackElement: () => null,
...props
});
exports.Bar = Bar;
const createPagination = (initProps = {}) => {
const store = _react.default.createRef();
const rerender = _react.default.createRef();
const _setContent = _react.default.createRef();
const _resetContent = _react.default.createRef();
const _resetInfinity = _react.default.createRef();
const _endInfinity = _react.default.createRef();
const setContent = (pageNumber, content) => {
if (pageNumber > 0) {
store.current = {
...store.current,
...{
pageNumber,
content
}
};
rerender.current && rerender.current(store);
}
};
const resetContent = () => {
_resetContent.current && _resetContent.current();
};
const resetInfinity = () => {
_resetInfinity.current && _resetInfinity.current();
};
const endInfinity = () => {
_endInfinity.current && _endInfinity.current();
};
const args = props => ({
...{
...initProps,
...props
},
store,
rerender,
setContentHandler: fn => _setContent.current = fn,
resetContentHandler: fn => _resetContent.current = fn,
resetPaginationHandler: fn => _resetInfinity.current = fn,
endInfinityHandler: fn => _endInfinity.current = fn
});
const Pagination = props => (0, _jsxRuntime.jsx)(PaginationWrapper, {
...args(props)
});
const InfinityMarker = props => (0, _jsxRuntime.jsx)(InfinityMarkerWrapper, {
...args(props)
});
return {
Pagination,
InfinityMarker,
setContent,
resetContent,
resetInfinity,
endInfinity
};
};
exports.createPagination = createPagination;
(0, _withComponentMarkers.default)(Pagination, {
_supportsSpacingProps: true
});
//# sourceMappingURL=Pagination.js.map