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

Color alpha

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
var _exportNames = {
  BACKGROUND_IMG: true
};
exports["default"] = exports.BACKGROUND_IMG = 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 _reactDragEventInteractive = _interopRequireDefault(require("@uiw/react-drag-event-interactive"));
var _Pointer = require("./Pointer");
Object.keys(_Pointer).forEach(function (key) {
  if (key === "default" || key === "__esModule") return;
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
  if (key in exports && exports[key] === _Pointer[key]) return;
  Object.defineProperty(exports, key, {
    enumerable: true,
    get: function get() {
      return _Pointer[key];
    }
  });
});
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
var BACKGROUND_IMG = exports.BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
var Alpha = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-alpha' : _props$prefixCls,
    className = props.className,
    hsva = props.hsva,
    background = props.background,
    _props$bgProps = props.bgProps,
    bgProps = _props$bgProps === void 0 ? {} : _props$bgProps,
    _props$innerProps = props.innerProps,
    innerProps = _props$innerProps === void 0 ? {} : _props$innerProps,
    _props$pointerProps = props.pointerProps,
    pointerProps = _props$pointerProps === void 0 ? {} : _props$pointerProps,
    _props$radius = props.radius,
    radius = _props$radius === void 0 ? 0 : _props$radius,
    width = props.width,
    _props$height = props.height,
    height = _props$height === void 0 ? 16 : _props$height,
    _props$direction = props.direction,
    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
    style = props.style,
    onChange = props.onChange,
    pointer = props.pointer,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var handleChange = function handleChange(offset) {
    onChange && onChange((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, hsva), {}, {
      a: direction === 'horizontal' ? offset.left : offset.top
    }), offset);
  };
  var colorTo = (0, _colorConvert.hsvaToHslaString)(Object.assign({}, hsva, {
    a: 1
  }));
  var innerBackground = "linear-gradient(to ".concat(direction === 'horizontal' ? 'right' : 'bottom', ", rgba(244, 67, 54, 0) 0%, ").concat(colorTo, " 100%)");
  var comProps = {};
  if (direction === 'horizontal') {
    comProps.left = "".concat(hsva.a * 100, "%");
  } else {
    comProps.top = "".concat(hsva.a * 100, "%");
  }
  var styleWrapper = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    '--alpha-background-color': '#fff',
    '--alpha-pointer-background-color': 'rgb(248, 248, 248)',
    '--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
    borderRadius: radius,
    background: "url(".concat(BACKGROUND_IMG, ") left center"),
    backgroundColor: 'var(--alpha-background-color)'
  }, {
    width: width,
    height: height
  }), style), {}, {
    position: 'relative'
  });
  var pointerElement = pointer && typeof pointer === 'function' ? pointer((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    prefixCls: prefixCls
  }, pointerProps), comProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pointer.Pointer, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, pointerProps), {}, {
    prefixCls: prefixCls
  }, comProps));
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), {}, {
    className: [prefixCls, "".concat(prefixCls, "-").concat(direction), className || ''].filter(Boolean).join(' '),
    style: styleWrapper,
    ref: ref,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, bgProps), {}, {
      style: (0, _objectSpread2["default"])({
        inset: 0,
        position: 'absolute',
        background: background || innerBackground,
        borderRadius: radius
      }, bgProps.style)
    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDragEventInteractive["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, innerProps), {}, {
      style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, innerProps.style), {}, {
        inset: 0,
        zIndex: 1,
        position: 'absolute'
      }),
      onMove: handleChange,
      onDown: handleChange,
      children: pointerElement
    }))]
  }));
});
Alpha.displayName = 'Alpha';
var _default = exports["default"] = Alpha;