@uiw/react-color-hue/cjs/index.js

Color hue

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _reactColorAlpha = _interopRequireDefault(require("@uiw/react-color-alpha"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "hue", "onChange", "direction", "reverse"];
var NORMAL_COLORS = 'rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%';
var REVERSED_COLORS = 'rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 33%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 83%, rgb(255, 0, 0) 100%';
var Hue = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-hue' : _props$prefixCls,
    className = props.className,
    _props$hue = props.hue,
    hue = _props$hue === void 0 ? 0 : _props$hue,
    _onChange = props.onChange,
    _props$direction = props.direction,
    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
    _props$reverse = props.reverse,
    reverse = _props$reverse === void 0 ? false : _props$reverse,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var getGradientBackground = (0, _react.useCallback)(function () {
    if (direction === 'horizontal') {
      var colors = reverse ? REVERSED_COLORS : NORMAL_COLORS;
      var gradientDirection = 'right';
      return "linear-gradient(to ".concat(gradientDirection, ", ").concat(colors, ")");
    } else {
      // 垂直模式下，由于交互逻辑使用了 1-value，所以渐变颜色也要反转
      var _colors = reverse ? NORMAL_COLORS : REVERSED_COLORS;
      var _gradientDirection = 'bottom';
      return "linear-gradient(to ".concat(_gradientDirection, ", ").concat(_colors, ")");
    }
  }, [direction, reverse]);
  var getHueFromInteraction = (0, _react.useCallback)(function (interaction) {
    var value = direction === 'horizontal' ? interaction.left : interaction.top;
    var normalizedValue;
    if (direction === 'horizontal') {
      normalizedValue = reverse ? 1 - value : value;
    } else {
      // 垂直模式下，正常情况下顶部应该是0，底部是360，所以需要反转
      normalizedValue = reverse ? value : 1 - value;
    }
    return 360 * normalizedValue;
  }, [direction, reverse]);
  var gradientBackground = (0, _react.useMemo)(function () {
    return getGradientBackground();
  }, [getGradientBackground]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorAlpha["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: ref,
    className: "".concat(prefixCls, " ").concat(className || '')
  }, other), {}, {
    direction: direction,
    reverse: reverse,
    background: gradientBackground,
    hsva: {
      h: hue,
      s: 100,
      v: 100,
      a: hue / 360
    },
    onChange: function onChange(_, interaction) {
      _onChange && _onChange({
        h: getHueFromInteraction(interaction)
      });
    }
  }));
});
Hue.displayName = 'Hue';
var _default = exports["default"] = Hue;
module.exports = exports.default;