@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/data/list/utils/list-helpers.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTextAlignClass = exports.getSelectedItemWidgets = exports.getSafeDataset = exports.getListState = exports.getItemsPerRowClass = exports.clearListState = void 0;
+exports.hasListGroupAutoLayoutClass = hasListGroupAutoLayoutClass;
+exports.saveListState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _constants = require("./constants");
+var _statePersistance = require("@wavemaker-ai/react-runtime/utils/state-persistance");
+var _isObject = _interopRequireDefault(require("lodash-es/isObject"));
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Get items per row CSS classes based on configuration
+ * @param itemsperrow - Items per row configuration
+ * @param direction - List direction
+ * @returns CSS class string
+ */
+var getItemsPerRowClass = exports.getItemsPerRowClass = function getItemsPerRowClass(itemsperrow, direction) {
+  if (direction === "horizontal") {
+    return "";
+  }
+  if (!itemsperrow) {
+    return "col-xs-12";
+  }
+  if (isNaN(parseInt(itemsperrow, 10))) {
+    return itemsperrow.split(" ").map(function (cls) {
+      var _cls$split = cls.split("-"),
+        _cls$split2 = (0, _slicedToArray2["default"])(_cls$split, 2),
+        tier = _cls$split2[0],
+        value = _cls$split2[1];
+      var colSize = 12 / parseInt(value, 10);
+      return "col-".concat(tier, "-").concat(colSize);
+    }).join(" ").trim();
+  }
+  var numValue = parseInt(itemsperrow, 10);
+  return "col-xs-".concat(12 / numValue);
+};
+
+/**
+ * Get text alignment class
+ * @param align - Alignment value
+ * @returns CSS class string
+ */
+var getTextAlignClass = exports.getTextAlignClass = function getTextAlignClass(align) {
+  switch (align) {
+    case _constants.LIST_ALIGN.CENTER:
+      return "text-center";
+    case _constants.LIST_ALIGN.RIGHT:
+      return "text-right";
+    case _constants.LIST_ALIGN.LEFT:
+    default:
+      return "text-left";
+  }
+};
+
+// to check the any layout attribute present or not to apply list-group-autolayout class
+function hasListGroupAutoLayoutClass(layoutProps) {
+  var direction = layoutProps.direction,
+    wrap = layoutProps.wrap,
+    alignment = layoutProps.alignment,
+    gap = layoutProps.gap,
+    columngap = layoutProps.columngap;
+  if (direction === "row" || direction === "column") {
+    return true;
+  }
+  var extra_LayoutAttrs = [wrap, alignment, gap, columngap];
+  return extra_LayoutAttrs.some(function (v) {
+    return v !== undefined && v !== null;
+  });
+}
+var flattenIfArrayOfArrays = function flattenIfArrayOfArrays(arr) {
+  if (arr.length === 0) return arr;
+  var first = arr[0];
+  if (Array.isArray(first) && arr.every(function (x) {
+    return Array.isArray(x);
+  })) {
+    return arr.flat();
+  }
+  return Array.isArray(arr) ? arr : [];
+};
+
+/**
+ * Get safe dataset ensuring it's always an array
+ * @param dataset - Input dataset of any type
+ * @returns Array dataset with proper typing
+ */
+var _getSafeDataset = exports.getSafeDataset = function getSafeDataset(dataset) {
+  if (typeof dataset === "function") {
+    try {
+      return _getSafeDataset(dataset());
+    } catch (_unused) {
+      return [];
+    }
+  }
+  if (Array.isArray(dataset)) {
+    return flattenIfArrayOfArrays(dataset);
+  }
+  if (typeof dataset === "string") {
+    try {
+      var parsedData = dataset.split(",").map(function (str) {
+        return str.trim();
+      });
+      return Array.isArray(parsedData) ? parsedData : [];
+    } catch (e) {
+      return [];
+    }
+  } else if (!(dataset instanceof Array) && (0, _isObject["default"])(dataset) && Object.keys(dataset).length > 0) {
+    return dataset ? [dataset] : [];
+  }
+  return Array.isArray(dataset) ? dataset : [];
+};
+
+// Type definition for list state
+
+var saveListState = exports.saveListState = function saveListState(name, storage, stateToSave) {
+  // Simply save the provided state
+  (0, _statePersistance.setWidgetState)({
+    name: name,
+    type: "list",
+    storage: storage
+  }, stateToSave);
+};
+var getListState = exports.getListState = function getListState(name, storage) {
+  var state = (0, _statePersistance.getWidgetState)({
+    name: name,
+    type: "list",
+    storage: storage
+  });
+  return state;
+};
+var clearListState = exports.clearListState = function clearListState(name, storage) {
+  (0, _statePersistance.clearWidgetState)({
+    name: name,
+    storage: storage,
+    type: "list"
+  });
+};
+
+// Helper function to get all descendant elements with data-widget-id
+var getAllDescendants = function getAllDescendants(element) {
+  var all = [];
+  function traverse(node) {
+    // include the node itself if it has data-widget-id
+    if (node.nodeType === 1 && node.hasAttribute("data-widget-id")) {
+      all.push(node);
+    }
+    // go deeper
+    var _iterator = _createForOfIteratorHelper(node.children),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var child = _step.value;
+        traverse(child);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  traverse(element);
+  return all;
+};
+var getSelectedItemWidgets = exports.getSelectedItemWidgets = function getSelectedItemWidgets(event, listener, name, item, Widgets) {
+  var _item$_wmListItemId, _item$_wmListItemId$t;
+  var id = item === null || item === void 0 || (_item$_wmListItemId = item._wmListItemId) === null || _item$_wmListItemId === void 0 || (_item$_wmListItemId$t = _item$_wmListItemId.toString) === null || _item$_wmListItemId$t === void 0 ? void 0 : _item$_wmListItemId$t.call(_item$_wmListItemId).split("_").pop();
+  var currentItemWidgets = {};
+  if (id) {
+    Widgets && Object.keys(Widgets).filter(function (key) {
+      return key.startsWith("".concat(name, "_").concat(id, "_"));
+    }).forEach(function (key) {
+      currentItemWidgets[Widgets[key].name] = Widgets[key];
+    });
+  }
+  var currentItem = currentItemWidgets;
+  if (listener && currentItem && Object.keys(currentItem).length > 0) {
+    listener.onChange(name, {
+      selectedItemWidgets: currentItem,
+      selecteditem: item
+    });
+  }
+};

package/components/data/list/utils/list-widget-methods.d.ts

@@ -0,0 +1,4 @@
+import type { SyntheticEvent } from "react";
+import { ListItemData } from "../props";
+import { ListState, ListWidgetMethods } from "../props";
+export declare const useListWidgetMethods: (items: ListItemData[], listState: ListState, multiselect: boolean, onSelect?: (widgetInstance: any, item: ListItemData, event?: SyntheticEvent | null) => void, widgetInstance?: any, listener?: any, userInitiatedSelectionRef?: React.MutableRefObject<boolean>, name?: string, Widgets?: any, size?: number, setIsListCleared?: (isListCleared: boolean) => void, handlePageSizeChange?: (newPageSize: number) => void) => ListWidgetMethods;

package/components/data/list/utils/list-widget-methods.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useListWidgetMethods = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _lodashEs = require("lodash-es");
+var _widgetInstanceUtils = require("./widget-instance-utils");
+var useListWidgetMethods = exports.useListWidgetMethods = function useListWidgetMethods(items, listState, multiselect, onSelect, widgetInstance, listener, userInitiatedSelectionRef, name, Widgets, size, setIsListCleared, handlePageSizeChange) {
+  // Return methods object directly without useMemo to avoid infinite re-renders
+  // Methods always have access to current values through closure
+  return {
+    // Helper function to find an item by index or model
+    getItemByIndexOrModel: function getItemByIndexOrModel(val) {
+      if (typeof val === "number") {
+        return items[val];
+      } else {
+        return items.find(function (item) {
+          return item === val;
+        });
+      }
+    },
+    // Selects an item in the list by index or model
+    selectItem: function selectItem(val, statePersistenceTriggered) {
+      var getItemByIndexOrModel = function getItemByIndexOrModel(val) {
+        if (typeof val === "number") {
+          return items[val];
+        } else {
+          return items.find(function (item) {
+            return item === val;
+          });
+        }
+      };
+      var item = getItemByIndexOrModel(val);
+      if (!item) {
+        return;
+      }
+      var isAlreadySelected = listState.activeItems.has(item);
+      if (!isAlreadySelected) {
+        if (!statePersistenceTriggered && userInitiatedSelectionRef) {
+          userInitiatedSelectionRef.current = true;
+        }
+        if (multiselect) {
+          var newSelectedItems = [].concat((0, _toConsumableArray2["default"])(listState.selectedItems), [item]);
+          var newActiveItems = new Set(listState.activeItems);
+          newActiveItems.add(item);
+          listState.setSelectedItems(newSelectedItems);
+          listState.setActiveItems(newActiveItems);
+          if (!listState.firstSelectedItem) {
+            listState.setFirstSelectedItem(item);
+          }
+        } else {
+          listState.setSelectedItems([item]);
+          listState.setActiveItems(new Set([item]));
+          listState.setFirstSelectedItem(item);
+        }
+        if (onSelect && widgetInstance && !statePersistenceTriggered) {
+          (0, _widgetInstanceUtils.setWidgetIndex)(widgetInstance, items, item);
+          onSelect(widgetInstance, item);
+        }
+      }
+    },
+    // Deselects an item in the list by index or model
+    deselectItem: function deselectItem(val) {
+      var getItemByIndexOrModel = function getItemByIndexOrModel(val) {
+        if (typeof val === "number") {
+          return items[val];
+        } else {
+          return items.find(function (item) {
+            return item === val;
+          });
+        }
+      };
+      var item = getItemByIndexOrModel(val);
+      if (!item) {
+        return;
+      }
+      var isSelected = Array.from(listState.activeItems).some(function (activeItem) {
+        return (0, _lodashEs.isEqual)(activeItem, item);
+      });
+      if (isSelected) {
+        if (userInitiatedSelectionRef) {
+          userInitiatedSelectionRef.current = true;
+        }
+        var newSelectedItems = listState.selectedItems.filter(function (selectedItem) {
+          return !(0, _lodashEs.isEqual)(selectedItem, item);
+        });
+        var newActiveItems = new Set(Array.from(listState.activeItems).filter(function (activeItem) {
+          return !(0, _lodashEs.isEqual)(activeItem, item);
+        }));
+        listState.setSelectedItems(newSelectedItems);
+        listState.setActiveItems(newActiveItems);
+        if ((0, _lodashEs.isEqual)(listState.firstSelectedItem, item)) {
+          listState.setFirstSelectedItem(newSelectedItems[0] || null);
+        }
+      }
+    },
+    // Get item by index
+    getItem: function getItem(index) {
+      var item = items[index];
+      if (item) {
+        return {
+          item: item
+        };
+      }
+      return undefined;
+    },
+    // Get index of item
+    getIndex: function getIndex(item) {
+      var index = items.findIndex(function (listItem) {
+        return (0, _lodashEs.isEqual)(listItem, item);
+      });
+      if (index !== -1) {
+        return index;
+      }
+      return -1;
+    },
+    // Clear all selections
+    clear: function clear() {
+      setIsListCleared === null || setIsListCleared === void 0 || setIsListCleared(true);
+    },
+    // Get widgets by name and optional index
+    getWidgets: function getWidgets(widgetName, index) {
+      if (!widgetName) {
+        return undefined;
+      }
+
+      // Helper to find widget with optional random suffix (e.g., _dfj, _fdj)
+      var findWidget = function findWidget(prefix) {
+        // Look for key with random suffix pattern: prefix_xxx
+        for (var key in Widgets) {
+          if (key.startsWith(prefix + "_") || key === prefix) {
+            return Widgets[key];
+          }
+        }
+        return null;
+      };
+      if (index !== undefined) {
+        return findWidget("".concat(name, "_").concat(index, "_").concat(widgetName));
+      }
+      var items = [];
+      for (var i = 0; i < (size || 0); i++) {
+        var item = findWidget("".concat(name, "_").concat(i, "_").concat(widgetName));
+        if (item) {
+          items.push(item);
+        }
+      }
+      return items;
+    },
+    // Select page size - changes the pagination page size
+    selectPageSize: function selectPageSize(newPageSize) {
+      if (handlePageSizeChange && typeof newPageSize === "number" && newPageSize > 0) {
+        handlePageSizeChange(newPageSize);
+      }
+    }
+  };
+};

package/components/data/list/utils/widget-instance-utils.d.ts

@@ -0,0 +1,33 @@
+import { ListItemData } from "../props";
+/**
+ * Sets the $index property on widget instance based on item position in items array
+ *
+ * @param widgetInstance - The widget instance (proxy object from useWidgetProxy)
+ * @param items - Array of list items
+ * @param item - The current item to find index for
+ */
+export declare const setWidgetIndex: <T extends ListItemData = ListItemData>(widgetInstance: unknown | undefined, items: T[], item: T | null) => void;
+/**
+ * Sets the $index property for pagination-based callbacks (page number converted to 0-based index)
+ *
+ * @param widgetInstance - The widget instance
+ * @param page - The page number (1-based)
+ */
+export declare const setWidgetPageIndex: (widgetInstance: unknown | undefined, page: number) => void;
+/**
+ * Sets both $index and context on widget instance (used for selection operations)
+ *
+ * @param widgetInstance - The widget instance
+ * @param items - Array of list items
+ * @param selectedItem - The selected item
+ */
+export declare const setWidgetIndexWithContext: <T extends ListItemData = ListItemData>(widgetInstance: unknown | undefined, items: T[], selectedItem: T) => void;
+/**
+ * Sets item property on widget instance along with $index
+ * Used in click handlers where we need to store the current item
+ *
+ * @param widgetInstance - The widget instance
+ * @param items - Array of list items
+ * @param item - The current item
+ */
+export declare const setWidgetItem: <T extends ListItemData = ListItemData>(widgetInstance: unknown | undefined, items: T[], item: T) => void;

package/components/data/list/utils/widget-instance-utils.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setWidgetPageIndex = exports.setWidgetItem = exports.setWidgetIndexWithContext = exports.setWidgetIndex = void 0;
+var _lodashEs = require("lodash-es");
+/**
+ * Sets the $index property on widget instance based on item position in items array
+ *
+ * @param widgetInstance - The widget instance (proxy object from useWidgetProxy)
+ * @param items - Array of list items
+ * @param item - The current item to find index for
+ */
+var setWidgetIndex = exports.setWidgetIndex = function setWidgetIndex(widgetInstance, items, item) {
+  if (!widgetInstance || !item) {
+    return;
+  }
+  var instance = widgetInstance;
+  var itemIndex = (0, _lodashEs.findIndex)(items, function (i) {
+    return i === item;
+  });
+  instance.$index = itemIndex;
+};
+
+/**
+ * Sets the $index property for pagination-based callbacks (page number converted to 0-based index)
+ *
+ * @param widgetInstance - The widget instance
+ * @param page - The page number (1-based)
+ */
+var setWidgetPageIndex = exports.setWidgetPageIndex = function setWidgetPageIndex(widgetInstance, page) {
+  if (!widgetInstance) {
+    return;
+  }
+  var instance = widgetInstance;
+  var pageIndex = page - 1; // Page index is 1-based, convert to 0-based
+  instance.$index = pageIndex;
+};
+
+/**
+ * Sets both $index and context on widget instance (used for selection operations)
+ *
+ * @param widgetInstance - The widget instance
+ * @param items - Array of list items
+ * @param selectedItem - The selected item
+ */
+var setWidgetIndexWithContext = exports.setWidgetIndexWithContext = function setWidgetIndexWithContext(widgetInstance, items, selectedItem) {
+  if (!widgetInstance || !selectedItem) {
+    return;
+  }
+  var instance = widgetInstance;
+  var itemIndex = items.findIndex(function (item) {
+    return item === selectedItem;
+  });
+  instance.$index = itemIndex;
+  instance.context = {
+    $index: itemIndex,
+    $count: items.length,
+    $implicit: selectedItem,
+    item: selectedItem
+  };
+};
+
+/**
+ * Sets item property on widget instance along with $index
+ * Used in click handlers where we need to store the current item
+ *
+ * @param widgetInstance - The widget instance
+ * @param items - Array of list items
+ * @param item - The current item
+ */
+var setWidgetItem = exports.setWidgetItem = function setWidgetItem(widgetInstance, items, item) {
+  if (!widgetInstance || !item) {
+    return;
+  }
+  var instance = widgetInstance;
+  delete instance._wmListItemId;
+  instance.item = item;
+  instance.$index = (0, _lodashEs.findIndex)(items, function (i) {
+    return i === item;
+  });
+};

package/components/data/live-filter/index.d.ts

@@ -0,0 +1,15 @@
+import { WmLiveFilterProps } from "./props";
+declare const WmLiveFilter: {
+    (prop: WmLiveFilterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The WmLiveFilter component is used to filter data from a data source.
+ *
+ * - [Playground](https://react-components.wavemaker.ai/?path=/story/data-live-filter--showcase)
+ *
+ * - [Docs](https://react-components.wavemaker.ai/?path=/story/data-live-filter--docs#tab-overview)
+ *
+ * @param props - {@link WmLiveFilterProps}
+ */
+export default WmLiveFilter;