@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

package/components/data/list/hooks/useListPagination.js

@@ -1,163 +1,117 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useListPagination = void 0;
-var _react = require("react");
-var _lodashEs = require("lodash-es");
-var _constants = require("../utils/constants");
-/**
- * Custom hook for managing list pagination
- * Handles both regular and grouped data pagination
- * Uses pagination metadata from datasource when available
- */
-var useListPagination = exports.useListPagination = function useListPagination(props) {
-  var items = props.items,
-    groupedData = props.groupedData,
-    groupby = props.groupby,
-    pagesize = props.pagesize,
-    allowpagesizechange = props.allowpagesizechange,
-    pagesizeoptions = props.pagesizeoptions,
-    navigation = props.navigation,
-    _props$initialPage = props.initialPage,
-    initialPage = _props$initialPage === void 0 ? 1 : _props$initialPage,
-    datasource = props.datasource;
-
-  /**
-   * Datasource pagination is often mutated in-place by runtime.
-   * Avoid memoizing based on `datasource` object identity; read it directly.
-   */
-  var datasourcePagination = datasource === null || datasource === void 0 ? void 0 : datasource.pagination;
-  var paginationMeta = datasourcePagination !== null && datasourcePagination !== void 0 ? datasourcePagination : _constants.DEFAULT_PAGINATION_META;
-
-  // Initialize page size based on allowpagesizechange
-  var getInitialPageSize = function getInitialPageSize() {
-    // Always use the pagesize prop first (which may contain the restored value)
-    // Only fall back to first option if pagesize is not provided
+import { useState, useEffect, useMemo } from "react";
+import { ceil, sumBy, slice, split, map, filter, toNumber, head, isArray } from "lodash-es";
+import { DEFAULT_PAGINATION_META } from "../utils/constants";
+const useListPagination = (props) => {
+  const {
+    items,
+    groupedData,
+    groupby,
+    pagesize,
+    allowpagesizechange,
+    pagesizeoptions,
+    navigation,
+    initialPage = 1,
+    datasource
+  } = props;
+  const datasourcePagination = datasource == null ? void 0 : datasource.pagination;
+  const paginationMeta = datasourcePagination != null ? datasourcePagination : DEFAULT_PAGINATION_META;
+  const getInitialPageSize = () => {
     if (pagesize) {
       return pagesize;
     }
-
-    // Use paginationMeta.size if available
-    if (paginationMeta !== null && paginationMeta !== void 0 && paginationMeta.size) {
+    if (paginationMeta == null ? void 0 : paginationMeta.size) {
       return paginationMeta.size;
     }
     if (allowpagesizechange) {
-      // Parse pagesizeoptions and use the first value as fallback
-      var firstOption = (0, _lodashEs.head)((0, _lodashEs.filter)((0, _lodashEs.map)((0, _lodashEs.split)(pagesizeoptions, ","), function (opt) {
-        return (0, _lodashEs.toNumber)(opt.trim());
-      }), function (opt) {
-        return !isNaN(opt);
-      }));
-      return firstOption || 10; // Default to 10 if no valid options
+      const firstOption = head(
+        filter(
+          map(split(pagesizeoptions, ","), (opt) => toNumber(opt.trim())),
+          (opt) => !isNaN(opt)
+        )
+      );
+      return firstOption || 10;
     }
-    return 10; // Default page size
+    return 10;
   };
-  var _useState = (0, _react.useState)(initialPage),
-    currentPage = _useState[0],
-    setCurrentPage = _useState[1];
-  var _useState2 = (0, _react.useState)(getInitialPageSize()),
-    currentPageSize = _useState2[0],
-    setCurrentPageSize = _useState2[1];
-  var _useState3 = (0, _react.useState)(function () {
-      // For on-demand navigation, show items up to the initial page
-      if (navigation === "On-Demand" && initialPage > 1) {
-        return initialPage * pagesize;
-      }
-      return pagesize;
-    }),
-    visibleItems = _useState3[0],
-    setVisibleItems = _useState3[1];
-
-  // Calculate total pages based on datasource pagination metadata if available
-  var totalPages = (0, _react.useMemo)(function () {
-    // If pagination metadata is available, use it
-    if ((datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalPages) !== undefined) {
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [currentPageSize, setCurrentPageSize] = useState(getInitialPageSize());
+  const [visibleItems, setVisibleItems] = useState(() => {
+    if (navigation === "On-Demand" && initialPage > 1) {
+      return initialPage * pagesize;
+    }
+    return pagesize;
+  });
+  const totalPages = useMemo(() => {
+    if ((datasourcePagination == null ? void 0 : datasourcePagination.totalPages) !== void 0) {
       return datasourcePagination.totalPages;
     }
-
-    // Fall back to calculating from items length
-    var validItems = (0, _lodashEs.isArray)(items) ? items : [];
-    return Math.max(1, (0, _lodashEs.ceil)(validItems.length / currentPageSize));
-  }, [items, currentPageSize, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalPages]);
-
-  // Calculate total items for grouped data or from pagination metadata
-  var totalItems = (0, _react.useMemo)(function () {
-    // If pagination metadata is available, use it
-    if ((datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalElements) !== undefined) {
+    const validItems = isArray(items) ? items : [];
+    return Math.max(1, ceil(validItems.length / currentPageSize));
+  }, [items, currentPageSize, datasourcePagination == null ? void 0 : datasourcePagination.totalPages]);
+  const totalItems = useMemo(() => {
+    if ((datasourcePagination == null ? void 0 : datasourcePagination.totalElements) !== void 0) {
       return datasourcePagination.totalElements;
     }
-
-    // For grouped data
-    if (groupby && groupedData && (0, _lodashEs.isArray)(groupedData)) {
-      return (0, _lodashEs.sumBy)(groupedData, function (group) {
-        var _group$data;
-        return ((_group$data = group.data) === null || _group$data === void 0 ? void 0 : _group$data.length) || 0;
+    if (groupby && groupedData && isArray(groupedData)) {
+      return sumBy(groupedData, (group) => {
+        var _a;
+        return ((_a = group.data) == null ? void 0 : _a.length) || 0;
       });
     }
-
-    // Fall back to items length
-    return (0, _lodashEs.isArray)(items) ? items.length : 0;
-  }, [groupedData, items, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalElements, groupby]);
-
-  // Calculate effective total pages (considers grouping and pagination metadata)
-  var effectiveTotalPages = (0, _react.useMemo)(function () {
-    // If pagination metadata has totalPages, use it directly
-    if ((datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalPages) !== undefined) {
+    return isArray(items) ? items.length : 0;
+  }, [groupedData, items, datasourcePagination == null ? void 0 : datasourcePagination.totalElements, groupby]);
+  const effectiveTotalPages = useMemo(() => {
+    if ((datasourcePagination == null ? void 0 : datasourcePagination.totalPages) !== void 0) {
       return datasourcePagination.totalPages;
     }
-
-    // For grouped data
     if (groupby && groupedData) {
-      return Math.max(1, (0, _lodashEs.ceil)(totalItems / currentPageSize));
+      return Math.max(1, ceil(totalItems / currentPageSize));
     }
     return totalPages;
-  }, [groupby, groupedData, totalItems, currentPageSize, totalPages, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalPages]);
-
-  // Calculate current page items
-  var currentPageItems = (0, _react.useMemo)(function () {
-    if (!items || !(0, _lodashEs.isArray)(items) || items.length === 0) {
-      return {
-        currentItems: [],
-        startIndex: 0,
-        endIndex: 0
-      };
+  }, [
+    groupby,
+    groupedData,
+    totalItems,
+    currentPageSize,
+    totalPages,
+    datasourcePagination == null ? void 0 : datasourcePagination.totalPages
+  ]);
+  const currentPageItems = useMemo(() => {
+    if (!items || !isArray(items) || items.length === 0) {
+      return { currentItems: [], startIndex: 0, endIndex: 0 };
     }
-    var startIndex = navigation === "On-Demand" ? 0 : (currentPage - 1) * currentPageSize;
-    var endIndex = navigation === "On-Demand" ? visibleItems : currentPage * currentPageSize;
-    var currentItems = (0, _lodashEs.slice)(items, startIndex, endIndex);
-    return {
-      currentItems: currentItems,
-      startIndex: startIndex,
-      endIndex: endIndex
-    };
+    const startIndex = navigation === "On-Demand" ? 0 : (currentPage - 1) * currentPageSize;
+    const endIndex = navigation === "On-Demand" ? visibleItems : currentPage * currentPageSize;
+    const currentItems = slice(items, startIndex, endIndex);
+    return { currentItems, startIndex, endIndex };
   }, [items, navigation, currentPage, currentPageSize, visibleItems]);
-
-  // Sync current page with datasource pagination metadata for SSP
-  (0, _react.useEffect)(function () {
-    // Only sync if we have server-side pagination with metadata
-    if (datasource && (datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.number) !== undefined && (datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalElements) !== undefined) {
-      // paginationMeta.number is 0-indexed, so add 1 for 1-indexed page number
-      var serverPage = datasourcePagination.number + 1;
-
-      // Only update if the server page is different from current page
+  useEffect(() => {
+    if (datasource && (datasourcePagination == null ? void 0 : datasourcePagination.number) !== void 0 && (datasourcePagination == null ? void 0 : datasourcePagination.totalElements) !== void 0) {
+      const serverPage = datasourcePagination.number + 1;
       if (serverPage !== currentPage && serverPage > 0 && serverPage <= effectiveTotalPages) {
         setCurrentPage(serverPage);
       }
     }
-  }, [datasource, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.number, datasourcePagination === null || datasourcePagination === void 0 ? void 0 : datasourcePagination.totalElements, effectiveTotalPages]);
+  }, [
+    datasource,
+    datasourcePagination == null ? void 0 : datasourcePagination.number,
+    datasourcePagination == null ? void 0 : datasourcePagination.totalElements,
+    effectiveTotalPages
+  ]);
   return {
-    currentPage: currentPage,
-    setCurrentPage: setCurrentPage,
-    currentPageSize: currentPageSize,
-    setCurrentPageSize: setCurrentPageSize,
-    totalPages: totalPages,
-    visibleItems: visibleItems,
-    setVisibleItems: setVisibleItems,
-    currentPageItems: currentPageItems,
-    effectiveTotalPages: effectiveTotalPages,
-    totalItems: totalItems,
-    paginationMeta: paginationMeta
+    currentPage,
+    setCurrentPage,
+    currentPageSize,
+    setCurrentPageSize,
+    totalPages,
+    visibleItems,
+    setVisibleItems,
+    currentPageItems,
+    effectiveTotalPages,
+    totalItems,
+    paginationMeta
   };
-};
+};
+export {
+  useListPagination
+};

package/components/data/list/hooks/useListState.js

@@ -1,91 +1,46 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useListState = void 0;
-var _react = require("react");
-var _listHelpers = require("../utils/list-helpers");
-var _WidgetProvider = require("@wavemaker-ai/react-runtime/context/WidgetProvider");
-/**
- * Custom hook for managing list state
- * @param dataset - The dataset array
- * @param pagesize - Number of items per page
- * @param selectfirstitem - Whether to select the first item by default
- * @param selectionlimit - Maximum number of items that can be selected
- * @param listener - Widget listener for widget updates
- * @param name - Widget name
- * @returns State management object for the list
- */
-var useListState = exports.useListState = function useListState(dataset, pagesize, selectfirstitem, selectionlimit, listener, name) {
-  var standalone = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  var Widgets = (0, _WidgetProvider.useWidgetProxy)(undefined, standalone);
-  var _useState = (0, _react.useState)([]),
-    selectedItems = _useState[0],
-    setSelectedItems = _useState[1];
-  var _useState2 = (0, _react.useState)(1),
-    currentPage = _useState2[0],
-    setCurrentPage = _useState2[1];
-  var _useState3 = (0, _react.useState)(1),
-    totalPages = _useState3[0],
-    setTotalPages = _useState3[1];
-  var _useState4 = (0, _react.useState)(new Set()),
-    activeItems = _useState4[0],
-    setActiveItems = _useState4[1];
-  var _useState5 = (0, _react.useState)(null),
-    firstSelectedItem = _useState5[0],
-    setFirstSelectedItem = _useState5[1];
-  var _useState6 = (0, _react.useState)({}),
-    groupCollapsed = _useState6[0],
-    setGroupCollapsed = _useState6[1];
-  var _useState7 = (0, _react.useState)(pagesize),
-    visibleItems = _useState7[0],
-    setVisibleItems = _useState7[1];
-  var _useState8 = (0, _react.useState)(false),
-    isLoadingMore = _useState8[0],
-    setIsLoadingMore = _useState8[1];
-  var isInitialMount = (0, _react.useRef)(true);
-  var rafRef1 = (0, _react.useRef)(null);
-  var rafRef2 = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    // Ensure dataset is a valid array
-    var validDataset = Array.isArray(dataset) ? dataset : [];
-    var pageCount = Math.ceil(validDataset.length / (pagesize || 10));
-    setTotalPages(function (prev) {
-      return prev !== pageCount ? pageCount : prev;
-    });
+import { useState, useEffect, useRef } from "react";
+import { getSelectedItemWidgets } from "../utils/list-helpers";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+const useListState = (dataset, pagesize, selectfirstitem, selectionlimit, listener, name, standalone = false) => {
+  const Widgets = useWidgetProxy(void 0, standalone);
+  const [selectedItems, setSelectedItems] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [activeItems, setActiveItems] = useState(/* @__PURE__ */ new Set());
+  const [firstSelectedItem, setFirstSelectedItem] = useState(null);
+  const [groupCollapsed, setGroupCollapsed] = useState({});
+  const [visibleItems, setVisibleItems] = useState(pagesize);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const isInitialMount = useRef(true);
+  const rafRef1 = useRef(null);
+  const rafRef2 = useRef(null);
+  useEffect(() => {
+    const validDataset = Array.isArray(dataset) ? dataset : [];
+    const pageCount = Math.ceil(validDataset.length / (pagesize || 10));
+    setTotalPages((prev) => prev !== pageCount ? pageCount : prev);
   }, [dataset, pagesize]);
-
-  // Sync visibleItems with pagesize when pagesize changes
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     setVisibleItems(pagesize);
   }, [pagesize]);
-
-  // Separate effect for select first item to ensure it runs after data is ready
-  (0, _react.useEffect)(function () {
-    var validDataset = Array.isArray(dataset) ? dataset : [];
-
-    // Only select first item on initial mount or when dataset changes from empty to having data
+  useEffect(() => {
+    const validDataset = Array.isArray(dataset) ? dataset : [];
     if (selectfirstitem && validDataset.length > 0) {
       if (isInitialMount.current) {
-        var firstItem = validDataset[0];
+        const firstItem = validDataset[0];
         setSelectedItems([firstItem]);
-        setActiveItems(new Set([firstItem]));
+        setActiveItems(/* @__PURE__ */ new Set([firstItem]));
         setFirstSelectedItem(firstItem);
         isInitialMount.current = false;
-
-        // Update selected item widgets after DOM is painted
-        if (listener !== null && listener !== void 0 && listener.onChange && name) {
-          rafRef1.current = requestAnimationFrame(function () {
-            // getSelectedItemWidgets(null, listener, name);
-            rafRef2.current = requestAnimationFrame(function () {
-              (0, _listHelpers.getSelectedItemWidgets)(null, listener, name, firstItem || null, Widgets);
+        if ((listener == null ? void 0 : listener.onChange) && name) {
+          rafRef1.current = requestAnimationFrame(() => {
+            rafRef2.current = requestAnimationFrame(() => {
+              getSelectedItemWidgets(null, listener, name, firstItem || null, Widgets);
             });
           });
         }
       }
     }
-    return function () {
+    return () => {
       if (rafRef1.current) {
         cancelAnimationFrame(rafRef1.current);
       }
@@ -95,20 +50,23 @@ var useListState = exports.useListState = function useListState(dataset, pagesiz
     };
   }, [dataset, selectfirstitem, name]);
   return {
-    selectedItems: selectedItems,
-    setSelectedItems: setSelectedItems,
-    currentPage: currentPage,
-    setCurrentPage: setCurrentPage,
-    totalPages: totalPages,
-    activeItems: activeItems,
-    setActiveItems: setActiveItems,
-    firstSelectedItem: firstSelectedItem,
-    setFirstSelectedItem: setFirstSelectedItem,
-    groupCollapsed: groupCollapsed,
-    setGroupCollapsed: setGroupCollapsed,
-    visibleItems: visibleItems,
-    setVisibleItems: setVisibleItems,
-    isLoadingMore: isLoadingMore,
-    setIsLoadingMore: setIsLoadingMore
+    selectedItems,
+    setSelectedItems,
+    currentPage,
+    setCurrentPage,
+    totalPages,
+    activeItems,
+    setActiveItems,
+    firstSelectedItem,
+    setFirstSelectedItem,
+    groupCollapsed,
+    setGroupCollapsed,
+    visibleItems,
+    setVisibleItems,
+    isLoadingMore,
+    setIsLoadingMore
   };
-};
+};
+export {
+  useListState
+};