@wavemaker/react-runtime 11.14.1-rc.236

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

@@ -0,0 +1,476 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WmCheckboxset = void 0;
+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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _lodashEs = require("lodash-es");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _constants = require("@wavemaker/react-runtime/components/constants");
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _input = require("@base-ui-components/react/input");
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+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; }
+var DEFAULT_CLASS = "app-checkboxset list-group inline";
+
+// Helper function to normalize datavalue to always be an array
+var normalizeDatavalue = function normalizeDatavalue(datavalue) {
+  if (datavalue === undefined || datavalue === null) {
+    return [];
+  }
+  if ((0, _lodashEs.isArray)(datavalue)) {
+    return datavalue;
+  }
+  if ((0, _lodashEs.isString)(datavalue)) {
+    return datavalue.split(",").map(function (item) {
+      return item.trim();
+    });
+  }
+  // Convert single value to array
+  return [datavalue];
+};
+
+// Helper function to generate itemsPerRowClass
+var generateItemsPerRowClass = function generateItemsPerRowClass(itemsperrow) {
+  if (!itemsperrow) {
+    return "col-xs-12";
+  }
+  if (isNaN(parseInt(itemsperrow, 10))) {
+    // Handle string of classes (e.g. "xs-1 sm-1 md-1 lg-1")
+    return itemsperrow.split(" ").map(function (cls) {
+      var _cls$split = cls.split("-"),
+        _cls$split2 = (0, _slicedToArray2["default"])(_cls$split, 2),
+        tier = _cls$split2[0],
+        value = _cls$split2[1];
+      return "col-".concat(tier, "-").concat(12 / parseInt(value, 10));
+    }).join(" ");
+  }
+
+  // Handle single number value
+  return "col-xs-".concat(12 / parseInt(itemsperrow, 10));
+};
+var WmCheckboxset = exports.WmCheckboxset = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$label = props.label,
+    label = _props$label === void 0 ? "" : _props$label,
+    _props$datafield = props.datafield,
+    datafield = _props$datafield === void 0 ? "" : _props$datafield,
+    _props$displayfield = props.displayfield,
+    displayfield = _props$displayfield === void 0 ? "" : _props$displayfield,
+    displayExpression = props.displayExpression,
+    _props$dataset = props.dataset,
+    dataset = _props$dataset === void 0 ? "Option 1, Option 2, Option 3" : _props$dataset,
+    _props$datavalue = props.datavalue,
+    datavalue = _props$datavalue === void 0 ? [] : _props$datavalue,
+    _props$usekeys = props.usekeys,
+    usekeys = _props$usekeys === void 0 ? false : _props$usekeys,
+    _props$groupby = props.groupby,
+    groupby = _props$groupby === void 0 ? "" : _props$groupby,
+    _props$match = props.match,
+    match = _props$match === void 0 ? "" : _props$match,
+    _props$orderby = props.orderby,
+    orderby = _props$orderby === void 0 ? "" : _props$orderby,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? "stacked" : _props$layout,
+    itemclass = props.itemclass,
+    listclass = props.listclass,
+    _props$showcount = props.showcount,
+    showcount = _props$showcount === void 0 ? false : _props$showcount,
+    _props$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    name = props.name,
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
+    _props$collapsed = props.collapsed,
+    collapsed = _props$collapsed === void 0 ? false : _props$collapsed,
+    _props$tabIndex = props.tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    styles = props.styles,
+    onChange = props.onChange,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    _props$datasetItems = props.datasetItems,
+    datasetItems = _props$datasetItems === void 0 ? [] : _props$datasetItems,
+    _props$selectedItems = props.selectedItems,
+    selectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
+    _props$groupedData = props.groupedData,
+    groupedData = _props$groupedData === void 0 ? [] : _props$groupedData,
+    onchange = props.onchange,
+    validation = props.validation,
+    isDestroyed = props.isDestroyed,
+    _props$compareby = props.compareby,
+    compareby = _props$compareby === void 0 ? [] : _props$compareby,
+    itemsperrow = props.itemsperrow,
+    displayValue = props.displayValue,
+    listener = props.listener,
+    className = props.className,
+    dataPath = props.dataPath;
+  var _useState = (0, _react.useState)({}),
+    expandedItems = _useState[0],
+    setExpandedItems = _useState[1];
+  var _useState2 = (0, _react.useState)(function () {
+      return normalizeDatavalue(datavalue);
+    }),
+    localSelectedKeys = _useState2[0],
+    setLocalSelectedKeys = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    localDatasetItems = _useState3[0],
+    setLocalDatasetItems = _useState3[1];
+  var _useState4 = (0, _react.useState)([]),
+    groupedDataset = _useState4[0],
+    setGroupedDataset = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    isLoading = _useState5[0],
+    setIsLoading = _useState5[1];
+  var _useState6 = (0, _react.useState)(null),
+    error = _useState6[0],
+    setError = _useState6[1];
+
+  // Generate itemsPerRowClass
+  var itemsPerRowClass = (0, _react.useMemo)(function () {
+    return generateItemsPerRowClass(itemsperrow);
+  }, [itemsperrow]);
+  var transformedDataset = (0, _react.useMemo)(function () {
+    if (!dataset) return [];
+    var data = (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, undefined, displayExpression, orderby, groupby, dataPath, "");
+    return data;
+  }, [dataset, datafield, displayfield, displayExpression, orderby, groupby]);
+  (0, _react.useEffect)(function () {
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (datasetItems && datasetItems.length > 0) {
+        setLocalDatasetItems(datasetItems);
+      } else if (dataset) {
+        setLocalDatasetItems(function (prevItems) {
+          if (!(0, _lodashEs.isEqual)(prevItems, transformedDataset)) {
+            return transformedDataset;
+          }
+          return prevItems;
+        });
+      } else {
+        setLocalDatasetItems(_constants.defaultItems);
+      }
+    } catch (e) {
+      console.error("WmCheckboxset: Error processing dataset", e);
+      setError("Error processing dataset");
+      setLocalDatasetItems([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [dataset, transformedDataset]);
+
+  // Process grouping
+  (0, _react.useEffect)(function () {
+    if (groupby && localDatasetItems.length > 0) {
+      try {
+        var _groupedData = transformedDataset;
+        setGroupedDataset(function (prevGrouped) {
+          if (!(0, _lodashEs.isEqual)(prevGrouped, _groupedData)) {
+            return _groupedData;
+          }
+          return prevGrouped;
+        });
+        if (collapsible) {
+          var initialExpandedState = {};
+          _groupedData.forEach(function (group) {
+            initialExpandedState[group.key] = !collapsed;
+          });
+          setExpandedItems(initialExpandedState);
+        }
+      } catch (e) {
+        console.error("WmCheckboxset: Error grouping data", e);
+        setGroupedDataset([]);
+      }
+    } else {
+      setGroupedDataset([]);
+    }
+  }, [groupby, localDatasetItems, collapsible, transformedDataset, collapsed]);
+
+  // Initialize selected keys from datavalue or from selectedItems
+  (0, _react.useEffect)(function () {
+    var normalizedDatavalue = normalizeDatavalue(datavalue);
+    if (!(0, _lodashEs.isEqual)(normalizedDatavalue, localSelectedKeys) && datavalue !== undefined) {
+      if (normalizedDatavalue.length > 0) {
+        setLocalSelectedKeys(normalizedDatavalue);
+      } else if (selectedItems && selectedItems.length > 0) {
+        var matchedKeys = selectedItems.map(function (selectedVal) {
+          var selectedItem = (0, _lodashEs.find)(localDatasetItems, function (item) {
+            if ((0, _typeof2["default"])(selectedVal) === "object" && (0, _typeof2["default"])(item.value) === "object") {
+              if (compareby && compareby.length) {
+                return compareby.every(function (field) {
+                  return (0, _lodashEs.get)(selectedVal, field) === (0, _lodashEs.get)(item.value, field);
+                });
+              }
+              return (0, _lodashEs.isEqual)(selectedVal, item.value);
+            }
+            return (0, _lodashEs.toString)(selectedVal) === (0, _lodashEs.toString)(item.value);
+          });
+          return selectedItem ? selectedItem.key : null;
+        }).filter(function (key) {
+          return key !== null;
+        });
+        if (matchedKeys.length > 0 && !(0, _lodashEs.isEqual)(matchedKeys, localSelectedKeys)) {
+          setLocalSelectedKeys(matchedKeys);
+        }
+      }
+    }
+  }, [datavalue]); // Removed localSelectedKeys from deps
+
+  (0, _react.useEffect)(function () {
+    if (onchange && !(0, _lodashEs.isEqual)(localSelectedKeys, datavalue)) {
+      var timeoutId = setTimeout(function () {
+        onchange(localSelectedKeys);
+      }, 0);
+      return function () {
+        return clearTimeout(timeoutId);
+      };
+    }
+  }, [localSelectedKeys, onchange, datavalue]);
+  var handleGroupClick = (0, _react.useCallback)(function (key, event) {
+    setExpandedItems(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, (0, _defineProperty2["default"])({}, key, !prevState[key]));
+    });
+  }, []);
+  var handleCheckboxChange = (0, _react.useCallback)(function (event, key) {
+    if (disabled || readonly) return;
+    var currentSelectedKeys = Array.isArray(localSelectedKeys) ? localSelectedKeys : [];
+    var isCurrentlySelected = currentSelectedKeys.some(function (k) {
+      if ((0, _typeof2["default"])(k) === "object" && datafield) {
+        return k[datafield] === key;
+      }
+      return (0, _lodashEs.toString)(k) === (0, _lodashEs.toString)(key);
+    });
+    var isChecked = !isCurrentlySelected;
+    var newKeys;
+    if (isChecked) {
+      var selectedItem = (0, _lodashEs.find)(localDatasetItems, function (item) {
+        return (0, _lodashEs.toString)(item.key) === (0, _lodashEs.toString)(key);
+      });
+      if (usekeys) {
+        newKeys = [].concat((0, _toConsumableArray2["default"])(currentSelectedKeys), [key]);
+      } else {
+        var value;
+        if ((0, _typeof2["default"])(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) == "object") {
+          value = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value.value;
+        } else {
+          value = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value;
+        }
+        newKeys = [].concat((0, _toConsumableArray2["default"])(currentSelectedKeys), [value || key]);
+      }
+    } else {
+      newKeys = currentSelectedKeys.filter(function (k) {
+        if ((0, _typeof2["default"])(k) === "object" && datafield) {
+          return k[datafield] !== key;
+        }
+        return (0, _lodashEs.toString)(k) !== (0, _lodashEs.toString)(key);
+      });
+    }
+    setLocalSelectedKeys(newKeys);
+    if (onchange) {
+      onchange(newKeys);
+    }
+    if (listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      listener.Widgets[name].displayValue = newKeys;
+    }
+    if (onChange && name) {
+      onChange(event, listener.Widgets[name], newKeys, currentSelectedKeys);
+    }
+    if (onClick && name) {
+      onClick(event, listener.Widgets[name]);
+    }
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, {
+        datavalue: newKeys
+      });
+    }
+  }, [localDatasetItems, localSelectedKeys, disabled, readonly, usekeys, datafield, onchange, props, onChange, name]);
+  var isItemChecked = (0, _react.useCallback)(function (item) {
+    var currentSelectedKeys = Array.isArray(localSelectedKeys) ? localSelectedKeys : [];
+    return currentSelectedKeys.some(function (k) {
+      if ((0, _typeof2["default"])(k) === "object" && datafield && item.key) {
+        return k[datafield] === item.key;
+      }
+      return (0, _lodashEs.toString)(k) === (0, _lodashEs.toString)(item.key);
+    });
+  }, [localSelectedKeys, datafield]);
+  var renderCheckboxItem = (0, _react.useCallback)(function (item, index) {
+    var isChecked = isItemChecked(item);
+    return __jsx(_ListItem["default"], {
+      key: (0, _lodashEs.toString)(item.key + "_" + index),
+      className: (0, _clsx["default"])("checkbox app-checkbox", itemclass, itemsPerRowClass, {
+        active: isChecked,
+        disabled: disabled || readonly
+      }),
+      onClick: function onClick(e) {
+        var tag = e.target.tagName;
+        if (tag !== "INPUT" && tag !== "LABEL" && tag !== "SPAN") {
+          handleCheckboxChange(e, (0, _lodashEs.toString)(item.key));
+        }
+      },
+      component: "li",
+      sx: {
+        all: "unset"
+      }
+    }, __jsx("label", {
+      className: (0, _clsx["default"])("app-checkboxset-label", {
+        disabled: disabled
+      }),
+      title: item.label
+    }, __jsx(_input.Input, {
+      name: "checkboxset_".concat(name),
+      type: "checkbox",
+      disabled: disabled || readonly,
+      "data-attr-index": item.key,
+      value: item.key,
+      tabIndex: tabIndex,
+      checked: isChecked,
+      role: "checkbox",
+      "aria-checked": isChecked,
+      onChange: function onChange(e) {
+        return handleCheckboxChange(e, (0, _lodashEs.toString)(item.key));
+      },
+      style: disabled || readonly ? {
+        background: "transparent"
+      } : undefined
+    }), __jsx(_Typography["default"], {
+      component: "span",
+      className: "caption",
+      id: "checkbox-list-label-".concat(item.key + "_" + index),
+      disabled: disabled || readonly
+    }, item.label)));
+  }, [isItemChecked, handleCheckboxChange, disabled, readonly, tabIndex, name, itemclass, itemsPerRowClass]);
+  var renderGroupHeader = (0, _react.useCallback)(function (group) {
+    var _group$data;
+    return __jsx(_ListItem["default"], {
+      key: "group_".concat(group.key),
+      className: (0, _clsx["default"])("list-group-header", collapsible ? "collapsible-content" : ""),
+      onClick: function onClick(e) {
+        return handleGroupClick(group.key, e);
+      },
+      component: "li"
+    }, __jsx(_Box["default"], {
+      component: "h4",
+      className: "group-title"
+    }, group.key || "Ungrouped", __jsx(_Box["default"], {
+      component: "div",
+      className: "header-action"
+    }, collapsible && __jsx(_Box["default"], {
+      component: "i",
+      className: (0, _clsx["default"])("app-icon wi action", expandedItems[group.key] ? "wi-chevron-up" : "wi-chevron-down"),
+      title: "Collapse/Expand",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleGroupClick(group.key);
+      }
+    }), showcount && __jsx(_Typography["default"], {
+      variant: "caption",
+      className: "label label-default"
+    }, ((_group$data = group.data) === null || _group$data === void 0 ? void 0 : _group$data.length) || 0))));
+  }, [expandedItems, handleGroupClick, collapsible, showcount]);
+  if (error) {
+    return __jsx("div", {
+      className: "error-message"
+    }, error);
+  }
+  if (isLoading) {
+    return __jsx("div", {
+      className: "loading-state"
+    }, "Loading...");
+  }
+  if (!localDatasetItems || localDatasetItems.length === 0) {
+    return __jsx(_List["default"], {
+      className: (0, _clsx["default"])(DEFAULT_CLASS, itemclass, listclass),
+      sx: styles
+    }, __jsx(_ListItem["default"], null, __jsx(_ListItemText["default"], {
+      primary: "No items to display"
+    })));
+  }
+  var handleMouseEnter = function handleMouseEnter(event) {
+    if (onMouseEnter) {
+      onMouseEnter(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  };
+  var handleMouseLeave = function handleMouseLeave(event) {
+    if (onMouseLeave) {
+      onMouseLeave(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+  };
+  return __jsx(_List["default"], {
+    style: styles,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, className, itemclass, listclass),
+    onMouseEnter: function onMouseEnter(event) {
+      return handleMouseEnter(event);
+    },
+    onMouseLeave: function onMouseLeave(event) {
+      return handleMouseLeave(event);
+    },
+    "aria-readonly": readonly,
+    name: name,
+    role: "group",
+    datafield: datafield,
+    displayfield: displayfield
+  }, label && __jsx(_Typography["default"], {
+    variant: "subtitle1",
+    component: "div",
+    sx: {
+      mb: 1
+    }
+  }, label, " ", required && __jsx("span", {
+    style: {
+      color: "red"
+    }
+  }, "*")), groupby && groupedDataset.length > 0 ? groupedDataset.map(function (group) {
+    var _group$data2;
+    return __jsx(_List["default"], {
+      component: "li",
+      className: "app-list-item-group",
+      role: "presentation",
+      key: "group_".concat(group.key)
+    }, __jsx(_List["default"], {
+      component: "ul",
+      className: (0, _clsx["default"])("item-group", {
+        "collapse-open": expandedItems[group.key]
+      }),
+      sx: {
+        pl: 2
+      }
+    }, renderGroupHeader(group), (!collapsible || expandedItems[group.key]) && ((_group$data2 = group.data) === null || _group$data2 === void 0 ? void 0 : _group$data2.map(function (item, index) {
+      return renderCheckboxItem(item, index);
+    }))));
+  }) : localDatasetItems.map(function (item, index) {
+    return renderCheckboxItem(item, index);
+  }));
+}, function (prev, current) {
+  var keys = ["datavalue", "dataset", "show", "disabled", "readonly", "orderby", "groupby", "collapsible", "datasetItems", "collapsed", "onClick", "onChange", "onMouseEnter", "onMouseLeave", "displayExpression", "datafield", "displayfield", "dataset", "datavalue", "usekeys", "groupby"];
+  return keys.every(function (key) {
+    if (key === "datasetItems") {
+      return (0, _lodashEs.isEqual)(prev[key], current[key]);
+    }
+    return prev[key] === current[key];
+  });
+});
+WmCheckboxset.displayName = "WmCheckboxset";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmCheckboxset));

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

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