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

Color Slider component for React.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["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 _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "style", "onChange", "color", "lightness"];
var Slider = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
  var _props$prefixCls = props.prefixCls,
    prefixCls = _props$prefixCls === void 0 ? 'w-color-slider' : _props$prefixCls,
    className = props.className,
    style = props.style,
    onChange = props.onChange,
    color = props.color,
    _props$lightness = props.lightness,
    lightness = _props$lightness === void 0 ? [80, 65, 50, 35, 20] : _props$lightness,
    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var hsva = typeof color === 'string' && (0, _colorConvert.validHex)(color) ? (0, _colorConvert.hexToHsva)(color) : color || {};
  var handleClick = function handleClick(hslStr, evn) {
    onChange && onChange((0, _colorConvert.color)((0, _colorConvert.hslStringToHsva)(hslStr)), evn);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
    ref: ref,
    style: (0, _objectSpread2["default"])({
      display: 'flex'
    }, style),
    className: [prefixCls, className || ''].filter(Boolean).join(' ')
  }, other), {}, {
    children: lightness.map(function (num, idx) {
      var hsl = (0, _colorConvert.hsvaToHsla)(hsva);
      var hslStr = "hsl(".concat(hsl.h, ", 50%, ").concat(num, "%)");
      var checked = hslStr === (0, _colorConvert.hsvaToHslString)(hsva);
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          paddingLeft: 1,
          width: "".concat(100 / lightness.length, "%"),
          boxSizing: 'border-box'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          onClick: function onClick(evn) {
            return handleClick(hslStr, evn);
          },
          style: (0, _objectSpread2["default"])({
            backgroundColor: hslStr,
            height: 12,
            cursor: 'pointer'
          }, checked ? {
            borderRadius: 2,
            transform: 'scale(1, 1.5)'
          } : {})
        })
      }, idx);
    })
  }));
});
Slider.displayName = 'Slider';
var _default = exports["default"] = Slider;
module.exports = exports.default;