@wavemaker/react-runtime 11.14.1-16.6404

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

@@ -0,0 +1,379 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _RadioGroup = _interopRequireDefault(require("@mui/material/RadioGroup"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
+var _styles = require("@mui/material/styles");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _input = require("@base-ui-components/react/input");
+var _lodashEs = require("lodash-es");
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _constants = require("@wavemaker/react-runtime/components/constants");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+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" != _typeof(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-radioset list-group inline";
+var StyledList = (0, _styles.styled)(_List["default"])(function (_ref) {
+  var ownerState = _ref.ownerState;
+  return _objectSpread(_objectSpread({
+    listStyleType: "none",
+    padding: 0,
+    margin: 0,
+    width: ownerState.width || "100%"
+  }, ownerState.collapsible && {
+    "& li.app-list-item-group": {
+      "& ul.item-group": {
+        padding: 0,
+        display: "none"
+      },
+      "& ul.collapse-open": {
+        display: "block"
+      }
+    }
+  }), ownerState.disabled && {
+    opacity: 0.5,
+    userSelect: "none"
+  });
+});
+var WmRadioset = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var className = props["class"],
+    _props$collapsible = props.collapsible,
+    collapsible = _props$collapsible === void 0 ? false : _props$collapsible,
+    _props$compareby = props.compareby,
+    compareby = _props$compareby === void 0 ? [] : _props$compareby,
+    _props$datafield = props.datafield,
+    datafield = _props$datafield === void 0 ? "" : _props$datafield,
+    dataset = props.dataset,
+    datavalue = props.datavalue,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    getDisplayExpression = props.getDisplayExpression,
+    _props$displayfield = props.displayfield,
+    displayfield = _props$displayfield === void 0 ? "" : _props$displayfield,
+    displayValue = props.displayValue,
+    groupby = props.groupby,
+    _props$itemclass = props.itemclass,
+    itemclass = _props$itemclass === void 0 ? "" : _props$itemclass,
+    _props$itemsperrow = props.itemsperrow,
+    itemsperrow = _props$itemsperrow === void 0 ? "xs-1 sm-1 md-1 lg-1" : _props$itemsperrow,
+    _props$listclass = props.listclass,
+    listclass = _props$listclass === void 0 ? "" : _props$listclass,
+    match = props.match,
+    name = props.name,
+    orderby = props.orderby,
+    _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$show = props.show,
+    show = _props$show === void 0 ? true : _props$show,
+    _props$showcount = props.showcount,
+    showcount = _props$showcount === void 0 ? false : _props$showcount,
+    _props$tabindex = props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    _props$usekeys = props.usekeys,
+    usekeys = _props$usekeys === void 0 ? false : _props$usekeys,
+    onClick = props.onClick,
+    onChange = props.onChange,
+    onMouseenter = props.onMouseenter,
+    onMouseleave = props.onMouseleave,
+    onTap = props.onTap,
+    _props$datasetItems = props.datasetItems,
+    datasetItems = _props$datasetItems === void 0 ? [] : _props$datasetItems,
+    _props$selectedItems = props.selectedItems,
+    selectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
+    onblur = props.onblur,
+    validation = props.validation,
+    groupedData = props.groupedData,
+    externalHandleHeaderClick = props.handleHeaderClick,
+    toggleAllHeaders = props.toggleAllHeaders,
+    isDestroyed = props.isDestroyed,
+    width = props.width,
+    height = props.height,
+    listener = props.listener,
+    styles = props.styles,
+    dataPath = props.dataPath;
+  var _useState = (0, _react.useState)({}),
+    expandedItems = _useState[0],
+    setExpandedItems = _useState[1];
+  var _useState2 = (0, _react.useState)(undefined),
+    selectedKey = _useState2[0],
+    setSelectedKey = _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];
+  var itemsPerRowClass = "items-per-row-".concat(itemsperrow.replace(/\s+/g, "-"));
+  var handleBlur = (0, _react.useCallback)(function () {
+    if (onblur) onblur();
+  }, [onblur]);
+  var transformedDataset = (0, _react.useMemo)(function () {
+    if (!dataset) return [];
+    return (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, undefined, getDisplayExpression, orderby, groupby, dataPath);
+  }, [dataset, datafield, displayfield, getDisplayExpression, 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("WmRadioset: Error processing dataset", e);
+      setError("Error processing dataset");
+      setLocalDatasetItems([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [dataset, transformedDataset]);
+  (0, _react.useEffect)(function () {
+    if (groupby && localDatasetItems.length > 0) {
+      try {
+        setGroupedDataset(function (prevGrouped) {
+          if (!(0, _lodashEs.isEqual)(prevGrouped, transformedDataset)) {
+            return transformedDataset;
+          }
+          return prevGrouped;
+        });
+        if (collapsible) {
+          var initialExpandedState = {};
+          transformedDataset.forEach(function (group) {
+            initialExpandedState[group.key] = true;
+          });
+          setExpandedItems(initialExpandedState);
+        }
+      } catch (e) {
+        console.error("WmRadioset: Error grouping data", e);
+        setGroupedDataset([]);
+      }
+    } else {
+      setGroupedDataset([]);
+    }
+  }, [groupby, localDatasetItems, collapsible, transformedDataset]);
+  (0, _react.useEffect)(function () {
+    if (datavalue !== undefined) {
+      setSelectedKey(datavalue);
+    }
+  }, [datavalue]);
+  var handleGroupClick = (0, _react.useCallback)(function (key, event) {
+    setExpandedItems(function (prevState) {
+      return _objectSpread(_objectSpread({}, prevState), {}, (0, _defineProperty2["default"])({}, key, !prevState[key]));
+    });
+    if (externalHandleHeaderClick && event) {
+      externalHandleHeaderClick(key);
+    }
+  }, [externalHandleHeaderClick]);
+  var handleRadioChange = (0, _react.useCallback)(function (event) {
+    var newSelectedKey = event.target.value;
+    setSelectedKey(newSelectedKey);
+    var selectedItem = (0, _lodashEs.find)(localDatasetItems, function (item) {
+      return (0, _lodashEs.toString)(item.key) === (0, _lodashEs.toString)(newSelectedKey);
+    });
+    if (selectedItem) {
+      if (onChange) {
+        onChange(event, props, selectedItem.value, selectedKey);
+      }
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange(props.name, {
+          datavalue: selectedItem.key,
+          displayValue: selectedItem.label
+        });
+      }
+    }
+  }, [localDatasetItems, onChange, props]);
+  var handleItemClick = (0, _react.useCallback)(function (item, event) {
+    if (disabled || readonly) return;
+    var newKey = (0, _lodashEs.toString)(item.key);
+    setSelectedKey(newKey);
+    if (item) {
+      if (onClick) {
+        onClick(event, props, item.value, selectedKey);
+      }
+      if (onChange) {
+        onChange(event, props, item.value, selectedKey);
+      }
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
+          datavalue: newKey,
+          displayValue: item.label
+        }));
+      }
+    }
+  }, [disabled, readonly, onClick, onChange, props, name]);
+  var renderRadio = (0, _react.useCallback)(function (item, index) {
+    var isChecked = (0, _lodashEs.toString)(selectedKey) === (0, _lodashEs.toString)(item.key);
+    return __jsx(_ListItem["default"], {
+      key: (0, _lodashEs.toString)(item.key) + index,
+      className: (0, _clsx["default"])("radio app-radio", {
+        active: isChecked
+      }),
+      onClick: function onClick(e) {
+        return handleItemClick(item, e);
+      },
+      component: "li"
+    }, __jsx(_Box["default"], {
+      component: "label",
+      className: "app-radioset-label ".concat(disabled || readonly ? "disabled" : "")
+    }, __jsx(_input.Input, {
+      "data-attr-index": index,
+      type: "radio",
+      checked: isChecked,
+      disabled: disabled || readonly,
+      name: "radioset_".concat(name || "unnamed"),
+      tabIndex: tabindex,
+      "aria-label": item.label,
+      value: item.key,
+      onChange: handleRadioChange,
+      role: "radio",
+      "aria-checked": isChecked
+    }), __jsx(_Box["default"], {
+      component: "span",
+      className: "caption customTemplate"
+    }, item.label)));
+  }, [selectedKey, handleRadioChange, handleItemClick, disabled, readonly, name]);
+  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);
+      }
+    }) : null), 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, disabled, readonly, collapsible, showcount]);
+  if (error) {
+    return __jsx(_Box["default"], {
+      className: "error-message"
+    }, error);
+  }
+  if (isLoading) {
+    return __jsx(_Box["default"], {
+      className: "loading-state"
+    }, "Loading...");
+  }
+  if (!localDatasetItems || localDatasetItems.length === 0) {
+    return __jsx(_Box["default"], {
+      className: (0, _clsx["default"])(className, DEFAULT_CLASS, itemsPerRowClass, listclass, itemclass)
+    }, __jsx(_Box["default"], {
+      className: "empty-state"
+    }, "No items to display"));
+  }
+  var events = _objectSpread(_objectSpread({}, props.onMouseEnter && {
+    onMouseEnter: props.onMouseEnter
+  }), props.onMouseLeave && {
+    onMouseLeave: props.onMouseLeave
+  });
+  return __jsx(_Box["default"], (0, _extends2["default"])({}, events, {
+    className: (0, _clsx["default"])(className, DEFAULT_CLASS, itemsPerRowClass, listclass, itemclass),
+    sx: _objectSpread(_objectSpread({}, styles), {}, {
+      height: height,
+      width: width
+    })
+  }), __jsx(_RadioGroup["default"], {
+    onMouseEnter: onMouseenter,
+    onMouseLeave: onMouseleave,
+    name: "radioset_".concat(name || "unnamed"),
+    value: selectedKey !== undefined ? (0, _lodashEs.toString)(selectedKey) : "",
+    onChange: handleRadioChange,
+    onBlur: handleBlur,
+    className: (0, _clsx["default"])({
+      "collapsible-radio-group": collapsible
+    })
+  }, groupby && groupedDataset.length > 0 ? __jsx(_Box["default"], {
+    component: "ul",
+    className: (0, _clsx["default"])(DEFAULT_CLASS)
+  }, groupedDataset.map(function (group) {
+    var _group$data2, _group$data3;
+    return __jsx(_List["default"], {
+      component: "li",
+      className: "app-list-item-group",
+      role: "presentation",
+      key: "group_fragment_".concat(group.key)
+    }, __jsx(_Box["default"], {
+      component: "ul",
+      className: (0, _clsx["default"])("item-group")
+    }, renderGroupHeader(group), collapsible ? expandedItems[group.key] ? (_group$data2 = group.data) === null || _group$data2 === void 0 ? void 0 : _group$data2.map(function (item, index) {
+      return renderRadio(item, index);
+    }) : null : (_group$data3 = group.data) === null || _group$data3 === void 0 ? void 0 : _group$data3.map(function (item, index) {
+      return renderRadio(item, index);
+    })));
+  })) : __jsx(StyledList, {
+    name: name,
+    role: "radiogroup",
+    ownerState: {
+      collapsible: collapsible,
+      disabled: disabled,
+      width: width
+    },
+    className: (0, _clsx["default"])("styledList custom", DEFAULT_CLASS)
+  }, localDatasetItems.map(function (item, index) {
+    return renderRadio(item, index);
+  }))), __jsx(_input.Input, {
+    disabled: disabled || readonly,
+    hidden: true,
+    className: "model-holder"
+  }), (readonly || disabled) && __jsx(_Box["default"], {
+    component: "div",
+    "aria-readonly": "true",
+    className: "readonly-wrapper"
+  }));
+}, function (prev, current) {
+  var keys = ["datavalue", "dataset", "show", "disabled", "readonly", "orderby", "groupby", "collapsible", "datasetItems"];
+  return keys.every(function (key) {
+    if (key === "datasetItems") {
+      return (0, _lodashEs.isEqual)(prev[key], current[key]);
+    }
+    return prev[key] === current[key];
+  });
+});
+WmRadioset.displayName = "WmRadioset";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])((0, _withFormController["default"])(WmRadioset));

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

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