tdesign-react/cjs/color-picker/hooks/useStyles.js

TDesign Component for React

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

'use strict';

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

var slicedToArray = require('../../_chunks/dep-5cb0d66d.js');
var React = require('react');
require('../../_chunks/dep-737b8bd8.js');

var useStyles = function useStyles(params, panelRectRef) {
  var color = params.color,
    value = params.value,
    maxValue = params.maxValue,
    type = params.type;
  var _useState = React.useState({
      left: "",
      color: ""
    }),
    _useState2 = slicedToArray._slicedToArray(_useState, 2),
    styles = _useState2[0],
    setStyles = _useState2[1];
  React.useEffect(function () {
    var width = panelRectRef.current.width;
    if (!width) return;
    var left = Math.round(Number(value) / Number(maxValue) * 100);
    var thumbColor = "";
    if (type === "hue") {
      thumbColor = "hsl(".concat(color.hue, ", 100%, 50%)");
    } else if (type === "alpha") {
      thumbColor = color.rgba;
    }
    setStyles({
      left: "".concat(left, "%"),
      color: thumbColor
    });
  }, [color.hue, color.rgba, value]);
  return {
    styles: styles
  };
};

exports["default"] = useStyles;
//# sourceMappingURL=useStyles.js.map