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

package/components/input/chips/props.d.ts

@@ -0,0 +1,232 @@
+import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
+/**
+ * Represents a single item in the dataset.
+ */
+export interface DataSetItem {
+    /** Unique key identifying the item. */
+    key: string;
+    /** The value of the item. */
+    value: string | number | boolean;
+    /** Display label for the item. */
+    label: string;
+    /** Formatted display value. */
+    displayValue: string;
+    /** URL of the display image. */
+    displayImage?: string | null;
+    /** The original data object associated with this item. */
+    dataObject?: unknown;
+    /** Whether this is a custom (user-typed) item. */
+    iscustom?: boolean;
+}
+/**
+ * Represents a chip item (extends DataSetItem with active/duplicate state).
+ */
+export interface ChipItem extends DataSetItem {
+    /** Whether the chip is currently active/selected. */
+    active?: boolean;
+    /** Whether the chip is a duplicate. */
+    isDuplicate?: boolean;
+    /** Image source URL for the chip. */
+    imgSrc?: string | null;
+    /** Whether this is a custom (user-typed) chip. */
+    iscustom?: boolean;
+}
+/**
+ * Props specific to the WmChips component.
+ */
+export interface ChipsProps {
+    /**
+     * Set by the standalone export path; function `dataset` is evaluated in the widget for chip model + inner search.
+     */
+    standalone?: boolean;
+    /**
+     * When true, only items from the dataset can be selected (no custom input).
+     */
+    allowonlyselect?: boolean;
+    /**
+     * Whether the chips input should be focused on mount.
+     */
+    autofocus?: boolean;
+    /**
+     * CSS class applied to individual chips.
+     */
+    chipclass?: string;
+    /**
+     * The field from the dataset to use as the data value.
+     */
+    datafield?: string;
+    /**
+     * The data source bound to the chips widget.
+     */
+    dataset?: unknown[] | string | Record<string, unknown>;
+    /**
+     * The current selected data values.
+     */
+    datavalue?: unknown[] | string | Record<string, unknown>;
+    /**
+     * Date format applied to date-type fields.
+     */
+    dateformat?: string;
+    /**
+     * Whether the chips input is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Custom function to compute the display text for each chip.
+     */
+    displayexpression?: (data: Record<string, unknown>) => string;
+    /**
+     * The field from the dataset to display as the chip label.
+     */
+    displayfield?: string;
+    /**
+     * The field from the dataset to use as the chip image source.
+     */
+    displayimagesrc?: string;
+    /**
+     * Whether chip reordering via drag-and-drop is enabled.
+     */
+    enablereorder?: boolean;
+    /**
+     * The field to group chips by.
+     */
+    groupby?: string;
+    /**
+     * Position of the text input relative to chips.
+     * @default "last"
+     */
+    inputposition?: "first" | "last";
+    /**
+     * Width of the text input.
+     * @default "default"
+     */
+    inputwidth?: "default" | "full" | string;
+    /**
+     * Maximum number of chips that can be selected.
+     */
+    limit?: number;
+    /**
+     * Match mode for filtering the dataset.
+     */
+    match?: string;
+    /**
+     * Strategy for matching search input against dataset items.
+     */
+    matchmode?: string;
+    /**
+     * Maximum number of characters allowed in the chip input.
+     */
+    maxsize?: number;
+    /**
+     * Minimum characters required before showing suggestions.
+     */
+    minchars?: number;
+    /**
+     * The unique name of the chips widget (required).
+     */
+    name: string;
+    /**
+     * Field(s) to order the dataset by.
+     */
+    orderby?: string;
+    /**
+     * Placeholder text shown in the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether the chips input is read-only.
+     */
+    readonly?: boolean;
+    /**
+     * The field(s) to search on when filtering.
+     */
+    searchkey?: string;
+    /**
+     * Whether to show a search icon in the input.
+     */
+    showsearchicon?: boolean;
+    /**
+     * Type of input behavior.
+     */
+    type?: "search" | "autocomplete";
+    /**
+     * Debounce time in milliseconds for search input.
+     */
+    debouncetime?: number;
+    /**
+     * Message shown when all items are selected.
+     */
+    datacompletemsg?: string;
+    /**
+     * Field used for comparing chip values.
+     */
+    compareby?: string;
+    /**
+     * Additional data options for the chips widget.
+     */
+    dataoptions?: Record<string, unknown>;
+    /**
+     * Data source configuration.
+     */
+    datasource?: Record<string, unknown>;
+    /**
+     * Data value source for binding.
+     */
+    datavaluesource?: Record<string, unknown>;
+    /**
+     * Data path for nested data access.
+     */
+    dataPath?: string;
+    /**
+     * Callback invoked when a chip is added.
+     */
+    onAdd?: (event: Event, widget: Record<string, unknown>, item: ChipItem) => void;
+    /**
+     * Callback invoked before a chip is added. Return `false` to prevent adding.
+     */
+    onBeforeadd?: (event: Event, widget: Record<string, unknown>, newItem: DataSetItem) => boolean | void;
+    /**
+     * Callback invoked before a chip is removed. Return `false` to prevent removal.
+     */
+    onBeforeremove?: (event: Event, widget: Record<string, unknown>, item: ChipItem | ChipItem[]) => boolean | void;
+    /**
+     * Callback invoked before chips are reordered. Return `false` to prevent reordering.
+     */
+    onBeforereorder?: (event: Event, widget: Record<string, unknown>, data: ChipItem[], changedItem: {
+        oldIndex: number;
+        newIndex: number;
+        item: ChipItem;
+    }) => boolean | void;
+    /**
+     * Callback invoked before a service call is made.
+     */
+    onBeforeservicecall?: (widget: Record<string, unknown>, inputData: Record<string, unknown>) => void;
+    /**
+     * Callback invoked when a chip is clicked.
+     */
+    onChipclick?: (event: Event, widget: Record<string, unknown>, item: ChipItem) => void;
+    /**
+     * Callback invoked when a chip is selected.
+     */
+    onChipselect?: (event: Event, widget: Record<string, unknown>, item: ChipItem) => void;
+    /**
+     * Callback invoked when the selected chips change.
+     */
+    onChange?: (event: Event, widget: Record<string, unknown>, newVal: unknown[], oldVal: unknown[]) => void;
+    /**
+     * Callback invoked when a chip is removed.
+     */
+    onRemove?: (event: Event, widget: Record<string, unknown>, item: ChipItem | ChipItem[]) => void;
+    /**
+     * Callback invoked after chips are reordered.
+     */
+    onReorder?: (event: Event, widget: Record<string, unknown>, data: ChipItem[], changedItem: {
+        oldIndex: number;
+        newIndex: number;
+        item: ChipItem;
+    }) => void;
+}
+/**
+ * Combined props for the WmChips component, including base WaveMaker props.
+ */
+export type WmChipsProps = Prettify<ChipsProps & BaseProps>;

package/components/input/chips/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/input/chips/utils.d.ts

@@ -0,0 +1,22 @@
+import { ChipItem, DataSetItem } from "./props";
+export declare function generateStableKey(item: unknown, index: number, datafield: string): string;
+export declare function processDataset(data: any, displayfield: string, displayexpression: ((data: any) => string) | undefined, displayimagesrc: string | undefined, datafield: string, generateStableKeyFn: (item: any, index: number) => string): {
+    key: string;
+    value: any;
+    label: string;
+    displayValue: string;
+    displayImage: string;
+    dataObject: any;
+}[];
+export declare function getChipDisplayValue(chip: ChipItem, datafield: string): string | number | boolean;
+export declare function getItemDisplayValue(item: DataSetItem | string, datafield: string): string | number | boolean;
+export declare function isDuplicate(chipsList: ChipItem[], item: DataSetItem | string, datafield: string): boolean;
+export declare function updateMaxSize(maxsize: number, chipsList: ChipItem[], setSaturate: (val: boolean) => void): void;
+export declare function updateChipsListAndTriggerEvents(newChipsList: ChipItem[], newModelByValue: any[], setChipsList: (chips: ChipItem[]) => void, setModelByValue: (model: any[]) => void, updateMaxSizeFn: (length: number) => void, listener: any, name: string, event: any, onChange?: any, onAdd?: any, onRemove?: any, chipItem?: ChipItem, oldModelByValue?: any[], props?: any): void;
+export declare function validateBeforeOperation(listener: any, name: string, beforeHandler: any, event: any, item: any): boolean;
+export declare function createChipItem(itemToAdd: DataSetItem | string, generateUniqueKey: () => string, datafield: string, displayfield: string, createCustomDataModel: (val: string) => any): DataSetItem;
+export declare function createChipItemWithStructure(itemToAdd: DataSetItem): ChipItem;
+export declare function validateAddItem(newItem: DataSetItem | string, chipsList: ChipItem[], maxsize: number, datafield: string): boolean;
+export declare function validateSearchInput(query: string, allowonlyselect: boolean, maxsize: number, chipsList: ChipItem[]): boolean;
+export declare function performAddItem(newItem: DataSetItem | string, chipsList: ChipItem[], modelByValue: any[], setChipsList: (chips: ChipItem[]) => void, setModelByValue: (model: any[]) => void, setSearchQuery: (query: string) => void, updateMaxSizeFn: (length: number) => void, listener: any, name: string, datafield: string, displayfield: string, createCustomDataModel: (val: string) => any, generateUniqueKey: () => string, maxsize: number, onBeforeadd?: any, onChange?: any, onAdd?: any, props?: any): boolean;
+export declare function performRemoveItem(event: React.MouseEvent, item: ChipItem, index: number, chipsList: ChipItem[], modelByValue: any[], setChipsList: (chips: ChipItem[]) => void, setModelByValue: (model: any[]) => void, updateMaxSizeFn: (length: number) => void, listener: any, name: string, onBeforeremove?: any, onChange?: any, onRemove?: any, props?: any): boolean;

package/components/input/chips/utils.js

@@ -0,0 +1,292 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createChipItem = createChipItem;
+exports.createChipItemWithStructure = createChipItemWithStructure;
+exports.generateStableKey = generateStableKey;
+exports.getChipDisplayValue = getChipDisplayValue;
+exports.getItemDisplayValue = getItemDisplayValue;
+exports.isDuplicate = isDuplicate;
+exports.performAddItem = performAddItem;
+exports.performRemoveItem = performRemoveItem;
+exports.processDataset = processDataset;
+exports.updateChipsListAndTriggerEvents = updateChipsListAndTriggerEvents;
+exports.updateMaxSize = updateMaxSize;
+exports.validateAddItem = validateAddItem;
+exports.validateBeforeOperation = validateBeforeOperation;
+exports.validateSearchInput = validateSearchInput;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lodash = require("lodash");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // @ts-ignore
+function generateStableKey(item, index, datafield) {
+  if (typeof item === "string" || typeof item === "number" || item === null) {
+    return "chip_".concat(index, "_").concat(String(item));
+  }
+  if ((0, _lodash.isObject)(item)) {
+    var rec = item;
+    var dataObj = rec.dataObject;
+    if (dataObj !== null && dataObj !== void 0 && dataObj.key) {
+      return "chip_".concat(index, "_").concat(String(dataObj.key));
+    }
+    if (datafield !== "All Fields" && rec[datafield] !== undefined) {
+      return "chip_".concat(index, "_").concat(String(rec[datafield]));
+    }
+    return "chip_".concat(index, "_").concat(String(index));
+  }
+  return "chip_".concat(index, "_").concat(String(index));
+}
+function processDataset(data, displayfield, displayexpression, displayimagesrc, datafield, generateStableKeyFn) {
+  if (!data) return [];
+  var normalizedData = [];
+  if (typeof data === "string") {
+    normalizedData = data.split(",").map(function (item) {
+      return item.trim();
+    });
+  } else if (Array.isArray(data)) {
+    normalizedData = data;
+  } else {
+    normalizedData = [data];
+  }
+  return normalizedData.map(function (item, index) {
+    if ((0, _typeof2["default"])(item) === "object" && item !== null) {
+      var _itemRec$displayKey, _itemRec$displayKey2;
+      var itemRec = item;
+      var displayKey = displayfield || Object.keys(itemRec)[0];
+      // Align with Angular: for non "All Fields", value should be the item's datafield (e.g., id)
+      var finalValue;
+      if (datafield === "All Fields") {
+        finalValue = item;
+      } else {
+        if (Object.prototype.hasOwnProperty.call(itemRec, datafield)) {
+          finalValue = itemRec[datafield];
+        } else if (Object.prototype.hasOwnProperty.call(itemRec, "key")) {
+          finalValue = itemRec.key;
+        } else {
+          finalValue = item;
+        }
+      }
+      return {
+        key: generateStableKeyFn(item, index),
+        value: finalValue,
+        label: String((_itemRec$displayKey = itemRec[displayKey]) !== null && _itemRec$displayKey !== void 0 ? _itemRec$displayKey : ""),
+        displayValue: displayexpression ? displayexpression(item) : String((_itemRec$displayKey2 = itemRec[displayKey]) !== null && _itemRec$displayKey2 !== void 0 ? _itemRec$displayKey2 : ""),
+        displayImage: displayimagesrc ? itemRec[displayimagesrc] : null,
+        dataObject: item
+      };
+    } else {
+      return {
+        key: generateStableKeyFn(item, index),
+        value: item,
+        label: String(item),
+        displayValue: String(item),
+        displayImage: null,
+        dataObject: item
+      };
+    }
+  });
+}
+function getChipDisplayValue(chip, datafield) {
+  if (datafield === "All Fields") {
+    return chip.label || chip.displayValue;
+  }
+  return chip.value;
+}
+function getItemDisplayValue(item, datafield) {
+  if (typeof item === "string") {
+    return item;
+  }
+  if (datafield === "All Fields") {
+    return item.label || item.displayValue;
+  }
+  return item.value;
+}
+function isDuplicate(chipsList, item, datafield) {
+  var itemDisplayValue = getItemDisplayValue(item, datafield);
+  return chipsList.some(function (chip) {
+    var chipDisplayValue = getChipDisplayValue(chip, datafield);
+    if (datafield === "All Fields") {
+      return (0, _lodash.toString)(chipDisplayValue).toLowerCase() === (0, _lodash.toString)(itemDisplayValue).toLowerCase();
+    } else {
+      if (typeof item === "string") {
+        return (0, _lodash.toString)(chipDisplayValue) === (0, _lodash.toString)(itemDisplayValue);
+      } else {
+        var itemVal = itemDisplayValue;
+        var item_dataObject = itemVal !== null && itemVal !== void 0 && itemVal.dataObject ? itemVal.dataObject : itemDisplayValue;
+        return (0, _lodash.isEqual)(chipDisplayValue, item_dataObject);
+      }
+    }
+  });
+}
+function updateMaxSize(maxsize, chipsList, setSaturate) {
+  setSaturate(maxsize > 0 && chipsList.length === maxsize);
+}
+
+// Common functionality for updating chips list and triggering events
+function updateChipsListAndTriggerEvents(newChipsList, newModelByValue, setChipsList, setModelByValue, updateMaxSizeFn, listener, name, event, onChange, onAdd, onRemove, chipItem, oldModelByValue, props) {
+  // Update state
+  setChipsList(newChipsList);
+  setModelByValue(newModelByValue);
+  updateMaxSizeFn(newChipsList.length);
+
+  // Trigger onChange event
+  if (onChange && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+    onChange(event, listener.Widgets[name], newModelByValue, oldModelByValue);
+  }
+
+  // Trigger listener.onChange if available
+  if (listener !== null && listener !== void 0 && listener.onChange) {
+    listener.onChange(props.fieldName || name, {
+      // ...props,
+      datavalue: newModelByValue
+    });
+  }
+
+  // Trigger specific events (onAdd, onRemove)
+  if (onAdd && chipItem && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+    onAdd(event, listener.Widgets[name], chipItem);
+  }
+  if (onRemove && chipItem && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+    onRemove(event, listener.Widgets[name], chipItem);
+  }
+}
+
+// Common functionality for validation before operations
+function validateBeforeOperation(listener, name, beforeHandler, event, item) {
+  if (beforeHandler && listener !== null && listener !== void 0 && listener.Widgets && name && name in listener.Widgets) {
+    var allowOperation = beforeHandler(event, listener.Widgets[name], item);
+    if (allowOperation === false) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// Common functionality for creating chip items
+function createChipItem(itemToAdd, generateUniqueKey, datafield, displayfield, createCustomDataModel) {
+  if (typeof itemToAdd === "string") {
+    if (datafield === "All Fields") {
+      var dataObj = createCustomDataModel(itemToAdd);
+      if (!dataObj) throw new Error("Failed to create custom data model");
+      var newItem = {
+        key: generateUniqueKey(),
+        value: dataObj,
+        label: itemToAdd,
+        displayValue: itemToAdd,
+        displayImage: null,
+        dataObject: dataObj
+      };
+      newItem.iscustom = true;
+      return newItem;
+    } else {
+      var _newItem = {
+        key: generateUniqueKey(),
+        value: itemToAdd,
+        label: itemToAdd,
+        displayValue: itemToAdd,
+        displayImage: null,
+        dataObject: itemToAdd
+      };
+      _newItem.iscustom = true;
+      return _newItem;
+    }
+  } else {
+    return itemToAdd;
+  }
+}
+
+// Common functionality for creating chip items with proper structure
+function createChipItemWithStructure(itemToAdd) {
+  return _objectSpread(_objectSpread({}, itemToAdd), {}, {
+    active: false,
+    isDuplicate: false,
+    imgSrc: itemToAdd.displayImage,
+    iscustom: itemToAdd.iscustom || false
+  });
+}
+
+// Common functionality for validation before adding items
+function validateAddItem(newItem, chipsList, maxsize, datafield) {
+  if (maxsize && chipsList.length >= maxsize) {
+    return false;
+  }
+  // Disallow empty/whitespace items
+  if (newItem && (0, _typeof2["default"])(newItem) === "object") {
+    if (datafield === "All Fields") {
+      var _ref, _newItem$label;
+      var text = (0, _lodash.toString)((_ref = (_newItem$label = newItem.label) !== null && _newItem$label !== void 0 ? _newItem$label : newItem.displayValue) !== null && _ref !== void 0 ? _ref : "").trim();
+      if (!text) {
+        return false;
+      }
+    } else {
+      var val = newItem.value;
+      if (val === undefined || val === null || (0, _lodash.toString)(val).trim() === "") {
+        return false;
+      }
+    }
+  }
+  if (isDuplicate(chipsList, newItem, datafield)) {
+    return false;
+  }
+  return true;
+}
+
+// Common functionality for search validation
+function validateSearchInput(query, allowonlyselect, maxsize, chipsList) {
+  var trimmedQuery = query.trim();
+  if (!trimmedQuery) return false;
+  if (allowonlyselect) return false;
+  if (maxsize && chipsList.length >= maxsize) return false;
+  return true;
+}
+
+// Common functionality for add item operation
+function performAddItem(newItem, chipsList, modelByValue, setChipsList, setModelByValue, setSearchQuery, updateMaxSizeFn, listener, name, datafield, displayfield, createCustomDataModel, generateUniqueKey, maxsize, onBeforeadd, onChange, onAdd, props) {
+  var _value, _itemToAdd$dataObject;
+  // Validate before adding
+  if (!validateAddItem(newItem, chipsList, maxsize, datafield)) {
+    setSearchQuery("");
+    return false;
+  }
+
+  // Create item to add
+  var itemToAdd = createChipItem(newItem, generateUniqueKey, datafield, displayfield, createCustomDataModel);
+
+  // Validate before operation
+  if (!validateBeforeOperation(listener, name, onBeforeadd, new MouseEvent("click"), itemToAdd)) {
+    return false;
+  }
+
+  // Create chip item with proper structure
+  var chipItem = createChipItemWithStructure(itemToAdd);
+  var newChipsList = [].concat((0, _toConsumableArray2["default"])(chipsList), [chipItem]);
+  var newModelByValue = [].concat((0, _toConsumableArray2["default"])(modelByValue), [(_value = itemToAdd === null || itemToAdd === void 0 || (_itemToAdd$dataObject = itemToAdd.dataObject) === null || _itemToAdd$dataObject === void 0 ? void 0 : _itemToAdd$dataObject.value) !== null && _value !== void 0 ? _value : itemToAdd.value]);
+
+  // Update chips list and trigger events
+  updateChipsListAndTriggerEvents(newChipsList, newModelByValue, setChipsList, setModelByValue, updateMaxSizeFn, listener, name, new MouseEvent("change"), onChange, onAdd, undefined, chipItem, modelByValue, props);
+  setSearchQuery("");
+  return true;
+}
+
+// Common functionality for remove item operation
+function performRemoveItem(event, item, index, chipsList, modelByValue, setChipsList, setModelByValue, updateMaxSizeFn, listener, name, onBeforeremove, onChange, onRemove, props) {
+  event.stopPropagation();
+
+  // Validate before operation
+  if (!validateBeforeOperation(listener, name, onBeforeremove, event, item)) {
+    return false;
+  }
+  var newChipsList = (0, _toConsumableArray2["default"])(chipsList);
+  var newModelByValue = (0, _toConsumableArray2["default"])(modelByValue);
+  newChipsList.splice(index, 1);
+  newModelByValue.splice(index, 1);
+
+  // Update chips list and trigger events
+  updateChipsListAndTriggerEvents(newChipsList, newModelByValue, setChipsList, setModelByValue, updateMaxSizeFn, listener, name, event, onChange, undefined, onRemove, item, modelByValue, props);
+  return true;
+}