@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/data/pagination/components/InlinePagination.js

@@ -0,0 +1,98 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import clsx from "clsx";
+const InlineNavigation = ({
+  navigation,
+  currentPage,
+  totalPages,
+  noDataFound,
+  onPageChange,
+  children,
+  isLoading = false,
+  showNavigation = true
+}) => {
+  if (navigation !== "Inline" || noDataFound || !showNavigation) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: "auto 1fr auto",
+        alignItems: "center",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "div",
+            className: "app-datanavigator",
+            "aria-disabled": currentPage <= 1 || isLoading,
+            "aria-label": "Previous page navigation",
+            children: /* @__PURE__ */ jsx("ul", { className: "pager", children: /* @__PURE__ */ jsx("li", { className: clsx("previous", { disabled: currentPage <= 1 || isLoading }), children: /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: "#",
+                onClick: (e) => {
+                  e.preventDefault();
+                  if (currentPage > 1 && !isLoading) {
+                    onPageChange(currentPage - 1);
+                  }
+                },
+                "aria-disabled": currentPage <= 1 || isLoading,
+                style: { cursor: currentPage <= 1 || isLoading ? "not-allowed" : "pointer" },
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "wi wi-chevron-left", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                    "Go to Previous page ",
+                    currentPage <= 1 || isLoading ? ", Disabled" : ""
+                  ] })
+                ]
+              }
+            ) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { sx: { opacity: isLoading ? 0.6 : 1, transition: "opacity 0.2s" }, children }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "div",
+            className: "app-datanavigator",
+            "aria-disabled": currentPage >= totalPages || isLoading,
+            "aria-label": "Next page navigation",
+            children: /* @__PURE__ */ jsx("ul", { className: "pager", children: /* @__PURE__ */ jsx("li", { className: clsx("next", { disabled: currentPage >= totalPages || isLoading }), children: /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: "#",
+                onClick: (e) => {
+                  e.preventDefault();
+                  if (currentPage < totalPages && !isLoading) {
+                    onPageChange(currentPage + 1);
+                  }
+                },
+                "aria-disabled": currentPage >= totalPages || isLoading,
+                style: { cursor: currentPage >= totalPages || isLoading ? "not-allowed" : "pointer" },
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: "wi wi-chevron-right", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                    "Go to Next page ",
+                    currentPage >= totalPages || isLoading ? ", Disabled" : ""
+                  ] })
+                ]
+              }
+            ) }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { component: "div", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: [
+          "Page ",
+          currentPage,
+          " of ",
+          totalPages
+        ] })
+      ]
+    }
+  );
+};
+export {
+  InlineNavigation
+};

package/components/data/pagination/components/LoadingComponent.d.ts

@@ -0,0 +1,3 @@
+export default function LoadingComponent({ message }: {
+    message?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/components/data/pagination/components/LoadingComponent.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Typography } from "@mui/material";
+function LoadingComponent({ message }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "overlay",
+      style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, zIndex: 10 },
+      children: /* @__PURE__ */ jsxs(Box, { className: "status", children: [
+        /* @__PURE__ */ jsx("i", { className: "fa fa-circle-o-notch fa-spin" }),
+        /* @__PURE__ */ jsx(Typography, { component: "span", className: "message", children: message || "Loading..." })
+      ] })
+    }
+  );
+}
+export {
+  LoadingComponent as default
+};

package/components/data/pagination/components/PageSizeSelector.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PageSizeSelectorProps } from "./props";
+export declare const PageSizeSelector: React.NamedExoticComponent<PageSizeSelectorProps>;

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

@@ -0,0 +1,89 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, memo } from "react";
+import TablePagination from "@mui/material/TablePagination";
+import { APP_LOCALE } from "../../list/utils/constants";
+import { useAppSelector } from "../../../../store";
+const EmptyPaginationActions = () => null;
+EmptyPaginationActions.displayName = "EmptyPaginationActions";
+const PageSizeSelectorComponent = ({
+  pagesizeoptions = "5,10,20,50,100",
+  maxResults = 10,
+  currentPage = 1,
+  dataSize = 0,
+  paginationMeta,
+  onPageSizeChange
+}) => {
+  const appLocale = useAppSelector((state) => state.i18n.appLocale);
+  const itemsPerPageLabel = (appLocale == null ? void 0 : appLocale.LABEL_ITEMS_PER_PAGE) || APP_LOCALE.LABEL_ITEMS_PER_PAGE;
+  const options = useMemo(() => {
+    const parsedOptions = pagesizeoptions.split(",").map((opt) => parseInt(opt.trim(), 10)).filter((opt) => !isNaN(opt));
+    if ((paginationMeta == null ? void 0 : paginationMeta.size) && !parsedOptions.includes(paginationMeta.size)) {
+      parsedOptions.unshift(paginationMeta.size);
+      parsedOptions.sort((a, b) => a - b);
+    }
+    return parsedOptions;
+  }, [pagesizeoptions, paginationMeta == null ? void 0 : paginationMeta.size]);
+  const effectiveMaxResults = (paginationMeta == null ? void 0 : paginationMeta.size) || maxResults;
+  const handleRowsPerPageChange = (event) => {
+    const newValue = Number(event.target.value);
+    if (onPageSizeChange) {
+      onPageSizeChange(event, newValue);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    TablePagination,
+    {
+      component: "div",
+      className: "pagination page-size-selector",
+      count: dataSize,
+      page: Math.max(0, currentPage - 1),
+      onPageChange: () => {
+      },
+      rowsPerPage: effectiveMaxResults,
+      onRowsPerPageChange: handleRowsPerPageChange,
+      rowsPerPageOptions: options,
+      labelRowsPerPage: `${itemsPerPageLabel} :`,
+      ActionsComponent: EmptyPaginationActions,
+      slotProps: {
+        toolbar: {
+          className: "items-per-page"
+        },
+        selectLabel: {
+          className: "app-label",
+          title: itemsPerPageLabel
+        },
+        select: {
+          id: "page-size-select",
+          size: "small",
+          className: "btn app-button dropdown-toggle page-size-select",
+          MenuProps: {
+            disableScrollLock: true,
+            anchorOrigin: { vertical: "top", horizontal: "left" },
+            transformOrigin: { vertical: "bottom", horizontal: "left" },
+            slotProps: {
+              paper: {
+                elevation: 0,
+                className: "dropdown-menu pagesize-options"
+              }
+            }
+          }
+        },
+        menuItem: {
+          className: "dropdown-item"
+        },
+        displayedRows: dataSize ? {
+          className: "item-range"
+        } : {
+          className: "page-size-no-range"
+        }
+      }
+    }
+  );
+};
+PageSizeSelectorComponent.displayName = "PageSizeSelector";
+const PageSizeSelector = memo(PageSizeSelectorComponent, (prevProps, nextProps) => {
+  return prevProps.pagesizeoptions === nextProps.pagesizeoptions && prevProps.maxResults === nextProps.maxResults && prevProps.currentPage === nextProps.currentPage && prevProps.dataSize === nextProps.dataSize && prevProps.paginationMeta === nextProps.paginationMeta && prevProps.onPageSizeChange === nextProps.onPageSizeChange;
+});
+export {
+  PageSizeSelector
+};

package/components/data/pagination/components/PagerNavigation.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PagerNavigationProps } from "./props";
+export declare const PagerNavigation: React.FC<PagerNavigationProps>;

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

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { APP_LOCALE } from "../../list/utils/constants";
+const StyledPaginationList = styled("ul")(() => ({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  padding: 0,
+  margin: 0,
+  listStyle: "none"
+}));
+const StyledPaginationItem = styled("li")(() => ({
+  margin: "0 2px",
+  "&.disabled": {
+    opacity: 0.38,
+    pointerEvents: "none"
+  }
+}));
+const PagerNavigation = ({
+  navigationClass,
+  isDisablePrevious,
+  isDisableNext,
+  onNavigate
+}) => {
+  return /* @__PURE__ */ jsxs(StyledPaginationList, { className: clsx("pager", navigationClass), children: [
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: clsx("previous", { disabled: isDisablePrevious }), children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "a",
+        href: "#",
+        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"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", sx: { mr: 1 }, children: /* @__PURE__ */ jsx("i", { className: "wi wi-chevron-left" }) }),
+          APP_LOCALE.LABEL_PREVIOUS,
+          /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: isDisablePrevious ? " , Disabled" : "" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(StyledPaginationItem, { className: clsx("next", { disabled: isDisableNext }), children: /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "a",
+        href: "#",
+        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"
+        },
+        children: [
+          APP_LOCALE.LABEL_NEXT,
+          /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": "true", sx: { ml: 1 }, children: /* @__PURE__ */ jsx("i", { className: "wi wi-chevron-right" }) }),
+          /* @__PURE__ */ jsx(Box, { component: "span", className: "sr-only", children: isDisableNext ? " , Disabled" : "" })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  PagerNavigation
+};

package/components/data/pagination/components/TotalRecords.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TotalRecordsProps } from "./props";
+export declare const TotalRecords: React.FC<TotalRecordsProps>;

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

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { APP_LOCALE, LIST_NAVIGATION_TYPES } from "../../list/utils/constants";
+const StyledPaginationList = styled("ul")(() => ({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  padding: 0,
+  margin: 0,
+  listStyle: "none"
+}));
+const StyledPaginationItem = styled("li")(() => ({
+  margin: "0 2px"
+}));
+const TotalRecords = ({
+  dataSize,
+  variant = LIST_NAVIGATION_TYPES.BASIC
+}) => {
+  return /* @__PURE__ */ jsx(StyledPaginationList, { className: "pagination", children: /* @__PURE__ */ jsx(
+    StyledPaginationItem,
+    {
+      className: `totalcount disabled ${variant === LIST_NAVIGATION_TYPES.BASIC ? "basiccount" : ""}`,
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: variant === LIST_NAVIGATION_TYPES.BASIC ? "a" : "span",
+          href: variant === LIST_NAVIGATION_TYPES.BASIC ? "#" : void 0,
+          tabIndex: -1,
+          "aria-disabled": "true",
+          sx: {
+            display: "block",
+            padding: "6px 12px",
+            fontSize: "14px",
+            userSelect: "none"
+          },
+          children: [
+            APP_LOCALE.LABEL_TOTAL_RECORDS,
+            ": ",
+            dataSize
+          ]
+        }
+      )
+    }
+  ) });
+};
+export {
+  TotalRecords
+};

package/components/data/pagination/components/index.d.ts

@@ -0,0 +1,6 @@
+export { BasicPagination } from "./BasicPagination";
+export { ClassicPagination } from "./ClassicPagination";
+export { InlineNavigation } from "./InlinePagination";
+export { PagerNavigation } from "./PagerNavigation";
+export { TotalRecords } from "./TotalRecords";
+export { PageSizeSelector } from "./PageSizeSelector";

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

@@ -0,0 +1,14 @@
+import { BasicPagination } from "./BasicPagination";
+import { ClassicPagination } from "./ClassicPagination";
+import { InlineNavigation } from "./InlinePagination";
+import { PagerNavigation } from "./PagerNavigation";
+import { TotalRecords } from "./TotalRecords";
+import { PageSizeSelector } from "./PageSizeSelector";
+export {
+  BasicPagination,
+  ClassicPagination,
+  InlineNavigation,
+  PageSizeSelector,
+  PagerNavigation,
+  TotalRecords
+};

package/components/data/pagination/components/props.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+import { IPaginationMeta } from "../../list/components/props";
+export type INavigationSize = "small" | "large";
+export interface BasicPaginationProps {
+    pageCount: number;
+    currentPage: number;
+    dataSize: number;
+    maxResults: number;
+    boundarylinks?: boolean;
+    directionlinks?: boolean;
+    navigationsize?: INavigationSize;
+    navigationClass: string;
+    maxsize?: number;
+    onPageChange: (event: React.ChangeEvent<unknown>, page: number) => void;
+}
+export interface ClassicPaginationProps {
+    currentPage: number;
+    pageCount: number;
+    dataSize: number;
+    maxResults: number;
+    navigationClass: string;
+    showrecordcount?: boolean;
+    isDisableFirst: boolean;
+    isDisablePrevious: boolean;
+    isDisableNext: boolean;
+    isDisableLast: boolean;
+    isDisableCurrent: boolean;
+    isDisableCount: boolean;
+    onNavigate: (direction: "first" | "prev" | "next" | "last", event?: React.SyntheticEvent) => void;
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onModelChange: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => boolean;
+}
+export interface PagerNavigationProps {
+    navigationClass: string;
+    isDisablePrevious: boolean;
+    isDisableNext: boolean;
+    onNavigate: (direction: "prev" | "next", event?: React.SyntheticEvent) => void;
+}
+export interface TotalRecordsProps {
+    dataSize?: number;
+    variant?: "Basic" | "Classic";
+}
+export interface PageSizeSelectorProps {
+    pagesizeoptions?: string;
+    maxResults?: number;
+    currentPage?: number;
+    dataSize?: number;
+    paginationMeta?: IPaginationMeta;
+    onPageSizeChange?: (event: React.MouseEvent<HTMLElement>, pageSize: number) => void;
+    appLocale?: {
+        LABEL_ITEMS_PER_PAGE?: string;
+    };
+}

package/components/data/pagination/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { usePagination } from "./usePagination";
+export { useNavigationSize } from "./useNavigationSize";

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

@@ -0,0 +1,6 @@
+import { usePagination } from "./usePagination";
+import { useNavigationSize } from "./useNavigationSize";
+export {
+  useNavigationSize,
+  usePagination
+};

package/components/data/pagination/hooks/props.d.ts

@@ -0,0 +1,232 @@
+import React from "react";
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+import { IAlignment, INavigation } from "../../list/props";
+import { INavigationSize } from "../components/props";
+import { IPaginationMeta } from "../../list/components/props";
+import { LiveVariableConfig } from "@wavemaker-ai/react-runtime/variables/live-variable";
+export interface UseNavigationSizeProps {
+    /**
+     * The type of navigation to use.
+     */
+    navigation?: INavigation;
+    /**
+     * The size of the navigation control.
+     */
+    navigationsize?: INavigationSize;
+}
+export interface UsePaginationProps {
+    /**
+     * The collection of data items to paginate.
+     */
+    dataset?: any[];
+    /**
+     * Maximum number of results to show per page.
+     */
+    maxResults?: number;
+    /**
+     * Current active page number.
+     */
+    currentPage?: number;
+    /**
+     * The type of navigation to use.
+     */
+    navigation?: INavigation;
+    /**
+     * The unique name of the pagination widget.
+     */
+    name?: string;
+    /**
+     * Reference to the parent listener.
+     */
+    listener?: any;
+    /**
+     * Callback fired when pagination changes.
+     */
+    onPaginationChange?: (event: React.SyntheticEvent, widget: unknown, index: number) => void;
+    /**
+     * Callback fired when a record is set.
+     */
+    onSetRecord?: (event: React.SyntheticEvent, widget: unknown, data: any, pageInfo: any) => void;
+    /**
+     * Callback fired when page size changes.
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Metadata for pagination.
+     */
+    paginationMeta?: IPaginationMeta;
+    /**
+     * Total number of items across all pages.
+     */
+    totalItems?: number;
+    /**
+     * Data source for pagination operations.
+     */
+    datasource?: LiveVariableConfig;
+    /**
+     * Whether more data is currently being loaded.
+     */
+    isLoadingMore?: boolean;
+    /**
+     * Function to set the loading more state.
+     */
+    setIsLoadingMore?: (loading: boolean) => void;
+    isServerSidePagination?: boolean;
+    listDirection?: "row" | "column" | "vertical" | "horizontal" | string;
+    /** Ref to list scroll container (for Scroll + row: observer root so load more when sentinel enters container) */
+    scrollContainerRef?: React.RefObject<HTMLElement | null>;
+    /** Optional sentinel ref from list (when row, list renders sentinel inside scroll container) */
+    sentinelRef?: React.RefObject<HTMLElement | null>;
+    datasourceInvokeOptions?: {
+        orderBy?: string;
+        filterFields?: Record<string, any>;
+        condition?: string;
+    };
+    /**
+     * Message to show for on-demand loading.
+     */
+    ondemandmessage?: string;
+    /**
+     * Message to show for view-less loading.
+     */
+    viewlessmessage?: string;
+    /**
+     * Whether to show the view-less button.
+     */
+    showviewlessbutton?: boolean;
+}
+export interface PaginationState {
+    currentPage: number;
+}
+export interface PageInfo {
+    currentPage: number;
+    size: number;
+    totalElements: number;
+    totalPages: number;
+}
+export interface EventCallbackData {
+    $event: Event | undefined;
+    $data?: any;
+    $index?: number;
+    pageInfo?: PageInfo;
+    data?: any;
+}
+export interface PaginationProps {
+    /**
+     * The collection of data items to paginate.
+     */
+    dataset?: any[];
+    /**
+     * Maximum number of results to show per page.
+     */
+    maxResults?: number;
+    /**
+     * Current active page number.
+     */
+    currentPage?: number;
+    /**
+     * The type of navigation to use.
+     */
+    navigation?: INavigation;
+    /**
+     * The size of the navigation control.
+     */
+    navigationsize?: INavigationSize;
+    /**
+     * Alignment of the navigation control.
+     */
+    navigationalign?: IAlignment;
+    /**
+     * Whether to show the total record count.
+     */
+    showrecordcount?: boolean;
+    /**
+     * Maximum number of page links to show.
+     */
+    maxsize?: number;
+    /**
+     * Whether to show first/last page links.
+     */
+    boundarylinks?: boolean;
+    /**
+     * Whether to show prev/next page links.
+     */
+    directionlinks?: boolean;
+    /**
+     * Data source for pagination operations.
+     */
+    datasource?: any;
+    /**
+     * Binding path for the dataset.
+     */
+    binddataset?: string;
+    /**
+     * Whether to allow changing the page size.
+     */
+    allowpagesizechange?: boolean;
+    /**
+     * Available options for page size.
+     */
+    pagesizeoptions?: string;
+    /**
+     * Metadata for pagination.
+     */
+    paginationMeta?: IPaginationMeta;
+    /**
+     * Total number of items across all pages.
+     */
+    totalItems?: number;
+    /**
+     * Callback fired when pagination changes.
+     */
+    onPaginationChange?: (event: React.SyntheticEvent, widget: unknown, index: number) => void;
+    /**
+     * Callback fired when a record is set.
+     */
+    onSetRecord?: (event: React.SyntheticEvent, widget: unknown, data: any, pageInfo: any) => void;
+    /**
+     * Callback when data is updated.
+     */
+    onDataUpdate?: (data: any[]) => void;
+    /**
+     * Options for the datasource invocation.
+     */
+    datasourceInvokeOptions?: {
+        orderBy?: string;
+        filterFields?: Record<string, any>;
+        condition?: string;
+    };
+    /**
+     * Callback fired when page size changes.
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Whether more data is currently being loaded.
+     */
+    isLoadingMore?: boolean;
+    /**
+     * Function to set the loading more state.
+     */
+    setIsLoadingMore?: (loading: boolean) => void;
+    isServerSidePagination?: boolean;
+    listDirection?: "row" | "column" | "vertical" | "horizontal" | string;
+    scrollContainerRef?: React.RefObject<HTMLElement | null>;
+    sentinelRef?: React.RefObject<HTMLElement | null>;
+    ondemandmessage?: string;
+    /**
+     * Message to show for view-less loading.
+     */
+    viewlessmessage?: string;
+    /**
+     * Whether to show the view-less button.
+     */
+    showviewlessbutton?: boolean;
+    /**
+     * Callback when pagination widget is ready.
+     */
+    onPaginationWidgetReady?: (paginationWidget: any) => void;
+}
+/**
+ * Combined props for the WmPagination component, including base WaveMaker props.
+ */
+export type WmPaginationProps = Prettify<PaginationProps & BaseProps>;