@wavemaker/react-runtime 11.14.1-rc.236

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

@@ -0,0 +1,490 @@
+"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodashEs = require("lodash-es");
+var _withBaseWrapper = require("@wavemaker/react-runtime/higherOrder/withBaseWrapper");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _material = require("@mui/material");
+var _transformedDatasetUtils = require("@wavemaker/react-runtime/utils/transformedDataset-utils");
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _excluded = ["dataset", "datasetItems", "multiple", "disabled", "required", "name", "hint", "iconclass", "checkediconclass", "displayfield", "datafield", "value", "onChange", "onClick", "onMouseEnter", "onMouseLeave", "onBlur", "compareby", "toBeProcessedValue", "show", "tabindex", "arialabel", "className", "datavalue", "displayExpression", "orderby", "displayValue", "listener", "styles", "dataPath"];
+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_CLS = "app-switch";
+var defaultProps = {
+  show: true,
+  tabindex: 0,
+  checkediconclass: "",
+  displayfield: "label",
+  multiple: false,
+  disabled: false,
+  required: false,
+  allowempty: true,
+  acceptsArray: false,
+  dataset: "yes, no, maybe",
+  datavalue: "yes"
+};
+var useSwitch = function useSwitch(props) {
+  var _props$dataset = props.dataset,
+    dataset = _props$dataset === void 0 ? defaultProps.dataset : _props$dataset,
+    propDatasetItems = props.datasetItems,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? defaultProps.multiple : _props$multiple,
+    value = props.value,
+    toBeProcessedValue = props.toBeProcessedValue,
+    onChange = props.onChange,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onBlur = props.onBlur,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? defaultProps.disabled : _props$disabled,
+    compareby = props.compareby,
+    datafield = props.datafield,
+    _props$allowempty = props.allowempty,
+    allowempty = _props$allowempty === void 0 ? defaultProps.allowempty : _props$allowempty,
+    _props$acceptsArray = props.acceptsArray,
+    acceptsArray = _props$acceptsArray === void 0 ? defaultProps.acceptsArray : _props$acceptsArray,
+    _props$datavalue = props.datavalue,
+    datavalue = _props$datavalue === void 0 ? defaultProps.datavalue : _props$datavalue,
+    listener = props.listener,
+    displayfield = props.displayfield,
+    orderby = props.orderby,
+    displayExpression = props.displayExpression,
+    name = props.name,
+    dataPath = props.dataPath;
+
+  // Consolidated dataset transformation - handles both initial value and updates
+  var transformedDataset = (0, _react.useMemo)(function () {
+    if (propDatasetItems !== null && propDatasetItems !== void 0 && propDatasetItems.length) return propDatasetItems;
+    return (0, _transformedDatasetUtils.transformDataset)(dataset, datafield, displayfield, undefined, displayExpression, orderby, null, dataPath);
+  }, [dataset, datafield, displayfield, displayExpression, orderby, propDatasetItems]);
+  var _useState = (0, _react.useState)(transformedDataset),
+    datasetItems = _useState[0],
+    setDatasetItems = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    modelByValue = _useState3[0],
+    setModelByValue = _useState3[1];
+  var _useState4 = (0, _react.useState)(null),
+    modelByKey = _useState4[0],
+    setModelByKey = _useState4[1];
+  var _useState5 = (0, _react.useState)(""),
+    CHDisplayValue = _useState5[0],
+    setDisplayValue = _useState5[1];
+  var switchRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+
+  // This flag helps us distinguish between programmatic updates and user clicks
+  var _useState6 = (0, _react.useState)(false),
+    isUserInteraction = _useState6[0],
+    setIsUserInteraction = _useState6[1];
+  var btnWidth = (0, _react.useMemo)(function () {
+    return datasetItems !== null && datasetItems !== void 0 && datasetItems.length && !multiple ? 100 / datasetItems.length : 0;
+  }, [datasetItems === null || datasetItems === void 0 ? void 0 : datasetItems.length, multiple]);
+  var updateHighlighter = (0, _react.useCallback)(function () {
+    var skipAnimation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (!overlayRef.current || !switchRef.current) return;
+    var index = selectedItem ? (0, _lodashEs.findIndex)(datasetItems, {
+      key: selectedItem.key
+    }) : -1;
+    if (index === -1) return;
+    var left = index * btnWidth;
+    if (skipAnimation) {
+      overlayRef.current.style.left = "".concat(left, "%");
+    } else {
+      overlayRef.current.style.left = "".concat(left, "%");
+    }
+  }, [btnWidth, datasetItems, selectedItem]);
+  (0, _react.useEffect)(function () {
+    if (overlayRef.current && btnWidth > 0) {
+      overlayRef.current.style.width = "".concat(btnWidth, "%");
+    }
+  }, [btnWidth]);
+
+  // Update datasetItems when transformedDataset changes
+  (0, _react.useEffect)(function () {
+    setDatasetItems(function (prevItems) {
+      // Only update if actually different
+      if (JSON.stringify(prevItems) !== JSON.stringify(transformedDataset)) {
+        return transformedDataset;
+      }
+      return prevItems;
+    });
+  }, [transformedDataset]);
+
+  // This is the key fix: we only run the value update logic when it's NOT a user interaction
+  // This prevents the useEffect from overriding user clicks
+  var onValueUpdateFn = (0, _react.useCallback)(function () {
+    if (isUserInteraction) {
+      return; // Don't override user interactions
+    }
+    if (value !== undefined || toBeProcessedValue !== undefined || datavalue !== undefined) {
+      var selected = (0, _lodashEs.find)(datasetItems, function (item) {
+        return item.value === (value || toBeProcessedValue || datavalue) || (0, _lodashEs.toString)(item.key) === (0, _lodashEs.toString)(value || toBeProcessedValue || datavalue);
+      });
+      if (selected) {
+        var updatedItems = datasetItems.map(function (item) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            selected: (0, _lodashEs.toString)(item.key) === (0, _lodashEs.toString)(selected.key)
+          });
+        });
+        setDatasetItems(updatedItems);
+        setSelectedItem(selected);
+        setModelByKey(selected.key);
+        setModelByValue(selected.value);
+      }
+    } else if ((datasetItems === null || datasetItems === void 0 ? void 0 : datasetItems.length) > 0 && !selectedItem && datavalue) {
+      var firstItem = datasetItems[0];
+      var _updatedItems = datasetItems.map(function (item, idx) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          selected: idx === 0
+        });
+      });
+      setDatasetItems(_updatedItems);
+      setSelectedItem(firstItem);
+      setModelByKey(firstItem.key);
+      setModelByValue(firstItem.value);
+    }
+  }, [datasetItems, value, toBeProcessedValue, datavalue, selectedItem, isUserInteraction]);
+  (0, _react.useEffect)(function () {
+    onValueUpdateFn();
+  }, [value, toBeProcessedValue, datavalue, datasetItems === null || datasetItems === void 0 ? void 0 : datasetItems.length]);
+  (0, _react.useEffect)(function () {
+    if (selectedItem) {
+      updateHighlighter(true);
+    }
+  }, [selectedItem, updateHighlighter]);
+  var selectOpt = (0, _react.useCallback)(function (event, index, option) {
+    event.preventDefault();
+    if (disabled) return;
+
+    // Mark this as a user interaction to prevent useEffect interference
+    setIsUserInteraction(true);
+    if (multiple) {
+      var updatedItems = datasetItems.map(function (item, idx) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          selected: idx === index ? !item.selected : item.selected
+        });
+      });
+      var keys = [];
+      (0, _lodashEs.forEach)(updatedItems, function (item) {
+        if (item.selected) {
+          keys.push(item.key);
+        }
+      });
+
+      // Use a single state update to avoid conflicts
+      setDatasetItems(updatedItems);
+      setModelByKey(keys);
+      setModelByValue(keys.map(function (key) {
+        var _find;
+        return (_find = (0, _lodashEs.find)(updatedItems, {
+          key: key
+        })) === null || _find === void 0 ? void 0 : _find.value;
+      }));
+      setSelectedItem((0, _lodashEs.find)(updatedItems, {
+        selected: true
+      }) || null);
+      var datavalueArray = keys.map(function (key) {
+        var _find2;
+        return (_find2 = (0, _lodashEs.find)(updatedItems, {
+          key: key
+        })) === null || _find2 === void 0 ? void 0 : _find2.value;
+      });
+      var displayValueArray = keys.map(function (key) {
+        var _find3;
+        return (_find3 = (0, _lodashEs.find)(updatedItems, {
+          key: key
+        })) === null || _find3 === void 0 ? void 0 : _find3.label;
+      });
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
+          datavalue: datavalueArray,
+          displayValue: displayValueArray
+        }));
+      }
+      if (onChange) {
+        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], keys.map(function (key) {
+          var _find4;
+          return (_find4 = (0, _lodashEs.find)(updatedItems, {
+            key: key
+          })) === null || _find4 === void 0 ? void 0 : _find4.value;
+        }), keys);
+      }
+    } else {
+      // Handle single selection logic
+      var targetIndex = index;
+      if (!multiple && selectedItem && index === (0, _lodashEs.findIndex)(datasetItems, {
+        key: selectedItem.key
+      })) {
+        if (datasetItems.length === 2) {
+          targetIndex = index === 1 ? 0 : 1;
+        } else {
+          // Reset the user interaction flag before returning
+          setIsUserInteraction(false);
+          return;
+        }
+      }
+      var _updatedItems2 = (0, _toConsumableArray2["default"])(datasetItems);
+      _updatedItems2.forEach(function (item) {
+        return item.selected = false;
+      });
+      _updatedItems2[targetIndex].selected = true;
+      var selectedOption = _updatedItems2[targetIndex];
+
+      // Batch all state updates together to ensure they happen atomically
+      setDatasetItems(_updatedItems2);
+      setSelectedItem(selectedOption);
+      setModelByKey(selectedOption.key);
+      setModelByValue(selectedOption.value);
+
+      // Update overlay position immediately for immediate visual feedback
+      if (overlayRef.current) {
+        overlayRef.current.style.transition = "left 300ms";
+        var left = targetIndex * btnWidth;
+        overlayRef.current.style.left = "".concat(left, "%");
+      }
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange((props === null || props === void 0 ? void 0 : props.fieldName) || name, {
+          datavalue: selectedOption.value,
+          displayValue: selectedOption.label
+        });
+      }
+      if (onChange) {
+        onChange(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name], selectedOption.value, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label);
+      }
+    }
+
+    // Reset the user interaction flag after a short delay to allow for programmatic updates again
+    setTimeout(function () {
+      setIsUserInteraction(false);
+    }, 100);
+    if (onBlur) {
+      onBlur();
+    }
+  }, [datasetItems, disabled, multiple, onChange, onBlur, onClick, selectedItem, btnWidth, listener]);
+  var handleOnMouseEnter = function handleOnMouseEnter(event, option) {
+    if (disabled || !onMouseEnter) return;
+    onMouseEnter(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+  };
+  var handleOnMouseLeave = function handleOnMouseLeave(event, option) {
+    if (disabled || !onMouseLeave) return;
+    onMouseLeave(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+  };
+  var handleOnClick = function handleOnClick(event, index, option) {
+    selectOpt(event, index, option);
+    if (disabled || !onClick) return;
+    onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+  };
+  return {
+    datasetItems: datasetItems,
+    selectedItem: selectedItem,
+    btnWidth: btnWidth,
+    switchRef: switchRef,
+    overlayRef: overlayRef,
+    selectOpt: selectOpt,
+    updateHighlighter: updateHighlighter,
+    modelByValue: modelByValue,
+    modelByKey: modelByKey,
+    CHDisplayValue: CHDisplayValue,
+    handleOnMouseEnter: handleOnMouseEnter,
+    handleOnMouseLeave: handleOnMouseLeave,
+    handleOnClick: handleOnClick
+  };
+};
+var SwitchOption = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _opt$dataObject;
+  var opt = _ref.opt,
+    index = _ref.index,
+    getHint = _ref.getHint,
+    selectOpt = _ref.selectOpt,
+    handleOnMouseEnter = _ref.handleOnMouseEnter,
+    handleOnMouseLeave = _ref.handleOnMouseLeave,
+    handleOnClick = _ref.handleOnClick,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    iconclass = _ref.iconclass,
+    checkediconclass = _ref.checkediconclass,
+    displayfield = _ref.displayfield;
+  return __jsx(_Box["default"], {
+    component: "a",
+    key: opt.key,
+    href: "javascript:void(0);",
+    className: "btn btn-default ".concat(opt.selected ? "selected" : "", " ").concat(disabled ? "disabled" : ""),
+    title: getHint(opt, index),
+    role: "button",
+    "aria-pressed": opt.selected ? "true" : "false",
+    onClick: function onClick(e) {
+      return handleOnClick(e, index, opt);
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      return handleOnMouseEnter(e, opt);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return handleOnMouseLeave(e, opt);
+    },
+    name: "wm-switch-".concat(opt.key)
+  }, iconclass && ((_opt$dataObject = opt.dataObject) === null || _opt$dataObject === void 0 ? void 0 : _opt$dataObject[iconclass]) && (!opt.selected || !checkediconclass) && __jsx(_Box["default"], {
+    component: "i",
+    "aria-hidden": "true",
+    className: "app-icon ".concat(opt.dataObject[iconclass] || opt["icon"])
+  }), opt.selected && checkediconclass && __jsx(_Box["default"], {
+    component: "i",
+    "aria-hidden": "true",
+    className: checkediconclass
+  }), __jsx(_Box["default"], {
+    component: "span",
+    className: "caption"
+  }, displayfield && opt[displayfield] || opt.label));
+});
+SwitchOption.displayName = "SwitchOption";
+var WmSwitch = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var dataset = _ref2.dataset,
+    propDatasetItems = _ref2.datasetItems,
+    _ref2$multiple = _ref2.multiple,
+    multiple = _ref2$multiple === void 0 ? defaultProps.multiple : _ref2$multiple,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? defaultProps.disabled : _ref2$disabled,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? defaultProps.required : _ref2$required,
+    name = _ref2.name,
+    hint = _ref2.hint,
+    iconclass = _ref2.iconclass,
+    _ref2$checkediconclas = _ref2.checkediconclass,
+    checkediconclass = _ref2$checkediconclas === void 0 ? defaultProps.checkediconclass : _ref2$checkediconclas,
+    _ref2$displayfield = _ref2.displayfield,
+    displayfield = _ref2$displayfield === void 0 ? defaultProps.displayfield : _ref2$displayfield,
+    datafield = _ref2.datafield,
+    value = _ref2.value,
+    onChange = _ref2.onChange,
+    onClick = _ref2.onClick,
+    onMouseEnter = _ref2.onMouseEnter,
+    onMouseLeave = _ref2.onMouseLeave,
+    onBlur = _ref2.onBlur,
+    compareby = _ref2.compareby,
+    toBeProcessedValue = _ref2.toBeProcessedValue,
+    _ref2$show = _ref2.show,
+    show = _ref2$show === void 0 ? defaultProps.show : _ref2$show,
+    _ref2$tabindex = _ref2.tabindex,
+    tabindex = _ref2$tabindex === void 0 ? defaultProps.tabindex : _ref2$tabindex,
+    _ref2$arialabel = _ref2.arialabel,
+    arialabel = _ref2$arialabel === void 0 ? "Switch choose options" : _ref2$arialabel,
+    className = _ref2.className,
+    datavalue = _ref2.datavalue,
+    displayExpression = _ref2.displayExpression,
+    orderby = _ref2.orderby,
+    displayValue = _ref2.displayValue,
+    listener = _ref2.listener,
+    styles = _ref2.styles,
+    dataPath = _ref2.dataPath,
+    rest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+  var _useSwitch = useSwitch({
+      dataset: dataset,
+      datasetItems: propDatasetItems,
+      multiple: multiple,
+      value: value,
+      toBeProcessedValue: toBeProcessedValue,
+      onChange: onChange,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onBlur: onBlur,
+      disabled: disabled,
+      compareby: compareby,
+      datafield: datafield,
+      datavalue: datavalue,
+      name: name,
+      displayfield: displayfield,
+      displayExpression: displayExpression,
+      orderby: orderby,
+      listener: listener,
+      dataPath: dataPath
+    }),
+    datasetItems = _useSwitch.datasetItems,
+    selectedItem = _useSwitch.selectedItem,
+    switchRef = _useSwitch.switchRef,
+    overlayRef = _useSwitch.overlayRef,
+    selectOpt = _useSwitch.selectOpt,
+    updateHighlighter = _useSwitch.updateHighlighter,
+    handleOnMouseEnter = _useSwitch.handleOnMouseEnter,
+    handleOnMouseLeave = _useSwitch.handleOnMouseLeave,
+    handleOnClick = _useSwitch.handleOnClick,
+    modelByValue = _useSwitch.modelByValue,
+    modelByKey = _useSwitch.modelByKey,
+    CHDisplayValue = _useSwitch.CHDisplayValue,
+    btnWidth = _useSwitch.btnWidth;
+  var getHint = (0, _react.useCallback)(function (opt, index) {
+    if (!hint) return opt[displayfield] || opt.label;
+    if (Array.isArray(hint)) {
+      return hint[index - 1] || hint[0] || opt[displayfield] || opt.label;
+    }
+    return hint;
+  }, [hint, displayfield]);
+  return __jsx(_Box["default"], {
+    className: DEFAULT_CLS,
+    name: name,
+    "aria-label": arialabel,
+    datavalue: datavalue
+  }, __jsx(_Box["default"], {
+    ref: switchRef,
+    role: "group",
+    className: "btn-group btn-group-justified ".concat(multiple ? "multi-select" : "", " ").concat(className || ""),
+    style: _objectSpread({
+      overflow: "visible",
+      position: "relative"
+    }, styles),
+    tabIndex: tabindex,
+    "aria-label": arialabel
+  }, datasetItems && datasetItems.map(function (opt, index) {
+    return __jsx(SwitchOption, {
+      key: opt.key,
+      opt: opt,
+      index: index,
+      getHint: getHint,
+      selectOpt: selectOpt,
+      disabled: disabled,
+      iconclass: iconclass,
+      checkediconclass: checkediconclass,
+      displayfield: displayfield,
+      handleOnMouseEnter: handleOnMouseEnter,
+      handleOnMouseLeave: handleOnMouseLeave,
+      handleOnClick: handleOnClick
+    });
+  })), !multiple && __jsx(_Box["default"], {
+    component: "span",
+    ref: overlayRef,
+    title: selectedItem ? selectedItem.label : modelByKey,
+    "aria-hidden": "true",
+    className: "btn btn-primary app-switch-overlay switch-handle"
+  }, checkediconclass && __jsx(_Box["default"], {
+    component: "i",
+    className: checkediconclass
+  }), __jsx(_Box["default"], {
+    component: "span",
+    className: "caption"
+  }, selectedItem ? selectedItem.label : modelByKey)), __jsx(_material.InputBase, {
+    name: name,
+    className: "model-holder ng-hide",
+    disabled: disabled,
+    value: modelByKey || "",
+    required: required,
+    "aria-hidden": "true",
+    readOnly: true
+  }));
+});
+WmSwitch.displayName = "WmSwitch";
+var _default = exports["default"] = (0, _withBaseWrapper.withBaseWrapper)((0, _withFormController["default"])(WmSwitch));

package/components/input/default/switch/prop.js

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