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

package/utils/transformedDataset-utils.js

@@ -0,0 +1,616 @@
+var __defProp = Object.defineProperty;
+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 __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { getEvaluatedData, getObjValueByKey } from "./widgets";
+import {
+  cloneDeep,
+  forEach,
+  get,
+  groupBy as lodashGroupBy,
+  includes,
+  isArray,
+  isEqual,
+  isNull,
+  isObject,
+  isString,
+  isUndefined,
+  orderBy as _orderBy,
+  sortBy as lodashSortBy,
+  split,
+  trim,
+  uniqBy,
+  uniqWith,
+  values as lodashValues,
+  filter
+} from "lodash-es";
+import * as momentLib from "moment";
+const ALLFIELDS = "All Fields";
+const moment = momentLib.default || window["moment"];
+const isDefined = (val) => val !== void 0 && val !== null;
+const getFormattedDate = (date, format) => {
+  return moment(date).format(format);
+};
+const isEqualWithFields = (objA, objB, fieldsStr) => {
+  if (!fieldsStr || !isString(fieldsStr)) {
+    return isEqual(objA, objB);
+  }
+  const fields = fieldsStr.split(",").map((f) => f.trim());
+  if (!objA || !objB) {
+    return objA === objB;
+  }
+  for (const field of fields) {
+    if (!isEqual(get(objA, field), get(objB, field))) {
+      return false;
+    }
+  }
+  return true;
+};
+const GROUP_BY_OPTIONS = {
+  ALPHABET: "alphabet",
+  WORD: "word",
+  OTHERS: "Others"
+};
+const TIME_ROLLUP_OPTIONS = {
+  HOUR: "hour",
+  DAY: "day",
+  WEEK: "week",
+  MONTH: "month",
+  YEAR: "year"
+};
+const ROLLUP_PATTERNS = {
+  DAY: "YYYY-MM-DD",
+  WEEK: "wo [Week], YYYY",
+  // Example: 42nd Week, 2023 (moment's week format)
+  MONTH: "MMM, YYYY",
+  YEAR: "YYYY",
+  HOUR: "hh:mm A"
+};
+class DataSetItem {
+  constructor() {
+    __publicField(this, "key");
+    __publicField(this, "label");
+    __publicField(this, "value");
+    __publicField(this, "dataObject");
+    __publicField(this, "index");
+    __publicField(this, "imgSrc");
+    __publicField(this, "selected");
+    __publicField(this, "children");
+    __publicField(this, "match");
+    __publicField(this, "dateformat");
+  }
+}
+const _internalTransformDataset = (dataset, datafield, displayfield, displaylabel, displayexpression, orderby, groupby, dataPath, itemchildren, match) => {
+  return datasetItems(
+    dataset,
+    datafield,
+    displayfield,
+    displaylabel,
+    displayexpression,
+    orderby,
+    groupby,
+    dataPath,
+    itemchildren,
+    match
+  );
+};
+const resolver = (...args) => {
+  return args.map((arg) => {
+    if (typeof arg === "function") {
+      return arg.toString();
+    }
+    return JSON.stringify(arg);
+  }).join("|");
+};
+const transformDataset = _internalTransformDataset;
+const getOrderedDataset = (dataSet, orderBy, innerItem) => {
+  if (!orderBy) {
+    return cloneDeep(dataSet);
+  }
+  const items = orderBy.split(",");
+  const fields = [];
+  const directions = [];
+  items.forEach((obj) => {
+    const item = obj.split(":");
+    fields.push(innerItem ? `${innerItem}.${item[0]}` : item[0]);
+    directions.push(item[1]);
+  });
+  return _orderBy(dataSet, fields, directions);
+};
+const transformDataWithKeys = (dataSet) => {
+  const data = [];
+  if (isObject(dataSet[0]) || isObject(dataSet) && !isArray(dataSet)) {
+    const objectKeys = Object.keys(dataSet[0] || dataSet);
+    forEach(objectKeys, (objKey, index) => {
+      data.push({
+        key: objKey,
+        label: objKey,
+        value: objKey,
+        index: (index || 0) + 1
+        // Ensure index is number
+      });
+    });
+  }
+  return data;
+};
+const extractDataAsArray = (data) => {
+  if (isUndefined(data) || isNull(data) || isString(data) && trim(data) === "") {
+    return [];
+  }
+  if (isString(data)) {
+    data = split(data, ",").map((str) => trim(str));
+  }
+  if (!isArray(data)) {
+    data = [data];
+  }
+  return data;
+};
+const convertDataToObject = (dataResult) => {
+  if (isString(dataResult)) {
+    dataResult = split(dataResult, ",").map((str) => trim(str));
+  }
+  return dataResult;
+};
+const isSearchWidget = (widgetType) => {
+  return widgetType === "wm-search";
+};
+const setGroupbyKey = (scope, context, dataSetItem, innerItem) => {
+  if (scope && isSearchWidget(scope.widgetType)) {
+    if (scope.groupby) {
+      if (includes(scope.groupby, "(") || includes(scope.groupby, "[")) {
+        console.warn(
+          `Complex groupby expression "${scope.groupby}" detected for search widget. This may not work as expected. Refactor to use a function prop.`
+        );
+        if (dataSetItem.dataObject && context) {
+          try {
+            const value = get(dataSetItem.dataObject, scope.groupby);
+            dataSetItem.key = value;
+          } catch (e) {
+            console.error(
+              "Failed to evaluate groupby expression (simple access):",
+              scope.groupby,
+              e
+            );
+            dataSetItem.key = GROUP_BY_OPTIONS.OTHERS;
+          }
+        } else {
+          dataSetItem.key = GROUP_BY_OPTIONS.OTHERS;
+        }
+      } else {
+        dataSetItem.key = get(dataSetItem.dataObject, scope.groupby);
+      }
+    } else {
+      dataSetItem.key = dataSetItem.value;
+    }
+  } else if (dataSetItem.dataObject && scope && scope.groupby) {
+    dataSetItem.key = get(dataSetItem.dataObject, scope.groupby);
+  }
+};
+function resolveDataPath(dataSet, dataPath) {
+  if (!Array.isArray(dataSet)) {
+    dataSet = [dataSet];
+  }
+  if (!dataPath) return dataSet;
+  const cleanPath = dataPath.startsWith(".") ? dataPath.substring(1) : dataPath;
+  const pathSegments = cleanPath.split(".").filter((segment) => segment.length > 0);
+  if (pathSegments.length === 0) return dataSet;
+  const flatten = (data, path) => {
+    if (path.length === 0) return data;
+    const nextKey = path[0];
+    const remainingPath = path.slice(1);
+    let result = [];
+    for (const item of data) {
+      if (!item || typeof item !== "object") continue;
+      const value = item[nextKey];
+      if (Array.isArray(value)) {
+        const next = flatten(value, remainingPath);
+        result = result.concat(next);
+      } else if ((typeof value === "object" || typeof value === "string") && value !== null) {
+        const next = flatten([value], remainingPath);
+        result = result.concat(next);
+      }
+    }
+    return result;
+  };
+  return flatten(dataSet, pathSegments);
+}
+const transformFormData = (context, dataSet, myDataField, displayOptions, startIndex, scope, dataPath) => {
+  if (dataPath) {
+    dataSet = resolveDataPath(dataSet, dataPath || "");
+  }
+  const data = [];
+  if (isString(dataSet)) {
+    dataSet = dataSet.split(",").map((str) => str.trim());
+    dataSet.forEach((option, index) => {
+      const dataSetItem = {
+        key: option,
+        value: option,
+        label: isDefined(option) && option !== null ? option.toString() : "",
+        index: (startIndex || 0) + index
+      };
+      setGroupbyKey(scope, context, dataSetItem, "value");
+      data.push(dataSetItem);
+    });
+  } else if (isArray(dataSet) && !isObject(dataSet[0])) {
+    dataSet.forEach(
+      (option, index) => {
+        const dataSetItem = {
+          key: option,
+          value: option,
+          label: isDefined(option) && option !== null ? String(option) : "",
+          index: (startIndex || 0) + index
+        };
+        setGroupbyKey(scope, context, dataSetItem, "value");
+        data.push(dataSetItem);
+      }
+    );
+  } else if (!(dataSet instanceof Array) && isObject(dataSet)) {
+    const i = 0;
+    forEach(dataSet, (value, key) => {
+      const dataSetItem = {
+        key: trim(key),
+        value: key,
+        label: isDefined(value) && value !== null ? String(value) : "",
+        index: startIndex,
+        dataObject: dataSet
+      };
+      setGroupbyKey(scope, context, dataSetItem, "value");
+      data.push(dataSetItem);
+    });
+  } else {
+    if (!myDataField) {
+      myDataField = ALLFIELDS;
+    }
+    dataSet.forEach((option, index) => {
+      const key = myDataField === ALLFIELDS ? (startIndex != null ? startIndex : 0) + index : getObjValueByKey(option, myDataField);
+      if (!isUndefined(key) && !isNull(key)) {
+        const label = getEvaluatedData(
+          option,
+          {
+            field: displayOptions.displayField,
+            expression: displayOptions.displayExpr,
+            bindExpression: displayOptions.bindDisplayExpr
+          },
+          option
+        );
+        const hasDisplayExpr = displayOptions == null ? void 0 : displayOptions.displayExpr;
+        const hasDisplayField = displayOptions == null ? void 0 : displayOptions.displayField;
+        const finalLabel = isDefined(label) && label !== null ? label.toString() : !hasDisplayExpr && !hasDisplayField && key !== void 0 && key !== null ? String(key) : "";
+        const dataSetItem = {
+          key,
+          label: finalLabel,
+          value: myDataField === ALLFIELDS ? option : key,
+          dataObject: option,
+          // represents the object when datafield is ALLFIELDS. This is used as innerItem while grouping the datasetItems.
+          index: (startIndex != null ? startIndex : 0) + index
+        };
+        if (displayOptions.displayImgSrc || displayOptions.bindDisplayImgSrc) {
+          dataSetItem.imgSrc = getEvaluatedData(
+            option,
+            {
+              expression: displayOptions.displayImgSrc,
+              bindExpression: displayOptions.bindDisplayImgSrc
+            },
+            context
+          );
+        }
+        setGroupbyKey(scope, context, dataSetItem, "dataObject");
+        data.push(dataSetItem);
+      }
+    });
+  }
+  return data;
+};
+const getUniqObjsByDataField = (data, dataField, displayField, allowEmptyFields) => {
+  let uniqData;
+  const isAllFields = dataField === ALLFIELDS;
+  uniqData = isAllFields ? uniqWith(data, isEqual) : uniqBy(data, "key");
+  if (!displayField || allowEmptyFields) {
+    return uniqData;
+  }
+  return filter(uniqData, (obj) => {
+    if (isAllFields) {
+      return trim(obj.label);
+    }
+    return trim(obj.key) && trim(obj.label);
+  });
+};
+const setItemByCompare = (datasetItems2, compareWithDataObj, compareByField) => {
+  return datasetItems2.find((item) => {
+    if (item.dataObject) {
+      return isEqualWithFields(compareWithDataObj, item.dataObject, compareByField);
+    }
+    return false;
+  });
+};
+const getSortedGroupedData = (groupedLiData, groupBy, orderby) => {
+  const data = lodashValues(groupedLiData).map((val) => {
+    if (orderby) {
+      val.data = getOrderedDataset(val.data, orderby, "dataObject");
+    }
+    return val;
+  });
+  return lodashSortBy(data, `data[0].dataObject.${groupBy}`);
+};
+const datasetItems = (dataset, datafield, displayfield, displaylabel, displayexpression, orderby, groupby, dataPath, itemchildren, match) => {
+  var _a, _b, _c, _d;
+  if (!dataset) return [];
+  let items = transformFormData(
+    null,
+    dataset,
+    datafield,
+    {
+      displayField: displayfield || displaylabel,
+      displayExpr: displayexpression
+    },
+    0,
+    null,
+    dataPath
+  );
+  items = getUniqObjsByDataField(
+    items,
+    datafield,
+    displayfield || displaylabel,
+    false
+  );
+  if (orderby) {
+    const orderFields = orderby.split(",");
+    items.sort((a, b) => {
+      var _a2, _b2;
+      for (const orderField of orderFields) {
+        const [field, order] = orderField.split(":");
+        const aVal = String(((_a2 = a.dataObject) == null ? void 0 : _a2[field]) || a.label || "");
+        const bVal = String(((_b2 = b.dataObject) == null ? void 0 : _b2[field]) || b.label || "");
+        const comparison = order === "desc" ? bVal.localeCompare(aVal, "en", { numeric: true }) : aVal.localeCompare(bVal, "en", { numeric: true });
+        if (comparison !== 0) return comparison;
+      }
+      return 0;
+    });
+  }
+  for (const item of items) {
+    let children;
+    if (typeof itemchildren === "function") {
+      children = (_a = itemchildren(item == null ? void 0 : item.dataObject)) != null ? _a : itemchildren(item);
+      if (Array.isArray(children)) {
+        const sortedChildren = datasetItems(
+          children,
+          datafield,
+          displayfield,
+          displaylabel,
+          displayexpression,
+          orderby,
+          groupby,
+          dataPath,
+          itemchildren,
+          match
+        );
+        if (itemchildren(item == null ? void 0 : item.dataObject)) {
+          if (item.dataObject) item.dataObject.children = sortedChildren;
+        } else if (itemchildren(item)) {
+          item.children = sortedChildren;
+        }
+      }
+    } else {
+      children = (_c = (_b = item == null ? void 0 : item.dataObject) == null ? void 0 : _b[itemchildren]) != null ? _c : item == null ? void 0 : item[itemchildren];
+      if (Array.isArray(children)) {
+        const sortedChildren = datasetItems(
+          children,
+          datafield,
+          displayfield,
+          displaylabel,
+          displayexpression,
+          orderby,
+          groupby,
+          dataPath,
+          itemchildren,
+          match
+        );
+        if ((_d = item == null ? void 0 : item.dataObject) == null ? void 0 : _d[itemchildren]) {
+          item.dataObject.children = sortedChildren;
+        } else if (item == null ? void 0 : item[itemchildren]) {
+          item.children = sortedChildren;
+        }
+      }
+    }
+  }
+  if (groupby) {
+    items = groupData(null, items, groupby, match || "word", "", "");
+  }
+  return items;
+};
+const groupData = (compRef, data, groupby, match, orderby, dateformat, innerItem = "dataObject", AppDefaults) => {
+  if (!groupby || !data || !data.length) {
+    return [];
+  }
+  const groupedData = getGroupedData(
+    data,
+    groupby,
+    match,
+    orderby,
+    dateformat,
+    innerItem,
+    AppDefaults
+  );
+  return getSortedGroupedData(groupedData, groupby, orderby);
+};
+const getGroupedData = (fieldDefs, groupby, match, orderby, dateFormat, innerItem, AppDefaults) => {
+  const mappedData = fieldDefs.map((item) => {
+    const groupByKey = groupDataByField(
+      groupby,
+      match,
+      innerItem,
+      dateFormat,
+      /*datePipe,*/
+      AppDefaults,
+      item
+    );
+    return { groupByKey, data: item };
+  });
+  const groupedData = lodashGroupBy(mappedData, "groupByKey");
+  const result = {};
+  forEach(groupedData, (value, key) => {
+    result[key] = { key, data: value.map((v) => v.data) };
+  });
+  return result;
+};
+const filterDateReact = (value, format, defaultFormat) => {
+  if (!isDefined(value) || value === "") {
+    return "";
+  }
+  const mDate = moment(value);
+  if (mDate.isValid()) {
+    return mDate.format(format || defaultFormat);
+  }
+  return String(value);
+};
+const getTimeRolledUpString = (concatStr, rollUp, dateformat, AppDefaults) => {
+  if (!isDefined(concatStr) || concatStr === "") {
+    return GROUP_BY_OPTIONS.OTHERS;
+  }
+  const mDate = moment(concatStr);
+  if (!mDate.isValid()) {
+    return GROUP_BY_OPTIONS.OTHERS;
+  }
+  const appDateFormat = AppDefaults && AppDefaults.dateFormat ? AppDefaults.dateFormat : "yyyy-MM-dd";
+  const calendarDayFormats = {
+    lastDay: "[Yesterday]",
+    lastWeek: "[Last] dddd",
+    nextDay: "[Tomorrow]",
+    nextWeek: "dddd",
+    sameDay: "[Today]",
+    sameElse: appDateFormat.replace(/y/g, "Y").replace(/d/g, "D")
+    // Adjust to moment format tokens
+  };
+  if (rollUp === TIME_ROLLUP_OPTIONS.DAY) {
+    return mDate.calendar(null, calendarDayFormats);
+  }
+  if (rollUp === TIME_ROLLUP_OPTIONS.WEEK) {
+    return mDate.format(ROLLUP_PATTERNS.WEEK || "wo [Week], YYYY");
+  }
+  if (rollUp === TIME_ROLLUP_OPTIONS.MONTH) {
+    return mDate.format(ROLLUP_PATTERNS.MONTH || "MMM, YYYY");
+  }
+  if (rollUp === TIME_ROLLUP_OPTIONS.YEAR) {
+    return mDate.format(ROLLUP_PATTERNS.YEAR || "YYYY");
+  }
+  if (rollUp === TIME_ROLLUP_OPTIONS.HOUR) {
+    const baseFormat = ROLLUP_PATTERNS.HOUR || "hh:mm A";
+    if (mDate.isSame(moment(), "day")) {
+      return `[Today], ${mDate.format(baseFormat)}`;
+    }
+    return mDate.format(`${ROLLUP_PATTERNS.DAY}, ${baseFormat}`);
+  }
+  if (dateformat) {
+    return filterDateReact(mDate.toDate(), dateformat, appDateFormat);
+  }
+  return mDate.format(appDateFormat.replace(/y/g, "Y").replace(/d/g, "D"));
+};
+const groupDataByField = (groupby, match, innerItem, dateFormat, AppDefaults, liData) => {
+  let concatStr = get(innerItem ? liData[innerItem] : liData, groupby);
+  if (isUndefined(concatStr) || isNull(concatStr) || isString(concatStr) && concatStr.toString().trim() === "") {
+    return GROUP_BY_OPTIONS.OTHERS;
+  }
+  if (match === GROUP_BY_OPTIONS.ALPHABET) {
+    return String(concatStr).substr(0, 1).toUpperCase();
+  }
+  if (match === GROUP_BY_OPTIONS.WORD) {
+    return String(concatStr);
+  }
+  if (includes(lodashValues(TIME_ROLLUP_OPTIONS), match)) {
+    return getTimeRolledUpString(String(concatStr), match, dateFormat, AppDefaults);
+  }
+  return String(concatStr);
+};
+const toggleAllHeaders = (containerRef) => {
+  const groups = containerRef.querySelectorAll(".item-group");
+  groups.forEach((group) => {
+    const listItems = group.querySelectorAll(".group-list-item");
+    const icon = group.querySelector("li.list-group-header .app-icon");
+    listItems.forEach((item) => {
+      const currentDisplay = window.getComputedStyle(item).display;
+      item.style.display = currentDisplay === "none" ? "block" : "none";
+    });
+    if (icon) {
+      if (icon.classList.contains("wi-chevron-down")) {
+        icon.classList.remove("wi-chevron-down");
+        icon.classList.add("wi-chevron-up");
+      } else {
+        icon.classList.remove("wi-chevron-up");
+        icon.classList.add("wi-chevron-down");
+      }
+    }
+  });
+};
+const handleHeaderClick = (event) => {
+  const target = event.target;
+  const selectedGroup = target.closest(".item-group");
+  if (!selectedGroup) return;
+  const selectedAppIcon = selectedGroup.querySelector("li.list-group-header .app-icon");
+  const listItems = selectedGroup.querySelectorAll(".group-list-item");
+  if (selectedAppIcon) {
+    if (selectedAppIcon.classList.contains("wi-chevron-down")) {
+      selectedAppIcon.classList.remove("wi-chevron-down");
+      selectedAppIcon.classList.add("wi-chevron-up");
+    } else {
+      selectedAppIcon.classList.remove("wi-chevron-up");
+      selectedAppIcon.classList.add("wi-chevron-down");
+    }
+  }
+  listItems.forEach((item) => {
+    const currentDisplay = window.getComputedStyle(item).display;
+    item.style.display = currentDisplay === "none" ? "block" : "none";
+  });
+};
+const configureDnD = (element, options = {}, onDragStart, onUpdate, onSort) => {
+  const defaultOptions = {
+    containment: element,
+    delay: 100,
+    opacity: 0.8,
+    helper: "clone",
+    zIndex: 1050,
+    tolerance: "pointer"
+  };
+  const finalOptions = __spreadValues(__spreadValues({}, defaultOptions), options);
+  element.addEventListener("dragstart", onDragStart);
+  element.addEventListener("dragend", onUpdate);
+  if (onSort) {
+    element.addEventListener("drag", onSort);
+  }
+  const draggableItems = element.children;
+  Array.from(draggableItems).forEach((item) => {
+    item.draggable = true;
+    item.style.userSelect = "none";
+    if (finalOptions.opacity) {
+      item.style.opacity = "1";
+    }
+  });
+};
+export {
+  DataSetItem,
+  configureDnD,
+  convertDataToObject,
+  datasetItems,
+  extractDataAsArray,
+  getOrderedDataset,
+  getUniqObjsByDataField,
+  groupData,
+  handleHeaderClick,
+  setItemByCompare,
+  toggleAllHeaders,
+  transformDataWithKeys,
+  transformDataset,
+  transformFormData
+};

package/utils/widget-cleanup-util.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Removes widgets from page context, cleans up registry, and returns the new context.
+ * Returns prev unchanged if no widgets were present.
+ *
+ * @param prev - Current page context
+ * @param names - Widget names to remove
+ * @returns New context with widgets removed, or prev if no changes
+ */
+export declare function removeWidgetsFromContext(context: any, proxy: any, names: string[]): any;
+/**
+ * Configuration for the widget cleanup utility
+ */
+export interface WidgetCleanupConfig {
+    /** Function to update the page context state */
+    setPageContext: (updater: (prev: any) => any) => void;
+    /** Reference to the proxy object (optional) */
+    proxyRef?: React.MutableRefObject<any>;
+    /** Debounce delay in milliseconds (default: 100) */
+    debounceDelay?: number;
+}
+/**
+ * Creates a debounced widget cleanup utility function
+ * This eliminates code duplication between WidgetProvider and BasePage
+ *
+ * @param config - Configuration object for the cleanup utility
+ * @returns Object containing cleanup function and cleanupRef
+ */
+export declare const createWidgetCleanup: (config: WidgetCleanupConfig) => {
+    cleanup: (name: string) => void;
+    cleanupRef: Set<string>;
+    cancel: () => void;
+};