@vnmfify/core/pagination/pagination.js

```shell npm i @vnmfify/core -S ```

var _excluded = ["className", "current", "siblingCount", "count", "children", "onChange"],
    _excluded2 = ["className", "page", "type", "disabled", "children", "onClick"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { View } from "@vnxjs/components";
import classNames from "classnames";
import * as React from "react";
import { Children, cloneElement, isValidElement, useContext, useMemo } from "react";
import { prefixClassname } from "../styles";
import { HAIRLINE_BORDER } from "../styles/hairline";
import PaginationContext from "./pagination.context";
import { ItemType } from "./pagination.shared";

function rangePages(start, end) {
  var length = end - start + 1;
  return Array.from({
    length
  }, (_, i) => start + i);
}

export function makePageItems(start, end) {
  return rangePages(start, end).map(page => /*#__PURE__*/React.createElement(Pagination.Item, {
    key: page,
    page: page
  }));
}

function usePagination(options) {
  var {
    current,
    count,
    siblingCount,
    children
  } = options;
  var siblingRange = siblingCount * 2 + 1;
  var start = Math.max(current - siblingCount, 1);
  var end = start + siblingRange - 1;

  if (end > count) {
    end = count;
    start = Math.max(end - siblingRange + 1, 1);
  }

  var hasPrevious = current > 1;
  var hasStartEllipsis = start > 1;
  var hasEndEllipsis = end < count;
  var hasNext = current < count;
  var items = useMemo(() => makePageItems(start, end), [start, end]);
  var __children__ = {
    previous: undefined,
    startEllipsis: undefined,
    items,
    next: undefined
  };
  Children.forEach(children, child => {
    if (! /*#__PURE__*/isValidElement(child)) {
      return;
    }

    var element = child;
    var elementType = element.type;

    if (elementType === Pagination.Item) {
      var {
        type: itemType
      } = element.props;

      if (itemType === ItemType.Previous && __children__.previous === undefined) {
        __children__.previous = /*#__PURE__*/cloneElement(element, {
          disabled: !hasPrevious
        });
      } else if (itemType === ItemType.StartEllipsis && __children__.startEllipsis === undefined && hasStartEllipsis) {
        __children__.startEllipsis = element;
      } else if (itemType === ItemType.EndEllipsis && hasEndEllipsis) {
        __children__.endEllipsis = element;
      } else if (itemType === ItemType.Next) {
        __children__.next = /*#__PURE__*/cloneElement(element, {
          disabled: !hasNext
        });
      }
    }
  });

  if (__children__.previous === undefined) {
    __children__.previous = /*#__PURE__*/React.createElement(Pagination.Item, {
      page: Number.MIN_SAFE_INTEGER,
      type: "previous",
      disabled: !hasPrevious
    });
  }

  if (__children__.next === undefined) {
    __children__.next = /*#__PURE__*/React.createElement(Pagination.Item, {
      page: Number.MAX_SAFE_INTEGER,
      type: "next",
      disabled: !hasNext
    });
  }

  return __children__;
}

function Pagination(props) {
  var {
    className,
    current = 1,
    siblingCount = 2,
    count = 1,
    children,
    onChange
  } = props,
      restProps = _objectWithoutProperties(props, _excluded);

  var {
    previous,
    startEllipsis,
    items,
    endEllipsis,
    next
  } = usePagination({
    current,
    siblingCount,
    count,
    children
  });

  function emitClick(page) {
    var {
      page: pageNumber
    } = page;
    var siblingRange = siblingCount * 2 + 1;

    if (page.type === ItemType.Previous) {
      onChange === null || onChange === void 0 ? void 0 : onChange(Math.max(current - 1, 1));
    } else if (page.type === ItemType.StartEllipsis) {
      onChange === null || onChange === void 0 ? void 0 : onChange(Math.max(current - siblingRange, 1));
    } else if (page.type === ItemType.Page) {
      onChange === null || onChange === void 0 ? void 0 : onChange(pageNumber);
    } else if (page.type === ItemType.EndEllipsis) {
      onChange === null || onChange === void 0 ? void 0 : onChange(Math.min(current + siblingRange, count));
    } else if (page.type === ItemType.Next) {
      onChange === null || onChange === void 0 ? void 0 : onChange(Math.min(current + 1, count));
    }
  }

  return /*#__PURE__*/React.createElement(View, _objectSpread({
    className: classNames(prefixClassname("pagination"), className)
  }, restProps), /*#__PURE__*/React.createElement(PaginationContext.Provider, {
    value: {
      current,
      count,
      siblingCount,
      emitClick
    }
  }, previous, startEllipsis, items, endEllipsis, next));
}

(function (Pagination) {
  function BaseItem(props) {
    var {
      className,
      style,
      hidden,
      disabled,
      children,
      onClick
    } = props;
    return /*#__PURE__*/React.createElement(View, {
      className: classNames(prefixClassname("pagination__item"), HAIRLINE_BORDER, {
        [prefixClassname("pagination__item--disabled")]: disabled,
        [prefixClassname("pagination__item--hidden")]: hidden
      }, className),
      style: style,
      children: children,
      onClick: onClick
    });
  }

  function Item(props) {
    var {
      className,
      page = 0,
      type = ItemType.Page,
      disabled = false,
      children,
      onClick
    } = props,
        restProps = _objectWithoutProperties(props, _excluded2);

    var {
      current,
      emitClick
    } = useContext(PaginationContext);
    var active = page === current;

    function renderChildren() {
      var __children__ = children;

      if (__children__ === undefined) {
        if (type === ItemType.Previous) {
          __children__ = "Previous Page";
        } else if (type === ItemType.StartEllipsis || type === ItemType.EndEllipsis) {
          __children__ = "...";
        } else if (type === ItemType.Next) {
          __children__ = "Next Page";
        } else if (type === ItemType.Page) {
          __children__ = page;
        }
      }

      return __children__;
    }

    return /*#__PURE__*/React.createElement(BaseItem, _objectSpread({
      className: classNames({
        [prefixClassname("pagination__item--active")]: !disabled && active,
        [prefixClassname("pagination__page")]: type === ItemType.Page,
        [prefixClassname("pagination__start-ellipsis")]: type === ItemType.StartEllipsis,
        [prefixClassname("pagination__end-ellipsis")]: type === ItemType.EndEllipsis,
        [prefixClassname("pagination__button")]: type === ItemType.Previous || ItemType.Next
      }, className),
      disabled: disabled && !active,
      children: renderChildren(),
      onClick: () => emitClick === null || emitClick === void 0 ? void 0 : emitClick({
        page,
        type: type
      })
    }, restProps));
  }

  Pagination.Item = Item;
})(Pagination || (Pagination = {}));

export default Pagination;
//# sourceMappingURL=pagination.js.map