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

TDesign Component for React

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

import React, { useRef, useEffect } from 'react';
import classNames from 'classnames';
import { e as SLIDER_DEFAULT_WIDTH } from '../../../_chunks/dep-aeb8bcf5.js';
import useDrag from '../../../hooks/useDrag.js';
import useStyles from '../../hooks/useStyles.js';
import '../../../_chunks/dep-118954e6.js';
import '../../../_chunks/dep-61f5e3d1.js';

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 = useRef(null);
  var thumbRef = useRef(null);
  var isMovedRef = useRef(false);
  var panelRectRef = useRef({
    width: SLIDER_DEFAULT_WIDTH
  });
  var _useStyles = useStyles({
      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;
    isMovedRef.current = true;
    onChange(value2);
  };
  var handleDragEnd = function handleDragEnd(coordinate) {
    if (disabled || !isMovedRef.current) {
      return;
    }
    handleDrag(coordinate);
    isMovedRef.current = false;
  };
  useDrag(panelRef, {
    start: function start(coordinate) {
      panelRectRef.current.width = panelRef.current.offsetWidth;
      isMovedRef.current = false;
      handleDrag(coordinate);
    },
    end: function end(coordinate) {
      handleDragEnd(coordinate);
    },
    drag: function drag(coordinate) {
      handleDrag(coordinate);
    }
  });
  useEffect(function () {
    panelRectRef.current.width = panelRef.current.offsetWidth || 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.createElement("div", {
    className: classNames("".concat(baseClassName, "__slider-wrapper"), "".concat(baseClassName, "__slider-wrapper--").concat(type, "-type"))
  }, type === "alpha" && /* @__PURE__ */React.createElement("div", {
    className: "".concat(baseClassName, "__slider-padding"),
    style: paddingStyle
  }), /* @__PURE__ */React.createElement("div", {
    className: classNames("".concat(baseClassName, "__slider"), className),
    ref: panelRef
  }, /* @__PURE__ */React.createElement("div", {
    className: "".concat(baseClassName, "__rail"),
    style: railStyle
  }), /* @__PURE__ */React.createElement("span", {
    className: "".concat(baseClassName, "__thumb"),
    role: "slider",
    tabIndex: 0,
    ref: thumbRef,
    style: styles
  })));
};
var ColorSlider$1 = /*#__PURE__*/React.memo(ColorSlider);

export { ColorSlider$1 as default };
//# sourceMappingURL=slider.js.map