primereact/colorpicker/colorpicker.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

this.primereact = this.primereact || {};
this.primereact.colorpicker = (function (exports, React, PrimeReact, hooks, overlayservice, tooltip, utils, csstransition, portal) {
  'use strict';

  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

  function _interopNamespace(e) {
    if (e && e.__esModule) return e;
    var n = Object.create(null);
    if (e) {
      Object.keys(e).forEach(function (k) {
        if (k !== 'default') {
          var d = Object.getOwnPropertyDescriptor(e, k);
          Object.defineProperty(n, k, d.get ? d : {
            enumerable: true,
            get: function () { return e[k]; }
          });
        }
      });
    }
    n["default"] = e;
    return Object.freeze(n);
  }

  var React__namespace = /*#__PURE__*/_interopNamespace(React);
  var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);

  function _extends() {
    _extends = Object.assign ? Object.assign.bind() : function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
    return _extends.apply(this, arguments);
  }

  function _arrayWithHoles(arr) {
    if (Array.isArray(arr)) return arr;
  }

  function _iterableToArrayLimit(arr, i) {
    var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
    if (null != _i) {
      var _s,
        _e,
        _x,
        _r,
        _arr = [],
        _n = !0,
        _d = !1;
      try {
        if (_x = (_i = _i.call(arr)).next, 0 === i) {
          if (Object(_i) !== _i) return;
          _n = !1;
        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
      } catch (err) {
        _d = !0, _e = err;
      } finally {
        try {
          if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
        } finally {
          if (_d) throw _e;
        }
      }
      return _arr;
    }
  }

  function _arrayLikeToArray(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
    return arr2;
  }

  function _unsupportedIterableToArray(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(o);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  }

  function _nonIterableRest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }

  function _slicedToArray(arr, i) {
    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
  }

  var ColorPickerBase = {
    defaultProps: {
      __TYPE: 'ColorPicker',
      appendTo: null,
      className: null,
      defaultColor: 'ff0000',
      disabled: false,
      format: 'hex',
      id: null,
      inline: false,
      inputId: null,
      inputRef: null,
      onChange: null,
      onHide: null,
      onShow: null,
      panelClassName: null,
      panelStyle: null,
      style: null,
      tabIndex: null,
      tooltip: null,
      tooltipOptions: null,
      transitionOptions: null,
      value: null,
      children: undefined
    },
    getProps: function getProps(props) {
      return utils.ObjectUtils.getMergedProps(props, ColorPickerBase.defaultProps);
    },
    getOtherProps: function getOtherProps(props) {
      return utils.ObjectUtils.getDiffProps(props, ColorPickerBase.defaultProps);
    }
  };

  var ColorPickerPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
    var createElement = function createElement() {
      var className = utils.classNames('p-colorpicker-panel', props.panelClassName, {
        'p-colorpicker-overlay-panel': !props.inline,
        'p-disabled': props.disabled,
        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
      });
      return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
        nodeRef: ref,
        classNames: "p-connected-overlay",
        "in": props["in"],
        timeout: {
          enter: 120,
          exit: 100
        },
        options: props.transitionOptions,
        unmountOnExit: true,
        onEnter: props.onEnter,
        onEntered: props.onEntered,
        onExit: props.onExit,
        onExited: props.onExited
      }, /*#__PURE__*/React__namespace.createElement("div", {
        ref: ref,
        className: className,
        style: props.panelStyle,
        onClick: props.onClick
      }, props.children));
    };
    var element = createElement();
    return props.inline ? element : /*#__PURE__*/React__namespace.createElement(portal.Portal, {
      element: element,
      appendTo: props.appendTo
    });
  });
  ColorPickerPanel.displayName = 'ColorPickerPanel';

  var ColorPicker = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
    var props = ColorPickerBase.getProps(inProps);
    var _React$useState = React__namespace.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      overlayVisibleState = _React$useState2[0],
      setOverlayVisibleState = _React$useState2[1];
    var elementRef = React__namespace.useRef(null);
    var overlayRef = React__namespace.useRef(null);
    var inputRef = React__namespace.useRef(props.inputRef);
    var colorSelectorRef = React__namespace.useRef(null);
    var colorHandleRef = React__namespace.useRef(null);
    var hueHandleRef = React__namespace.useRef(null);
    var hueViewRef = React__namespace.useRef(null);
    var hueDragging = React__namespace.useRef(false);
    var hsbValue = React__namespace.useRef(null);
    var colorDragging = React__namespace.useRef(false);
    var _useOverlayListener = hooks.useOverlayListener({
        target: elementRef,
        overlay: overlayRef,
        listener: function listener(event, _ref) {
          var valid = _ref.valid;
          valid && hide();
        },
        when: overlayVisibleState
      }),
      _useOverlayListener2 = _slicedToArray(_useOverlayListener, 2),
      bindOverlayListener = _useOverlayListener2[0],
      unbindOverlayListener = _useOverlayListener2[1];
    var _useEventListener = hooks.useEventListener({
        type: 'mousemove',
        listener: function listener(event) {
          colorDragging.current && pickColor(event);
          hueDragging.current && pickHue(event);
        }
      }),
      _useEventListener2 = _slicedToArray(_useEventListener, 2),
      bindDocumentMouseMoveListener = _useEventListener2[0],
      unbindDocumentMouseMoveListener = _useEventListener2[1];
    var _useEventListener3 = hooks.useEventListener({
        type: 'mouseup',
        listener: function listener() {
          colorDragging.current = hueDragging.current = false;
          utils.DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
          unbindDocumentMouseMoveListener();
          unbindDocumentMouseUpListener();
        }
      }),
      _useEventListener4 = _slicedToArray(_useEventListener3, 2),
      bindDocumentMouseUpListener = _useEventListener4[0],
      unbindDocumentMouseUpListener = _useEventListener4[1];
    var onPanelClick = function onPanelClick(event) {
      if (!props.inline) {
        overlayservice.OverlayService.emit('overlay-click', {
          originalEvent: event,
          target: elementRef.current
        });
      }
    };
    var onHueMousedown = function onHueMousedown(event) {
      if (props.disabled) {
        return;
      }
      bindDragListeners();
      onHueDragStart(event);
    };
    var onHueDragStart = function onHueDragStart(event) {
      if (props.disabled) {
        return;
      }
      hueDragging.current = true;
      pickHue(event);
      utils.DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
    };
    var pickHue = function pickHue(event) {
      var top = hueViewRef.current.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
      hsbValue.current = validateHSB({
        h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top))) / 150),
        s: 100,
        b: 100
      });
      updateColorSelector();
      updateHue();
      updateModel();
    };
    var onColorMousedown = function onColorMousedown(event) {
      if (props.disabled) {
        return;
      }
      bindDragListeners();
      onColorDragStart(event);
    };
    var onColorDragStart = function onColorDragStart(event) {
      if (props.disabled) {
        return;
      }
      colorDragging.current = true;
      pickColor(event);
      utils.DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
      event.preventDefault();
    };
    var onDrag = function onDrag(event) {
      if (colorDragging.current) {
        pickColor(event);
        event.preventDefault();
      }
      if (hueDragging.current) {
        pickHue(event);
        event.preventDefault();
      }
    };
    var onDragEnd = function onDragEnd() {
      colorDragging.current = false;
      hueDragging.current = false;
      utils.DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
      unbindDragListeners();
    };
    var bindDragListeners = function bindDragListeners() {
      bindDocumentMouseMoveListener();
      bindDocumentMouseUpListener();
    };
    var unbindDragListeners = function unbindDragListeners() {
      unbindDocumentMouseMoveListener();
      unbindDocumentMouseUpListener();
    };
    var pickColor = function pickColor(event) {
      var rect = colorSelectorRef.current.getBoundingClientRect();
      var top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
      var left = rect.left + document.body.scrollLeft;
      var saturation = Math.floor(100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left)) / 150);
      var brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top))) / 150);
      hsbValue.current = validateHSB({
        h: hsbValue.current.h,
        s: saturation,
        b: brightness
      });
      updateColorHandle();
      updateInput();
      updateModel();
    };
    var updateModel = function updateModel() {
      switch (props.format) {
        case 'hex':
          onChange(HSBtoHEX(hsbValue.current));
          break;
        case 'rgb':
          onChange(HSBtoRGB(hsbValue.current));
          break;
        case 'hsb':
          onChange(hsbValue.current);
          break;
      }
    };
    var toHSB = function toHSB(value) {
      var hsb;
      if (value) {
        switch (props.format) {
          case 'hex':
            hsb = HEXtoHSB(value);
            break;
          case 'rgb':
            hsb = RGBtoHSB(value);
            break;
          case 'hsb':
            hsb = value;
            break;
        }
      } else {
        hsb = HEXtoHSB(props.defaultColor);
      }
      return hsb;
    };
    var updateHSBValue = function updateHSBValue(value) {
      hsbValue.current = toHSB(value);
    };
    var onChange = function onChange(value) {
      if (props.onChange) {
        props.onChange({
          value: value,
          stopPropagation: function stopPropagation() {},
          preventDefault: function preventDefault() {},
          target: {
            name: props.name,
            id: props.id,
            value: value
          }
        });
      }
    };
    var updateColorSelector = function updateColorSelector() {
      if (colorSelectorRef.current) {
        var newHsbValue = validateHSB({
          h: hsbValue.current.h,
          s: 100,
          b: 100
        });
        colorSelectorRef.current.style.backgroundColor = '#' + HSBtoHEX(newHsbValue);
      }
    };
    var updateColorHandle = function updateColorHandle() {
      if (colorHandleRef.current) {
        colorHandleRef.current.style.left = Math.floor(150 * hsbValue.current.s / 100) + 'px';
        colorHandleRef.current.style.top = Math.floor(150 * (100 - hsbValue.current.b) / 100) + 'px';
      }
    };
    var updateHue = function updateHue() {
      if (hueHandleRef.current) {
        hueHandleRef.current.style.top = Math.floor(150 - 150 * hsbValue.current.h / 360) + 'px';
      }
    };
    var updateInput = function updateInput() {
      if (inputRef.current) {
        inputRef.current.style.backgroundColor = '#' + HSBtoHEX(hsbValue.current);
      }
    };
    var show = function show() {
      setOverlayVisibleState(true);
    };
    var hide = function hide() {
      setOverlayVisibleState(false);
    };
    var onOverlayEnter = function onOverlayEnter() {
      utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
      alignOverlay();
    };
    var onOverlayEntered = function onOverlayEntered() {
      bindOverlayListener();
      props.onShow && props.onShow();
    };
    var onOverlayExit = function onOverlayExit() {
      unbindOverlayListener();
    };
    var onOverlayExited = function onOverlayExited() {
      utils.ZIndexUtils.clear(overlayRef.current);
      props.onHide && props.onHide();
    };
    var onInputClick = function onInputClick() {
      togglePanel();
    };
    var togglePanel = function togglePanel() {
      overlayVisibleState ? hide() : show();
    };
    var onInputKeydown = function onInputKeydown(event) {
      switch (event.which) {
        //space
        case 32:
          togglePanel();
          event.preventDefault();
          break;

        //escape and tab
        case 27:
        case 9:
          hide();
          break;
      }
    };
    var validateHSB = function validateHSB(hsb) {
      return {
        h: Math.min(360, Math.max(0, hsb.h)),
        s: Math.min(100, Math.max(0, hsb.s)),
        b: Math.min(100, Math.max(0, hsb.b))
      };
    };
    var HEXtoRGB = function HEXtoRGB(hex) {
      var hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
      return {
        r: hexValue >> 16,
        g: (hexValue & 0x00ff00) >> 8,
        b: hexValue & 0x0000ff
      };
    };
    var HEXtoHSB = function HEXtoHSB(hex) {
      return RGBtoHSB(HEXtoRGB(hex));
    };
    var RGBtoHSB = function RGBtoHSB(rgb) {
      var hsb = {
        h: 0,
        s: 0,
        b: 0
      };
      var min = Math.min(rgb.r, rgb.g, rgb.b);
      var max = Math.max(rgb.r, rgb.g, rgb.b);
      var delta = max - min;
      hsb.b = max;
      hsb.s = max !== 0 ? 255 * delta / max : 0;
      if (hsb.s !== 0) {
        if (rgb.r === max) {
          hsb.h = (rgb.g - rgb.b) / delta;
        } else if (rgb.g === max) {
          hsb.h = 2 + (rgb.b - rgb.r) / delta;
        } else {
          hsb.h = 4 + (rgb.r - rgb.g) / delta;
        }
      } else {
        hsb.h = -1;
      }
      hsb.h *= 60;
      if (hsb.h < 0) {
        hsb.h += 360;
      }
      hsb.s *= 100 / 255;
      hsb.b *= 100 / 255;
      return hsb;
    };
    var HSBtoRGB = function HSBtoRGB(hsb) {
      var rgb = {
        r: null,
        g: null,
        b: null
      };
      var h = Math.round(hsb.h);
      var s = Math.round(hsb.s * 255 / 100);
      var v = Math.round(hsb.b * 255 / 100);
      if (s === 0) {
        rgb = {
          r: v,
          g: v,
          b: v
        };
      } else {
        var t1 = v;
        var t2 = (255 - s) * v / 255;
        var t3 = (t1 - t2) * (h % 60) / 60;
        if (h === 360) h = 0;
        if (h < 60) {
          rgb.r = t1;
          rgb.b = t2;
          rgb.g = t2 + t3;
        } else if (h < 120) {
          rgb.g = t1;
          rgb.b = t2;
          rgb.r = t1 - t3;
        } else if (h < 180) {
          rgb.g = t1;
          rgb.r = t2;
          rgb.b = t2 + t3;
        } else if (h < 240) {
          rgb.b = t1;
          rgb.r = t2;
          rgb.g = t1 - t3;
        } else if (h < 300) {
          rgb.b = t1;
          rgb.g = t2;
          rgb.r = t2 + t3;
        } else if (h < 360) {
          rgb.r = t1;
          rgb.g = t2;
          rgb.b = t1 - t3;
        } else {
          rgb.r = 0;
          rgb.g = 0;
          rgb.b = 0;
        }
      }
      return {
        r: Math.round(rgb.r),
        g: Math.round(rgb.g),
        b: Math.round(rgb.b)
      };
    };
    var RGBtoHEX = function RGBtoHEX(rgb) {
      var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
      for (var key in hex) {
        if (hex[key].length === 1) {
          hex[key] = '0' + hex[key];
        }
      }
      return hex.join('');
    };
    var HSBtoHEX = function HSBtoHEX(hsb) {
      return RGBtoHEX(HSBtoRGB(hsb));
    };
    var updateUI = function updateUI() {
      updateHue();
      updateColorHandle();
      updateInput();
      updateColorSelector();
    };
    var alignOverlay = function alignOverlay() {
      if (inputRef.current) {
        utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact__default["default"].appendTo);
      }
    };
    React__namespace.useImperativeHandle(ref, function () {
      return {
        props: props,
        show: show,
        hide: hide,
        focus: function focus() {
          return utils.DomHandler.focus(inputRef.current);
        },
        getElement: function getElement() {
          return elementRef.current;
        },
        getOverlay: function getOverlay() {
          return overlayRef.current;
        },
        getInput: function getInput() {
          return inputRef.current;
        }
      };
    });
    React__namespace.useEffect(function () {
      utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
    }, [inputRef, props.inputRef]);
    hooks.useMountEffect(function () {
      updateHSBValue(props.value);
      updateUI();
    });
    hooks.useUpdateEffect(function () {
      if (!colorDragging.current && !hueDragging.current) {
        updateHSBValue(props.value);
      }
    }, [props.value]);
    hooks.useUpdateEffect(function () {
      updateUI();
    });
    hooks.useUnmountEffect(function () {
      utils.ZIndexUtils.clear(overlayRef.current);
    });
    var createColorSelector = function createColorSelector() {
      return /*#__PURE__*/React__namespace.createElement("div", {
        ref: colorSelectorRef,
        className: "p-colorpicker-color-selector",
        onMouseDown: onColorMousedown,
        onTouchStart: onColorDragStart,
        onTouchMove: onDrag,
        onTouchEnd: onDragEnd
      }, /*#__PURE__*/React__namespace.createElement("div", {
        className: "p-colorpicker-color"
      }, /*#__PURE__*/React__namespace.createElement("div", {
        ref: colorHandleRef,
        className: "p-colorpicker-color-handle"
      })));
    };
    var createHue = function createHue() {
      return /*#__PURE__*/React__namespace.createElement("div", {
        ref: hueViewRef,
        className: "p-colorpicker-hue",
        onMouseDown: onHueMousedown,
        onTouchStart: onHueDragStart,
        onTouchMove: onDrag,
        onTouchEnd: onDragEnd
      }, /*#__PURE__*/React__namespace.createElement("div", {
        ref: hueHandleRef,
        className: "p-colorpicker-hue-handle"
      }));
    };
    var createContent = function createContent() {
      var colorSelector = createColorSelector();
      var hue = createHue();
      return /*#__PURE__*/React__namespace.createElement("div", {
        className: "p-colorpicker-content"
      }, colorSelector, hue);
    };
    var createInput = function createInput() {
      if (!props.inline) {
        var inputClassName = utils.classNames('p-colorpicker-preview p-inputtext', {
          'p-disabled': props.disabled
        });
        var inputProps = ColorPickerBase.getOtherProps(props);
        return /*#__PURE__*/React__namespace.createElement("input", _extends({
          ref: inputRef,
          type: "text",
          className: inputClassName,
          readOnly: true,
          id: props.inputId,
          tabIndex: props.tabIndex,
          disabled: props.disabled,
          onClick: onInputClick,
          onKeyDown: onInputKeydown
        }, inputProps));
      }
      return null;
    };
    var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
    var otherProps = ColorPickerBase.getOtherProps(props);
    var className = utils.classNames('p-colorpicker p-component', {
      'p-colorpicker-overlay': !props.inline
    }, props.className);
    var content = createContent();
    var input = createInput();
    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
      ref: elementRef,
      id: props.id,
      style: props.style,
      className: className
    }, otherProps), input, /*#__PURE__*/React__namespace.createElement(ColorPickerPanel, {
      ref: overlayRef,
      appendTo: props.appendTo,
      inline: props.inline,
      disabled: props.disabled,
      panelStyle: props.panelStyle,
      panelClassName: props.panelClassName,
      onClick: onPanelClick,
      "in": props.inline || overlayVisibleState,
      onEnter: onOverlayEnter,
      onEntered: onOverlayEntered,
      onExit: onOverlayExit,
      onExited: onOverlayExited,
      transitionOptions: props.transitionOptions
    }, content)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
      target: elementRef,
      content: props.tooltip
    }, props.tooltipOptions)));
  }));
  ColorPicker.displayName = 'ColorPicker';

  exports.ColorPicker = ColorPicker;

  Object.defineProperty(exports, '__esModule', { value: true });

  return exports;

})({}, React, primereact.api, primereact.hooks, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.csstransition, primereact.portal);