@dnb/eufemia/components/pagination/Pagination.js

DNB Eufemia Design System UI Library

"use client";

var _InfinityScroller;
import React, { useContext, useRef } from 'react';
import clsx from 'clsx';
import PaginationContext from "./PaginationContext.js";
import PaginationProvider from "./PaginationProvider.js";
import { validateDOMAttributes, extendExistingPropsWithContext, removeUndefinedProps } from "../../shared/component-helper.js";
import { applySpacing } from "../space/SpacingUtils.js";
import { PaginationIndicator } from "./PaginationHelpers.js";
import InfinityScroller from "./PaginationInfinity.js";
import PaginationBar from "./PaginationBar.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 _jsx(PaginationProvider, {
    tagName: "dnb-pagination",
    internalContent: mergedProps.children,
    ...mergedProps,
    children: _jsx(PaginationInstance, {
      ...mergedProps
    })
  });
}
const Pagination = PaginationFunc;
export default Pagination;
const PaginationInstance = React.memo(function PaginationInstance(ownProps) {
  const ctx = useContext(PaginationContext);
  const contentRef = useRef(null);
  const props = 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 = applySpacing(props, {
      className: clsx('dnb-pagination', className, align && `dnb-pagination--${align}`, paginationBarLayout && `dnb-pagination--layout-${paginationBarLayout}`),
      ...attributes
    });
    validateDOMAttributes(props, mainParams);
    const content = (_items$find = items.find(({
      pageNumber
    }) => pageNumber === currentPageInternal)) === null || _items$find === void 0 ? void 0 : _items$find.content;
    return _jsxs("div", {
      ...mainParams,
      children: [_jsx(PaginationBar, {
        contentRef: contentRef,
        space: barSpace,
        children: children
      }), items.length > 0 && _jsx(PaginationContent, {
        ref: contentRef,
        children: content || _jsx(PaginationIndicator, {
          indicatorElement: indicatorElement || fallbackElement
        })
      })]
    });
  }
  return _InfinityScroller || (_InfinityScroller = _jsx(InfinityScroller, {}));
});
export function InfinityMarker(props) {
  const {
    children,
    ...rest
  } = {
    ...paginationDefaultProps,
    ...removeUndefinedProps({
      ...props
    })
  };
  return _jsx(PaginationProvider, {
    useMarkerOnly: true,
    tagName: "dnb-infinity-marker",
    ...rest,
    children: _jsx(InfinityScroller, {
      ...rest,
      children: children
    })
  });
}
function PaginationContent({
  children,
  ref,
  ...props
}) {
  return _jsx("div", {
    className: "dnb-pagination__content dnb-no-focus",
    tabIndex: -1,
    ...props,
    ref: ref,
    children: children
  });
}
Pagination.Bar = PaginationBar;
Pagination.Content = PaginationContent;
const PaginationWrapper = PaginationFunc;
const InfinityMarkerWrapper = InfinityMarker;
export const Bar = props => _jsx(Pagination, {
  fallbackElement: () => null,
  ...props
});
export const createPagination = (initProps = {}) => {
  const store = React.createRef();
  const rerender = React.createRef();
  const _setContent = React.createRef();
  const _resetContent = React.createRef();
  const _resetInfinity = React.createRef();
  const _endInfinity = React.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 => _jsx(PaginationWrapper, {
    ...args(props)
  });
  const InfinityMarker = props => _jsx(InfinityMarkerWrapper, {
    ...args(props)
  });
  return {
    Pagination,
    InfinityMarker,
    setContent,
    resetContent,
    resetInfinity,
    endInfinity
  };
};
withComponentMarkers(Pagination, {
  _supportsSpacingProps: true
});
//# sourceMappingURL=Pagination.js.map