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

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.createPagination = exports.InfinityMarker = exports.Bar = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _PaginationContext = _interopRequireDefault(require("./PaginationContext.js"));
var _PaginationProvider = _interopRequireDefault(require("./PaginationProvider.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _SpacingHelper = require("../space/SpacingHelper.js");
var _PaginationHelpers = require("./PaginationHelpers.js");
var _PaginationInfinity = _interopRequireDefault(require("./PaginationInfinity.js"));
var _PaginationBar = _interopRequireDefault(require("./PaginationBar.js"));
var _InfinityScroller;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
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); }
const paginationPropTypes = process.env.NODE_ENV !== "production" ? {
  startup_page: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  current_page: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  page_count: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  startup_count: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  parallel_load_count: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  place_maker_before_content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  place_marker_before_content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  min_wait_time: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  disabled: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  skeleton: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  mode: _propTypes.default.oneOf(['pagination', 'infinity']),
  paginationBarLayout: _propTypes.default.oneOf(['vertical', 'horizontal']),
  use_load_button: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  items: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
  hide_progress_indicator: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
  set_content_handler: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
  reset_content_handler: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
  reset_pagination_handler: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
  end_infinity_handler: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
  page_element: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.node, _propTypes.default.func, _propTypes.default.string]),
  fallback_element: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.node, _propTypes.default.func, _propTypes.default.string]),
  marker_element: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.node, _propTypes.default.func, _propTypes.default.string]),
  indicator_element: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func, _propTypes.default.string]),
  align: _propTypes.default.string,
  button_title: _propTypes.default.string,
  prev_title: _propTypes.default.string,
  next_title: _propTypes.default.string,
  more_pages: _propTypes.default.string,
  is_loading_text: _propTypes.default.string,
  load_button_text: _propTypes.default.string,
  loadButton: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
  barSpace: _SpacingHelper.spacingPropTypes.space,
  ..._SpacingHelper.spacingPropTypes,
  className: _propTypes.default.string,
  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
  on_change: _propTypes.default.func,
  on_startup: _propTypes.default.func,
  on_load: _propTypes.default.func,
  on_end: _propTypes.default.func
} : {};
const paginationDefaultProps = {
  startup_page: null,
  current_page: null,
  page_count: null,
  mode: 'pagination',
  paginationBarLayout: 'vertical',
  use_load_button: false,
  items: null,
  hide_progress_indicator: false,
  set_content_handler: null,
  reset_content_handler: null,
  page_element: undefined,
  fallback_element: undefined,
  marker_element: undefined,
  indicator_element: undefined,
  align: 'left',
  button_title: null,
  prev_title: null,
  next_title: null,
  more_pages: null,
  is_loading_text: null,
  load_button_text: null,
  loadButton: null,
  barSpace: null,
  startup_count: 1,
  parallel_load_count: 1,
  place_maker_before_content: false,
  place_marker_before_content: false,
  min_wait_time: 400,
  disabled: null,
  skeleton: null,
  className: null,
  children: null,
  on_change: null,
  on_startup: null,
  on_load: null,
  on_end: null
};
class Pagination extends _react.default.PureComponent {
  render() {
    return _react.default.createElement(_PaginationProvider.default, _extends({
      tagName: "dnb-pagination",
      internalContent: this.props.children
    }, this.props), _react.default.createElement(PaginationInstance, this.props));
  }
}
exports.default = Pagination;
_defineProperty(Pagination, "defaultProps", paginationDefaultProps);
process.env.NODE_ENV !== "production" ? Pagination.propTypes = {
  ...paginationPropTypes
} : void 0;
class PaginationInstance extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this._contentRef = _react.default.createRef();
  }
  render() {
    const props = (0, _componentHelper.extendPropsWithContextInClassComponent)(this.props, paginationDefaultProps, this.context.getTranslation(this.props).Pagination, this.context.Pagination);
    const {
      align,
      children,
      className,
      barSpace,
      paginationBarLayout,
      disabled: _disabled,
      skeleton: _skeleton,
      tagName: _tagName,
      page_count: _page_count,
      current_page: _current_page,
      startup_page: _startup_page,
      mode: _mode,
      hide_progress_indicator: _hide_progress_indicator,
      use_load_button: _use_load_button,
      currentPage: _currentPage,
      ...attributes
    } = props;
    const {
      currentPage,
      items,
      fallback_element,
      indicator_element
    } = this.context.pagination;
    if (this.context.pagination.mode === 'pagination') {
      var _items$find;
      const mainParams = {
        className: (0, _classnames.default)('dnb-pagination', (0, _SpacingHelper.createSpacingClasses)(props), className, align && `dnb-pagination--${align}`, paginationBarLayout && `dnb-pagination--layout-${paginationBarLayout}`),
        ...attributes
      };
      (0, _componentHelper.validateDOMAttributes)(props, mainParams);
      const content = (_items$find = items.find(({
        pageNumber
      }) => pageNumber === currentPage)) === null || _items$find === void 0 ? void 0 : _items$find.content;
      return _react.default.createElement("div", mainParams, _react.default.createElement(_PaginationBar.default, {
        contentRef: this._contentRef,
        space: barSpace
      }, children), items.length > 0 && _react.default.createElement(PaginationContent, {
        ref: this._contentRef
      }, content || _react.default.createElement(_PaginationHelpers.PaginationIndicator, {
        indicator_element: indicator_element || fallback_element
      })));
    }
    return _InfinityScroller || (_InfinityScroller = _react.default.createElement(_PaginationInfinity.default, null));
  }
}
_defineProperty(PaginationInstance, "defaultProps", paginationDefaultProps);
_defineProperty(PaginationInstance, "contextType", _PaginationContext.default);
process.env.NODE_ENV !== "production" ? PaginationInstance.propTypes = {
  ...paginationPropTypes
} : void 0;
class InfinityMarker extends _react.default.PureComponent {
  render() {
    const {
      children,
      ...props
    } = this.props;
    return _react.default.createElement(_PaginationProvider.default, _extends({
      useMarkerOnly: true,
      tagName: "dnb-infinity-marker"
    }, props), _react.default.createElement(_PaginationInfinity.default, props, children));
  }
}
exports.InfinityMarker = InfinityMarker;
_defineProperty(InfinityMarker, "defaultProps", paginationDefaultProps);
process.env.NODE_ENV !== "production" ? InfinityMarker.propTypes = {
  ...paginationPropTypes
} : void 0;
const PaginationContent = _react.default.forwardRef(({
  children,
  ...props
}, ref) => {
  return _react.default.createElement("div", _extends({
    className: "dnb-pagination__content dnb-no-focus",
    tabIndex: "-1"
  }, props, {
    ref: ref
  }), children);
});
process.env.NODE_ENV !== "production" ? PaginationContent.propTypes = {
  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired
} : void 0;
Pagination.Bar = _PaginationBar.default;
Pagination.Content = PaginationContent;
const PaginationWrapper = Pagination;
const InfinityMarkerWrapper = InfinityMarker;
const Bar = props => _react.default.createElement(Pagination, _extends({
  fallback_element: () => null
}, props));
exports.Bar = Bar;
const createPagination = (initProps = {}) => {
  const store = _react.default.createRef({});
  const rerender = _react.default.createRef(null);
  const _setContent = _react.default.createRef(null);
  const _resetContent = _react.default.createRef(null);
  const _resetInfinity = _react.default.createRef(null);
  const _endInfinity = _react.default.createRef(null);
  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,
    set_content_handler: fn => _setContent.current = fn,
    reset_content_handler: fn => _resetContent.current = fn,
    reset_pagination_handler: fn => _resetInfinity.current = fn,
    end_infinity_handler: fn => _endInfinity.current = fn
  });
  const Pagination = props => _react.default.createElement(PaginationWrapper, _extends({
    tagName: "dnb-pagination"
  }, args(props)));
  const InfinityMarker = props => _react.default.createElement(InfinityMarkerWrapper, _extends({
    tagName: InfinityMarkerWrapper === null || InfinityMarkerWrapper === void 0 ? void 0 : InfinityMarkerWrapper.tagName
  }, args(props)));
  return {
    Pagination,
    InfinityMarker,
    setContent,
    resetContent,
    resetInfinity,
    endInfinity
  };
};
exports.createPagination = createPagination;
Pagination._supportsSpacingProps = true;
//# sourceMappingURL=Pagination.js.map