@festo-ui/react 4.0.3-pre-20221213.1 → 5.0.0-dev.102

package/lib/forms/color-picker/ColorHelper.js

@@ -0,0 +1,142 @@
+export default class ColorHelper {
+  // based on: https://gist.github.com/mjackson/5311256
+  static rgbToHsv(rgb) {
+    if (!rgb) {
+      return undefined;
+    }
+    const r = this.limitToByte(rgb.r) / 255;
+    const g = this.limitToByte(rgb.g) / 255;
+    const b = this.limitToByte(rgb.b) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = max;
+    let s = max;
+    const v = max;
+    const d = max - min;
+    s = max === 0 ? 0 : d / max;
+    if (max === min) {
+      h = 0; // achromatic
+    } else {
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+        case g:
+          h = (b - r) / d + 2;
+          break;
+        case b:
+          h = (r - g) / d + 4;
+          break;
+        default:
+        // no other option
+      }
+
+      h /= 6;
+    }
+    return {
+      h,
+      s,
+      v
+    };
+  }
+
+  // based on: https://gist.github.com/mjackson/5311256
+  static hsvToRgb(_hsv) {
+    const hsv = _hsv;
+    hsv.h = this.limitToOne(_hsv.h);
+    hsv.s = this.limitToOne(_hsv.s);
+    hsv.v = this.limitToOne(_hsv.v);
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    const i = Math.floor(hsv.h * 6);
+    const f = hsv.h * 6 - i;
+    const p = hsv.v * (1 - hsv.s);
+    const q = hsv.v * (1 - f * hsv.s);
+    const t = hsv.v * (1 - (1 - f) * hsv.s);
+    switch (i % 6) {
+      case 0:
+        r = hsv.v;
+        g = t;
+        b = p;
+        break;
+      case 1:
+        r = q;
+        g = hsv.v;
+        b = p;
+        break;
+      case 2:
+        r = p;
+        g = hsv.v;
+        b = t;
+        break;
+      case 3:
+        r = p;
+        g = q;
+        b = hsv.v;
+        break;
+      case 4:
+        r = t;
+        g = p;
+        b = hsv.v;
+        break;
+      case 5:
+        r = hsv.v;
+        g = p;
+        b = q;
+        break;
+      default:
+      // no other option
+    }
+
+    return {
+      r: this.limitToByte(r * 255),
+      g: this.limitToByte(g * 255),
+      b: this.limitToByte(b * 255)
+    };
+  }
+  static limitToByte(num) {
+    if (num <= 0) {
+      return 0;
+    }
+    if (num >= 255) {
+      return 255;
+    }
+    return num;
+  }
+  static limitToOne(num) {
+    if (num <= 0) {
+      return 0;
+    }
+    if (num >= 1) {
+      return 1;
+    }
+    return num;
+  }
+  static numberToHex(rgb) {
+    let hex = Math.round(rgb).toString(16);
+    if (hex.length < 2) {
+      hex = `0${hex}`;
+    }
+    return hex.toUpperCase();
+  }
+  static rgbToHex(_rgb) {
+    const rgb = _rgb;
+    rgb.r = this.limitToByte(rgb.r);
+    rgb.g = this.limitToByte(rgb.g);
+    rgb.b = this.limitToByte(rgb.b);
+    const red = this.numberToHex(rgb.r);
+    const green = this.numberToHex(rgb.g);
+    const blue = this.numberToHex(rgb.b);
+    return `#${red}${green}${blue}`;
+  }
+  static hexToRgb(hexString) {
+    const numbersOnly = hexString.substring(1);
+    const aRgbHex = numbersOnly.match(/.{1,2}/g);
+    return aRgbHex ? {
+      r: parseInt(aRgbHex[0], 16),
+      g: parseInt(aRgbHex[1], 16),
+      b: parseInt(aRgbHex[2], 16)
+    } : undefined;
+  }
+}

package/lib/forms/color-picker/ColorPicker.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import './ColorPicker.scss';
-import { ClassNameProps } from '../../helper/types';
-export declare const PREDEFINED_COLORS: string[];
-interface ColorPickerProps extends ClassNameProps {
-    palette?: string[];
-    useAlpha?: boolean;
-    alpha?: number;
-    paletteOnly?: boolean;
-    color?: string;
-    onChange?: (color?: string | null) => void;
-    onAlphaChange?: (alpha?: number) => void;
-}
-declare function ColorPicker({ palette, useAlpha, alpha, paletteOnly, color, onChange, onAlphaChange, className }: ColorPickerProps): JSX.Element;
-export default ColorPicker;
+/// <reference types="react" />
+import './ColorPicker.scss';
+import { ClassNameProps } from '../../helper/types';
+export declare const PREDEFINED_COLORS: string[];
+interface ColorPickerProps extends ClassNameProps {
+    palette?: string[];
+    useAlpha?: boolean;
+    alpha?: number;
+    paletteOnly?: boolean;
+    color?: string;
+    onChange?: (color?: string | null) => void;
+    onAlphaChange?: (alpha?: number) => void;
+}
+declare function ColorPicker({ palette, useAlpha, alpha, paletteOnly, color, onChange, onAlphaChange, className, }: ColorPickerProps): JSX.Element;
+export default ColorPicker;

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

@@ -0,0 +1,539 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { useCallback, useEffect, useState } from 'react';
+import Draggable from 'react-draggable';
+import classNames from 'classnames';
+import ColorHelper from './ColorHelper';
+import useId from '../../helper/useId';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const PREDEFINED_COLORS = ['#0091dc', '#333333', '#ffffff', '#f2f3f5', '#e5e8eb', '#d8dce1', '#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.hexToRgb(color);
+  const defaultHsv = {
+    h: 0,
+    s: 0,
+    v: 1
+  };
+  const initialHsv = initialRgb ? ColorHelper.rgbToHsv(initialRgb) || defaultHsv : defaultHsv;
+  const [hsv, setHsv] = useState(initialHsv);
+  const [innerColor, setInnerColor] = useState(color);
+  const [redInput, setRedInput] = useState(initialRgb?.r || 255);
+  const [greenInput, setGreenInput] = useState(initialRgb?.g || 255);
+  const [blueInput, setBlueInput] = useState(initialRgb?.b || 255);
+  const [hexInputColor, setHexInputColor] = useState(color);
+  const [inputType, setInputType] = useState('RGB');
+  const [selectOpen, setSelectOpen] = useState(false);
+  const [innerAlpha, setInnerAlpha] = useState(alpha);
+  const [changeColor, setChangeColor] = useState(true);
+  const redId = useId();
+  const greenId = useId();
+  const blueId = useId();
+  const hexId = useId();
+  const alphaId = useId();
+  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.hexToRgb(hexColor);
+    if (rgb) {
+      setRedInput(rgb.r);
+      setGreenInput(rgb.g);
+      setBlueInput(rgb.b);
+    }
+  }
+  useEffect(() => {
+    if (onChange) {
+      onChange(innerColor);
+    }
+  }, [onChange, innerColor]);
+  useEffect(() => {
+    if (onAlphaChange && innerAlpha) {
+      onAlphaChange(innerAlpha);
+    }
+  }, [onAlphaChange, innerAlpha]);
+  const updateColorHsv = useCallback((_hsv, _changeColor) => {
+    const rgb = ColorHelper.hsvToRgb(_hsv);
+    const hex = ColorHelper.rgbToHex(rgb);
+    if (_changeColor) {
+      setInnerColor(hex);
+    }
+    updateInputs(hex);
+  }, []);
+  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.hexToRgb(currentColor);
+    setChangeColor(false);
+    if (rgb) {
+      const newHsv = ColorHelper.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.hexToRgb(innerColor || '#FFFFFF');
+      if (rgb) {
+        const newHexColor = ColorHelper.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.hexToRgb(innerColor || '#FFFFFF');
+      if (rgb) {
+        rgb[channel] = numberValue;
+        const newHexColor = ColorHelper.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__*/_jsxs("div", {
+    className: classNames('fwe-color-picker', {
+      'fwe-alpha-active': useAlpha
+    }, className),
+    children: [!paletteOnly && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-d-flex",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fwe-gradient-picker",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fwe-saturation-gradient",
+          style: {
+            backgroundImage: getSaturationGradient()
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          "aria-label": "brightness-gradient",
+          onClick: _ref2 => {
+            let {
+              nativeEvent: {
+                offsetX,
+                offsetY
+              }
+            } = _ref2;
+            return updateGradient(offsetX, offsetY);
+          },
+          className: "fwe-brightness-gradient"
+        }), /*#__PURE__*/_jsx(Draggable, {
+          position: {
+            x: saturationKnobOffset,
+            y: valueKnobOffset
+          },
+          onDrag: (e, data) => onGradientDrag(e, data),
+          bounds: "parent",
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fwe-knob"
+          })
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "fwe-hue-picker",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fwe-picker-background",
+          onClick: _ref3 => {
+            let {
+              nativeEvent: {
+                offsetY
+              }
+            } = _ref3;
+            return updateHue(offsetY);
+          }
+        }), /*#__PURE__*/_jsx(Draggable, {
+          position: {
+            x: 3,
+            y: hueKnobOffset
+          },
+          onDrag: (e, data) => onHueDrag(e, data),
+          bounds: "parent",
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fwe-knob",
+            style: {
+              background: `hsl(${hsv.h * 360}, 100%, 50%)`
+            }
+          })
+        })]
+      }), useAlpha && /*#__PURE__*/_jsxs("div", {
+        className: "fwe-alpha-picker",
+        children: [/*#__PURE__*/_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__*/_jsx("defs", {
+            children: /*#__PURE__*/_jsxs("pattern", {
+              id: "bwsquare2px",
+              width: "4",
+              height: "4",
+              patternUnits: "userSpaceOnUse",
+              children: [/*#__PURE__*/_jsx("rect", {
+                x: "0",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              }), /*#__PURE__*/_jsx("rect", {
+                x: "2",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }), /*#__PURE__*/_jsx("rect", {
+                x: "0",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }), /*#__PURE__*/_jsx("rect", {
+                x: "2",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              })]
+            })
+          }), /*#__PURE__*/_jsx("rect", {
+            x: "0",
+            y: "0",
+            rx: "4",
+            ry: "4",
+            width: "8",
+            height: "184",
+            fill: "url(#bwsquare2px)",
+            strokeWidth: "0"
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          onClick: _ref4 => {
+            let {
+              nativeEvent: {
+                offsetY
+              }
+            } = _ref4;
+            return updateAlpha(offsetY);
+          },
+          className: "fwe-picker-background",
+          style: {
+            backgroundImage: `linear-gradient( ${innerColor},  transparent)`
+          }
+        }), /*#__PURE__*/_jsx(Draggable, {
+          position: {
+            x: 3,
+            y: alphaKnobOffset
+          },
+          onDrag: (e, data) => onAlphaDrag(e, data),
+          bounds: "parent",
+          children: /*#__PURE__*/_jsx("div", {
+            className: "fwe-knob"
+          })
+        })]
+      })]
+    }), !paletteOnly && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-mt-s",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fwe-type-select",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "fwe-type-indicator",
+          onClick: () => setSelectOpen(prevOpen => !prevOpen),
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "fwe-input-type",
+            children: inputType
+          }), /*#__PURE__*/_jsx("i", {
+            className: "fwe-icon fwe-icon-arrows-collapse"
+          })]
+        }), selectOpen && /*#__PURE__*/_jsxs("div", {
+          className: "fwe-popover",
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: classNames('fwe-type-item', {
+              'fwe-selected': inputType === 'HEX'
+            }),
+            onClick: () => onChangeType('HEX'),
+            children: [/*#__PURE__*/_jsx("i", {
+              className: "fwe-icon fwe-icon-menu-check"
+            }), " HEX"]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: classNames('fwe-type-item', {
+              'fwe-selected': inputType === 'RGB'
+            }),
+            onClick: () => onChangeType('RGB'),
+            children: [/*#__PURE__*/_jsx("i", {
+              className: "fwe-icon fwe-icon-menu-check"
+            }), " RGB"]
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "fwe-d-flex",
+        children: [inputType === 'HEX' && /*#__PURE__*/_jsx("label", {
+          className: "fwe-input-text fwe-hex-input",
+          htmlFor: hexId,
+          children: /*#__PURE__*/_jsx("input", {
+            type: "text",
+            value: hexInputColor,
+            onBlur: onHexBlur,
+            onChange: onHexInput,
+            id: hexId
+          })
+        }), inputType === 'RGB' && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("label", {
+            className: "fwe-input-text fwe-red-input",
+            htmlFor: redId,
+            children: /*#__PURE__*/_jsx("input", {
+              type: "text",
+              value: redInput,
+              onBlur: () => onRgbBlur('r'),
+              onChange: e => onRgbInput(e.target.value, 'r'),
+              id: redId
+            })
+          }), /*#__PURE__*/_jsx("label", {
+            className: "fwe-input-text fwe-green-input",
+            htmlFor: greenId,
+            children: /*#__PURE__*/_jsx("input", {
+              type: "text",
+              value: greenInput,
+              onBlur: () => onRgbBlur('g'),
+              onChange: e => onRgbInput(e.target.value, 'g'),
+              id: greenId
+            })
+          }), /*#__PURE__*/_jsx("label", {
+            className: "fwe-input-text fwe-blue-input",
+            htmlFor: blueId,
+            children: /*#__PURE__*/_jsx("input", {
+              type: "text",
+              value: blueInput,
+              onBlur: () => onRgbBlur('b'),
+              onChange: e => onRgbInput(e.target.value, 'b'),
+              id: blueId
+            })
+          })]
+        }), useAlpha && /*#__PURE__*/_jsx("label", {
+          className: "fwe-input-text fwe-alpha-input fwe-ml-auto",
+          htmlFor: alphaId,
+          children: /*#__PURE__*/_jsxs("span", {
+            children: [/*#__PURE__*/_jsx("input", {
+              type: "number",
+              min: "0",
+              max: "100",
+              value: innerAlpha,
+              onBlur: () => onAlphaBlur(),
+              onChange: e => onAlphaInput(e.target.value),
+              id: alphaId
+            }), /*#__PURE__*/_jsx("span", {
+              className: "fwe-percent-char",
+              children: "%"
+            })]
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fwe-mt-xs fwe-color-grid",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fwe-remove-color-button",
+        onClick: onRemoveColor,
+        children: [/*#__PURE__*/_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__*/_jsx("defs", {
+            children: /*#__PURE__*/_jsxs("pattern", {
+              id: "bwsquare2px",
+              width: "4",
+              height: "4",
+              patternUnits: "userSpaceOnUse",
+              children: [/*#__PURE__*/_jsx("rect", {
+                x: "0",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              }), /*#__PURE__*/_jsx("rect", {
+                x: "2",
+                y: "0",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }), /*#__PURE__*/_jsx("rect", {
+                x: "0",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#e5e8eb"
+              }), /*#__PURE__*/_jsx("rect", {
+                x: "2",
+                y: "2",
+                width: "2",
+                height: "2",
+                stroke: "none",
+                fill: "#ffffff"
+              })]
+            })
+          }), /*#__PURE__*/_jsx("rect", {
+            x: "0",
+            y: "0",
+            rx: "0",
+            ry: "0",
+            width: "18",
+            height: "18",
+            fill: "url(#bwsquare2px)",
+            strokeWidth: "0"
+          })]
+        }), /*#__PURE__*/_jsx("i", {
+          className: classNames('fwe-icon fwe-icon-menu-check', {
+            'fwe-color-text': !innerColor
+          })
+        })]
+      }), palette.map(colorItem => {
+        const itemClasses = classNames('fwe-color-item', {
+          'fwe-white-item': colorItem.toUpperCase() === '#FFFFFF'
+        });
+        return /*#__PURE__*/_jsx("div", {
+          className: itemClasses,
+          style: {
+            background: colorItem
+          },
+          onClick: () => updateColorRgb(colorItem.toUpperCase()),
+          children: innerColor === colorItem.toUpperCase() && /*#__PURE__*/_jsx("i", {
+            className: "fwe-icon fwe-icon-menu-check"
+          })
+        }, colorItem);
+      })]
+    })]
+  });
+}
+export default ColorPicker;