@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

package/components/data/list/components/ListItems.js

@@ -1,231 +1,217 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItems = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _LoadMoreButton = require("./LoadMoreButton");
-var _StandardListItems = require("./StandardListItems");
-var _GroupedListItems = require("./GroupedListItems");
-var _constants = require("../utils/constants");
-var _hooks = require("../hooks");
-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;
-/**
- * Main ListItems component - orchestrates rendering of list items
- * with support for grouping, pagination, and on-demand loading
- */
-var ListItems = exports.ListItems = function ListItems(_ref) {
-  var items = _ref.items,
-    groupedData = _ref.groupedData,
-    groupby = _ref.groupby,
-    navigation = _ref.navigation,
-    currentPage = _ref.currentPage,
-    pagesize = _ref.pagesize,
-    visibleItems = _ref.visibleItems,
-    orderby = _ref.orderby,
-    disableitem = _ref.disableitem,
-    itemclass = _ref.itemclass,
-    itemsPerRowClass = _ref.itemsPerRowClass,
-    direction = _ref.direction,
-    enablereorder = _ref.enablereorder,
-    activeItems = _ref.activeItems,
-    name = _ref.name,
-    tabIndex = _ref.tabIndex,
-    renderItem = _ref.renderItem,
-    itemTemplate = _ref.itemTemplate,
-    nodatamessage = _ref.nodatamessage,
-    ondemandmessage = _ref.ondemandmessage,
-    loadingicon = _ref.loadingicon,
-    loadingdatamsg = _ref.loadingdatamsg,
-    paginationclass = _ref.paginationclass,
-    isLoadingMore = _ref.isLoadingMore,
-    collapsible = _ref.collapsible,
-    showcount = _ref.showcount,
-    groupCollapsed = _ref.groupCollapsed,
-    handleListItemClick = _ref.handleListItemClick,
-    handleListItemDoubleClick = _ref.handleListItemDoubleClick,
-    handleListItemMouseEnter = _ref.handleListItemMouseEnter,
-    handleListItemMouseLeave = _ref.handleListItemMouseLeave,
-    handleDragEnd = _ref.handleDragEnd,
-    handleLoadMore = _ref.handleLoadMore,
-    handleHeaderClick = _ref.handleHeaderClick,
-    onBeforedatarender = _ref.onBeforedatarender,
-    onRender = _ref.onRender,
-    widgetInstance = _ref.widgetInstance,
-    rawDataset = _ref.rawDataset,
-    datasource = _ref.datasource,
-    totalItems = _ref.totalItems,
-    isServerSidePagination = _ref.isServerSidePagination,
-    showNavigation = _ref.showNavigation,
-    itemAttrs = _ref.itemAttrs,
-    hasListGroupAutoLayout = _ref.hasListGroupAutoLayout,
-    _ref$standalone = _ref.standalone,
-    standalone = _ref$standalone === void 0 ? false : _ref$standalone;
-  // Use the server-side pagination flag passed from parent
-  var isServerPaginated = !!isServerSidePagination;
-
-  // Get pagination metadata from datasource
-  var paginationMeta = datasource === null || datasource === void 0 ? void 0 : datasource.pagination;
-
-  // Calculate current page items from raw dataset (unsorted) for onBeforedatarender
-  var rawCurrentPageItems = (0, _hooks.useCurrentPageItems)({
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useEffect } from "react";
+import { LoadMoreButton } from "./LoadMoreButton";
+import { StandardListItems } from "./StandardListItems";
+import { GroupedListItems } from "./GroupedListItems";
+import { LIST_NAVIGATION_TYPES } from "../utils/constants";
+import { useCurrentPageItems, usePaginatedGroupedData } from "../hooks";
+const ListItems = ({
+  items,
+  groupedData,
+  groupby,
+  navigation,
+  currentPage,
+  pagesize,
+  visibleItems,
+  orderby,
+  disableitem,
+  itemclass,
+  itemsPerRowClass,
+  direction,
+  enablereorder,
+  activeItems,
+  name,
+  tabIndex,
+  renderItem,
+  itemTemplate,
+  nodatamessage,
+  ondemandmessage,
+  loadingicon,
+  loadingdatamsg,
+  paginationclass,
+  isLoadingMore,
+  collapsible,
+  showcount,
+  groupCollapsed,
+  handleListItemClick,
+  handleListItemDoubleClick,
+  handleListItemMouseEnter,
+  handleListItemMouseLeave,
+  handleDragEnd,
+  handleLoadMore,
+  handleHeaderClick,
+  onBeforedatarender,
+  onRender,
+  widgetInstance,
+  rawDataset,
+  datasource,
+  totalItems,
+  isServerSidePagination,
+  showNavigation,
+  itemAttrs,
+  hasListGroupAutoLayout,
+  standalone = false
+}) => {
+  const isServerPaginated = !!isServerSidePagination;
+  const paginationMeta = datasource == null ? void 0 : datasource.pagination;
+  const rawCurrentPageItems = useCurrentPageItems({
     items: rawDataset || [],
-    navigation: navigation,
-    currentPage: currentPage,
-    pagesize: pagesize,
-    visibleItems: visibleItems,
-    isServerPaginated: isServerPaginated // Pass flag to indicate server pagination
+    navigation,
+    currentPage,
+    pagesize,
+    visibleItems,
+    isServerPaginated
+    // Pass flag to indicate server pagination
   });
-
-  // Calculate current page items from sorted dataset for rendering and onRender
-  var currentPageItems = (0, _hooks.useCurrentPageItems)({
-    items: items,
-    navigation: navigation,
-    currentPage: currentPage,
-    pagesize: pagesize,
-    visibleItems: visibleItems,
-    isServerPaginated: isServerPaginated // Pass flag to indicate server pagination
+  const currentPageItems = useCurrentPageItems({
+    items,
+    navigation,
+    currentPage,
+    pagesize,
+    visibleItems,
+    isServerPaginated
+    // Pass flag to indicate server pagination
   });
-
-  // Calculate paginated grouped data
-  var paginatedGroupedData = (0, _hooks.usePaginatedGroupedData)({
+  const paginatedGroupedData = usePaginatedGroupedData({
     groupedData: groupedData || [],
-    navigation: navigation,
-    currentPage: currentPage,
-    pagesize: pagesize,
-    visibleItems: visibleItems,
+    navigation,
+    currentPage,
+    pagesize,
+    visibleItems,
     isServerSidePagination: isServerPaginated
   });
-
-  // Create stable identifiers for data changes
-  var rawCurrentItemsKey = (0, _react.useMemo)(function () {
-    return JSON.stringify(rawCurrentPageItems.currentItems);
-  }, [rawCurrentPageItems.currentItems]);
-  var currentItemsKey = (0, _react.useMemo)(function () {
-    return JSON.stringify(currentPageItems.currentItems);
-  }, [currentPageItems.currentItems]);
-  var paginatedGroupedDataKey = (0, _react.useMemo)(function () {
-    return JSON.stringify(paginatedGroupedData);
-  }, [paginatedGroupedData]);
-
-  // Call onBeforedatarender with unsorted current page items - only when data changes
-  (0, _react.useEffect)(function () {
+  const rawCurrentItemsKey = useMemo(
+    () => JSON.stringify(rawCurrentPageItems.currentItems),
+    [rawCurrentPageItems.currentItems]
+  );
+  const currentItemsKey = useMemo(
+    () => JSON.stringify(currentPageItems.currentItems),
+    [currentPageItems.currentItems]
+  );
+  const paginatedGroupedDataKey = useMemo(
+    () => JSON.stringify(paginatedGroupedData),
+    [paginatedGroupedData]
+  );
+  useEffect(() => {
     if (onBeforedatarender && widgetInstance) {
       onBeforedatarender(widgetInstance, rawCurrentPageItems.currentItems);
     }
   }, [rawCurrentItemsKey, groupby]);
-
-  // Call onRender with sorted current page items - only when data changes
-  (0, _react.useEffect)(function () {
+  useEffect(() => {
     if (onRender) {
-      // Call onRender synchronously to ensure it fires before onSelect
-      // This maintains the correct event order: onBeforedatarender -> onRender -> onSelect
       if (groupby) {
-        // For grouped data, flatten the current page grouped items (sorted)
-        var currentPageGroupedItems = paginatedGroupedData.reduce(function (acc, group) {
+        const currentPageGroupedItems = paginatedGroupedData.reduce((acc, group) => {
           return acc.concat(group.data);
         }, []);
         onRender(widgetInstance, currentPageGroupedItems);
       } else {
-        // For standard lists, use sorted current page items
         onRender(widgetInstance, currentPageItems.currentItems);
       }
     }
   }, []);
-
-  // Calculate total items for grouped data
-  var totalGroupedItems = (0, _react.useMemo)(function () {
+  const totalGroupedItems = useMemo(() => {
     if (!groupedData || !Array.isArray(groupedData)) return 0;
-    return groupedData.reduce(function (total, group) {
-      var _group$data;
-      return total + (((_group$data = group.data) === null || _group$data === void 0 ? void 0 : _group$data.length) || 0);
+    return groupedData.reduce((total, group) => {
+      var _a;
+      return total + (((_a = group.data) == null ? void 0 : _a.length) || 0);
     }, 0);
   }, [groupedData]);
-
-  // Determine if load more button should be shown
-  var shouldShowLoadMore = (0, _react.useMemo)(function () {
-    if (navigation !== _constants.LIST_NAVIGATION_TYPES.ON_DEMAND) {
+  const shouldShowLoadMore = useMemo(() => {
+    if (navigation !== LIST_NAVIGATION_TYPES.ON_DEMAND) {
       return false;
     }
-
-    // If we have pagination metadata with 'last' property, use it
-    if (isServerPaginated && (paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.last) !== undefined) {
-      return !paginationMeta.last; // Show Load More if not the last page
+    if (isServerPaginated && (paginationMeta == null ? void 0 : paginationMeta.last) !== void 0) {
+      return !paginationMeta.last;
     }
-
-    // For server-side pagination with totalItems
-    if (isServerPaginated && totalItems !== undefined && datasource) {
+    if (isServerPaginated && totalItems !== void 0 && datasource) {
       if (groupby) {
-        // For grouped data, we need to check if all groups have been loaded
-        // This is tricky with server-side pagination as groups might span pages
         return totalGroupedItems < totalItems;
       } else {
-        // For non-grouped data, check if all items have been loaded
         return items.length < totalItems;
       }
     }
-
-    // For client-side pagination
     if (groupby) {
       return visibleItems < totalGroupedItems;
     } else {
       return visibleItems < items.length;
     }
-  }, [navigation, isServerPaginated, paginationMeta === null || paginationMeta === void 0 ? void 0 : paginationMeta.last, totalItems, datasource, groupby, totalGroupedItems, items.length, visibleItems]);
-  return __jsx(_react["default"].Fragment, null, groupby ? __jsx(_GroupedListItems.GroupedListItems, {
-    groupedData: groupedData || [],
-    paginatedGroupedData: paginatedGroupedData,
-    direction: direction,
-    disableitem: disableitem,
-    itemclass: itemclass,
-    itemsPerRowClass: itemsPerRowClass,
-    name: name,
-    tabIndex: tabIndex,
-    activeItems: activeItems,
-    collapsible: collapsible,
-    showcount: showcount,
-    groupCollapsed: groupCollapsed,
-    renderItem: renderItem,
-    itemTemplate: itemTemplate,
-    nodatamessage: nodatamessage,
-    onItemClick: handleListItemClick,
-    onItemDoubleClick: handleListItemDoubleClick,
-    onItemMouseEnter: handleListItemMouseEnter,
-    onItemMouseLeave: handleListItemMouseLeave,
-    onHeaderClick: handleHeaderClick,
-    itemAttrs: itemAttrs,
-    hasListGroupAutoLayout: hasListGroupAutoLayout,
-    standalone: standalone
-  }) : __jsx(_StandardListItems.StandardListItems, {
-    items: items,
-    currentPageItems: currentPageItems,
-    direction: direction,
-    enablereorder: enablereorder,
-    disableitem: disableitem,
-    itemclass: itemclass,
-    itemsPerRowClass: itemsPerRowClass,
-    name: name,
-    tabIndex: tabIndex,
-    activeItems: activeItems,
-    renderItem: renderItem,
-    itemTemplate: itemTemplate,
-    nodatamessage: nodatamessage,
-    onItemClick: handleListItemClick,
-    onItemDoubleClick: handleListItemDoubleClick,
-    onItemMouseEnter: handleListItemMouseEnter,
-    onItemMouseLeave: handleListItemMouseLeave,
-    onDragEnd: handleDragEnd,
-    itemAttrs: itemAttrs,
-    standalone: standalone
-  }), shouldShowLoadMore && showNavigation !== false && __jsx(_LoadMoreButton.LoadMoreButton, {
-    paginationclass: paginationclass,
-    isLoadingMore: isLoadingMore,
-    loadingicon: loadingicon,
-    loadingdatamsg: loadingdatamsg,
-    ondemandmessage: ondemandmessage,
-    onLoadMore: handleLoadMore
-  }));
-};
+  }, [
+    navigation,
+    isServerPaginated,
+    paginationMeta == null ? void 0 : paginationMeta.last,
+    totalItems,
+    datasource,
+    groupby,
+    totalGroupedItems,
+    items.length,
+    visibleItems
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    groupby ? /* @__PURE__ */ jsx(
+      GroupedListItems,
+      {
+        groupedData: groupedData || [],
+        paginatedGroupedData,
+        direction,
+        disableitem,
+        itemclass,
+        itemsPerRowClass,
+        name,
+        tabIndex,
+        activeItems,
+        collapsible,
+        showcount,
+        groupCollapsed,
+        renderItem,
+        itemTemplate,
+        nodatamessage,
+        onItemClick: handleListItemClick,
+        onItemDoubleClick: handleListItemDoubleClick,
+        onItemMouseEnter: handleListItemMouseEnter,
+        onItemMouseLeave: handleListItemMouseLeave,
+        onHeaderClick: handleHeaderClick,
+        itemAttrs,
+        hasListGroupAutoLayout,
+        standalone
+      }
+    ) : /* @__PURE__ */ jsx(
+      StandardListItems,
+      {
+        items,
+        currentPageItems,
+        direction,
+        enablereorder,
+        disableitem,
+        itemclass,
+        itemsPerRowClass,
+        name,
+        tabIndex,
+        activeItems,
+        renderItem,
+        itemTemplate,
+        nodatamessage,
+        onItemClick: handleListItemClick,
+        onItemDoubleClick: handleListItemDoubleClick,
+        onItemMouseEnter: handleListItemMouseEnter,
+        onItemMouseLeave: handleListItemMouseLeave,
+        onDragEnd: handleDragEnd,
+        itemAttrs,
+        standalone
+      }
+    ),
+    shouldShowLoadMore && showNavigation !== false && /* @__PURE__ */ jsx(
+      LoadMoreButton,
+      {
+        paginationclass,
+        isLoadingMore,
+        loadingicon,
+        loadingdatamsg,
+        ondemandmessage,
+        onLoadMore: handleLoadMore
+      }
+    )
+  ] });
+};
+export {
+  ListItems
+};