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

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

@@ -0,0 +1,586 @@
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  memo,
+  useMemo
+} from "react";
+import { find, findIndex, forEach, toString } from "lodash-es";
+import {
+  withBaseWrapper
+} from "../../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../../common/WmAppIcon";
+import Box from "@mui/material/Box";
+import { InputBase } from "@mui/material";
+import { transformDataset } from "../../../../utils/transformedDataset-utils";
+import withFormController from "../../../data/form/form-controller/withFormController";
+import withStandalone from "../../../../higherOrder/withStandalone";
+const DEFAULT_CLS = "app-switch";
+const defaultProps = {
+  show: true,
+  tabindex: 0,
+  checkediconclass: "",
+  displayfield: "label",
+  multiple: false,
+  disabled: false,
+  required: false,
+  allowempty: true,
+  acceptsArray: false,
+  dataset: "yes, no, maybe"
+};
+const useSwitch = (props) => {
+  const {
+    dataset = defaultProps.dataset,
+    datasetItems: propDatasetItems,
+    multiple = defaultProps.multiple,
+    value,
+    toBeProcessedValue,
+    onChange,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onBlur,
+    disabled = defaultProps.disabled,
+    compareby,
+    datafield,
+    allowempty = defaultProps.allowempty,
+    acceptsArray = defaultProps.acceptsArray,
+    datavalue,
+    listener,
+    displayfield,
+    orderby,
+    displayExpression,
+    name,
+    dataPath
+  } = props;
+  const transformedDataset = useMemo(() => {
+    if (propDatasetItems == null ? void 0 : propDatasetItems.length) return propDatasetItems;
+    const resolvedDataset = typeof dataset === "function" ? dataset() : dataset;
+    return transformDataset(
+      resolvedDataset,
+      datafield,
+      displayfield,
+      void 0,
+      displayExpression,
+      orderby,
+      null,
+      dataPath
+    );
+  }, [dataset, datafield, displayfield, displayExpression, orderby, propDatasetItems]);
+  const [datasetItems, setDatasetItems] = useState(
+    transformedDataset
+  );
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [modelByValue, setModelByValue] = useState(null);
+  const [modelByKey, setModelByKey] = useState(null);
+  const [CHDisplayValue, setDisplayValue] = useState("");
+  const switchRef = useRef(null);
+  const overlayRef = useRef(null);
+  const [isUserInteraction, setIsUserInteraction] = useState(false);
+  const btnWidth = useMemo(() => {
+    return (datasetItems == null ? void 0 : datasetItems.length) && !multiple ? 100 / datasetItems.length : 0;
+  }, [datasetItems == null ? void 0 : datasetItems.length, multiple]);
+  const updateHighlighter = useCallback(
+    (skipAnimation = false) => {
+      if (!overlayRef.current || !switchRef.current) return;
+      const index = selectedItem ? findIndex(datasetItems, { key: selectedItem.key }) : -1;
+      if (index === -1) return;
+      const left = index * btnWidth;
+      if (skipAnimation) {
+        overlayRef.current.style.left = `${left}%`;
+      } else {
+        overlayRef.current.style.left = `${left}%`;
+      }
+    },
+    [btnWidth, datasetItems, selectedItem]
+  );
+  useEffect(() => {
+    if (overlayRef.current && btnWidth > 0) {
+      overlayRef.current.style.width = `${btnWidth}%`;
+    }
+  }, [btnWidth]);
+  useEffect(() => {
+    setDatasetItems((prevItems) => {
+      if (JSON.stringify(prevItems) !== JSON.stringify(transformedDataset)) {
+        return transformedDataset;
+      }
+      return prevItems;
+    });
+  }, [transformedDataset]);
+  const onValueUpdateFn = useCallback(() => {
+    if (isUserInteraction) {
+      return;
+    }
+    if (value !== void 0 || toBeProcessedValue !== void 0 || datavalue !== void 0) {
+      const selected = find(
+        datasetItems,
+        (item) => item.value === (value || toBeProcessedValue || datavalue) || toString(item.key) === toString(value || toBeProcessedValue || datavalue)
+      );
+      if (selected) {
+        const updatedItems = datasetItems.map((item) => __spreadProps(__spreadValues({}, item), {
+          selected: toString(item.key) === toString(selected.key)
+        }));
+        setDatasetItems(updatedItems);
+        setSelectedItem(selected);
+        setModelByKey(selected.key);
+        setModelByValue(selected.value);
+      }
+    } else if ((datasetItems == null ? void 0 : datasetItems.length) > 0 && !selectedItem && datavalue) {
+      const firstItem = datasetItems[0];
+      const updatedItems = datasetItems.map((item, idx) => __spreadProps(__spreadValues({}, item), {
+        selected: idx === 0
+      }));
+      setDatasetItems(updatedItems);
+      setSelectedItem(firstItem);
+      setModelByKey(firstItem.key);
+      setModelByValue(firstItem.value);
+    } else if ((datasetItems == null ? void 0 : datasetItems.length) > 0 && datavalue === void 0 && selectedItem) {
+      const updatedItems = datasetItems.map((item) => __spreadProps(__spreadValues({}, item), {
+        selected: false
+      }));
+      setDatasetItems(updatedItems);
+      setSelectedItem(null);
+      setModelByKey(null);
+      setModelByValue(null);
+    }
+  }, [datasetItems, value, toBeProcessedValue, datavalue, selectedItem, isUserInteraction]);
+  useEffect(() => {
+    onValueUpdateFn();
+  }, [value, toBeProcessedValue, datavalue, datasetItems == null ? void 0 : datasetItems.length]);
+  useEffect(() => {
+    if (selectedItem) {
+      updateHighlighter(true);
+    }
+  }, [selectedItem, updateHighlighter]);
+  const selectOpt = useCallback(
+    (event, index, option) => {
+      var _a, _b;
+      event.preventDefault();
+      if (disabled) return;
+      const selectedValue = {
+        datavalue: props.datavalue,
+        displayValue: props.displayValue
+      };
+      setIsUserInteraction(true);
+      if (multiple) {
+        const updatedItems = datasetItems.map((item, idx) => __spreadProps(__spreadValues({}, item), {
+          selected: idx === index ? !item.selected : item.selected
+        }));
+        const keys = [];
+        forEach(updatedItems, (item) => {
+          if (item.selected) {
+            keys.push(item.key);
+          }
+        });
+        setDatasetItems(updatedItems);
+        setModelByKey(keys);
+        setModelByValue(keys.map((key) => {
+          var _a2;
+          return (_a2 = find(updatedItems, { key })) == null ? void 0 : _a2.value;
+        }));
+        setSelectedItem(find(updatedItems, { selected: true }) || null);
+        const datavalueArray = keys.map((key) => {
+          var _a2;
+          return (_a2 = find(updatedItems, { key })) == null ? void 0 : _a2.value;
+        });
+        const displayValueArray = keys.map((key) => {
+          var _a2;
+          return (_a2 = find(updatedItems, { key })) == null ? void 0 : _a2.label;
+        });
+        selectedValue.datavalue = datavalueArray;
+        selectedValue.displayValue = displayValueArray;
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange(name, __spreadProps(__spreadValues({}, props), {
+            datavalue: datavalueArray,
+            displayValue: displayValueArray
+          }));
+        }
+        if (onChange) {
+          onChange(
+            event,
+            (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name],
+            keys.map((key) => {
+              var _a2;
+              return (_a2 = find(updatedItems, { key })) == null ? void 0 : _a2.value;
+            }),
+            keys
+          );
+        }
+      } else {
+        let targetIndex = index;
+        if (!multiple && selectedItem && index === findIndex(datasetItems, { key: selectedItem.key })) {
+          setIsUserInteraction(false);
+          return;
+        }
+        const updatedItems = [...datasetItems];
+        updatedItems.forEach((item) => item.selected = false);
+        updatedItems[targetIndex].selected = true;
+        const selectedOption = updatedItems[targetIndex];
+        setDatasetItems(updatedItems);
+        setSelectedItem(selectedOption);
+        setModelByKey(selectedOption.key);
+        setModelByValue(selectedOption.value);
+        if (overlayRef.current) {
+          overlayRef.current.style.transition = "left 300ms";
+          const left = targetIndex * btnWidth;
+          overlayRef.current.style.left = `${left}%`;
+        }
+        selectedValue.datavalue = selectedOption.value;
+        selectedValue.displayValue = selectedOption.label;
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange((props == null ? void 0 : props.fieldName) || name, {
+            datavalue: selectedOption.value,
+            displayValue: selectedOption.label
+          });
+        }
+        if (onChange) {
+          onChange(
+            event,
+            (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[name],
+            selectedOption.value,
+            selectedItem == null ? void 0 : selectedItem.label
+          );
+        }
+      }
+      setTimeout(() => {
+        setIsUserInteraction(false);
+      }, 100);
+      if (onBlur) {
+        onBlur();
+      }
+      return selectedValue;
+    },
+    [datasetItems, disabled, multiple, onChange, onBlur, onClick, selectedItem, btnWidth, listener]
+  );
+  const handleOnMouseEnter = (event, option) => {
+    var _a;
+    if (disabled || !onMouseEnter) return;
+    onMouseEnter(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+  };
+  const handleOnMouseLeave = (event, option) => {
+    var _a;
+    if (disabled || !onMouseLeave) return;
+    onMouseLeave(event, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name]);
+  };
+  const handleOnClick = (event, index, option) => {
+    var _a;
+    const selectedValue = selectOpt(event, index, option);
+    if (disabled || !onClick) return;
+    onClick(event, Object.assign({}, (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name], selectedValue));
+  };
+  return {
+    datasetItems,
+    selectedItem,
+    btnWidth,
+    switchRef,
+    overlayRef,
+    selectOpt,
+    updateHighlighter,
+    modelByValue,
+    modelByKey,
+    CHDisplayValue,
+    handleOnMouseEnter,
+    handleOnMouseLeave,
+    handleOnClick
+  };
+};
+const SwitchOption = memo(
+  ({
+    opt,
+    index,
+    getHint,
+    selectOpt,
+    handleOnMouseEnter,
+    handleOnMouseLeave,
+    handleOnClick,
+    disabled = false,
+    iconclass,
+    iconurl,
+    checkediconclass,
+    checkediconurl,
+    displayfield,
+    prefabName
+  }) => {
+    var _a, _b, _c, _d;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues({
+        component: "a",
+        href: "javascript:void(0);",
+        className: `btn btn-default ${opt.selected ? "selected" : ""} ${disabled ? "disabled" : ""}`,
+        title: getHint(opt, index),
+        role: "button",
+        "aria-pressed": opt.selected ? "true" : "false",
+        onClick: (e) => handleOnClick(e, index, opt),
+        onMouseEnter: (e) => handleOnMouseEnter(e, opt),
+        onMouseLeave: (e) => handleOnMouseLeave(e, opt)
+      }, {
+        name: `wm-switch-${opt.key}`
+      }), {
+        children: [
+          iconclass && (((_a = opt.dataObject) == null ? void 0 : _a[iconclass]) || ((_b = opt.dataObject) == null ? void 0 : _b[iconurl]) || opt["icon"]) && (!opt.selected || !checkediconclass) && /* @__PURE__ */ jsx(
+            WmAppIcon,
+            {
+              iconclass: ((_c = opt.dataObject) == null ? void 0 : _c[iconclass]) || opt["icon"],
+              iconurl: ((_d = opt.dataObject) == null ? void 0 : _d[iconurl]) || opt["icon"],
+              prefabName
+            }
+          ),
+          opt.selected && (checkediconclass || checkediconurl) && /* @__PURE__ */ jsx(
+            WmAppIcon,
+            {
+              iconclass: checkediconclass,
+              iconurl: checkediconurl,
+              prefabName
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { component: "span", className: "caption", children: displayfield && opt[displayfield] || opt.label })
+        ]
+      }),
+      opt.key
+    );
+  }
+);
+SwitchOption.displayName = "SwitchOption";
+const WmSwitch = memo(
+  (_a) => {
+    var _b = _a, {
+      dataset,
+      datasetItems: propDatasetItems,
+      multiple = defaultProps.multiple,
+      disabled = defaultProps.disabled,
+      required = defaultProps.required,
+      name,
+      hint,
+      iconclass,
+      iconurl,
+      checkediconclass = defaultProps.checkediconclass,
+      checkediconurl,
+      displayfield = defaultProps.displayfield,
+      prefabName,
+      datafield,
+      value,
+      onChange,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onBlur,
+      compareby,
+      toBeProcessedValue,
+      show = defaultProps.show,
+      tabindex = defaultProps.tabindex,
+      arialabel = "Switch choose options",
+      className,
+      datavalue,
+      displayExpression,
+      orderby,
+      displayValue,
+      listener,
+      styles,
+      dataPath,
+      hidden,
+      fieldName
+    } = _b, rest = __objRest(_b, [
+      "dataset",
+      "datasetItems",
+      "multiple",
+      "disabled",
+      "required",
+      "name",
+      "hint",
+      "iconclass",
+      "iconurl",
+      "checkediconclass",
+      "checkediconurl",
+      "displayfield",
+      "prefabName",
+      "datafield",
+      "value",
+      "onChange",
+      "onClick",
+      "onMouseEnter",
+      "onMouseLeave",
+      "onBlur",
+      "compareby",
+      "toBeProcessedValue",
+      "show",
+      "tabindex",
+      "arialabel",
+      "className",
+      "datavalue",
+      "displayExpression",
+      "orderby",
+      "displayValue",
+      "listener",
+      "styles",
+      "dataPath",
+      "hidden",
+      "fieldName"
+    ]);
+    const {
+      datasetItems,
+      selectedItem,
+      switchRef,
+      overlayRef,
+      selectOpt,
+      updateHighlighter,
+      handleOnMouseEnter,
+      handleOnMouseLeave,
+      handleOnClick,
+      modelByValue,
+      modelByKey,
+      CHDisplayValue,
+      btnWidth
+    } = useSwitch({
+      dataset,
+      datasetItems: propDatasetItems,
+      multiple,
+      value,
+      toBeProcessedValue,
+      onChange,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onBlur,
+      disabled,
+      compareby,
+      datafield,
+      datavalue,
+      name,
+      displayfield,
+      displayExpression,
+      orderby,
+      listener,
+      dataPath,
+      fieldName
+    });
+    const getHint = useCallback(
+      (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 /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+        hidden,
+        className: `${DEFAULT_CLS} wm-switch-root`
+      }, { name }), {
+        "aria-label": arialabel
+      }), { datavalue }), {
+        style: styles,
+        children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: switchRef,
+              role: "group",
+              className: `btn-group btn-group-justified wm-switch-inner ${multiple ? "multi-select" : ""} ${className || ""}`,
+              style: styles,
+              tabIndex: tabindex,
+              "aria-label": arialabel,
+              children: datasetItems && datasetItems.map((opt, index) => /* @__PURE__ */ jsx(
+                SwitchOption,
+                {
+                  opt,
+                  index,
+                  getHint,
+                  selectOpt,
+                  disabled,
+                  iconclass,
+                  iconurl,
+                  checkediconclass,
+                  checkediconurl,
+                  displayfield,
+                  prefabName,
+                  handleOnMouseEnter,
+                  handleOnMouseLeave,
+                  handleOnClick
+                },
+                opt.key
+              ))
+            }
+          ),
+          !multiple && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              component: "span",
+              ref: overlayRef,
+              title: selectedItem ? selectedItem.label : modelByKey,
+              "aria-hidden": "true",
+              className: "btn btn-primary app-switch-overlay switch-handle",
+              children: [
+                (checkediconclass || checkediconurl) && /* @__PURE__ */ jsx(
+                  WmAppIcon,
+                  {
+                    iconclass: checkediconclass,
+                    iconurl: checkediconurl,
+                    prefabName
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box, { component: "span", className: "caption", children: selectedItem ? selectedItem.label : modelByKey })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            InputBase,
+            {
+              name,
+              className: "model-holder ng-hide",
+              disabled,
+              value: modelByKey || "",
+              required,
+              "aria-hidden": "true",
+              readOnly: true
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+WmSwitch.displayName = "WmSwitch";
+const WithForm = withFormController(WmSwitch);
+const WmSwitchStandalone = withStandalone(WithForm);
+var switch_default = withBaseWrapper(WithForm);
+export {
+  WmSwitchStandalone as WmSwitch,
+  switch_default as default
+};