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

package/components/input/color-picker/index.js

@@ -0,0 +1,642 @@
+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 { memo, useRef, useCallback, useState, useEffect } from "react";
+import { ChromePicker } from "react-color";
+import clsx from "clsx";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { Input } from "@base-ui-components/react/input";
+import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import withFormController from "../../data/form/form-controller/withFormController";
+import { createPortal } from "react-dom";
+import withStandalone from "../../../higherOrder/withStandalone";
+const AUTOCLOSE_TYPE = {
+  ALWAYS: "always",
+  OUTSIDECLICK: "outsideClick",
+  NEVER: "disabled"
+};
+const DEFAULT_CLASS = "input-group app-colorpicker";
+const PICKER_HEIGHT = 320;
+const POSITION_DELAY = 100;
+const isValidHexColor = (hex) => {
+  return /^#([0-9A-F]{3}){1,2}$/i.test(hex);
+};
+const isValidRgbaColor = (rgba) => {
+  return /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/.test(rgba);
+};
+const isValidRgbColor = (rgb) => {
+  return /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(rgb);
+};
+const isValidNamedColor = (color) => {
+  const tempElem = document.createElement("div");
+  tempElem.style.color = "";
+  document.body.appendChild(tempElem);
+  const defaultColor = getComputedStyle(tempElem).color;
+  tempElem.style.color = color;
+  const computedColor = getComputedStyle(tempElem).color;
+  document.body.removeChild(tempElem);
+  return computedColor !== defaultColor;
+};
+const hexToRgba = (colorString) => {
+  const defaultColor = { r: 0, g: 0, b: 0, a: 0 };
+  if (!colorString || colorString === "") {
+    return defaultColor;
+  }
+  const rgbMatch = colorString.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (rgbMatch) {
+    return {
+      r: parseInt(rgbMatch[1], 10),
+      g: parseInt(rgbMatch[2], 10),
+      b: parseInt(rgbMatch[3], 10)
+    };
+  }
+  const rgbaMatch = colorString.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+  if (rgbaMatch) {
+    return {
+      r: parseInt(rgbaMatch[1], 10),
+      g: parseInt(rgbaMatch[2], 10),
+      b: parseInt(rgbaMatch[3], 10),
+      a: parseFloat(rgbaMatch[4])
+    };
+  }
+  if (isValidNamedColor(colorString)) {
+    return getNamedColorRgba(colorString) || defaultColor;
+  }
+  let hex = colorString.replace("#", "");
+  let r = 0, g = 0, b = 0, a = 1;
+  if (hex.length === 3) {
+    r = parseInt(hex.charAt(0).repeat(2), 16);
+    g = parseInt(hex.charAt(1).repeat(2), 16);
+    b = parseInt(hex.charAt(2).repeat(2), 16);
+  } else if (hex.length >= 6) {
+    r = parseInt(hex.substring(0, 2), 16);
+    g = parseInt(hex.substring(2, 4), 16);
+    b = parseInt(hex.substring(4, 6), 16);
+    if (hex.length === 8) {
+      a = parseInt(hex.substring(6, 8), 16) / 255;
+    }
+  }
+  return { r, g, b, a };
+};
+const rgbaToHex = (color) => {
+  const toHex = (value) => Math.round(value).toString(16).padStart(2, "0");
+  const r = toHex(color.r);
+  const g = toHex(color.g);
+  const b = toHex(color.b);
+  if (color.a === 1) {
+    return `#${r}${g}${b}`;
+  }
+  const a = toHex(color.a ? color.a * 255 : 255);
+  return `#${r}${g}${b}${a}`;
+};
+const rgbaToString = (color) => {
+  if (color.a === void 0) {
+    return `rgba(${color.r},${color.g},${color.b},1)`;
+  }
+  return `rgba(${color.r},${color.g},${color.b},${color.a})`;
+};
+const rgbToString = (color) => {
+  return `rgb(${color.r},${color.g},${color.b})`;
+};
+const getNamedColorRgba = (colorName) => {
+  const tempElem = document.createElement("div");
+  tempElem.style.display = "none";
+  document.body.appendChild(tempElem);
+  const defaultColor = getComputedStyle(tempElem).color;
+  tempElem.style.color = colorName;
+  const computedColor = getComputedStyle(tempElem).color;
+  document.body.removeChild(tempElem);
+  if (computedColor === defaultColor) {
+    return null;
+  }
+  const rgbaMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
+  if (rgbaMatch) {
+    return {
+      r: parseInt(rgbaMatch[1], 10),
+      g: parseInt(rgbaMatch[2], 10),
+      b: parseInt(rgbaMatch[3], 10),
+      a: rgbaMatch[4] !== void 0 ? parseFloat(rgbaMatch[4]) : 1
+    };
+  }
+  return { r: 255, g: 255, b: 255, a: 1 };
+};
+const useColorValue = (initialValue) => {
+  const [colorValue, setColorValue] = useState(
+    () => initialValue ? hexToRgba(initialValue) : { r: 255, g: 255, b: 255, a: 1 }
+  );
+  const [inputValue, setInputValue] = useState(initialValue || "");
+  return {
+    colorValue,
+    setColorValue,
+    inputValue,
+    setInputValue
+  };
+};
+const usePickerPosition = () => {
+  const [position, setPosition] = useState({ top: 0, left: 0, direction: "down" });
+  const calculatePosition = useCallback((containerElement) => {
+    if (!containerElement) {
+      return { top: 0, left: 0, direction: "down" };
+    }
+    const rect = containerElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const openUpward = spaceBelow < PICKER_HEIGHT;
+    const top = openUpward ? rect.top - PICKER_HEIGHT + 50 : rect.bottom + 8;
+    return {
+      top,
+      left: rect.left,
+      direction: openUpward ? "up" : "down"
+    };
+  }, []);
+  return { position, setPosition, calculatePosition };
+};
+const WmColorPicker = memo(
+  (props) => {
+    const theme = useTheme();
+    const _a = props, {
+      datavalue,
+      placeholder = "Select Color",
+      readonly = false,
+      disabled = false,
+      required = false,
+      name,
+      shortcutkey,
+      tabindex = 0,
+      className,
+      autoclose = AUTOCLOSE_TYPE.OUTSIDECLICK,
+      arialabel,
+      onDoubleClick: onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      onClick,
+      onKeydown,
+      onKeyup,
+      onChange,
+      listener
+    } = _a, restProps = __objRest(_a, [
+      "datavalue",
+      "placeholder",
+      "readonly",
+      "disabled",
+      "required",
+      "name",
+      "shortcutkey",
+      "tabindex",
+      "className",
+      "autoclose",
+      "arialabel",
+      // Event handlers
+      "onDoubleClick",
+      "onMouseEnter",
+      "onMouseLeave",
+      "onFocus",
+      "onBlur",
+      "onClick",
+      "onKeydown",
+      "onKeyup",
+      "onChange",
+      "listener"
+    ]);
+    const inputRef = useRef(null);
+    const pickerRef = useRef(null);
+    const containerRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isInteractingWithPicker, setIsInteractingWithPicker] = useState(false);
+    const [prevValue, setPrevValue] = useState("");
+    const [getPlaceholder, setPlaceholder] = useState(placeholder);
+    const { colorValue, setColorValue, inputValue, setInputValue } = useColorValue(datavalue);
+    const {
+      position: pickerPosition,
+      setPosition: setPickerPosition,
+      calculatePosition
+    } = usePickerPosition();
+    const shouldCloseOnOutsideClick = autoclose === AUTOCLOSE_TYPE.OUTSIDECLICK || autoclose === AUTOCLOSE_TYPE.ALWAYS;
+    const isReadonlyOrDisabled = readonly || disabled;
+    const openPicker = useCallback(() => {
+      if (!isReadonlyOrDisabled && !isOpen) {
+        setPickerPosition(calculatePosition(containerRef.current));
+        setIsOpen(true);
+      }
+    }, [isReadonlyOrDisabled, isOpen, calculatePosition, setPickerPosition]);
+    const closePicker = useCallback(() => {
+      if (isOpen && !isInteractingWithPicker) {
+        setIsOpen(false);
+      }
+    }, [isOpen, isInteractingWithPicker]);
+    useEffect(() => {
+      if (listener == null ? void 0 : listener.onChange) {
+        listener.onChange(props.fieldName || name, {
+          open: openPicker,
+          close: closePicker
+        });
+      }
+    }, [openPicker, closePicker]);
+    const validateAndSetColor = useCallback(
+      (value) => {
+        if (!value.trim()) {
+          setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+          return "";
+        }
+        if (isValidRgbaColor(value)) {
+          const color = hexToRgba(value);
+          setColorValue(color);
+          return rgbaToString(color);
+        }
+        if (isValidHexColor(value)) {
+          const color = hexToRgba(value);
+          setColorValue(color);
+          return value;
+        }
+        if (isValidRgbColor(value)) {
+          const color = hexToRgba(value);
+          setColorValue(color);
+          return rgbToString(color);
+        }
+        const namedColor = isValidNamedColor(value);
+        if (namedColor) {
+          const namedColorValue = getNamedColorRgba(value);
+          setColorValue(namedColorValue);
+          return rgbaToString(namedColorValue);
+        }
+        setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+        return "";
+      },
+      [setColorValue]
+    );
+    const handleInputChange = useCallback(
+      (event) => {
+        var _a2;
+        const newValue = event.target.value;
+        setInputValue(newValue);
+        if (newValue === "") {
+          setPlaceholder(placeholder);
+        }
+        if (newValue && (isValidHexColor(newValue) || isValidRgbaColor(newValue) || isValidRgbColor(newValue) || isValidNamedColor(newValue))) {
+          setColorValue(hexToRgba(newValue));
+        } else if (!newValue) {
+          setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+        }
+        if (onChange && name) {
+          onChange(
+            event,
+            (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name],
+            newValue,
+            colorValue
+          );
+        }
+      },
+      [setInputValue, setColorValue]
+    );
+    const handleInputBlur = useCallback(
+      (event) => {
+        var _a2;
+        if (autoclose !== AUTOCLOSE_TYPE.NEVER && !isInteractingWithPicker && pickerRef.current && !pickerRef.current.contains(event.relatedTarget)) {
+          setIsOpen(false);
+          handleFloatingLabel("close");
+        }
+        if (inputValue) {
+          const validatedValue = validateAndSetColor(inputValue);
+          const namedColor = getNamedColorRgba(inputValue);
+          if (validatedValue !== inputValue && !(namedColor && validatedValue === rgbaToString(namedColor))) {
+            setInputValue(validatedValue);
+          }
+        }
+        if (onBlur) {
+          onBlur(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+        }
+      },
+      [autoclose, isInteractingWithPicker, inputValue, validateAndSetColor, setInputValue, onBlur]
+    );
+    const handleInputFocus = useCallback(
+      (event) => {
+        var _a2;
+        if (onFocus) {
+          onFocus(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+        }
+        openPicker();
+        handleFloatingLabel("open");
+      },
+      [onFocus, openPicker]
+    );
+    const handleInputClick = useCallback(
+      (event) => {
+        var _a2;
+        event.stopPropagation();
+        if (!isReadonlyOrDisabled) {
+          if (onClick && name) {
+            onClick(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+          }
+          openPicker();
+          handleFloatingLabel("open");
+        }
+      },
+      [isReadonlyOrDisabled, onClick, openPicker]
+    );
+    const handleColorBoxClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+        if (!isReadonlyOrDisabled) {
+          isOpen ? closePicker() : openPicker();
+        }
+      },
+      [isReadonlyOrDisabled, isOpen, closePicker, openPicker]
+    );
+    const handleColorChange = useCallback(
+      (color, event) => {
+        var _a2;
+        const { r, g, b, a } = color.rgb;
+        const rgbaColor = { r, g, b, a };
+        setColorValue(rgbaColor);
+        const newValue = a !== 1 ? rgbaToString(rgbaColor) : rgbaToHex(rgbaColor);
+        if (inputRef.current) {
+          inputRef.current.value = newValue;
+        }
+        if (listener == null ? void 0 : listener.Widgets[(props == null ? void 0 : props.fieldName) || name]) {
+          listener.Widgets[name].datavalue = newValue;
+          listener.Widgets[name].displayValue = newValue;
+        }
+        setInputValue(newValue);
+        if (listener == null ? void 0 : listener.onChange) {
+          listener.onChange((props == null ? void 0 : props.fieldName) || name, {
+            datavalue: newValue
+          });
+        }
+        const customEvent = __spreadProps(__spreadValues({}, event), {
+          type: "change"
+        });
+        if (onChange) {
+          onChange(
+            customEvent,
+            (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name],
+            newValue,
+            inputValue
+          );
+        }
+        if (autoclose === AUTOCLOSE_TYPE.ALWAYS && !isInteractingWithPicker) {
+          setTimeout(() => setIsOpen(false), POSITION_DELAY);
+        }
+      },
+      [setColorValue, setInputValue, autoclose, isInteractingWithPicker]
+    );
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === "Enter") {
+          setIsOpen(false);
+          const newValue = event.target.value;
+          setInputValue(newValue);
+          if (newValue === "") {
+            setPlaceholder(placeholder);
+          }
+          if (newValue && (isValidHexColor(newValue) || isValidRgbaColor(newValue) || isValidRgbColor(newValue) || isValidNamedColor(newValue))) {
+            setColorValue(hexToRgba(newValue));
+          } else if (!newValue) {
+            setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+          }
+        }
+        if (onKeydown) {
+          onKeydown(event);
+        }
+      },
+      [onKeydown]
+    );
+    const handlePickerMouseDown = useCallback(() => {
+      setIsInteractingWithPicker(true);
+    }, []);
+    const handlePickerMouseUp = useCallback(() => {
+      setTimeout(() => setIsInteractingWithPicker(false), POSITION_DELAY);
+    }, []);
+    const handleFloatingLabel = useCallback(
+      (action, currentValue) => {
+        var _a2;
+        const captionEl = (_a2 = containerRef.current) == null ? void 0 : _a2.closest(".app-composite-widget.caption-floating");
+        if (!captionEl) return;
+        if (action === "open") {
+          captionEl.classList.add("float-active");
+          setPlaceholder(placeholder);
+        } else if (action === "close" && (!inputValue || currentValue === "")) {
+          captionEl.classList.remove("float-active");
+          setPlaceholder("");
+        }
+      },
+      [inputValue]
+    );
+    useEffect(() => {
+      if (datavalue !== prevValue) {
+        setPrevValue(datavalue);
+        if (datavalue) {
+          try {
+            handleFloatingLabel("open");
+            const color = hexToRgba(datavalue);
+            setColorValue(color);
+            const formattedValue = datavalue.startsWith("rgba(") ? datavalue : datavalue.startsWith("#") ? datavalue : `#${datavalue}`;
+            setInputValue(formattedValue);
+          } catch (error) {
+            console.error("Invalid color format:", error);
+            setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+            setInputValue("");
+          }
+        } else {
+          setColorValue({ r: 255, g: 255, b: 255, a: 1 });
+          setInputValue("");
+        }
+      }
+    }, [datavalue, prevValue, setColorValue, setInputValue]);
+    useEffect(() => {
+      if (!isOpen || !shouldCloseOnOutsideClick) return;
+      const handleClickOutside = (event) => {
+        var _a2;
+        const target = event.target;
+        if (!isInteractingWithPicker && pickerRef.current && !pickerRef.current.contains(target) && containerRef.current && !containerRef.current.contains(target)) {
+          setIsOpen(false);
+          const currentValue = ((_a2 = inputRef.current) == null ? void 0 : _a2.value) || "";
+          if (currentValue === "") {
+            setInputValue("");
+            handleFloatingLabel("close", currentValue);
+          }
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside, true);
+      return () => document.removeEventListener("mousedown", handleClickOutside, true);
+    }, [isOpen, shouldCloseOnOutsideClick, isInteractingWithPicker]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const handleEscape = (event) => {
+        if (event.key === "Escape" || event.key === "Esc") {
+          setIsOpen(false);
+        }
+      };
+      window.addEventListener("keydown", handleEscape);
+      return () => window.removeEventListener("keydown", handleEscape);
+    }, [isOpen]);
+    useEffect(() => {
+      if (!isOpen) return;
+      const updatePosition = () => {
+        setPickerPosition(calculatePosition(containerRef.current));
+      };
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+      return () => {
+        window.removeEventListener("scroll", updatePosition, true);
+        window.removeEventListener("resize", updatePosition);
+      };
+    }, [isOpen, calculatePosition, setPickerPosition]);
+    const checkPlaceholder = () => {
+      setTimeout(() => {
+        var _a2;
+        const captionEl = (_a2 = containerRef.current) == null ? void 0 : _a2.closest(".app-composite-widget.caption-floating");
+        if (captionEl && !captionEl.classList.contains("float-active")) {
+          setPlaceholder("");
+        } else {
+          setPlaceholder(placeholder);
+        }
+      }, 100);
+    };
+    useEffect(() => {
+      checkPlaceholder();
+    }, [inputValue, isInteractingWithPicker]);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: clsx(DEFAULT_CLASS, "wm-colorpicker-root", className),
+        tabIndex: tabindex,
+        onKeyDown: handleKeyDown,
+        ref: containerRef,
+        name,
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: inputRef,
+              type: "text",
+              className: "form-control app-textbox",
+              name,
+              value: inputValue,
+              placeholder: getPlaceholder,
+              disabled: disabled || readonly,
+              required,
+              tabIndex: tabindex,
+              accessKey: shortcutkey,
+              onChange: handleInputChange,
+              onBlur: handleInputBlur,
+              onFocus: handleInputFocus,
+              onClick: handleInputClick,
+              onMouseEnter: (event) => {
+                var _a2;
+                return onMouseEnter && onMouseEnter(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+              },
+              onMouseLeave: (event) => {
+                var _a2;
+                return onMouseLeave && onMouseLeave(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
+              },
+              "aria-label": arialabel,
+              "aria-readonly": readonly
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              component: "span",
+              className: clsx(
+                "input-group-addon colorpicker-container",
+                isReadonlyOrDisabled ? "wm-colorpicker-addon-disabled" : "wm-colorpicker-addon-enabled"
+              ),
+              onClick: handleColorBoxClick,
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "i",
+                  className: "colored-box wm-colorpicker-swatch",
+                  style: {
+                    "--colorpicker-swatch-bg": inputValue ? rgbaToString(colorValue) : "transparent"
+                  }
+                }
+              )
+            }
+          ),
+          isOpen && createPortal(
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: clsx(
+                  "color-picker",
+                  "wm-colorpicker-popup",
+                  pickerPosition.direction === "down" ? "wm-colorpicker-popup-direction-down" : "wm-colorpicker-popup-direction-up"
+                ),
+                ref: pickerRef,
+                style: {
+                  "--colorpicker-popup-top": `${pickerPosition.top}px`,
+                  "--colorpicker-popup-left": `${pickerPosition.left}px`,
+                  "--colorpicker-popup-margin-top": theme.spacing(1)
+                },
+                onClick: (e) => e.stopPropagation(),
+                onMouseDown: handlePickerMouseDown,
+                onMouseUp: handlePickerMouseUp,
+                children: /* @__PURE__ */ jsx(ChromePicker, { color: colorValue, onChange: handleColorChange })
+              }
+            ),
+            document.body
+          )
+        ]
+      }
+    );
+  },
+  (prevProps, nextProps) => {
+    const keysToCompare = [
+      "datavalue",
+      "placeholder",
+      "readonly",
+      "disabled",
+      "required",
+      "name",
+      "shortcutkey",
+      "show",
+      "tabindex",
+      "autoclose",
+      "arialabel",
+      "hidden",
+      "show"
+    ];
+    return keysToCompare.every((key) => prevProps[key] === nextProps[key]);
+  }
+);
+WmColorPicker.displayName = "WmColorPicker";
+const WithFormController = withFormController(WmColorPicker);
+const WmColorPickerStandalone = withStandalone(WithFormController);
+var color_picker_default = withBaseWrapper(WithFormController);
+export {
+  WmColorPickerStandalone as WmColorPicker,
+  color_picker_default as default
+};