@wavemaker/react-runtime 11.14.1-rc.236

package/components/data/pagination/components/PageSizeSelector.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageSizeSelector = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _constants = require("../../list/utils/constants");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var PageSizeSelector = exports.PageSizeSelector = function PageSizeSelector(_ref) {
+  var _ref$pagesizeoptions = _ref.pagesizeoptions,
+    pagesizeoptions = _ref$pagesizeoptions === void 0 ? "5,10,20,50,100" : _ref$pagesizeoptions,
+    _ref$maxResults = _ref.maxResults,
+    maxResults = _ref$maxResults === void 0 ? 10 : _ref$maxResults,
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+    _ref$dataSize = _ref.dataSize,
+    dataSize = _ref$dataSize === void 0 ? 0 : _ref$dataSize,
+    paginationMeta = _ref.paginationMeta,
+    onPageSizeChange = _ref.onPageSizeChange;
+  // Parse page size options and include paginationMeta.size if available
+  var options = (0, _react.useMemo)(function () {
+    var parsedOptions = pagesizeoptions.split(",").map(function (opt) {
+      return parseInt(opt.trim(), 10);
+    }).filter(function (opt) {
+      return !isNaN(opt);
+    });
+
+    // Add paginationMeta.size to options if it exists and is not already included
+    if (paginationMeta !== null && paginationMeta !== void 0 && paginationMeta.size && !parsedOptions.includes(paginationMeta.size)) {
+      parsedOptions.unshift(paginationMeta.size); // Add it to the beginning
+      parsedOptions.sort(function (a, b) {
+        return a - b;
+      }); // Sort in ascending order
+    }
+    return parsedOptions;
+  }, [pagesizeoptions, paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.size]);
+
+  // Use paginationMeta.size as the effective maxResults if available
+  var effectiveMaxResults = (0, _react.useMemo)(function () {
+    return (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.size) || maxResults;
+  }, [paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.size, maxResults]);
+
+  // Calculate row summary
+  var rowSummary = (0, _react.useMemo)(function () {
+    if (!dataSize) {
+      return null;
+    }
+    var startIndex = Math.min((currentPage - 1) * effectiveMaxResults + 1, dataSize);
+    var endIndex = Math.min(currentPage * effectiveMaxResults, dataSize);
+    return {
+      startIndex: startIndex,
+      endIndex: endIndex,
+      totalRecords: dataSize
+    };
+  }, [currentPage, effectiveMaxResults, dataSize]);
+  var handleChange = function handleChange(event) {
+    var newValue = Number(event.target.value);
+    if (onPageSizeChange) {
+      onPageSizeChange(event, newValue);
+    }
+  };
+  return __jsx(_Box["default"], {
+    sx: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      gap: 2
+    },
+    className: "pagination page-size-selector"
+  }, __jsx(_Box["default"], {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: 1
+    }
+  }, __jsx(_Typography["default"], {
+    component: "label",
+    sx: {
+      fontSize: "14px",
+      color: "text.primary",
+      whiteSpace: "nowrap"
+    },
+    title: _constants.APP_LOCALE.LABEL_ITEMS_PER_PAGE
+  }, _constants.APP_LOCALE.LABEL_ITEMS_PER_PAGE, " :"), __jsx(_FormControl["default"], {
+    size: "small",
+    sx: {
+      minWidth: 70,
+      "& .MuiInputBase-root": {
+        height: "auto"
+      }
+    }
+  }, __jsx(_Select["default"], {
+    id: "page-size-select",
+    value: effectiveMaxResults,
+    onChange: handleChange,
+    sx: {
+      fontSize: "14px",
+      minHeight: "auto",
+      "& .MuiSelect-select": {
+        paddingTop: "6px",
+        paddingBottom: "6px",
+        paddingLeft: "10px",
+        paddingRight: "32px",
+        // Space for dropdown arrow
+        minHeight: "auto"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderColor: "rgba(0, 0, 0, 0.23)"
+      }
+    },
+    MenuProps: {
+      PaperProps: {
+        sx: {
+          maxHeight: 300,
+          "& .MuiMenuItem-root": {
+            fontSize: "14px",
+            padding: "6px 16px",
+            // Override any global padding
+            margin: 0 // Override any global margin
+          },
+          "& .MuiList-root": {
+            padding: "8px 0" // Ensure proper list padding
+          },
+          "& li": {
+            padding: 0,
+            // Override global li padding
+            margin: 0 // Override global li margin
+          }
+        }
+      },
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      }
+    }
+  }, options.map(function (option) {
+    return __jsx(_MenuItem["default"], {
+      key: option,
+      value: option
+    }, option);
+  })))), rowSummary && __jsx(_Box["default"], {
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      gap: 0.5
+    }
+  }, __jsx(_Typography["default"], {
+    sx: {
+      fontSize: "14px",
+      color: "text.primary"
+    }
+  }, __jsx(_Box["default"], {
+    component: "span"
+  }, rowSummary.startIndex, " - ", rowSummary.endIndex), __jsx(_Box["default"], {
+    component: "span",
+    sx: {
+      mx: 0.5
+    }
+  }, "\xA0of\xA0"), __jsx(_Box["default"], {
+    component: "span"
+  }, rowSummary.totalRecords))));
+};

package/components/data/pagination/components/PagerNavigation.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PagerNavigation = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _styles = require("@mui/material/styles");
+var _constants = require("../../list/utils/constants");
+var __jsx = _react["default"].createElement;
+var StyledPaginationList = (0, _styles.styled)("ul")(function () {
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    padding: 0,
+    margin: 0,
+    listStyle: "none"
+  };
+});
+var StyledPaginationItem = (0, _styles.styled)("li")(function () {
+  return {
+    margin: "0 2px",
+    "&.disabled": {
+      opacity: 0.38,
+      pointerEvents: "none"
+    }
+  };
+});
+var PagerNavigation = exports.PagerNavigation = function PagerNavigation(_ref) {
+  var navigationClass = _ref.navigationClass,
+    isDisablePrevious = _ref.isDisablePrevious,
+    isDisableNext = _ref.isDisableNext,
+    onNavigate = _ref.onNavigate;
+  return __jsx(StyledPaginationList, {
+    className: (0, _clsx["default"])("pager", navigationClass)
+  }, __jsx(StyledPaginationItem, {
+    className: (0, _clsx["default"])("previous", {
+      disabled: isDisablePrevious
+    })
+  }, __jsx(_Box["default"], {
+    component: "a",
+    href: "#",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onNavigate("prev", e);
+    },
+    "aria-disabled": isDisablePrevious ? "true" : "false",
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      padding: "6px 12px",
+      textDecoration: "none",
+      cursor: isDisablePrevious ? "not-allowed" : "pointer",
+      opacity: isDisablePrevious ? 0.5 : 1,
+      color: "inherit"
+    }
+  }, __jsx(_Box["default"], {
+    component: "span",
+    "aria-hidden": "true",
+    sx: {
+      mr: 1
+    }
+  }, __jsx("i", {
+    className: "wi wi-chevron-left"
+  })), _constants.APP_LOCALE.LABEL_PREVIOUS, __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, isDisablePrevious ? " , Disabled" : ""))), __jsx(StyledPaginationItem, {
+    className: (0, _clsx["default"])("next", {
+      disabled: isDisableNext
+    })
+  }, __jsx(_Box["default"], {
+    component: "a",
+    href: "#",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      onNavigate("next", e);
+    },
+    "aria-disabled": isDisableNext ? "true" : "false",
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      padding: "6px 12px",
+      textDecoration: "none",
+      cursor: isDisableNext ? "not-allowed" : "pointer",
+      opacity: isDisableNext ? 0.5 : 1,
+      color: "inherit"
+    }
+  }, _constants.APP_LOCALE.LABEL_NEXT, __jsx(_Box["default"], {
+    component: "span",
+    "aria-hidden": "true",
+    sx: {
+      ml: 1
+    }
+  }, __jsx("i", {
+    className: "wi wi-chevron-right"
+  })), __jsx(_Box["default"], {
+    component: "span",
+    className: "sr-only"
+  }, isDisableNext ? " , Disabled" : ""))));
+};

package/components/data/pagination/components/TotalRecords.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TotalRecords = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _styles = require("@mui/material/styles");
+var _constants = require("../../list/utils/constants");
+var __jsx = _react["default"].createElement;
+var StyledPaginationList = (0, _styles.styled)("ul")(function () {
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    padding: 0,
+    margin: 0,
+    listStyle: "none"
+  };
+});
+var StyledPaginationItem = (0, _styles.styled)("li")(function () {
+  return {
+    margin: "0 2px",
+    "&.disabled": {
+      opacity: 0.38,
+      pointerEvents: "none"
+    }
+  };
+});
+var TotalRecords = exports.TotalRecords = function TotalRecords(_ref) {
+  var dataSize = _ref.dataSize,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? _constants.LIST_NAVIGATION_TYPES.BASIC : _ref$variant;
+  return __jsx(StyledPaginationList, {
+    className: "pagination"
+  }, __jsx(StyledPaginationItem, {
+    className: "totalcount disabled ".concat(variant === _constants.LIST_NAVIGATION_TYPES.BASIC ? "basiccount" : "")
+  }, __jsx(_Box["default"], {
+    component: variant === _constants.LIST_NAVIGATION_TYPES.BASIC ? "a" : "span",
+    href: variant === _constants.LIST_NAVIGATION_TYPES.BASIC ? "#" : undefined,
+    tabIndex: -1,
+    "aria-disabled": "true",
+    sx: {
+      display: "block",
+      padding: "6px 12px",
+      fontSize: "14px",
+      userSelect: "none"
+    }
+  }, _constants.APP_LOCALE.LABEL_TOTAL_RECORDS, ": ", dataSize)));
+};

package/components/data/pagination/components/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BasicPagination", {
+  enumerable: true,
+  get: function get() {
+    return _BasicPagination.BasicPagination;
+  }
+});
+Object.defineProperty(exports, "ClassicPagination", {
+  enumerable: true,
+  get: function get() {
+    return _ClassicPagination.ClassicPagination;
+  }
+});
+Object.defineProperty(exports, "InlineNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _InlinePagination.InlineNavigation;
+  }
+});
+Object.defineProperty(exports, "PageSizeSelector", {
+  enumerable: true,
+  get: function get() {
+    return _PageSizeSelector.PageSizeSelector;
+  }
+});
+Object.defineProperty(exports, "PagerNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _PagerNavigation.PagerNavigation;
+  }
+});
+Object.defineProperty(exports, "TotalRecords", {
+  enumerable: true,
+  get: function get() {
+    return _TotalRecords.TotalRecords;
+  }
+});
+var _BasicPagination = require("./BasicPagination");
+var _ClassicPagination = require("./ClassicPagination");
+var _InlinePagination = require("./InlinePagination");
+var _PagerNavigation = require("./PagerNavigation");
+var _TotalRecords = require("./TotalRecords");
+var _PageSizeSelector = require("./PageSizeSelector");

package/components/data/pagination/components/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/data/pagination/hooks/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useNavigationSize", {
+  enumerable: true,
+  get: function get() {
+    return _useNavigationSize.useNavigationSize;
+  }
+});
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function get() {
+    return _usePagination.usePagination;
+  }
+});
+var _usePagination = require("./usePagination");
+var _useNavigationSize = require("./useNavigationSize");

package/components/data/pagination/hooks/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/data/pagination/hooks/useNavigationSize.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavigationSize = void 0;
+var _react = require("react");
+var useNavigationSize = exports.useNavigationSize = function useNavigationSize(_ref) {
+  var navigation = _ref.navigation,
+    navigationsize = _ref.navigationsize;
+  var _useState = (0, _react.useState)(""),
+    navigationClass = _useState[0],
+    setNavigationClass = _useState[1];
+
+  // Update navigation size based on navigation and navigationSize props
+  var updateNavSize = (0, _react.useCallback)(function () {
+    var sizeClasses = {
+      Pager: {
+        small: "pager-sm",
+        large: "pager-lg"
+      },
+      Basic: {
+        small: "pagination-sm",
+        large: "pagination-lg"
+      },
+      Classic: {
+        small: "pagination-sm",
+        large: "pagination-lg"
+      }
+    };
+    if (navigation && navigationsize && sizeClasses[navigation]) {
+      setNavigationClass(sizeClasses[navigation][navigationsize]);
+    } else {
+      setNavigationClass("");
+    }
+  }, [navigation, navigationsize]);
+  (0, _react.useEffect)(function () {
+    updateNavSize();
+  }, [updateNavSize]);
+  return {
+    navigationClass: navigationClass,
+    updateNavSize: updateNavSize
+  };
+};