@prefect9/ui/components/TablePages.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/es.parse-float.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("@prefect9/is-type");
var _icons = _interopRequireDefault(require("../icons"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function TablePages(_ref) {
  let {
    page,
    setPage,
    pages
  } = _ref;
  const [activePrevious, activeNext, map] = (0, _react.useMemo)(() => {
    let parsedPage = parseFloat(page);
    if (parsedPage < 1) parsedPage = 1;
    let parsedPages = parseFloat(pages);
    if (parsedPage > parsedPages) parsedPage = parsedPages;
    let activePrevious = false;
    let activeNext = false;
    const map = [];
    if (parsedPage > 1) activePrevious = true;
    if (parsedPage < parsedPages) activeNext = true;
    if (parsedPage != 1) map.push({
      type: "page",
      number: 1
    });
    if (parsedPage - 2 > 2) map.push({
      type: "dots"
    });
    if (parsedPage - 2 > 1) map.push({
      type: "page",
      number: parsedPage - 2
    });
    if (parsedPage - 1 > 1) map.push({
      type: "page",
      number: parsedPage - 1
    });
    map.push({
      type: "page",
      number: parsedPage,
      active: true
    });
    if (parsedPage + 1 < parsedPages) map.push({
      type: "page",
      number: parsedPage + 1
    });
    if (parsedPage + 2 < parsedPages) map.push({
      type: "page",
      number: parsedPage + 2
    });
    if (parsedPage + 2 < parsedPages - 1) map.push({
      type: "dots"
    });
    if (parsedPage != parsedPages) map.push({
      type: "page",
      number: parsedPages
    });
    return [activePrevious, activeNext, map];
  }, [page, pages]);
  const setPageHandler = (0, _react.useCallback)((e, page) => {
    e.preventDefault();
    if (!(0, _isType.isFunc)(setPage)) return;
    setPage(page);
  }, [setPage]);
  const previousHandler = (0, _react.useCallback)(e => {
    e.preventDefault();
    const parsedPage = parseFloat(page);
    if (parsedPage <= 1) return;
    setPageHandler(e, parsedPage - 1);
  }, [page, setPageHandler]);
  const nextHandler = (0, _react.useCallback)(e => {
    e.preventDefault();
    const parsedPage = parseFloat(page);
    const parsedPages = parseFloat(pages);
    if (parsedPage >= parsedPages) return;
    setPageHandler(e, parsedPage + 1);
  }, [page, pages, setPageHandler]);
  const pagesList = (0, _react.useMemo)(() => {
    const result = [];
    for (let index in map) {
      const page = map[index];
      if (page.type === 'page') result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "prefect9-table__page ".concat((0, _isType.isTrue)(page.active) ? 'prefect9-table__page-active' : ''),
        onClick: e => setPageHandler(e, page.number),
        onMouseDown: e => e.preventDefault(),
        children: page.number
      }, index));else if (page.type === 'dots') result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "prefect9-table__page prefect9-table__page-dots",
        children: "..."
      }, index));else throw new Error("Invalid page type ".concat(page.type));
    }
    return result;
  }, [map, setPageHandler]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "prefect9-table__pages",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "prefect9-table__pages-previous ".concat(!(0, _isType.isTrue)(activePrevious) ? 'prefect9-table__pages-previous-disabled' : ''),
      onClick: previousHandler,
      onMouseDown: e => e.preventDefault(),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.default.ArrowLeft, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "prefect9-table__pages-list",
      children: pagesList
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "prefect9-table__pages-next ".concat(!(0, _isType.isTrue)(activeNext) ? 'prefect9-table__pages-next-disabled' : ''),
      onClick: nextHandler,
      onMouseDown: e => e.preventDefault(),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.default.ArrowRight, {})
    })]
  });
}
var _default = exports.default = TablePages;