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

package/components/input/default/checkboxset/index.js

@@ -0,0 +1,563 @@
+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 { memo, useEffect, useState, useCallback, useMemo } from "react";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Typography from "@mui/material/Typography";
+import { find, isArray, isEqual, isString, toString, get } from "lodash-es";
+import { withBaseWrapper } from "../../../../higherOrder/withBaseWrapper";
+import { defaultItems } from "../../../constants";
+import {
+  transformDataset,
+  transformDataWithKeys
+} from "../../../../utils/transformedDataset-utils";
+import { Input } from "@base-ui-components/react/input";
+import { getCheckboxsetDisplayValues } from "./utils";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import { getItemsPerRowClass } from "../../../data/list/utils/list-helpers";
+import { ALL_FIELDS } from "../../../constants";
+import withStandalone from "../../../../higherOrder/withStandalone";
+import {
+  CustomTemplateCaption,
+  useCustomTemplate
+} from "../../../common/customTemplate";
+const DEFAULT_CLASS = "app-checkboxset list-group inline";
+const normalizeDatavalue = (datavalue) => {
+  if (datavalue === void 0 || datavalue === null) {
+    return [];
+  }
+  if (isArray(datavalue)) {
+    return datavalue;
+  }
+  if (isString(datavalue)) {
+    return datavalue.split(",").map((item) => item.trim());
+  }
+  return [datavalue];
+};
+const WmCheckboxset = memo(
+  (props) => {
+    const {
+      disabled = false,
+      readonly = false,
+      required = false,
+      label = "",
+      datafield = "",
+      displayfield = "",
+      getDisplayExpression,
+      dataset = "Option 1, Option 2, Option 3",
+      datavalue = [],
+      usekeys = false,
+      groupby = "",
+      match = "",
+      orderby = "",
+      layout = "stacked",
+      itemclass,
+      listclass,
+      showcount = false,
+      show = true,
+      name,
+      collapsible = false,
+      collapsed = false,
+      tabIndex = 0,
+      styles,
+      onChange,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      datasetItems = [],
+      selectedItems = [],
+      groupedData = [],
+      onchange,
+      validation,
+      isDestroyed,
+      compareby = [],
+      itemsperrow,
+      displayValue,
+      listener,
+      className,
+      dataPath,
+      content
+    } = props;
+    const { templateName } = useCustomTemplate({ content, name, listener });
+    const [expandedItems, setExpandedItems] = useState({});
+    const [localSelectedKeys, setLocalSelectedKeys] = useState(
+      () => normalizeDatavalue(datavalue)
+    );
+    const [localDatasetItems, setLocalDatasetItems] = useState([]);
+    const [groupedDataset, setGroupedDataset] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const itemsPerRowClass = useMemo(() => getItemsPerRowClass(itemsperrow), [itemsperrow]);
+    const transformedDataset = useMemo(() => {
+      if (!dataset) return [];
+      if (usekeys) {
+        return transformDataWithKeys(dataset);
+      }
+      const data = transformDataset(
+        dataset,
+        datafield,
+        displayfield,
+        void 0,
+        getDisplayExpression,
+        orderby,
+        groupby,
+        dataPath,
+        "",
+        match
+      );
+      return data;
+    }, [
+      dataset,
+      datafield,
+      displayfield,
+      getDisplayExpression,
+      orderby,
+      groupby,
+      match,
+      usekeys,
+      dataPath
+    ]);
+    useEffect(() => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        if (datasetItems && datasetItems.length > 0) {
+          setLocalDatasetItems(datasetItems);
+        } else if (dataset) {
+          setLocalDatasetItems((prevItems) => {
+            if (!isEqual(prevItems, transformedDataset)) {
+              return transformedDataset;
+            }
+            return prevItems;
+          });
+        } else {
+          setLocalDatasetItems(defaultItems);
+        }
+      } catch (e) {
+        console.error("WmCheckboxset: Error processing dataset", e);
+        setError("Error processing dataset");
+        setLocalDatasetItems([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }, [dataset, transformedDataset]);
+    useEffect(() => {
+      if (groupby && localDatasetItems.length > 0) {
+        try {
+          const groupedData2 = transformedDataset;
+          setGroupedDataset((prevGrouped) => {
+            if (!isEqual(prevGrouped, groupedData2)) {
+              return groupedData2;
+            }
+            return prevGrouped;
+          });
+          if (collapsible) {
+            const initialExpandedState = {};
+            groupedData2.forEach((group) => {
+              initialExpandedState[group.key] = !collapsed;
+            });
+            setExpandedItems(initialExpandedState);
+          }
+        } catch (e) {
+          console.error("WmCheckboxset: Error grouping data", e);
+          setGroupedDataset([]);
+        }
+      } else {
+        setGroupedDataset([]);
+      }
+    }, [groupby, localDatasetItems, collapsible, transformedDataset, collapsed]);
+    useEffect(() => {
+      const normalizedDatavalue = normalizeDatavalue(datavalue);
+      if (!isEqual(normalizedDatavalue, localSelectedKeys) && datavalue !== void 0) {
+        if (normalizedDatavalue.length > 0) {
+          setLocalSelectedKeys(normalizedDatavalue);
+        } else if (selectedItems && selectedItems.length > 0) {
+          const matchedKeys = selectedItems.map((selectedVal) => {
+            const selectedItem = find(localDatasetItems, (item) => {
+              if (typeof selectedVal === "object" && typeof item.value === "object") {
+                if (compareby && compareby.length) {
+                  return compareby.every(
+                    (field) => get(selectedVal, field) === get(item.value, field)
+                  );
+                }
+                return isEqual(selectedVal, item.value);
+              }
+              return toString(selectedVal) === toString(item.value);
+            });
+            return selectedItem ? selectedItem.key : null;
+          }).filter((key) => key !== null);
+          if (matchedKeys.length > 0 && !isEqual(matchedKeys, localSelectedKeys)) {
+            setLocalSelectedKeys(matchedKeys);
+          }
+        } else if (normalizedDatavalue.length == 0 && (!datavalue || datavalue.length == 0)) {
+          setLocalSelectedKeys([]);
+        }
+      }
+    }, [datavalue]);
+    useEffect(() => {
+      if (onchange && !isEqual(localSelectedKeys, datavalue)) {
+        const timeoutId = setTimeout(() => {
+          onchange(localSelectedKeys);
+        }, 0);
+        return () => clearTimeout(timeoutId);
+      }
+    }, [localSelectedKeys, onchange, datavalue]);
+    const handleGroupClick = useCallback((key, event) => {
+      setExpandedItems((prevState) => __spreadProps(__spreadValues({}, prevState), { [key]: !prevState[key] }));
+    }, []);
+    const handleCheckboxChange = useCallback(
+      (event, key, dataObject) => {
+        var _a, _b, _c;
+        if (disabled || readonly) return;
+        const currentSelectedKeys = Array.isArray(localSelectedKeys) ? localSelectedKeys : [];
+        const isCurrentlySelected = currentSelectedKeys.some((k) => {
+          if (datafield == ALL_FIELDS) {
+            if (usekeys) {
+              return toString(k) === toString(key);
+            }
+            return isEqual(k, dataObject);
+          }
+          if (typeof k === "object" && datafield) {
+            return k[datafield] === key;
+          }
+          return toString(k) === toString(key);
+        });
+        const isChecked = !isCurrentlySelected;
+        let newKeys;
+        if (isChecked) {
+          const selectedItem = find(localDatasetItems, (item) => {
+            if (datafield == ALL_FIELDS) {
+              return isEqual(item.value, dataObject);
+            }
+            return toString(item.key) === toString(key);
+          });
+          if (usekeys) {
+            newKeys = [...currentSelectedKeys, key];
+          } else {
+            let value;
+            if (typeof (selectedItem == null ? void 0 : selectedItem.value) == "object") {
+              value = (_a = selectedItem == null ? void 0 : selectedItem.value) == null ? void 0 : _a.value;
+            } else {
+              value = selectedItem == null ? void 0 : selectedItem.value;
+            }
+            newKeys = [...currentSelectedKeys, (selectedItem == null ? void 0 : selectedItem.value) || key];
+          }
+        } else {
+          newKeys = currentSelectedKeys.filter((k) => {
+            if (datafield == ALL_FIELDS) {
+              if (usekeys) {
+                return toString(k) !== toString(key);
+              }
+              return !isEqual(k, dataObject);
+            }
+            if (typeof k === "object" && datafield) {
+              return k[datafield] !== key;
+            }
+            return toString(k) !== toString(key);
+          });
+        }
+        setLocalSelectedKeys(newKeys);
+        if (onchange) {
+          onchange(newKeys);
+        }
+        if (onChange && name) {
+          onChange(event, (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name], newKeys, currentSelectedKeys);
+        }
+        if (onClick && name) {
+          onClick(event, (_c = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _c[name]);
+        }
+        if (listener == null ? void 0 : listener.onChange) {
+          const displayValues = getCheckboxsetDisplayValues(
+            localDatasetItems,
+            newKeys,
+            datafield,
+            usekeys
+          );
+          listener.onChange(props.fieldName || name, {
+            datavalue: newKeys,
+            displayValue: displayValues
+          });
+        }
+      },
+      [
+        localDatasetItems,
+        localSelectedKeys,
+        disabled,
+        readonly,
+        usekeys,
+        datafield,
+        onchange,
+        props,
+        onChange,
+        name
+      ]
+    );
+    const isItemChecked = useCallback(
+      (item) => {
+        const currentSelectedKeys = Array.isArray(localSelectedKeys) ? localSelectedKeys : [];
+        return currentSelectedKeys.some((k) => {
+          if (datafield == ALL_FIELDS) {
+            return usekeys ? toString(k) === toString(item.key) : isEqual(k, item.value);
+          }
+          return toString(k) === toString(item.key);
+        });
+      },
+      [localSelectedKeys, datafield, usekeys]
+    );
+    const renderCheckboxItem = useCallback(
+      (item, index, isGrouped = false) => {
+        const isChecked = isItemChecked(item);
+        return /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            onClick: (e) => {
+              const tag = e.target.tagName;
+              if (tag !== "INPUT" && tag !== "LABEL" && tag !== "SPAN" && !templateName) {
+                handleCheckboxChange(e, toString(item.key), item == null ? void 0 : item.dataObject);
+              }
+            },
+            component: "li",
+            className: clsx(
+              "wm-checkboxset-item-reset",
+              "checkbox app-checkbox",
+              isGrouped && "group-list-item",
+              itemclass,
+              itemsPerRowClass,
+              {
+                active: isChecked,
+                disabled: disabled || readonly
+              }
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: clsx("app-checkboxset-label", { disabled }),
+                title: templateName ? void 0 : item.label,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      name: `checkboxset_${name}`,
+                      type: "checkbox",
+                      className: clsx((disabled || readonly) && "wm-checkboxset-input-readonly"),
+                      disabled: disabled || readonly,
+                      "data-attr-index": item.key,
+                      value: item.key,
+                      tabIndex,
+                      checked: isChecked,
+                      role: "checkbox",
+                      "aria-checked": isChecked,
+                      onChange: (e) => handleCheckboxChange(e, toString(item.key), item == null ? void 0 : item.dataObject)
+                    }
+                  ),
+                  templateName ? /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      component: "span",
+                      className: "caption customTemplate",
+                      id: `checkbox-list-label-${item.key + "_" + index}`,
+                      children: /* @__PURE__ */ jsx(
+                        CustomTemplateCaption,
+                        {
+                          templateName,
+                          item,
+                          index,
+                          widgetName: name,
+                          listener
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      component: "span",
+                      className: "caption",
+                      id: `checkbox-list-label-${item.key + "_" + index}`,
+                      children: item.label
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          toString(item.key + "_" + index)
+        );
+      },
+      [
+        isItemChecked,
+        handleCheckboxChange,
+        disabled,
+        readonly,
+        tabIndex,
+        name,
+        itemclass,
+        itemsPerRowClass,
+        templateName
+      ]
+    );
+    const renderGroupHeader = useCallback(
+      (group) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            className: clsx("list-group-header", collapsible ? "collapsible-content" : ""),
+            onClick: (e) => handleGroupClick(group.key, e),
+            component: "li",
+            children: /* @__PURE__ */ jsxs(Box, { component: "h4", className: "group-title", children: [
+              group.key || "Ungrouped",
+              /* @__PURE__ */ jsxs(Box, { component: "div", className: "header-action", children: [
+                collapsible && /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "i",
+                    className: clsx(
+                      "app-icon wi action",
+                      expandedItems[group.key] ? "wi-chevron-up" : "wi-chevron-down"
+                    ),
+                    title: "Collapse/Expand",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleGroupClick(group.key);
+                    }
+                  }
+                ),
+                showcount && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "label label-default", children: ((_a = group.data) == null ? void 0 : _a.length) || 0 })
+              ] })
+            ] })
+          },
+          `group_${group.key}`
+        );
+      },
+      [expandedItems, handleGroupClick, collapsible, showcount]
+    );
+    if (error) {
+      return /* @__PURE__ */ jsx("div", { className: "error-message", children: error });
+    }
+    if (isLoading) {
+      return /* @__PURE__ */ jsx("div", { className: "loading-state", children: "Loading..." });
+    }
+    if (!localDatasetItems || localDatasetItems.length === 0) {
+      return /* @__PURE__ */ jsx(List, { className: clsx(DEFAULT_CLASS, itemclass, listclass), sx: styles, children: /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsx(ListItemText, { primary: "No items to display" }) }) });
+    }
+    const handleMouseEnter = (event) => {
+      var _a;
+      if (onMouseEnter) {
+        onMouseEnter(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+      }
+    };
+    const handleMouseLeave = (event) => {
+      var _a;
+      if (onMouseLeave) {
+        onMouseLeave(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      List,
+      __spreadProps(__spreadValues({
+        hidden: props.hidden,
+        style: styles,
+        className: clsx(DEFAULT_CLASS, className, itemclass, listclass),
+        onMouseEnter: (event) => handleMouseEnter(event),
+        onMouseLeave: (event) => handleMouseLeave(event),
+        "aria-readonly": readonly,
+        name,
+        role: "group"
+      }, { datafield, displayfield }), {
+        children: [
+          label && /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", component: "div", className: "wm-checkboxset-label-row", children: [
+            label,
+            " ",
+            required && /* @__PURE__ */ jsx("span", { className: "wm-checkboxset-required-mark", children: "*" })
+          ] }),
+          groupby && groupedDataset.length > 0 ? groupedDataset.map((group) => {
+            var _a;
+            return /* @__PURE__ */ jsx(
+              List,
+              {
+                component: "li",
+                className: "app-list-item-group",
+                role: "presentation",
+                children: /* @__PURE__ */ jsxs(
+                  List,
+                  {
+                    component: "ul",
+                    className: clsx("item-group", "wm-checkboxset-group-list", {
+                      "collapse-open": expandedItems[group.key]
+                    }),
+                    children: [
+                      renderGroupHeader(group),
+                      (!collapsible || expandedItems[group.key]) && ((_a = group.data) == null ? void 0 : _a.map((item, index) => renderCheckboxItem(item, index, true)))
+                    ]
+                  }
+                )
+              },
+              `group_${group.key}`
+            );
+          }) : localDatasetItems.map((item, index) => renderCheckboxItem(item, index))
+        ]
+      })
+    );
+  },
+  (prev, current) => {
+    const keys = [
+      "datavalue",
+      "dataset",
+      "show",
+      "disabled",
+      "readonly",
+      "orderby",
+      "groupby",
+      "collapsible",
+      "datasetItems",
+      "collapsed",
+      "onClick",
+      "onChange",
+      "onMouseEnter",
+      "onMouseLeave",
+      "getDisplayExpression",
+      "datafield",
+      "displayfield",
+      "dataset",
+      "datavalue",
+      "usekeys",
+      "groupby",
+      "hidden"
+    ];
+    return keys.every((key) => {
+      if (key === "datasetItems") {
+        return isEqual(prev[key], current[key]);
+      }
+      return prev[key] === current[key];
+    });
+  }
+);
+WmCheckboxset.displayName = "WmCheckboxset";
+const WithFormController = withFormController(WmCheckboxset);
+const WmCheckboxsetStandalone = withStandalone(WithFormController);
+var checkboxset_default = withBaseWrapper(WithFormController);
+export {
+  WmCheckboxsetStandalone as WmCheckboxset,
+  checkboxset_default as default
+};