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

Color Colorful

"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 = _interopRequireDefault(require("react"));
var _colorConvert = require("@uiw/color-convert");
var _reactColorAlpha = _interopRequireWildcard(require("@uiw/react-color-alpha"));
var _reactColorSaturation = _interopRequireDefault(require("@uiw/react-color-saturation"));
var _reactColorHue = _interopRequireDefault(require("@uiw/react-color-hue"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["style", "color"],
  _excluded2 = ["prefixCls", "className", "onChange", "color", "style", "disableAlpha"];
var Pointer = function Pointer(_ref) {
  var style = _ref.style,
    color = _ref.color,
    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var stylePointer = (0, _objectSpread2["default"])({
    '--colorful-pointer-background-color': '#fff',
    '--colorful-pointer-border': '2px solid #fff',
    height: 28,
    width: 28,
    position: 'absolute',
    transform: 'translate(-16px, -16px)',
    boxShadow: '0 2px 4px rgb(0 0 0 / 20%)',
    borderRadius: '50%',
    background: "url(".concat(_reactColorAlpha.BACKGROUND_IMG, ")"),
    backgroundColor: 'var(--colorful-pointer-background-color)',
    border: 'var(--colorful-pointer-border)',
    zIndex: 1
  }, style);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
    style: stylePointer,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        backgroundColor: color,
        borderRadius: '50%',
        height: '100%',
        width: '100%'
      }
    })
  }));
};
var Colorful = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-colorful' : _props$prefixCls,
    className = props.className,
    onChange = props.onChange,
    color = props.color,
    style = props.style,
    disableAlpha = props.disableAlpha,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded2);
  var hsva = typeof color === 'string' && (0, _colorConvert.validHex)(color) ? (0, _colorConvert.hexToHsva)(color) : color || {};
  var handleChange = function handleChange(value) {
    return onChange && onChange((0, _colorConvert.color)(value));
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: ref,
    style: (0, _objectSpread2["default"])({
      width: 200,
      position: 'relative'
    }, style)
  }, other), {}, {
    className: "".concat(prefixCls, " ").concat(className || ''),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorSaturation["default"], {
      hsva: hsva,
      className: prefixCls,
      radius: "8px 8px 0 0",
      style: {
        width: 'auto',
        height: 150,
        minWidth: 120,
        borderBottom: '12px solid #000'
      },
      pointer: function pointer(_ref2) {
        var left = _ref2.left,
          top = _ref2.top,
          color = _ref2.color;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Pointer, {
          style: {
            left: left,
            top: top
          },
          color: (0, _colorConvert.hsvaToHex)(hsva)
        });
      },
      onChange: function onChange(newColor) {
        return handleChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsva), newColor));
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorHue["default"], {
      hue: hsva.h,
      height: 24,
      radius: disableAlpha ? '0 0 8px 8px' : 0,
      className: prefixCls,
      onChange: function onChange(newHue) {
        return handleChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsva), newHue));
      },
      pointer: function pointer(_ref3) {
        var left = _ref3.left;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Pointer, {
          style: {
            left: left,
            transform: 'translate(-16px, -5px)'
          },
          color: "hsl(".concat(hsva.h || 0, "deg 100% 50%)")
        });
      }
    }), !disableAlpha && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColorAlpha["default"], {
      hsva: hsva,
      height: 24,
      className: prefixCls,
      radius: "0 0 8px 8px",
      pointer: function pointer(_ref4) {
        var left = _ref4.left;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Pointer, {
          style: {
            left: left,
            transform: 'translate(-16px, -5px)'
          },
          color: (0, _colorConvert.hsvaToRgbaString)(hsva)
        });
      },
      onChange: function onChange(newAlpha) {
        return handleChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsva), newAlpha));
      }
    })]
  }));
});
Colorful.displayName = 'Colorful';
var _default = exports["default"] = Colorful;
module.exports = exports.default;