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

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

@@ -0,0 +1,153 @@
+import { LIST_ALIGN } from "./constants";
+import {
+  clearWidgetState,
+  getWidgetState,
+  setWidgetState
+} from "../../../../utils/state-persistance";
+import isObject from "lodash-es/isObject";
+import { extractDataArray } from "../../table/utils";
+const getItemsPerRowClass = (itemsperrow, direction) => {
+  if (direction === "horizontal") {
+    return "";
+  }
+  if (!itemsperrow) {
+    return "col-xs-12";
+  }
+  if (isNaN(parseInt(itemsperrow, 10))) {
+    return itemsperrow.split(" ").map((cls) => {
+      const [tier, value] = cls.split("-");
+      const colSize = 12 / parseInt(value, 10);
+      return `col-${tier}-${colSize}`;
+    }).join(" ").trim();
+  }
+  const numValue = parseInt(itemsperrow, 10);
+  return `col-xs-${12 / numValue}`;
+};
+const getTextAlignClass = (align) => {
+  switch (align) {
+    case LIST_ALIGN.CENTER:
+      return "text-center";
+    case LIST_ALIGN.RIGHT:
+      return "text-right";
+    case LIST_ALIGN.LEFT:
+    default:
+      return "text-left";
+  }
+};
+function hasListGroupAutoLayoutClass(layoutProps) {
+  const { direction, wrap, alignment, gap, columngap } = layoutProps;
+  if (direction === "row" || direction === "column") {
+    return true;
+  }
+  const extra_LayoutAttrs = [wrap, alignment, gap, columngap];
+  return extra_LayoutAttrs.some((v) => v !== void 0 && v !== null);
+}
+const resolveDisableItem = (disableitem, item, index) => {
+  if (!disableitem) {
+    return false;
+  }
+  if (typeof disableitem === "function") {
+    return !!disableitem(item, index);
+  }
+  return disableitem;
+};
+const flattenIfArrayOfArrays = (arr) => {
+  if (arr.length === 0) return arr;
+  const first = arr[0];
+  if (Array.isArray(first) && arr.every((x) => Array.isArray(x))) {
+    return arr.flat();
+  }
+  return Array.isArray(arr) ? arr : [];
+};
+const getSafeDataset = (dataset, datasource) => {
+  if (typeof dataset === "function") {
+    try {
+      return getSafeDataset(dataset(), datasource);
+    } catch (e) {
+      return [];
+    }
+  }
+  if (Array.isArray(dataset)) {
+    return flattenIfArrayOfArrays(dataset);
+  }
+  if (typeof dataset === "string") {
+    try {
+      const parsedData = dataset.split(",").map((str) => str.trim());
+      return Array.isArray(parsedData) ? parsedData : [];
+    } catch (e) {
+      return [];
+    }
+  } else if (!(dataset instanceof Array) && isObject(dataset) && Object.keys(dataset).length > 0) {
+    if (datasource) {
+      return flattenIfArrayOfArrays(extractDataArray(dataset));
+    }
+    return dataset ? [dataset] : [];
+  }
+  return Array.isArray(dataset) ? dataset : [];
+};
+const saveListState = (name, storage, stateToSave) => {
+  setWidgetState(
+    {
+      name,
+      type: "list",
+      storage
+    },
+    stateToSave
+  );
+};
+const getListState = (name, storage) => {
+  const state = getWidgetState({
+    name,
+    type: "list",
+    storage
+  });
+  return state;
+};
+const clearListState = (name, storage) => {
+  clearWidgetState({
+    name,
+    storage,
+    type: "list"
+  });
+};
+const getAllDescendants = (element) => {
+  const all = [];
+  function traverse(node) {
+    if (node.nodeType === 1 && node.hasAttribute("data-widget-id")) {
+      all.push(node);
+    }
+    for (let child of node.children) {
+      traverse(child);
+    }
+  }
+  traverse(element);
+  return all;
+};
+const getSelectedItemWidgets = (event, listener, name, item, Widgets) => {
+  var _a, _b;
+  const id = (_b = (_a = item == null ? void 0 : item._wmListItemId) == null ? void 0 : _a.toString) == null ? void 0 : _b.call(_a).split("_").pop();
+  let currentItemWidgets = {};
+  if (id) {
+    Widgets && Object.keys(Widgets).filter((key) => key.startsWith(`${name}_${id}_`)).forEach((key) => {
+      currentItemWidgets[Widgets[key].name] = Widgets[key];
+    });
+  }
+  const currentItem = currentItemWidgets;
+  if (listener && currentItem && Object.keys(currentItem).length > 0) {
+    listener.onChange(name, {
+      selectedItemWidgets: currentItem,
+      selecteditem: item
+    });
+  }
+};
+export {
+  clearListState,
+  getItemsPerRowClass,
+  getListState,
+  getSafeDataset,
+  getSelectedItemWidgets,
+  getTextAlignClass,
+  hasListGroupAutoLayoutClass,
+  resolveDisableItem,
+  saveListState
+};

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,139 @@
+import { isEqual } from "lodash-es";
+import { setWidgetIndex } from "./widget-instance-utils";
+const useListWidgetMethods = (items, listState, multiselect, onSelect, widgetInstance, listener, userInitiatedSelectionRef, name, Widgets, size, setIsListCleared, handlePageSizeChange) => {
+  return {
+    // Helper function to find an item by index or model
+    getItemByIndexOrModel: (val) => {
+      if (typeof val === "number") {
+        return items[val];
+      } else {
+        return items.find((item) => item === val);
+      }
+    },
+    // Selects an item in the list by index or model
+    selectItem: (val, statePersistenceTriggered) => {
+      const getItemByIndexOrModel = (val2) => {
+        if (typeof val2 === "number") {
+          return items[val2];
+        } else {
+          return items.find((item2) => item2 === val2);
+        }
+      };
+      const item = getItemByIndexOrModel(val);
+      if (!item) {
+        return;
+      }
+      const isAlreadySelected = listState.activeItems.has(item);
+      if (!isAlreadySelected) {
+        if (!statePersistenceTriggered && userInitiatedSelectionRef) {
+          userInitiatedSelectionRef.current = true;
+        }
+        if (multiselect) {
+          const newSelectedItems = [...listState.selectedItems, item];
+          const 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(/* @__PURE__ */ new Set([item]));
+          listState.setFirstSelectedItem(item);
+        }
+        if (onSelect && widgetInstance && !statePersistenceTriggered) {
+          setWidgetIndex(widgetInstance, items, item);
+          onSelect(widgetInstance, item);
+        }
+      }
+    },
+    // Deselects an item in the list by index or model
+    deselectItem: (val) => {
+      const getItemByIndexOrModel = (val2) => {
+        if (typeof val2 === "number") {
+          return items[val2];
+        } else {
+          return items.find((item2) => item2 === val2);
+        }
+      };
+      const item = getItemByIndexOrModel(val);
+      if (!item) {
+        return;
+      }
+      const isSelected = Array.from(listState.activeItems).some(
+        (activeItem) => isEqual(activeItem, item)
+      );
+      if (isSelected) {
+        if (userInitiatedSelectionRef) {
+          userInitiatedSelectionRef.current = true;
+        }
+        const newSelectedItems = listState.selectedItems.filter(
+          (selectedItem) => !isEqual(selectedItem, item)
+        );
+        const newActiveItems = new Set(
+          Array.from(listState.activeItems).filter((activeItem) => !isEqual(activeItem, item))
+        );
+        listState.setSelectedItems(newSelectedItems);
+        listState.setActiveItems(newActiveItems);
+        if (isEqual(listState.firstSelectedItem, item)) {
+          listState.setFirstSelectedItem(newSelectedItems[0] || null);
+        }
+      }
+    },
+    // Get item by index
+    getItem: (index) => {
+      const item = items[index];
+      if (item) {
+        return { item };
+      }
+      return void 0;
+    },
+    // Get index of item
+    getIndex: (item) => {
+      const index = items.findIndex((listItem) => isEqual(listItem, item));
+      if (index !== -1) {
+        return index;
+      }
+      return -1;
+    },
+    // Clear all selections
+    clear: () => {
+      setIsListCleared == null ? void 0 : setIsListCleared(true);
+    },
+    // Get widgets by name and optional index
+    getWidgets: (widgetName, index) => {
+      if (!widgetName) {
+        return void 0;
+      }
+      const findWidget = (prefix) => {
+        for (const key in Widgets) {
+          if (key.startsWith(prefix + "_") || key === prefix) {
+            return Widgets[key];
+          }
+        }
+        return null;
+      };
+      if (index !== void 0) {
+        return findWidget(`${name}_${index}_${widgetName}`);
+      }
+      const items2 = [];
+      for (let i = 0; i < (size || 0); i++) {
+        const item = findWidget(`${name}_${i}_${widgetName}`);
+        if (item) {
+          items2.push(item);
+        }
+      }
+      return items2;
+    },
+    // Select page size - changes the pagination page size
+    selectPageSize: (newPageSize) => {
+      if (handlePageSizeChange && typeof newPageSize === "number" && newPageSize > 0) {
+        handlePageSizeChange(newPageSize);
+      }
+    }
+  };
+};
+export {
+  useListWidgetMethods
+};

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,46 @@
+import { findIndex } from "lodash-es";
+const setWidgetIndex = (widgetInstance, items, item) => {
+  if (!widgetInstance || !item) {
+    return;
+  }
+  const instance = widgetInstance;
+  const itemIndex = findIndex(items, (i) => i === item);
+  instance.$index = itemIndex;
+};
+const setWidgetPageIndex = (widgetInstance, page) => {
+  if (!widgetInstance) {
+    return;
+  }
+  const instance = widgetInstance;
+  const pageIndex = page - 1;
+  instance.$index = pageIndex;
+};
+const setWidgetIndexWithContext = (widgetInstance, items, selectedItem) => {
+  if (!widgetInstance || !selectedItem) {
+    return;
+  }
+  const instance = widgetInstance;
+  const itemIndex = items.findIndex((item) => item === selectedItem);
+  instance.$index = itemIndex;
+  instance.context = {
+    $index: itemIndex,
+    $count: items.length,
+    $implicit: selectedItem,
+    item: selectedItem
+  };
+};
+const setWidgetItem = (widgetInstance, items, item) => {
+  if (!widgetInstance || !item) {
+    return;
+  }
+  const instance = widgetInstance;
+  delete instance._wmListItemId;
+  instance.item = item;
+  instance.$index = findIndex(items, (i) => i === item);
+};
+export {
+  setWidgetIndex,
+  setWidgetIndexWithContext,
+  setWidgetItem,
+  setWidgetPageIndex
+};

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;

package/components/data/live-filter/index.js

@@ -0,0 +1,252 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { isArray, get } from "lodash-es";
+import { useEffect, useRef } from "react";
+import { isDefined } from "../../../core/util";
+import Form from "../form";
+import { DEFAULT_PROPS } from "./props";
+import { DataSource, FormWidgetType, DataType } from "../types";
+import {
+  getRangeFieldValue,
+  getRangeMatchMode,
+  getEnableEmptyFilter,
+  getEmptyMatchMode
+} from "../utils";
+import { isDataSetWidget } from "../utils/field-data-utils";
+import { getDistinctValuesForField } from "../utils/filter-field-util";
+const FILTER_CONSTANTS = {
+  EMPTY_KEY: "EMPTY_NULL_FILTER"
+};
+const WmLiveFilter = (prop) => {
+  var _a, _b;
+  const props = __spreadValues(__spreadValues({}, DEFAULT_PROPS), prop);
+  const isInitilised = useRef(false);
+  const isInvoked = useRef(false);
+  const isDataSourceUpdatedRef = useRef(false);
+  const dataSource = (_b = (_a = props.listener) == null ? void 0 : _a.Variables) == null ? void 0 : _b[props.dataSource];
+  function updateResults(dataSet) {
+    var _a2;
+    (_a2 = props.listener) == null ? void 0 : _a2.onChange(props.name, {
+      result: dataSet
+    });
+  }
+  async function Livefilter(options, clearFilter, formFields) {
+    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    if (!dataSource) return;
+    const dataModel = options || {};
+    let page, orderBy, pagesize, filterFields, isValid;
+    page = 1;
+    orderBy = (_a2 = props.orderBy) != null ? _a2 : "";
+    pagesize = (_b2 = props.pagesize) != null ? _b2 : 20;
+    filterFields = {};
+    try {
+      isValid = (_c = props.onBeforeservicecall) == null ? void 0 : _c.call(props, filterFields);
+      if (isValid === false) {
+        return;
+      }
+      if (isValid && isValid.error) {
+        (_d = props.toggleMessage) == null ? void 0 : _d.call(props, true, isValid.error, "error", "ERROR");
+        return;
+      }
+    } catch (err) {
+      if (err.message === "Abort") {
+        return;
+      }
+    }
+    if (clearFilter) {
+      return dataSource[DataSource.Operation.LIST_RECORDS]({
+        filterFields: {},
+        orderBy: "",
+        page: 1
+      }).then((results) => {
+        var _a3;
+        if (results) {
+          updateResults(results == null ? void 0 : results.data);
+          (_a3 = props.onSuccess) == null ? void 0 : _a3.call(props, results == null ? void 0 : results.data);
+        }
+      }).catch((err) => {
+        var _a3, _b3;
+        (_a3 = props.toggleMessage) == null ? void 0 : _a3.call(props, true, err, "error", "ERROR");
+        (_b3 = props.onResultCb) == null ? void 0 : _b3.call(props, err, false);
+        return err;
+      });
+    }
+    const fieldsArray = isArray(formFields) ? formFields : Object.values(formFields || {});
+    fieldsArray.forEach((filterField) => {
+      var _a3, _b3, _c2, _d2, _e2, _f2;
+      const fieldKey = filterField.fieldcol || filterField.name || filterField.field;
+      const submitted = dataModel == null ? void 0 : dataModel[fieldKey];
+      if (filterField["isRange"] === true || filterField["isRange"] === "true") {
+        if (submitted && typeof submitted === "object") {
+          filterField._minValue = (_c2 = (_b3 = (_a3 = submitted.minValue) != null ? _a3 : submitted.min) != null ? _b3 : submitted.start) != null ? _c2 : filterField._minValue;
+          filterField._maxValue = (_f2 = (_e2 = (_d2 = submitted.maxValue) != null ? _d2 : submitted.max) != null ? _e2 : submitted.end) != null ? _f2 : filterField._maxValue;
+        }
+      } else {
+        if (submitted !== void 0) {
+          filterField.value = submitted;
+        }
+      }
+    });
+    fieldsArray.forEach((filterField) => {
+      let fieldValue;
+      let matchMode;
+      let colName = filterField.fieldcol || filterField.name || filterField.field;
+      const minValue = filterField._minValue;
+      const maxvalue = filterField._maxValue;
+      if (filterField["isRelated"]) {
+        colName += "." + filterField["lookup-field"];
+      }
+      if (filterField["isRange"] && filterField["isRange"] != "false") {
+        fieldValue = getRangeFieldValue(minValue, maxvalue);
+        matchMode = getRangeMatchMode(minValue, maxvalue);
+        if (isDefined(fieldValue)) {
+          filterFields[colName] = {
+            value: fieldValue,
+            matchMode,
+            logicalOp: "AND"
+          };
+        }
+      } else {
+        const filterValue = "value" in filterField ? filterField.value : filterField.datavalue;
+        switch (filterField.widget) {
+          case FormWidgetType.SELECT:
+          case FormWidgetType.RADIOSET:
+            if (getEnableEmptyFilter(props.enableemptyfilter) && filterValue === FILTER_CONSTANTS.EMPTY_KEY) {
+              matchMode = getEmptyMatchMode(props.enableemptyfilter);
+              fieldValue = filterValue;
+            } else {
+              if (filterField.type === DataType.BOOLEAN) {
+                if (isDefined(filterValue) && filterValue !== "") {
+                  fieldValue = JSON.parse(filterValue);
+                }
+              } else {
+                fieldValue = filterValue;
+              }
+            }
+            break;
+          case FormWidgetType.CHECKBOXSET:
+          case FormWidgetType.CHIPS:
+            if (filterValue && filterValue.length) {
+              fieldValue = filterValue;
+            }
+            break;
+          case FormWidgetType.CHECKBOX:
+          case FormWidgetType.TOGGLE:
+            if (isDefined(filterValue) && filterValue !== "") {
+              fieldValue = filterField.type === DataType.BOOLEAN ? JSON.parse(filterValue) : filterValue;
+            }
+            break;
+          default:
+            fieldValue = filterValue;
+            break;
+        }
+        if (isDefined(fieldValue) && fieldValue !== "" && fieldValue !== null) {
+          filterFields[colName] = {};
+          if (matchMode) {
+            filterFields[colName].matchMode = matchMode;
+            fieldValue = void 0;
+          } else if (filterField.type === DataType.STRING || filterField.isRelated) {
+          }
+          filterFields[colName].value = fieldValue;
+          filterFields[colName].logicalOp = "AND";
+          filterFields[colName].type = filterField.type;
+        }
+      }
+    });
+    if (options && options.exportType || options && options.data && options.data.exportType) {
+      const exportType = (_e = options.exportType) != null ? _e : options.data.exportType;
+      return dataSource[DataSource.Operation.DOWNLOAD]({
+        data: {
+          matchMode: "anywhereignorecase",
+          filterFields,
+          orderBy,
+          exportType,
+          logicalOp: "AND",
+          exportSize: (_g = options.exportSize) != null ? _g : (_f = options.data) == null ? void 0 : _f.exportSize,
+          fields: (_i = options.fields) != null ? _i : (_h = options.data) == null ? void 0 : _h.fields,
+          fileName: (_k = options.fileName) != null ? _k : (_j = options.data) == null ? void 0 : _j.fileName
+        }
+      });
+    }
+    return dataSource[DataSource.Operation.LIST_RECORDS]({
+      filterFields,
+      orderBy,
+      page,
+      pagesize,
+      skipDataSetUpdate: true,
+      inFlightBehavior: "executeAll"
+    }).then((results) => {
+      var _a3;
+      if (results) {
+        updateResults(results == null ? void 0 : results.data);
+        (_a3 = props.onSuccess) == null ? void 0 : _a3.call(props, results == null ? void 0 : results.data);
+      }
+    }).catch((err) => {
+      var _a3, _b3;
+      (_a3 = props.toggleMessage) == null ? void 0 : _a3.call(props, true, err, "error", "ERROR");
+      (_b3 = props.onResultCb) == null ? void 0 : _b3.call(props, err, false);
+      return err;
+    });
+  }
+  function onDataSourceChange(formFields) {
+    if (isDataSourceUpdatedRef.current) return;
+    if (get(formFields, "length")) {
+      isDataSourceUpdatedRef.current = true;
+    }
+    formFields.forEach((field) => {
+      var _a2;
+      if (isDataSetWidget(field.widget)) {
+        getDistinctValuesForField(dataSource, field, {
+          widget: "widgettype",
+          enableemptyfilter: props.enableemptyfilter,
+          EMPTY_VALUE: (_a2 = props == null ? void 0 : props.listener) == null ? void 0 : _a2.appLocale.LABEL_NO_VALUE
+        });
+      }
+    });
+  }
+  useEffect(() => {
+    var _a2;
+    if (!isInitilised.current && (props == null ? void 0 : props.dataset) && ((_a2 = props == null ? void 0 : props.dataset) == null ? void 0 : _a2.length) > 0) {
+      updateResults(props.dataset);
+      isInitilised.current = true;
+    }
+  }, [props.dataset]);
+  useEffect(() => {
+    if (dataSource && dataSource.invoke && !isInvoked.current) {
+      isInvoked.current = true;
+      dataSource.invoke();
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(
+    Form,
+    __spreadProps(__spreadValues({}, props), {
+      Livefilter,
+      onDataSourceChange,
+      "form-type": "live-filter",
+      children: props.children
+    })
+  );
+};
+WmLiveFilter.displayName = "WmLiveFilter";
+var live_filter_default = WmLiveFilter;
+export {
+  live_filter_default as default
+};