linkmore-design/lib/slider/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcSlider = _interopRequireDefault(require("rc-slider"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _warning = _interopRequireDefault(require("../_util/warning"));
var _SliderTooltip = _interopRequireDefault(require("./SliderTooltip"));
const Slider = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    getPrefixCls,
    direction,
    getPopupContainer
  } = React.useContext(_configProvider.ConfigContext);
  const [opens, setOpens] = React.useState({});
  const toggleTooltipOpen = (index, open) => {
    setOpens(prev => ({
      ...prev,
      [index]: open
    }));
  };
  const getTooltipPlacement = (tooltipPlacement, vertical) => {
    if (tooltipPlacement) {
      return tooltipPlacement;
    }
    if (!vertical) {
      return 'top';
    }
    return direction === 'rtl' ? 'left' : 'right';
  };
  const {
    prefixCls: customizePrefixCls,
    range,
    className,
    ...restProps
  } = props;
  const prefixCls = getPrefixCls('slider', customizePrefixCls);
  const cls = (0, _classnames.default)(className, {
    [`${prefixCls}-rtl`]: direction === 'rtl'
  });

  // make reverse default on rtl direction
  if (direction === 'rtl' && !restProps.vertical) {
    restProps.reverse = !restProps.reverse;
  }

  // Range config
  const [mergedRange, draggableTrack] = React.useMemo(() => {
    if (!range) {
      return [false];
    }
    return typeof range === 'object' ? [true, range.draggableTrack] : [true, false];
  }, [range]);

  // Warning for deprecated usage
  if (process.env.NODE_ENV !== 'production') {
    [['tooltipPrefixCls', 'prefixCls'], ['getTooltipPopupContainer', 'getPopupContainer'], ['tipFormatter', 'formatter'], ['tooltipPlacement', 'placement'], ['tooltipVisible', 'open']].forEach(([deprecatedName, newName]) => {
      (0, _warning.default)(!(deprecatedName in props), 'Slider', `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`tooltip.${newName}\` instead.`);
    });
  }
  const handleRender = (node, info) => {
    const {
      index,
      dragging
    } = info;
    const rootPrefixCls = getPrefixCls();
    const {
      tooltip = {},
      vertical
    } = props;
    const tooltipProps = {
      formatter: props.tipFormatter ??
      // eslint-disable-next-line func-names
      function (value) {
        return typeof value === 'number' ? value.toString() : '';
      },
      open: props.tooltipVisible,
      placement: props.tooltipPlacement,
      getPopupContainer: props.getTooltipPopupContainer,
      ...tooltip
    };
    const {
      open: tooltipOpen,
      placement: tooltipPlacement,
      getPopupContainer: getTooltipPopupContainer,
      prefixCls: customizeTooltipPrefixCls,
      formatter: tipFormatter
    } = tooltipProps;
    const isTipFormatter = tipFormatter ? opens[index] || dragging : false;
    const open = tooltipOpen || tooltipOpen === undefined && isTipFormatter;
    const passedProps = {
      ...node.props,
      onMouseEnter: () => toggleTooltipOpen(index, true),
      onMouseLeave: () => toggleTooltipOpen(index, false)
    };
    const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
    return /*#__PURE__*/React.createElement(_SliderTooltip.default, {
      prefixCls: tooltipPrefixCls,
      title: tipFormatter ? tipFormatter(info.value) : '',
      open: open,
      placement: getTooltipPlacement(tooltipPlacement, vertical),
      transitionName: `${rootPrefixCls}-zoom-down`,
      key: index,
      overlayClassName: `${prefixCls}-tooltip`,
      getPopupContainer: getTooltipPopupContainer || getPopupContainer
    }, /*#__PURE__*/React.cloneElement(node, passedProps));
  };
  return /*#__PURE__*/React.createElement(_rcSlider.default, (0, _extends2.default)({}, restProps, {
    step: restProps.step,
    range: mergedRange,
    draggableTrack: draggableTrack,
    className: cls,
    ref: ref,
    prefixCls: prefixCls,
    handleRender: handleRender
  }));
});
if (process.env.NODE_ENV !== 'production') {
  Slider.displayName = 'Slider';
}
var _default = Slider;
exports.default = _default;