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

package/components/input/chips/index.js

@@ -0,0 +1,682 @@
+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, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { Box } from "@mui/material";
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { arrayMove, SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
+import clsx from "clsx";
+import { debounce, isEqual, trim, find, slice } from "lodash";
+import { WmSearch } from "../../basic/search";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import SortableChip from "./SortableChip";
+import {
+  generateStableKey,
+  processDataset,
+  performAddItem,
+  performRemoveItem,
+  resolveItemToAdd
+} from "./utils";
+import withFormController from "../../data/form/form-controller/withFormController";
+import { DEFAULT_CHIPS_DATASET } from "../../constants";
+import withStandalone from "../../../higherOrder/withStandalone";
+const DEFAULT_CLASS = "app-chips nav nav-pills list-inline";
+const WmChips = React.memo(
+  (props) => {
+    var _a;
+    const {
+      allowonlyselect = false,
+      autofocus = false,
+      chipclass = "",
+      className = "",
+      datafield = "All Fields",
+      dataset = DEFAULT_CHIPS_DATASET,
+      datavalue,
+      dateformat,
+      disabled = false,
+      displayexpression,
+      displayfield,
+      displayimagesrc,
+      enablereorder = false,
+      groupby,
+      inputposition = "last",
+      inputwidth = "default",
+      limit,
+      match,
+      matchmode = "contains",
+      maxsize,
+      minchars = 1,
+      name,
+      orderby,
+      placeholder = "Type here..",
+      readonly = false,
+      searchkey,
+      showsearchicon = false,
+      tabindex = 0,
+      type = "search",
+      debouncetime = 250,
+      datacompletemsg = "No more data to load",
+      width,
+      height,
+      styles = {},
+      listener,
+      // Event handlers
+      onAdd,
+      onBeforeadd,
+      onBeforeremove,
+      onBeforereorder,
+      onBeforeservicecall,
+      onChipclick,
+      onChipselect,
+      onChange,
+      onRemove,
+      onReorder,
+      dataPath,
+      standalone = false
+    } = props;
+    const [chipsList, setChipsList] = useState([]);
+    const [saturate, setSaturate] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [modelByValue, setModelByValue] = useState([]);
+    const [datasetItems, setDatasetItems] = useState([]);
+    const [uniqueKeyCounter, setUniqueKeyCounter] = useState(0);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const backspaceArmedRef = useRef(false);
+    const maxSizeReached = "Max size reached";
+    const isFullWidth = inputwidth === "full";
+    const generateStableKeyCb = useCallback(
+      (item, index) => {
+        return generateStableKey(item, index, datafield);
+      },
+      [datafield]
+    );
+    const generateUniqueKey = useCallback(() => {
+      const key = `chip_new_${uniqueKeyCounter}`;
+      setUniqueKeyCounter((prev) => prev + 1);
+      return key;
+    }, [uniqueKeyCounter]);
+    const processDatasetCb = useCallback(
+      (data) => {
+        return processDataset(
+          data,
+          displayfield || "label",
+          displayexpression,
+          displayimagesrc,
+          datafield,
+          generateStableKeyCb
+        );
+      },
+      [displayfield, displayexpression, displayimagesrc, datafield, generateStableKeyCb]
+    );
+    const datasetForSearchAndChips = useMemo(() => {
+      var _a2;
+      if (typeof dataset === "function") {
+        try {
+          return (_a2 = dataset()) != null ? _a2 : [];
+        } catch (e) {
+          return [];
+        }
+      }
+      return dataset;
+    }, [standalone, dataset]);
+    useEffect(() => {
+      const items = processDatasetCb(datasetForSearchAndChips);
+      setDatasetItems(items);
+      setIsInitialized(true);
+    }, [datasetForSearchAndChips, processDatasetCb]);
+    const createCustomDataModel = useCallback(
+      (val) => {
+        const fieldKey = displayfield || "label";
+        const customObj = {};
+        customObj[fieldKey] = val;
+        customObj._uniqueKey = generateUniqueKey();
+        return customObj;
+      },
+      [displayfield, generateUniqueKey]
+    );
+    const updateMaxSize = useCallback(
+      (currentLength) => {
+        const length = currentLength !== void 0 ? currentLength : chipsList.length;
+        setSaturate((maxsize || 0) > 0 && length === maxsize);
+      },
+      [maxsize, chipsList.length]
+    );
+    const updateQueryModel = useCallback(
+      async (data) => {
+        if (!data || !isInitialized) {
+          setChipsList([]);
+          setModelByValue([]);
+          return;
+        }
+        let dataValue;
+        if (typeof data === "string") {
+          dataValue = data.split(",");
+        } else if (Array.isArray(data)) {
+          dataValue = [...data];
+        } else {
+          dataValue = [data];
+        }
+        setChipsList([]);
+        if (maxsize && dataValue.length > maxsize) {
+          dataValue = slice(dataValue, 0, maxsize);
+        }
+        const newChipsList = [];
+        const searchQuery2 = [];
+        dataValue.forEach((val, i) => {
+          const itemFound = find(datasetItems, (item) => {
+            const value_obj = val.dataObject ? val.dataObject : val;
+            return isEqual(item.value, value_obj);
+          });
+          if (itemFound) {
+            newChipsList.push(__spreadProps(__spreadValues({}, itemFound), {
+              key: generateStableKeyCb(itemFound.value, i),
+              // Use stable key for dataset items
+              active: false,
+              isDuplicate: false,
+              imgSrc: itemFound.displayImage,
+              iscustom: false
+            }));
+          } else if (datafield === "All Fields") {
+            let dataObj = val;
+            let isCustom = false;
+            if (!isEqual(val, dataObj)) {
+              dataObj = createCustomDataModel(val);
+              isCustom = true;
+              if (dataObj) {
+                dataValue[i] = dataObj;
+              }
+            }
+            const finalDataObj = dataObj || val;
+            const chipObj = {
+              key: generateStableKeyCb(finalDataObj, i),
+              value: finalDataObj,
+              label: isCustom || typeof finalDataObj == "string" ? val : finalDataObj[displayfield || "label"] || "",
+              displayValue: isCustom || typeof finalDataObj == "string" ? val : finalDataObj[displayfield || Object.keys(finalDataObj)[0]] || "",
+              displayImage: null,
+              dataObject: finalDataObj,
+              active: false,
+              isDuplicate: false,
+              imgSrc: null,
+              iscustom: isCustom
+            };
+            newChipsList.push(chipObj);
+          } else {
+            searchQuery2.push(val);
+          }
+        });
+        if (searchQuery2.length && datafield !== "All Fields") {
+          searchQuery2.forEach((val, searchIndex) => {
+            const chipObj = {
+              key: generateStableKeyCb(val, newChipsList.length + searchIndex),
+              value: val,
+              label: String(val),
+              displayValue: String(val),
+              displayImage: null,
+              dataObject: val,
+              active: false,
+              isDuplicate: false,
+              imgSrc: null,
+              iscustom: true
+            };
+            newChipsList.push(chipObj);
+          });
+        }
+        setChipsList(newChipsList);
+        setModelByValue(dataValue);
+        updateMaxSize(newChipsList.length);
+      },
+      [datasetItems, maxsize, datafield, displayfield, generateStableKeyCb, isInitialized]
+    );
+    const debouncedUpdateQueryModel = useMemo(() => {
+      return debounce(updateQueryModel, 150);
+    }, [updateQueryModel]);
+    useEffect(() => {
+      if (isInitialized && datavalue !== void 0) {
+        debouncedUpdateQueryModel(datavalue);
+      } else if (datavalue == void 0 || datavalue.length == 0) {
+        setChipsList([]);
+        setSearchQuery(void 0);
+        setModelByValue([]);
+        updateMaxSize(0);
+      }
+    }, [datavalue, debouncedUpdateQueryModel]);
+    const addItem = useCallback(
+      (newItem) => {
+        performAddItem(
+          newItem,
+          chipsList,
+          modelByValue,
+          setChipsList,
+          setModelByValue,
+          setSearchQuery,
+          updateMaxSize,
+          listener,
+          name,
+          datafield,
+          displayfield || "label",
+          createCustomDataModel,
+          generateUniqueKey,
+          maxsize || 0,
+          onBeforeadd,
+          onChange,
+          onAdd,
+          props
+        );
+      },
+      [
+        chipsList,
+        modelByValue,
+        updateMaxSize,
+        onChange,
+        onAdd,
+        onBeforeadd,
+        name,
+        datafield,
+        displayfield,
+        createCustomDataModel,
+        generateUniqueKey,
+        maxsize,
+        props
+      ]
+    );
+    const removeItem = useCallback(
+      (event, item, index) => {
+        performRemoveItem(
+          event,
+          item,
+          index,
+          chipsList,
+          modelByValue,
+          setChipsList,
+          setModelByValue,
+          updateMaxSize,
+          listener,
+          name,
+          onBeforeremove,
+          onChange,
+          onRemove,
+          props
+        );
+      },
+      [chipsList, modelByValue, updateMaxSize, onChange, onRemove, onBeforeremove, name, props]
+    );
+    const handleChipClick = useCallback(
+      (event, chip, index) => {
+        if (readonly) return;
+        if (onChipclick && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          onChipclick(event.nativeEvent, listener.Widgets[name], chip);
+        }
+      },
+      [readonly, onChipclick, name]
+    );
+    const handleChipSelect = useCallback(
+      (chip, index) => {
+        if (readonly) return;
+        const newChipsList = chipsList.map((item, i) => __spreadProps(__spreadValues({}, item), {
+          active: i === index
+        }));
+        setChipsList(newChipsList);
+        if (onChipselect && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          onChipselect(new Event("focus"), listener.Widgets[name], chip);
+        }
+      },
+      [readonly, chipsList, onChipselect, name]
+    );
+    const handleKeyDown = useCallback(
+      (event, index) => {
+        if (readonly) return;
+        if ((event.key == "Backspace" || event.key == "Delete") && index !== void 0) {
+          removeItem(event, chipsList[index], index);
+        }
+      },
+      [readonly, chipsList, removeItem]
+    );
+    const handleSearchSelect = useCallback(
+      (event, widget, selectedValue) => {
+        if (selectedValue) {
+          addItem(resolveItemToAdd(selectedValue, datasetItems, datafield));
+          setSearchQuery("");
+          backspaceArmedRef.current = false;
+        }
+      },
+      [addItem, datasetItems, datafield]
+    );
+    const handleSearchSubmit = useCallback(
+      (event, widget) => {
+        const currentQuery = (widget == null ? void 0 : widget.query) || searchQuery;
+        const trimmedQuery = trim(currentQuery);
+        if (!trimmedQuery) return;
+        if (allowonlyselect) return;
+        if (maxsize && chipsList.length >= maxsize) return;
+        addItem(trimmedQuery);
+        setSearchQuery("");
+        backspaceArmedRef.current = false;
+      },
+      [searchQuery, allowonlyselect, addItem, maxsize, chipsList.length]
+    );
+    const handleSearchChange = useCallback((event, widget, newValue) => {
+      setSearchQuery(newValue || "");
+      backspaceArmedRef.current = false;
+    }, []);
+    const handleSearchAction = useCallback(
+      (event, widget) => {
+        const currentQuery = (widget == null ? void 0 : widget.query) || searchQuery;
+        const trimmedQuery = trim(currentQuery);
+        if (!trimmedQuery) return;
+        if (allowonlyselect) return;
+        if (maxsize && chipsList.length >= maxsize) return;
+        addItem(trimmedQuery);
+      },
+      [searchQuery, allowonlyselect, addItem, maxsize, chipsList.length]
+    );
+    const handleSearchKeyDown = useCallback(
+      (event) => {
+        var _a2, _b;
+        if (event.key === "Backspace") {
+          const inputElement = event.target;
+          const currentQuery = ((_b = (_a2 = inputElement == null ? void 0 : inputElement.value) != null ? _a2 : searchQuery) != null ? _b : "").trim();
+          if (!readonly && !disabled && currentQuery === "" && chipsList.length > 0) {
+            if (!backspaceArmedRef.current) {
+              setChipsList(
+                (prev) => prev.map((c, i) => __spreadProps(__spreadValues({}, c), {
+                  active: i === prev.length - 1
+                }))
+              );
+              event.preventDefault();
+              backspaceArmedRef.current = true;
+              return;
+            } else {
+              event.preventDefault();
+              const lastIndex = chipsList.length - 1;
+              removeItem(event, chipsList[lastIndex], lastIndex);
+              backspaceArmedRef.current = false;
+              return;
+            }
+          }
+        }
+        if (event.key === "Enter") {
+          event.preventDefault();
+          const inputElement = event.target;
+          const currentQuery = (inputElement == null ? void 0 : inputElement.value) || searchQuery || "";
+          const trimmedQuery = trim(currentQuery);
+          if (!trimmedQuery) {
+            return;
+          }
+          if (allowonlyselect) {
+            return;
+          }
+          if (maxsize && chipsList.length >= maxsize) {
+            return;
+          }
+        }
+        if (event.key !== "Backspace") {
+          backspaceArmedRef.current = false;
+        }
+      },
+      [searchQuery, readonly, disabled, chipsList, removeItem, allowonlyselect, maxsize]
+    );
+    const rootRef = useRef(null);
+    useEffect(() => {
+      const container = rootRef.current;
+      const formEl = container == null ? void 0 : container.closest("form");
+      if (!formEl) return;
+      const handleFormReset = () => {
+        setSearchQuery(void 0);
+        backspaceArmedRef.current = false;
+      };
+      formEl.addEventListener("wmformreset", handleFormReset);
+      return () => {
+        formEl.removeEventListener("wmformreset", handleFormReset);
+      };
+    }, []);
+    const renderChipsList = () => {
+      const sensors = useSensors(
+        useSensor(PointerSensor, {
+          activationConstraint: { distance: 5 }
+        })
+      );
+      const handleDndEnd = (event) => {
+        const { active, over } = event;
+        if (!over || !enablereorder) return;
+        if (active.id === over.id) return;
+        const oldIndex = chipsList.findIndex((chip) => chip.key === active.id);
+        const newIndex = chipsList.findIndex((chip) => chip.key === over.id);
+        if (oldIndex === -1 || newIndex === -1) return;
+        const newChipsList = arrayMove(chipsList, oldIndex, newIndex);
+        const changedItem = { oldIndex, newIndex, item: newChipsList[newIndex] };
+        if (onBeforereorder && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          const allowReorder = onBeforereorder(
+            new MouseEvent("dragend"),
+            listener.Widgets[name],
+            newChipsList,
+            changedItem
+          );
+          if (allowReorder === false) {
+            return;
+          }
+        }
+        const newModelByValue = arrayMove(modelByValue, oldIndex, newIndex);
+        setChipsList(newChipsList);
+        setModelByValue(newModelByValue);
+        if (onChange && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          onChange(
+            new MouseEvent("dragend"),
+            listener.Widgets[name],
+            newModelByValue,
+            modelByValue
+          );
+        }
+        if (onReorder && (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets) {
+          onReorder(
+            new MouseEvent("dragend"),
+            listener.Widgets[name],
+            newChipsList,
+            changedItem
+          );
+        }
+      };
+      if (enablereorder && !readonly && !disabled) {
+        return /* @__PURE__ */ jsx(
+          DndContext,
+          {
+            sensors,
+            collisionDetection: closestCenter,
+            onDragEnd: handleDndEnd,
+            modifiers: [restrictToParentElement],
+            children: /* @__PURE__ */ jsx(
+              SortableContext,
+              {
+                items: chipsList.map((chip) => chip.key),
+                strategy: horizontalListSortingStrategy,
+                children: /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    component: "ul",
+                    className: clsx(DEFAULT_CLASS, "wm-chips-list", className),
+                    name,
+                    children: [
+                      inputposition === "first" && renderSearchInput(),
+                      chipsList.map((chip, index) => /* @__PURE__ */ jsx(
+                        SortableChip,
+                        {
+                          chip,
+                          index,
+                          readonly,
+                          disabled,
+                          chipclass,
+                          enablereorder,
+                          handleChipClick,
+                          handleChipSelect,
+                          handleKeyDown,
+                          removeItem,
+                          chipsList,
+                          setChipsList
+                        },
+                        chip.key
+                      )),
+                      inputposition === "last" && renderSearchInput()
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: "ul",
+          className: clsx(DEFAULT_CLASS, "wm-chips-list", className),
+          "aria-readonly": readonly,
+          name,
+          children: [
+            inputposition === "first" && renderSearchInput(),
+            chipsList.map((chip, index) => /* @__PURE__ */ jsx(
+              SortableChip,
+              {
+                chip,
+                index,
+                readonly,
+                disabled,
+                chipclass,
+                enablereorder: false,
+                handleChipClick,
+                handleChipSelect,
+                handleKeyDown,
+                removeItem,
+                chipsList,
+                setChipsList
+              },
+              chip.key
+            )),
+            inputposition === "last" && renderSearchInput()
+          ]
+        }
+      );
+    };
+    const renderSearchInput = () => {
+      return /* @__PURE__ */ jsx(Box, { component: "li", className: clsx("app-chip-search", { "full-width": isFullWidth }), children: /* @__PURE__ */ jsx(
+        WmSearch,
+        __spreadProps(__spreadValues({}, props), {
+          name: `${name}_app-chip-search`,
+          disabled: disabled || saturate,
+          readonly,
+          datafield,
+          searchkey,
+          orderby,
+          placeholder: saturate ? maxSizeReached : placeholder,
+          showsearchicon,
+          tabindex,
+          minchars,
+          debouncetime,
+          matchmode,
+          datacompletemsg,
+          groupby,
+          match,
+          dateformat,
+          dataset: datasetForSearchAndChips,
+          displayfield,
+          displayexpression,
+          displayimagesrc,
+          type,
+          limit,
+          datavalue: searchQuery,
+          onSelect: handleSearchSelect,
+          onSubmit: handleSearchSubmit,
+          onSearch: handleSearchAction,
+          onChange: handleSearchChange,
+          onKeyDown: handleSearchKeyDown,
+          onBeforeservicecall,
+          listener,
+          className: "app-chip-input",
+          width: isFullWidth ? "100%" : void 0,
+          autofocus,
+          isSearchInChips: true,
+          dataPath,
+          ignoreInForm: true
+        })
+      ) });
+    };
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        hidden: (_a = props.hidden) != null ? _a : false,
+        component: "div",
+        className: "wm-chips-root",
+        ref: rootRef,
+        style: __spreadValues({ width, height }, styles),
+        children: renderChipsList()
+      }
+    );
+  },
+  (prev, next) => {
+    const keys = [
+      "allowonlyselect",
+      "autofocus",
+      "chipclass",
+      "className",
+      "datafield",
+      "dataset",
+      "datavalue",
+      "dateformat",
+      "disabled",
+      "displayexpression",
+      "displayfield",
+      "displayimagesrc",
+      "enablereorder",
+      "groupby",
+      "inputposition",
+      "inputwidth",
+      "limit",
+      "match",
+      "matchmode",
+      "maxsize",
+      "minchars",
+      "name",
+      "orderby",
+      "placeholder",
+      "readonly",
+      "searchkey",
+      "showsearchicon",
+      "tabindex",
+      "type",
+      "debouncetime",
+      "datacompletemsg",
+      "width",
+      "height",
+      "styles",
+      "dataPath",
+      "hidden"
+    ];
+    return keys.every((key) => {
+      return isEqual(prev[key], next[key]);
+    });
+  }
+);
+WmChips.displayName = "WmChips";
+const WithFormController = withFormController(WmChips);
+const WmChipsStandalone = withStandalone(WithFormController);
+var chips_default = withBaseWrapper(WithFormController);
+export {
+  WmChipsStandalone as WmChips,
+  chips_default as default
+};