tdesign-react/cjs/color-picker/components/panel/slider.js

TDesign Component for React

/**
 * tdesign v1.15.1
 * (c) 2025 tdesign
 * @license MIT
 */

'use strict';

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

var React = require('react');
var classNames = require('classnames');
var constants = require('../../../_chunks/dep-15247f60.js');
var hooks_useMouseEvent = require('../../../hooks/useMouseEvent.js');
var colorPicker_hooks_useStyles = require('../../hooks/useStyles.js');
require('../../../_chunks/dep-8e4d656d.js');
require('../../../_chunks/dep-00b49251.js');

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

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);

var ColorSlider = function ColorSlider(props) {
  var color = props.color,
    _props$className = props.className,
    className = _props$className === void 0 ? "" : _props$className,
    _props$value = props.value,
    value = _props$value === void 0 ? 0 : _props$value,
    _props$railStyle = props.railStyle,
    railStyle = _props$railStyle === void 0 ? {} : _props$railStyle,
    _props$maxValue = props.maxValue,
    maxValue = _props$maxValue === void 0 ? 360 : _props$maxValue,
    baseClassName = props.baseClassName,
    disabled = props.disabled,
    onChange = props.onChange,
    type = props.type;
  var panelRef = React.useRef(null);
  var panelRectRef = React.useRef({
    width: constants.SLIDER_DEFAULT_WIDTH
  });
  var _useStyles = colorPicker_hooks_useStyles["default"]({
      color: color,
      value: value,
      maxValue: maxValue,
      type: type
    }, panelRectRef),
    styles = _useStyles.styles;
  var handleDrag = function handleDrag(coordinate) {
    if (disabled) return;
    var width = panelRectRef.current.width;
    var x = coordinate.x;
    var value2 = Math.round(x / width * Number(maxValue) * 100) / 100;
    onChange(value2);
  };
  hooks_useMouseEvent["default"](panelRef, {
    onDown: function onDown(_, ctx) {
      if (disabled) return;
      panelRectRef.current.width = panelRef.current.offsetWidth;
      handleDrag(ctx.coordinate);
    },
    onMove: function onMove(_, ctx) {
      handleDrag(ctx.coordinate);
    },
    onUp: function onUp(_, ctx) {
      handleDrag(ctx.coordinate);
    }
  });
  React.useEffect(function () {
    panelRectRef.current.width = panelRef.current.offsetWidth || constants.SLIDER_DEFAULT_WIDTH;
  }, []);
  var paddingStyle = {
    background: "linear-gradient(90deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.0) 93%, ".concat(props.color.rgb, " 93%, ").concat(props.color.rgb, " 100%)")
  };
  return /* @__PURE__ */React__default["default"].createElement("div", {
    className: classNames__default["default"]("".concat(baseClassName, "__slider-wrapper"), "".concat(baseClassName, "__slider-wrapper--").concat(type, "-type"))
  }, type === "alpha" && /* @__PURE__ */React__default["default"].createElement("div", {
    className: "".concat(baseClassName, "__slider-padding"),
    style: paddingStyle
  }), /* @__PURE__ */React__default["default"].createElement("div", {
    className: classNames__default["default"]("".concat(baseClassName, "__slider"), className),
    ref: panelRef
  }, /* @__PURE__ */React__default["default"].createElement("div", {
    className: "".concat(baseClassName, "__rail"),
    style: railStyle
  }), /* @__PURE__ */React__default["default"].createElement("span", {
    className: "".concat(baseClassName, "__thumb"),
    role: "slider",
    tabIndex: 0,
    style: styles
  })));
};
var ColorSlider$1 = /*#__PURE__*/React__default["default"].memo(ColorSlider);

exports["default"] = ColorSlider$1;
//# sourceMappingURL=slider.js.map