import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { _ as _typeof } from '../_verture/typeof-498dd2b1.js';
import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import RcSlider, { Range, SliderTooltip, Handle } from 'rc-slider';
import clsx from 'clsx';
import { $ as $prefixCls, a as $rcPrefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/11/4 下午2:58\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-slider {\n  position: relative;\n  height: 8px;\n  padding: 0;\n  width: 100%;\n  border-radius: 4px;\n  touch-action: none;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.paraui-v3-slider .component-slider-rail {\n  position: absolute;\n  width: 100%;\n  background-color: rgba(171, 176, 185, 0.2);\n  height: 8px;\n  border-radius: 4px;\n}\n.paraui-v3-slider .component-slider-track {\n  position: absolute;\n  left: 0;\n  height: 8px;\n  border-radius: 4px;\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-handle {\n  position: absolute;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  margin-top: -4px;\n  border-radius: 50%;\n  border: solid 2px rgb(54, 102, 214);\n  background-color: rgb(255, 255, 255);\n  touch-action: pan-x;\n}\n.paraui-v3-slider .component-slider-handle-dragging {\n  border-color: rgb(54, 102, 214);\n  box-shadow: 0 0 5px rgba(54, 102, 214, 0.2);\n  outline: 2px solid rgba(54, 102, 214, 0.2);\n}\n.paraui-v3-slider .component-slider-handle:focus {\n  outline: none;\n}\n.paraui-v3-slider .component-slider-handle-click-focused:focus {\n  border-color: rgb(54, 102, 214);\n  box-shadow: unset;\n}\n.paraui-v3-slider .component-slider-handle:hover {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-handle:active {\n  border-color: rgb(54, 102, 214);\n  box-shadow: 0 0 5px rgba(54, 102, 214, 0.2);\n  outline: 2px solid rgba(54, 102, 214, 0.2);\n  cursor: grabbing;\n}\n.paraui-v3-slider .component-slider-mark {\n  position: absolute;\n  top: 18px;\n  left: 0;\n  width: 100%;\n  font-size: 12px;\n}\n.paraui-v3-slider .component-slider-mark-text {\n  position: absolute;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  cursor: pointer;\n  color: #999;\n}\n.paraui-v3-slider .component-slider-mark-text-active {\n  color: #666;\n}\n.paraui-v3-slider .component-slider-step {\n  position: absolute;\n  width: 100%;\n  height: 8px;\n  background: transparent;\n}\n.paraui-v3-slider .component-slider-dot {\n  position: absolute;\n  bottom: -2px;\n  margin-left: -4px;\n  width: 12px;\n  height: 12px;\n  border: solid 2px rgba(171, 176, 185, 0.4);\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  border-radius: 50%;\n  vertical-align: middle;\n}\n.paraui-v3-slider .component-slider-dot-active {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-slider .component-slider-dot-reverse {\n  margin-right: -4px;\n}\n.paraui-v3-slider.component-slider-disabled {\n  background-color: rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-track {\n  background-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-handle, .paraui-v3-slider.component-slider-disabled .component-slider-dot {\n  border-color: #ccc;\n  box-shadow: none;\n  background-color: rgb(255, 255, 255);\n  cursor: not-allowed;\n}\n.paraui-v3-slider.component-slider-disabled .component-slider-mark-text, .paraui-v3-slider.component-slider-disabled .component-slider-dot {\n  cursor: not-allowed !important;\n}\n.paraui-v3-slider.component-slider-vertical {\n  width: 14px;\n  height: 100%;\n  padding: 0 5px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-rail {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-track {\n  left: 5px;\n  bottom: 0;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-handle {\n  margin-left: -6px;\n  touch-action: pan-y;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-mark {\n  top: 0;\n  left: 18px;\n  height: 100%;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-step {\n  height: 100%;\n  width: 4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot {\n  left: 0px;\n  margin-bottom: -4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot:first-child {\n  margin-bottom: -4px;\n}\n.paraui-v3-slider.component-slider-vertical .component-slider-dot:last-child {\n  margin-bottom: -4px;\n}\n\n.component-slider-tooltip {\n  position: absolute;\n  display: block;\n  left: -9999px;\n  top: -9999px;\n  max-width: 250px;\n  z-index: 1500;\n  visibility: visible;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.component-slider-tooltip-hidden {\n  display: none;\n}\n.component-slider-tooltip-inner {\n  min-width: 24px;\n  font-size: 14px;\n  line-height: 1;\n  color: rgba(46, 55, 67, 0.7);\n  text-align: center;\n  text-decoration: none;\n  background-color: transparent;\n  border-radius: 6px;\n  white-space: nowrap;\n  box-shadow: none;\n}\n.component-slider-tooltip-arrow {\n  display: none;\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-color: transparent;\n  border-style: solid;\n}\n.component-slider-tooltip-placement-top .component-slider-tooltip-arrow {\n  bottom: 4px;\n  left: 50%;\n  margin-left: -4px;\n  border-width: 4px 4px 0;\n  border-top-color: #6c6c6c;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n  display: block !important;\n  animation-play-state: paused;\n}\n.component-slider-tooltip-zoom-down-enter.component-slider-tooltip-zoom-down-enter-active, .component-slider-tooltip-zoom-down-appear.component-slider-tooltip-zoom-down-appear-active {\n  animation-name: sliderTooltipZoomDownIn;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-leave.component-slider-tooltip-zoom-down-leave-active {\n  animation-name: sliderTooltipZoomDownOut;\n  animation-play-state: running;\n}\n.component-slider-tooltip-zoom-down-enter, .component-slider-tooltip-zoom-down-appear {\n  transform: scale(0, 0);\n  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);\n}\n.component-slider-tooltip-zoom-down-leave {\n  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n}\n@keyframes sliderTooltipZoomDownIn {\n  0% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n  100% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n}\n@keyframes sliderTooltipZoomDownOut {\n  0% {\n    transform-origin: 50% 100%;\n    transform: scale(1, 1);\n  }\n  100% {\n    opacity: 0;\n    transform-origin: 50% 100%;\n    transform: scale(0, 0);\n  }\n}";
styleInject(css_248z);

//slider 滑块
var Slider = function Slider(props) {
  var range = props.range,
    step = props.step,
    className = props.className,
    restProps = __rest(props, ["range", "step", "className"]);
  var prefixCls = "".concat($rcPrefixCls, "-slider");
  var tooltipPrefixCls = "".concat($rcPrefixCls, "-slider-tooltip");
  var draggableTrack;
  if (_typeof(range) === 'object') {
    draggableTrack = range.draggableTrack;
  }
  var _React$useState = React__default.useState({}),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    visibles = _React$useState2[0],
    setVisibles = _React$useState2[1]; //是否显示
  //切换tooltip 是否显示
  var toggleTooltipVisible = function toggleTooltipVisible(index, visible) {
    setVisibles(function (prev) {
      return Object.assign(Object.assign({}, prev), _defineProperty({}, index, visible));
    });
  };
  //获得tooltip 显示位置
  var getTooltipPlacement = function getTooltipPlacement(tooltipPlacement, vertical) {
    if (tooltipPlacement) {
      return tooltipPlacement;
    }
    if (!vertical) {
      return 'top';
    }
    return 'right';
  };
  //提示格式化
  var tipFormatterFn = function tipFormatterFn(value) {
    return typeof value === 'number' ? value.toString() : '';
  };
  //handle with tooltip
  var handleWithTooltip = function handleWithTooltip(config) {
    var tooltipPrefixCls = config.tooltipPrefixCls,
      _a = config.info,
      value = _a.value,
      index = _a.index,
      dragging = _a.dragging,
      restProps = __rest(_a, ["value", "index", "dragging"]);
    var _props$tipFormatter = props.tipFormatter,
      tipFormatter = _props$tipFormatter === void 0 ? tipFormatterFn : _props$tipFormatter,
      tooltipVisible = props.tooltipVisible,
      tooltipPlacement = props.tooltipPlacement,
      _props$getTooltipPopu = props.getTooltipPopupContainer,
      getTooltipPopupContainer = _props$getTooltipPopu === void 0 ? function (triggerNode) {
        return triggerNode;
      } : _props$getTooltipPopu,
      vertical = props.vertical;
    var isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
    var visible = tooltipVisible || tooltipVisible === undefined && isTipFormatter;
    return jsx(SliderTooltip, Object.assign({
      prefixCls: tooltipPrefixCls,
      overlay: tipFormatter ? tipFormatter(value) : '',
      visible: visible,
      placement: getTooltipPlacement(tooltipPlacement, vertical),
      getTooltipContainer: getTooltipPopupContainer,
      destroyTooltipOnHide: true
    }, {
      children: jsx(Handle, Object.assign({}, restProps, {
        value: value,
        onMouseEnter: function onMouseEnter() {
          return toggleTooltipVisible(index, true);
        },
        onMouseLeave: function onMouseLeave() {
          return toggleTooltipVisible(index, false);
        }
      }))
    }), index);
  };
  if (range) {
    //范围slider
    return jsx(Range, Object.assign({}, restProps, {
      className: clsx("".concat($prefixCls, "-slider"), className),
      step: step,
      pushable: restProps.pushable,
      draggableTrack: draggableTrack,
      handle: function handle(info) {
        return handleWithTooltip({
          tooltipPrefixCls: tooltipPrefixCls,
          info: info
        });
      },
      prefixCls: prefixCls
    }));
  }
  return jsx(RcSlider, Object.assign({}, restProps, {
    className: clsx("".concat($prefixCls, "-slider"), className),
    step: step,
    handle: function handle(info) {
      return handleWithTooltip({
        tooltipPrefixCls: tooltipPrefixCls,
        info: info
      });
    },
    prefixCls: prefixCls
  }));
};

export { Slider, Slider as default };
