@festo-ui/react 9.0.0-dev.681 → 9.0.0-dev.684

package/node/lib/forms/color-picker/ColorPicker.js

@@ -1,552 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PREDEFINED_COLORS = void 0;
-var _react = require("react");
-var _reactDraggable = _interopRequireDefault(require("react-draggable"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactIcons = require("@festo-ui/react-icons");
-var _ColorHelper = _interopRequireDefault(require("./ColorHelper.js"));
-var _useId = _interopRequireDefault(require("../../helper/useId.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-
-const PREDEFINED_COLORS = exports.PREDEFINED_COLORS = ["#0091dc", "#333333", "#ffffff", "#f0f2f3", "#e2e5e8", "#d3d8dd", "#b6bec6", "#80ca3d", "#ffd600", "#ff9600", "#d50000"];
-function ColorPicker(_ref) {
-  let {
-    palette = PREDEFINED_COLORS,
-    useAlpha = false,
-    alpha = 100,
-    paletteOnly,
-    color = "#FFFFFF",
-    onChange,
-    onAlphaChange,
-    className
-  } = _ref;
-  const baseSize = 184;
-  const initialRgb = _ColorHelper.default.hexToRgb(color);
-  const defaultHsv = {
-    h: 0,
-    s: 0,
-    v: 1
-  };
-  const initialHsv = initialRgb ? _ColorHelper.default.rgbToHsv(initialRgb) || defaultHsv : defaultHsv;
-  const [hsv, setHsv] = (0, _react.useState)(initialHsv);
-  const [innerColor, setInnerColor] = (0, _react.useState)(color);
-  const [redInput, setRedInput] = (0, _react.useState)(initialRgb?.r || 255);
-  const [greenInput, setGreenInput] = (0, _react.useState)(initialRgb?.g || 255);
-  const [blueInput, setBlueInput] = (0, _react.useState)(initialRgb?.b || 255);
-  const [hexInputColor, setHexInputColor] = (0, _react.useState)(color);
-  const [inputType, setInputType] = (0, _react.useState)("RGB");
-  const [selectOpen, setSelectOpen] = (0, _react.useState)(false);
-  const [innerAlpha, setInnerAlpha] = (0, _react.useState)(alpha);
-  const [changeColor, setChangeColor] = (0, _react.useState)(true);
-  const redId = (0, _useId.default)();
-  const greenId = (0, _useId.default)();
-  const blueId = (0, _useId.default)();
-  const hexId = (0, _useId.default)();
-  const alphaId = (0, _useId.default)();
-  const gradientKnobRef = (0, _react.useRef)(null);
-  const hueKnobRef = (0, _react.useRef)(null);
-  const alphaKnobRef = (0, _react.useRef)(null);
-  function limitAlpha() {
-    if (innerAlpha > 100) {
-      return 100;
-    }
-    if (innerAlpha < 0) {
-      return 0;
-    }
-    return innerAlpha;
-  }
-  const hueKnobOffset = hsv.h * baseSize - 14 - baseSize;
-  const saturationKnobOffset = hsv.s * baseSize;
-  const valueKnobOffset = (1 - hsv.v) * baseSize;
-  const alphaKnobOffset = (100 - limitAlpha()) / 100 * baseSize;
-  function getSaturationGradient() {
-    return `linear-gradient(to right, white,  hsl(${hsv.h * 360}, 100%, 50%) )`;
-  }
-  function updateInputs(hexColor) {
-    setHexInputColor(hexColor);
-    const rgb = _ColorHelper.default.hexToRgb(hexColor);
-    if (rgb) {
-      setRedInput(rgb.r);
-      setGreenInput(rgb.g);
-      setBlueInput(rgb.b);
-    }
-  }
-  (0, _react.useEffect)(() => {
-    if (onChange) {
-      onChange(innerColor);
-    }
-  }, [onChange, innerColor]);
-  (0, _react.useEffect)(() => {
-    if (onAlphaChange && innerAlpha) {
-      onAlphaChange(innerAlpha);
-    }
-  }, [onAlphaChange, innerAlpha]);
-  const updateColorHsv = (0, _react.useCallback)((_hsv, _changeColor) => {
-    const rgb = _ColorHelper.default.hsvToRgb(_hsv);
-    const hex = _ColorHelper.default.rgbToHex(rgb);
-    if (_changeColor) {
-      setInnerColor(hex);
-    }
-    updateInputs(hex);
-  }, []);
-  (0, _react.useEffect)(() => {
-    updateColorHsv(hsv, changeColor);
-  }, [updateColorHsv, hsv, changeColor]);
-  function updateGradient(x, y) {
-    setChangeColor(true);
-    setHsv(prevHsv => ({
-      ...prevHsv,
-      s: Math.floor(x) / baseSize,
-      v: (baseSize - y) / baseSize
-    }));
-  }
-  function onGradientDrag(e, data) {
-    e.preventDefault();
-    updateGradient(data.x, data.y);
-  }
-  function updateHue(y) {
-    const newHue = y / baseSize;
-    setChangeColor(true);
-    setHsv(prevHsv => ({
-      ...prevHsv,
-      h: newHue
-    }));
-  }
-  function onHueDrag(e, data) {
-    e.preventDefault();
-    updateHue(data.y + 14 + baseSize);
-  }
-  function updateAlpha(y) {
-    setInnerAlpha(100 - Math.round(y / baseSize * 100));
-  }
-  function onAlphaDrag(e, data) {
-    e.preventDefault();
-    updateAlpha(data.y);
-  }
-  const updateColorRgb = newColor => {
-    const currentColor = newColor || "#FFFFFF";
-    updateInputs(currentColor);
-    const rgb = _ColorHelper.default.hexToRgb(currentColor);
-    setChangeColor(false);
-    if (rgb) {
-      const newHsv = _ColorHelper.default.rgbToHsv(rgb);
-      if (newHsv) {
-        setHsv(newHsv);
-      }
-    }
-    setInnerColor(newColor);
-  };
-  const isHexColor = _color => /^#[0-9A-F]{6}$/i.test(_color);
-  function onHexInput(event) {
-    const newHexInputColor = event.target.value;
-    setHexInputColor(newHexInputColor.toUpperCase());
-    if (isHexColor(newHexInputColor)) {
-      updateColorRgb(newHexInputColor.toUpperCase());
-    }
-  }
-  function onHexBlur() {
-    if (!isHexColor(hexInputColor) && innerColor) {
-      setHexInputColor(innerColor);
-      updateColorRgb(innerColor);
-    }
-  }
-  function onRgbBlur(channel) {
-    let currentInput = "";
-    switch (channel) {
-      case "r":
-        currentInput = redInput;
-        break;
-      case "g":
-        currentInput = greenInput;
-        break;
-      case "b":
-        currentInput = blueInput;
-        break;
-      default:
-      // no other value possible
-    }
-    if (typeof currentInput !== "number" || typeof currentInput === "number" && currentInput > 255 && currentInput < 0) {
-      const rgb = _ColorHelper.default.hexToRgb(innerColor || "#FFFFFF");
-      if (rgb) {
-        const newHexColor = _ColorHelper.default.rgbToHex(rgb);
-        updateInputs(newHexColor);
-      }
-    }
-  }
-  function onRgbInput(_value, channel) {
-    const numberValue = Number.parseInt(_value, 10);
-    switch (channel) {
-      case "r":
-        setRedInput(_value);
-        break;
-      case "g":
-        setGreenInput(_value);
-        break;
-      case "b":
-        setBlueInput(_value);
-        break;
-      default:
-      // no other value possible
-    }
-    if (numberValue <= 255 && numberValue >= 0) {
-      const rgb = _ColorHelper.default.hexToRgb(innerColor || "#FFFFFF");
-      if (rgb) {
-        rgb[channel] = numberValue;
-        const newHexColor = _ColorHelper.default.rgbToHex(rgb);
-        setInnerColor(newHexColor);
-        updateColorRgb(newHexColor);
-      }
-    }
-  }
-  function onAlphaInput(_alpha) {
-    const numberValue = Number.parseInt(_alpha, 10);
-    setInnerAlpha(numberValue);
-  }
-  function onAlphaBlur() {
-    setInnerAlpha(limitAlpha());
-  }
-  const onChangeType = type => {
-    setInputType(type);
-    setSelectOpen(false);
-  };
-  function onRemoveColor() {
-    if (useAlpha) {
-      setInnerAlpha(0);
-    } else {
-      updateColorRgb();
-    }
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)("fwe-color-picker", {
-      "fwe-alpha-active": useAlpha
-    }, className),
-    children: [!paletteOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fwe-d-flex",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fwe-gradient-picker",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fwe-saturation-gradient",
-          style: {
-            backgroundImage: getSaturationGradient()
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          "aria-label": "brightness-gradient",
-          onClick: _ref2 => {
-            let {
-              nativeEvent: {
-                offsetX,
-                offsetY
-              }
-            } = _ref2;
-            return updateGradient(offsetX, offsetY);
-          },
-          className: "fwe-brightness-gradient"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDraggable.default, {
-          position: {
-            x: saturationKnobOffset,
-            y: valueKnobOffset
-          },
-          onDrag: (e, data) => onGradientDrag(e, data),
-          bounds: "parent",
-          nodeRef: gradientKnobRef,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-knob",
-            ref: gradientKnobRef
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fwe-hue-picker",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "fwe-picker-background",
-          onClick: _ref3 => {
-            let {
-              nativeEvent: {
-                offsetY
-              }
-            } = _ref3;
-            return updateHue(offsetY);
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDraggable.default, {
-          position: {
-            x: 3,
-            y: hueKnobOffset
-          },
-          onDrag: (e, data) => onHueDrag(e, data),
-          bounds: "parent",
-          nodeRef: hueKnobRef,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-knob",
-            style: {
-              background: `hsl(${hsv.h * 360}, 100%, 50%)`
-            },
-            ref: hueKnobRef
-          })
-        })]
-      }), useAlpha && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fwe-alpha-picker",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-          className: "fwe-no-color-pattern",
-          version: "1.1",
-          xmlns: "http://www.w3.org/2000/svg",
-          xmlnsXlink: "http://www.w3.org/1999/xlink",
-          id: "canvas1",
-          width: "8",
-          height: "184",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("pattern", {
-              id: "bwsquare2px",
-              width: "4",
-              height: "4",
-              patternUnits: "userSpaceOnUse",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-                x: "0",
-                y: "0",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#ffffff"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-                x: "2",
-                y: "0",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#e2e5e8"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-                x: "0",
-                y: "2",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#e2e5e8"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-                x: "2",
-                y: "2",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#ffffff"
-              })]
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-            x: "0",
-            y: "0",
-            rx: "4",
-            ry: "4",
-            width: "8",
-            height: "184",
-            fill: "url(#bwsquare2px)",
-            strokeWidth: "0"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          onClick: _ref4 => {
-            let {
-              nativeEvent: {
-                offsetY
-              }
-            } = _ref4;
-            return updateAlpha(offsetY);
-          },
-          className: "fwe-picker-background",
-          style: {
-            backgroundImage: `linear-gradient( ${innerColor},  transparent)`
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDraggable.default, {
-          position: {
-            x: 3,
-            y: alphaKnobOffset
-          },
-          onDrag: (e, data) => onAlphaDrag(e, data),
-          bounds: "parent",
-          nodeRef: alphaKnobRef,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "fwe-knob",
-            ref: alphaKnobRef
-          })
-        })]
-      })]
-    }), !paletteOnly && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fwe-mt-s",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fwe-type-select",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "fwe-type-indicator",
-          onClick: () => setSelectOpen(prevOpen => !prevOpen),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "fwe-input-type",
-            children: inputType
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCollapse, {
-            className: "fwe-ml-s"
-          })]
-        }), selectOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "fwe-popover",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _classnames.default)("fwe-type-item", {
-              "fwe-selected": inputType === "HEX"
-            }),
-            onClick: () => onChangeType("HEX"),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCheckSmall, {}), " HEX"]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _classnames.default)("fwe-type-item", {
-              "fwe-selected": inputType === "RGB"
-            }),
-            onClick: () => onChangeType("RGB"),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCheckSmall, {}), " RGB"]
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fwe-d-flex",
-        children: [inputType === "HEX" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          "aria-label": "Hexadecimal Color",
-          className: "fwe-input-text fwe-hex-input",
-          htmlFor: hexId,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            type: "text",
-            value: hexInputColor,
-            onBlur: onHexBlur,
-            onChange: onHexInput,
-            id: hexId
-          })
-        }), inputType === "RGB" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            "aria-label": "RGB Color Red",
-            className: "fwe-input-text fwe-red-input",
-            htmlFor: redId,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-              type: "text",
-              value: redInput,
-              onBlur: () => onRgbBlur("r"),
-              onChange: e => onRgbInput(e.target.value, "r"),
-              id: redId
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            "aria-label": "RGB Color Green",
-            className: "fwe-input-text fwe-green-input",
-            htmlFor: greenId,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-              type: "text",
-              value: greenInput,
-              onBlur: () => onRgbBlur("g"),
-              onChange: e => onRgbInput(e.target.value, "g"),
-              id: greenId
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            "aria-label": "RGB Color Blue",
-            className: "fwe-input-text fwe-blue-input",
-            htmlFor: blueId,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-              type: "text",
-              value: blueInput,
-              onBlur: () => onRgbBlur("b"),
-              onChange: e => onRgbInput(e.target.value, "b"),
-              id: blueId
-            })
-          })]
-        }), useAlpha && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-          "aria-label": "Alpha Channel",
-          className: "fwe-input-text fwe-alpha-input fwe-ml-auto",
-          htmlFor: alphaId,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-              type: "number",
-              min: "0",
-              max: "100",
-              value: innerAlpha,
-              onBlur: () => onAlphaBlur(),
-              onChange: e => onAlphaInput(e.target.value),
-              id: alphaId
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "fwe-percent-char",
-              children: "%"
-            })]
-          })
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "fwe-mt-xs fwe-color-grid",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "fwe-remove-color-button",
-        onClick: onRemoveColor,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-          className: "fwe-no-color-pattern",
-          version: "1.1",
-          xmlns: "http://www.w3.org/2000/svg",
-          xmlnsXlink: "http://www.w3.org/1999/xlink",
-          id: "canvas1",
-          width: "18",
-          height: "18",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("pattern", {
-              id: "bwsquare2px",
-              width: "4",
-              height: "4",
-              patternUnits: "userSpaceOnUse",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-                x: "0",
-                y: "0",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#ffffff"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-                x: "2",
-                y: "0",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#e2e5e8"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-                x: "0",
-                y: "2",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#e2e5e8"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-                x: "2",
-                y: "2",
-                width: "2",
-                height: "2",
-                stroke: "none",
-                fill: "#ffffff"
-              })]
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-            x: "0",
-            y: "0",
-            rx: "0",
-            ry: "0",
-            width: "18",
-            height: "18",
-            fill: "url(#bwsquare2px)",
-            strokeWidth: "0"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCheckSmall, {
-          className: (0, _classnames.default)({
-            "fwe-color-text": !innerColor
-          })
-        })]
-      }), palette.map(colorItem => {
-        const itemClasses = (0, _classnames.default)("fwe-color-item", {
-          "fwe-white-item": colorItem.toUpperCase() === "#FFFFFF"
-        });
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: itemClasses,
-          style: {
-            background: colorItem
-          },
-          onClick: () => updateColorRgb(colorItem.toUpperCase()),
-          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCheckSmall, {})
-        }, colorItem);
-      })]
-    })]
-  });
-}
-var _default = exports.default = ColorPicker;