rc-slider - npm Package Compare versions

Comparing version 9.7.5 to 10.0.0-alpha.0

es/index.d.ts

@@ -1,14 +0,4 @@
-/// <reference types="react" />
-import { SliderProps } from './Slider';
-import Range, { RangeProps } from './Range';
-import Handle, { HandleProps } from './Handle';
-import createSliderWithTooltip from './createSliderWithTooltip';
-import SliderTooltip from './common/SliderTooltip';
-interface CompoundedComponent extends React.ComponentClass<SliderProps> {
-    Range: typeof Range;
-    Handle: typeof Handle;
-    createSliderWithTooltip: typeof createSliderWithTooltip;
-}
-declare const InternalSlider: CompoundedComponent;
-export default InternalSlider;
-export { SliderProps, Range, RangeProps, Handle, HandleProps, createSliderWithTooltip, SliderTooltip, };
+import Slider from './Slider';
+import type { SliderProps } from './Slider';
+export type { SliderProps };
+export default Slider;

es/index.js

 import Slider from './Slider';
-import Range from './Range';
-import Handle from './Handle';
-import createSliderWithTooltip from './createSliderWithTooltip';
-import SliderTooltip from './common/SliderTooltip';
-var InternalSlider = Slider;
-InternalSlider.Range = Range;
-InternalSlider.Handle = Handle;
-InternalSlider.createSliderWithTooltip = createSliderWithTooltip;
-export default InternalSlider;
-export { Range, Handle, createSliderWithTooltip, SliderTooltip };
+export default Slider;

es/interface.d.ts

@@ -1,48 +0,4 @@
-import type * as React from 'react';
-export interface GenericSliderProps {
-    min?: number;
-    max?: number;
-    step?: number | null;
-    prefixCls?: string;
-    vertical?: boolean;
-    included?: boolean;
-    disabled?: boolean;
-    reverse?: boolean;
-    trackStyle?: React.CSSProperties | React.CSSProperties[];
-    handleStyle?: React.CSSProperties | React.CSSProperties[];
-    autoFocus?: boolean;
-    onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
-    onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
-    className?: string;
-    marks?: Record<number, React.ReactNode | {
-        style?: React.CSSProperties;
-        label?: string;
-    }>;
-    dots?: boolean;
-    maximumTrackStyle?: React.CSSProperties;
-    style?: React.CSSProperties;
-    railStyle?: React.CSSProperties;
-    dotStyle?: React.CSSProperties;
-    activeDotStyle?: React.CSSProperties;
-    draggableTrack?: boolean;
-}
-export interface GenericSliderState {
-    value?: any;
-    bounds?: number[];
-}
-export interface GenericSliderClass<Props, State> extends React.Component<Props, State> {
-    onStart: (position: number) => void;
-    positionGetValue: (pos: number) => number[];
-    onEnd: (force?: boolean) => void;
-    onMove: (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, position: number, inTrack: boolean, b: number[]) => void;
-    onKeyboard: (e: React.KeyboardEvent<HTMLDivElement>) => void;
-    onChange: (state: {
-        value: any;
-    }) => void;
-    trimAlignValue: (v: number, nextProps?: Partial<Props>) => number;
-    getUpperBound: () => number;
-    getLowerBound: () => number;
-}
-export interface GenericSlider<Props, State> extends Pick<React.ComponentClass<Props, State>, 'displayName' | 'defaultProps' | 'propTypes' | 'contextType' | 'contextTypes' | 'childContextTypes'> {
-    new (props: Props, context?: any): GenericSliderClass<Props, State>;
-}
+import type React from 'react';
+export declare type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt';
+export declare type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number) => void;
+export declare type AriaValueFormat = (value: number) => string;

es/Slider.d.ts

@@ -1,50 +0,64 @@
-import React from 'react';
-import type { GenericSliderProps, GenericSliderState } from './interface';
-export interface SliderProps extends GenericSliderProps {
-    value?: number;
-    defaultValue?: number;
+import * as React from 'react';
+import type { HandlesProps } from './Handles';
+import type { AriaValueFormat } from './interface';
+import type { MarkObj } from './Marks';
+/**
+ * New:
+ * - click mark to update range value
+ * - handleRender
+ * - Fix handle with count not correct
+ * - Fix pushable not work in some case
+ * - No more FindDOMNode
+ * - Move all position related style into inline style
+ * - Key: up is plus, down is minus
+ * - fix Key with step = null not align with marks
+ * - Change range should not trigger onChange
+ * - keyboard support pushable
+ */
+export interface SliderProps<ValueType = number | number[]> {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
+    range?: boolean;
+    count?: number;
     min?: number;
     max?: number;
     step?: number | null;
-    prefixCls?: string;
-    onChange?: (value: number) => void;
-    onBeforeChange?: (value: number) => void;
-    onAfterChange?: (value: number) => void;
+    value?: ValueType;
+    defaultValue?: ValueType;
+    onChange?: (value: ValueType) => void;
+    /** @deprecated It's always better to use `onChange` instead */
+    onBeforeChange?: (value: ValueType) => void;
+    /** @deprecated It's always better to use `onChange` instead */
+    onAfterChange?: (value: ValueType) => void;
+    allowCross?: boolean;
+    pushable?: boolean | number;
+    /** range only */
+    draggableTrack?: boolean;
+    reverse?: boolean;
     vertical?: boolean;
     included?: boolean;
-    disabled?: boolean;
-    reverse?: boolean;
-    minimumTrackStyle?: React.CSSProperties;
-    trackStyle?: React.CSSProperties;
-    handleStyle?: React.CSSProperties;
-    tabIndex?: number;
-    ariaLabelForHandle?: string;
-    ariaLabelledByForHandle?: string;
-    ariaValueTextFormatterForHandle?: (value: number) => string;
     startPoint?: number;
-    handle?: (props: {
-        className: string;
-        prefixCls?: string;
-        vertical?: boolean;
-        offset: number;
-        value: number;
-        dragging?: boolean;
-        disabled?: boolean;
-        min?: number;
-        max?: number;
-        reverse?: boolean;
-        index: number;
-        tabIndex?: number;
-        ariaLabel: string;
-        ariaLabelledBy: string;
-        ariaValueTextFormatter?: (value: number) => string;
-        style?: React.CSSProperties;
-        ref?: React.Ref<any>;
-    }) => React.ReactElement;
+    trackStyle?: React.CSSProperties | React.CSSProperties[];
+    handleStyle?: React.CSSProperties | React.CSSProperties[];
+    railStyle?: React.CSSProperties;
+    dotStyle?: React.CSSProperties;
+    activeDotStyle?: React.CSSProperties;
+    marks?: Record<string | number, React.ReactNode | MarkObj>;
+    dots?: boolean;
+    handleRender?: HandlesProps['handleRender'];
+    tabIndex?: number | number[];
+    ariaLabelForHandle?: string | string[];
+    ariaLabelledByForHandle?: string | string[];
+    ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
 }
-export interface SliderState extends GenericSliderState {
-    value: number;
-    dragging: boolean;
+export interface SliderRef {
+    focus: () => void;
+    blur: () => void;
 }
-declare const _default: React.ComponentClass<SliderProps, SliderState>;
-export default _default;
+declare const Slider: React.ForwardRefExoticComponent<SliderProps<number | number[]> & React.RefAttributes<SliderRef>>;
+export default Slider;

es/Slider.js

@@ -1,275 +0,416 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import * as React from 'react';
+import classNames from 'classnames';
+import shallowEqual from 'shallowequal';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import Handles from './Handles';
+import useDrag from './hooks/useDrag';
+import SliderContext from './context';
+import Tracks from './Tracks';
+import Marks from './Marks';
+import Steps from './Steps';
+import useOffset from './hooks/useOffset';
 import warning from "rc-util/es/warning";
-import Track from './common/Track';
-import createSlider from './common/createSlider';
-import * as utils from './utils';
+var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames;
 
-var Slider = /*#__PURE__*/function (_React$Component) {
-  _inherits(Slider, _React$Component);
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'rc-slider' : _props$prefixCls,
+      className = props.className,
+      style = props.style,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      autoFocus = props.autoFocus,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      range = props.range,
+      count = props.count,
+      onChange = props.onChange,
+      onBeforeChange = props.onBeforeChange,
+      onAfterChange = props.onAfterChange,
+      _props$allowCross = props.allowCross,
+      allowCross = _props$allowCross === void 0 ? true : _props$allowCross,
+      _props$pushable = props.pushable,
+      pushable = _props$pushable === void 0 ? false : _props$pushable,
+      draggableTrack = props.draggableTrack,
+      reverse = props.reverse,
+      vertical = props.vertical,
+      _props$included = props.included,
+      included = _props$included === void 0 ? true : _props$included,
+      startPoint = props.startPoint,
+      trackStyle = props.trackStyle,
+      handleStyle = props.handleStyle,
+      railStyle = props.railStyle,
+      dotStyle = props.dotStyle,
+      activeDotStyle = props.activeDotStyle,
+      marks = props.marks,
+      dots = props.dots,
+      handleRender = props.handleRender,
+      _props$tabIndex = props.tabIndex,
+      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+      ariaLabelForHandle = props.ariaLabelForHandle,
+      ariaLabelledByForHandle = props.ariaLabelledByForHandle,
+      ariaValueTextFormatterForHandle = props.ariaValueTextFormatterForHandle;
+  var handlesRef = React.useRef();
+  var containerRef = React.useRef();
+  var direction = React.useMemo(function () {
+    if (vertical) {
+      return reverse ? 'ttb' : 'btt';
+    }
 
-  var _super = _createSuper(Slider);
+    return reverse ? 'rtl' : 'ltr';
+  }, [reverse, vertical]); // ============================ Range =============================
 
-  /* eslint-enable */
-  function Slider(props) {
-    var _this;
+  var mergedMin = React.useMemo(function () {
+    return isFinite(min) ? min : 0;
+  }, [min]);
+  var mergedMax = React.useMemo(function () {
+    return isFinite(max) ? max : 100;
+  }, [max]); // ============================= Step =============================
 
-    _classCallCheck(this, Slider);
+  var mergedStep = React.useMemo(function () {
+    return step !== null && step <= 0 ? 1 : step;
+  }, [step]); // ============================= Push =============================
 
-    _this = _super.call(this, props);
+  var mergedPush = React.useMemo(function () {
+    if (pushable === true) {
+      return mergedStep;
+    }
 
-    _this.positionGetValue = function (position) {
-      return [];
-    };
+    return pushable >= 0 ? pushable : false;
+  }, [pushable, mergedStep]); // ============================ Marks =============================
 
-    _this.onEnd = function (force) {
-      var dragging = _this.state.dragging;
+  var markList = React.useMemo(function () {
+    var keys = Object.keys(marks || {});
+    return keys.map(function (key) {
+      var mark = marks[key];
+      var markObj = {
+        value: Number(key)
+      };
 
-      _this.removeDocumentEvents();
+      if (mark && _typeof(mark) === 'object' && ! /*#__PURE__*/React.isValidElement(mark) && ('label' in mark || 'style' in mark)) {
+        markObj.style = mark.style;
+        markObj.label = mark.label;
+      } else {
+        markObj.label = mark;
+      }
 
-      if (dragging || force) {
-        _this.props.onAfterChange(_this.getValue());
+      return markObj;
+    }).sort(function (a, b) {
+      return a.value - b.value;
+    });
+  }, [marks]); // ============================ Format ============================
+
+  var _useOffset = useOffset(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush),
+      _useOffset2 = _slicedToArray(_useOffset, 2),
+      formatValue = _useOffset2[0],
+      offsetValues = _useOffset2[1]; // ============================ Values ============================
+
+
+  var _useMergedState = useMergedState(defaultValue, {
+    value: value
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      mergedValue = _useMergedState2[0],
+      setValue = _useMergedState2[1];
+
+  var rawValues = React.useMemo(function () {
+    var valueList = mergedValue === null || mergedValue === undefined ? [] : Array.isArray(mergedValue) ? mergedValue : [mergedValue];
+
+    var _valueList = _slicedToArray(valueList, 1),
+        _valueList$ = _valueList[0],
+        val0 = _valueList$ === void 0 ? mergedMin : _valueList$;
+
+    var returnValues = mergedValue === null ? [] : [val0]; // Format as range
+
+    if (range) {
+      returnValues = _toConsumableArray(valueList); // When count provided or value is `undefined`, we fill values
+
+      if (count || mergedValue === undefined) {
+        var pointCount = count >= 0 ? count + 1 : 2;
+        returnValues = returnValues.slice(0, pointCount); // Fill with count
+
+        while (returnValues.length < pointCount) {
+          var _returnValues;
+
+          returnValues.push((_returnValues = returnValues[returnValues.length - 1]) !== null && _returnValues !== void 0 ? _returnValues : mergedMin);
+        }
       }
 
-      _this.setState({
-        dragging: false
+      returnValues.sort(function (a, b) {
+        return a - b;
       });
-    };
+    } // Align in range
 
-    var defaultValue = props.defaultValue !== undefined ? props.defaultValue : props.min;
-    var value = props.value !== undefined ? props.value : defaultValue;
-    _this.state = {
-      value: _this.trimAlignValue(value),
-      dragging: false
-    };
-    warning(!('minimumTrackStyle' in props), 'minimumTrackStyle will be deprecated, please use trackStyle instead.');
-    warning(!('maximumTrackStyle' in props), 'maximumTrackStyle will be deprecated, please use railStyle instead.');
-    return _this;
-  }
-  /**
-   * [Legacy] Used for inherit other component.
-   * It's a bad code style which should be refactor.
-   */
 
-  /* eslint-disable @typescript-eslint/no-unused-vars, class-methods-use-this */
+    returnValues.forEach(function (val, index) {
+      returnValues[index] = formatValue(val);
+    });
+    return returnValues;
+  }, [mergedValue, range, mergedMin, count, formatValue]); // =========================== onChange ===========================
 
+  var rawValuesRef = React.useRef(rawValues);
+  rawValuesRef.current = rawValues;
 
-  _createClass(Slider, [{
-    key: "calcValueByPos",
-    value: function calcValueByPos(value) {
-      return 0;
-    }
-  }, {
-    key: "calcOffset",
-    value: function calcOffset(value) {
-      return 0;
-    }
-  }, {
-    key: "saveHandle",
-    value: function saveHandle(index, h) {}
-  }, {
-    key: "removeDocumentEvents",
-    value: function removeDocumentEvents() {}
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props = this.props,
-          min = _this$props.min,
-          max = _this$props.max,
-          value = _this$props.value,
-          onChange = _this$props.onChange;
+  var getTriggerValue = function getTriggerValue(triggerValues) {
+    return range ? triggerValues : triggerValues[0];
+  };
 
-      if (!('min' in this.props || 'max' in this.props)) {
-        return;
-      }
+  var triggerChange = function triggerChange(nextValues) {
+    // Order first
+    var cloneNextValues = _toConsumableArray(nextValues).sort(function (a, b) {
+      return a - b;
+    }); // Trigger event if needed
 
-      var theValue = value !== undefined ? value : prevState.value;
-      var nextValue = this.trimAlignValue(theValue, this.props);
 
-      if (nextValue === prevState.value) {
-        return;
-      } // eslint-disable-next-line
+    if (onChange && !shallowEqual(cloneNextValues, rawValuesRef.current)) {
+      onChange(getTriggerValue(cloneNextValues));
+    } // We set this later since it will re-render component immediately
 
 
-      this.setState({
-        value: nextValue
-      });
+    setValue(cloneNextValues);
+  };
 
-      if (!(min === prevProps.min && max === prevProps.max) && utils.isValueOutOfRange(theValue, this.props)) {
-        onChange(nextValue);
+  var changeToCloseValue = function changeToCloseValue(newValue) {
+    if (!disabled) {
+      var valueIndex = 0;
+      var valueDist = mergedMax - mergedMin;
+      rawValues.forEach(function (val, index) {
+        var dist = Math.abs(newValue - val);
+
+        if (dist <= valueDist) {
+          valueDist = dist;
+          valueIndex = index;
+        }
+      }); // Create new values
+
+      var cloneNextValues = _toConsumableArray(rawValues);
+
+      cloneNextValues[valueIndex] = newValue; // Fill value to match default 2
+
+      if (range && !rawValues.length && count === undefined) {
+        cloneNextValues.push(newValue);
       }
+
+      triggerChange(cloneNextValues);
+      onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(cloneNextValues);
     }
-  }, {
-    key: "onChange",
-    value: function onChange(state) {
-      var props = this.props;
-      var isNotControlled = !('value' in props);
-      var nextState = state.value > this.props.max ? _objectSpread(_objectSpread({}, state), {}, {
-        value: this.props.max
-      }) : state;
+  }; // ============================ Click =============================
 
-      if (isNotControlled) {
-        this.setState(nextState);
-      }
 
-      var changedValue = nextState.value;
-      props.onChange(changedValue);
+  var onSliderMouseDown = function onSliderMouseDown(e) {
+    e.preventDefault();
+
+    var _containerRef$current = containerRef.current.getBoundingClientRect(),
+        width = _containerRef$current.width,
+        height = _containerRef$current.height,
+        left = _containerRef$current.left,
+        top = _containerRef$current.top,
+        bottom = _containerRef$current.bottom,
+        right = _containerRef$current.right;
+
+    var clientX = e.clientX,
+        clientY = e.clientY;
+    var percent;
+
+    switch (direction) {
+      case 'btt':
+        percent = (bottom - clientY) / height;
+        break;
+
+      case 'ttb':
+        percent = (clientY - top) / height;
+        break;
+
+      case 'rtl':
+        percent = (right - clientX) / width;
+        break;
+
+      default:
+        percent = (clientX - left) / width;
     }
-  }, {
-    key: "onStart",
-    value: function onStart(position) {
-      this.setState({
-        dragging: true
-      });
-      var props = this.props;
-      var prevValue = this.getValue();
-      props.onBeforeChange(prevValue);
-      var value = this.calcValueByPos(position);
-      this.startValue = value;
-      this.startPosition = position;
-      if (value === prevValue) return;
-      this.prevMovedHandleIndex = 0;
-      this.onChange({
-        value: value
-      });
+
+    var nextValue = mergedMin + percent * (mergedMax - mergedMin);
+    changeToCloseValue(formatValue(nextValue));
+  }; // =========================== Keyboard ===========================
+
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      keyboardValue = _React$useState2[0],
+      setKeyboardValue = _React$useState2[1];
+
+  var onHandleOffsetChange = function onHandleOffsetChange(offset, valueIndex) {
+    if (!disabled) {
+      var next = offsetValues(rawValues, offset, valueIndex);
+      onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(getTriggerValue(rawValues));
+      triggerChange(next.values);
+      onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(getTriggerValue(next.values));
+      setKeyboardValue(next.value);
     }
-  }, {
-    key: "onMove",
-    value: function onMove(e, position) {
-      utils.pauseEvent(e);
-      var oldValue = this.state.value;
-      var value = this.calcValueByPos(position);
-      if (value === oldValue) return;
-      this.onChange({
-        value: value
-      });
-    }
-  }, {
-    key: "onKeyboard",
-    value: function onKeyboard(e) {
-      var _this$props2 = this.props,
-          reverse = _this$props2.reverse,
-          vertical = _this$props2.vertical;
-      var valueMutator = utils.getKeyboardValueMutator(e, vertical, reverse);
+  };
 
-      if (valueMutator) {
-        utils.pauseEvent(e);
-        var state = this.state;
-        var oldValue = state.value;
-        var mutatedValue = valueMutator(oldValue, this.props);
-        var value = this.trimAlignValue(mutatedValue);
-        if (value === oldValue) return;
-        this.onChange({
-          value: value
-        });
-        this.props.onAfterChange(value);
-        this.onEnd();
+  React.useEffect(function () {
+    if (keyboardValue !== null) {
+      var valueIndex = rawValues.indexOf(keyboardValue);
+
+      if (valueIndex >= 0) {
+        handlesRef.current.focus(valueIndex);
       }
     }
-  }, {
-    key: "getValue",
-    value: function getValue() {
-      return this.state.value;
-    }
-  }, {
-    key: "getLowerBound",
-    value: function getLowerBound() {
-      var minPoint = this.props.startPoint || this.props.min;
-      return this.state.value > minPoint ? minPoint : this.state.value;
-    }
-  }, {
-    key: "getUpperBound",
-    value: function getUpperBound() {
-      if (this.state.value < this.props.startPoint) {
-        return this.props.startPoint;
+
+    setKeyboardValue(null);
+  }, [keyboardValue]); // ============================= Drag =============================
+
+  var mergedDraggableTrack = React.useMemo(function () {
+    if (draggableTrack && mergedStep === null) {
+      if (process.env.NODE_ENV !== 'production') {
+        warning(false, '`draggableTrack` is not supported when `step` is `null`.');
       }
 
-      return this.state.value;
+      return false;
     }
-  }, {
-    key: "trimAlignValue",
-    value: function trimAlignValue(v) {
-      var nextProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-      if (v === null) {
-        return null;
-      }
+    return draggableTrack;
+  }, [draggableTrack, mergedStep]);
 
-      var mergedProps = _objectSpread(_objectSpread({}, this.props), nextProps);
+  var finishChange = function finishChange() {
+    onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(getTriggerValue(rawValuesRef.current));
+  };
 
-      var val = utils.ensureValueInRange(v, mergedProps);
-      return utils.ensureValuePrecision(val, mergedProps);
+  var _useDrag = useDrag(containerRef, direction, rawValues, mergedMin, mergedMax, formatValue, triggerChange, finishChange, offsetValues),
+      _useDrag2 = _slicedToArray(_useDrag, 4),
+      draggingIndex = _useDrag2[0],
+      draggingValue = _useDrag2[1],
+      cacheValues = _useDrag2[2],
+      onStartDrag = _useDrag2[3];
+
+  var onStartMove = function onStartMove(e, valueIndex) {
+    onStartDrag(e, valueIndex);
+    onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(getTriggerValue(rawValuesRef.current));
+  }; // Auto focus for updated handle
+
+
+  var dragging = draggingIndex !== -1;
+  React.useEffect(function () {
+    if (!dragging) {
+      var valueIndex = rawValues.lastIndexOf(draggingValue);
+      handlesRef.current.focus(valueIndex);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  }, [dragging]); // =========================== Included ===========================
 
-      var _this$props3 = this.props,
-          prefixCls = _this$props3.prefixCls,
-          vertical = _this$props3.vertical,
-          included = _this$props3.included,
-          disabled = _this$props3.disabled,
-          minimumTrackStyle = _this$props3.minimumTrackStyle,
-          trackStyle = _this$props3.trackStyle,
-          handleStyle = _this$props3.handleStyle,
-          tabIndex = _this$props3.tabIndex,
-          ariaLabelForHandle = _this$props3.ariaLabelForHandle,
-          ariaLabelledByForHandle = _this$props3.ariaLabelledByForHandle,
-          ariaValueTextFormatterForHandle = _this$props3.ariaValueTextFormatterForHandle,
-          min = _this$props3.min,
-          max = _this$props3.max,
-          startPoint = _this$props3.startPoint,
-          reverse = _this$props3.reverse,
-          handleGenerator = _this$props3.handle;
-      var _this$state = this.state,
-          value = _this$state.value,
-          dragging = _this$state.dragging;
-      var offset = this.calcOffset(value);
-      var handle = handleGenerator({
-        className: "".concat(prefixCls, "-handle"),
-        prefixCls: prefixCls,
-        vertical: vertical,
-        offset: offset,
-        value: value,
-        dragging: dragging,
-        disabled: disabled,
-        min: min,
-        max: max,
-        reverse: reverse,
-        index: 0,
-        tabIndex: tabIndex,
-        ariaLabel: ariaLabelForHandle,
-        ariaLabelledBy: ariaLabelledByForHandle,
-        ariaValueTextFormatter: ariaValueTextFormatterForHandle,
-        style: handleStyle[0] || handleStyle,
-        ref: function ref(h) {
-          return _this2.saveHandle(0, h);
+  var sortedCacheValues = React.useMemo(function () {
+    return _toConsumableArray(cacheValues).sort(function (a, b) {
+      return a - b;
+    });
+  }, [cacheValues]); // Provide a range values with included [min, max]
+  // Used for Track, Mark & Dot
+
+  var _React$useMemo = React.useMemo(function () {
+    if (!range) {
+      return [mergedMin, sortedCacheValues[0]];
+    }
+
+    return [sortedCacheValues[0], sortedCacheValues[sortedCacheValues.length - 1]];
+  }, [sortedCacheValues, range, mergedMin]),
+      _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+      includedStart = _React$useMemo2[0],
+      includedEnd = _React$useMemo2[1]; // ============================= Refs =============================
+
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        handlesRef.current.focus(0);
+      },
+      blur: function blur() {
+        var _document = document,
+            activeElement = _document.activeElement;
+
+        if (containerRef.current.contains(activeElement)) {
+          activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
         }
-      });
-      var trackOffset = startPoint !== undefined ? this.calcOffset(startPoint) : 0;
-      var mergedTrackStyle = trackStyle[0] || trackStyle;
-      var track = /*#__PURE__*/React.createElement(Track, {
-        className: "".concat(prefixCls, "-track"),
-        vertical: vertical,
-        included: included,
-        offset: trackOffset,
-        reverse: reverse,
-        length: offset - trackOffset,
-        style: _objectSpread(_objectSpread({}, minimumTrackStyle), mergedTrackStyle)
-      });
-      return {
-        tracks: track,
-        handles: handle
-      };
+      }
+    };
+  }); // ========================== Auto Focus ==========================
+
+  React.useEffect(function () {
+    if (autoFocus) {
+      handlesRef.current.focus(0);
     }
-  }]);
+  }, []); // =========================== Context ============================
 
-  return Slider;
-}(React.Component);
+  var context = React.useMemo(function () {
+    return {
+      min: mergedMin,
+      max: mergedMax,
+      direction: direction,
+      disabled: disabled,
+      step: mergedStep,
+      included: included,
+      includedStart: includedStart,
+      includedEnd: includedEnd,
+      range: range,
+      tabIndex: tabIndex,
+      ariaLabelForHandle: ariaLabelForHandle,
+      ariaLabelledByForHandle: ariaLabelledByForHandle,
+      ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle
+    };
+  }, [mergedMin, mergedMax, direction, disabled, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle]); // ============================ Render ============================
 
-export default createSlider(Slider);
+  return /*#__PURE__*/React.createElement(SliderContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-vertical"), vertical), _defineProperty(_classNames, "".concat(prefixCls, "-horizontal"), !vertical), _classNames)),
+    style: style,
+    onMouseDown: onSliderMouseDown
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-rail"),
+    style: railStyle
+  }), /*#__PURE__*/React.createElement(Tracks, {
+    prefixCls: prefixCls,
+    style: trackStyle,
+    values: sortedCacheValues,
+    startPoint: startPoint,
+    onStartMove: mergedDraggableTrack ? onStartMove : null
+  }), /*#__PURE__*/React.createElement(Steps, {
+    prefixCls: prefixCls,
+    marks: markList,
+    dots: dots,
+    style: dotStyle,
+    activeStyle: activeDotStyle
+  }), /*#__PURE__*/React.createElement(Handles, {
+    ref: handlesRef,
+    prefixCls: prefixCls,
+    style: handleStyle,
+    values: cacheValues,
+    draggingIndex: draggingIndex,
+    onStartMove: onStartMove,
+    onOffsetChange: onHandleOffsetChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    handleRender: handleRender
+  }), /*#__PURE__*/React.createElement(Marks, {
+    prefixCls: prefixCls,
+    marks: markList,
+    onClick: changeToCloseValue
+  })));
+});
+
+if (process.env.NODE_ENV !== 'production') {
+  Slider.displayName = 'Slider';
+}
+
+export default Slider;

lib/index.d.ts

@@ -1,14 +0,4 @@
-/// <reference types="react" />
-import { SliderProps } from './Slider';
-import Range, { RangeProps } from './Range';
-import Handle, { HandleProps } from './Handle';
-import createSliderWithTooltip from './createSliderWithTooltip';
-import SliderTooltip from './common/SliderTooltip';
-interface CompoundedComponent extends React.ComponentClass<SliderProps> {
-    Range: typeof Range;
-    Handle: typeof Handle;
-    createSliderWithTooltip: typeof createSliderWithTooltip;
-}
-declare const InternalSlider: CompoundedComponent;
-export default InternalSlider;
-export { SliderProps, Range, RangeProps, Handle, HandleProps, createSliderWithTooltip, SliderTooltip, };
+import Slider from './Slider';
+import type { SliderProps } from './Slider';
+export type { SliderProps };
+export default Slider;

lib/index.js

@@ -8,26 +8,2 @@ "use strict";
 });
-Object.defineProperty(exports, "Range", {
-  enumerable: true,
-  get: function get() {
-    return _Range.default;
-  }
-});
-Object.defineProperty(exports, "Handle", {
-  enumerable: true,
-  get: function get() {
-    return _Handle.default;
-  }
-});
-Object.defineProperty(exports, "createSliderWithTooltip", {
-  enumerable: true,
-  get: function get() {
-    return _createSliderWithTooltip.default;
-  }
-});
-Object.defineProperty(exports, "SliderTooltip", {
-  enumerable: true,
-  get: function get() {
-    return _SliderTooltip.default;
-  }
-});
 exports.default = void 0;
@@ -37,15 +13,3 @@
 
-var _Range = _interopRequireDefault(require("./Range"));
-
-var _Handle = _interopRequireDefault(require("./Handle"));
-
-var _createSliderWithTooltip = _interopRequireDefault(require("./createSliderWithTooltip"));
-
-var _SliderTooltip = _interopRequireDefault(require("./common/SliderTooltip"));
-
-var InternalSlider = _Slider.default;
-InternalSlider.Range = _Range.default;
-InternalSlider.Handle = _Handle.default;
-InternalSlider.createSliderWithTooltip = _createSliderWithTooltip.default;
-var _default = InternalSlider;
+var _default = _Slider.default;
 exports.default = _default;

lib/interface.d.ts

@@ -1,48 +0,4 @@
-import type * as React from 'react';
-export interface GenericSliderProps {
-    min?: number;
-    max?: number;
-    step?: number | null;
-    prefixCls?: string;
-    vertical?: boolean;
-    included?: boolean;
-    disabled?: boolean;
-    reverse?: boolean;
-    trackStyle?: React.CSSProperties | React.CSSProperties[];
-    handleStyle?: React.CSSProperties | React.CSSProperties[];
-    autoFocus?: boolean;
-    onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
-    onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
-    className?: string;
-    marks?: Record<number, React.ReactNode | {
-        style?: React.CSSProperties;
-        label?: string;
-    }>;
-    dots?: boolean;
-    maximumTrackStyle?: React.CSSProperties;
-    style?: React.CSSProperties;
-    railStyle?: React.CSSProperties;
-    dotStyle?: React.CSSProperties;
-    activeDotStyle?: React.CSSProperties;
-    draggableTrack?: boolean;
-}
-export interface GenericSliderState {
-    value?: any;
-    bounds?: number[];
-}
-export interface GenericSliderClass<Props, State> extends React.Component<Props, State> {
-    onStart: (position: number) => void;
-    positionGetValue: (pos: number) => number[];
-    onEnd: (force?: boolean) => void;
-    onMove: (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, position: number, inTrack: boolean, b: number[]) => void;
-    onKeyboard: (e: React.KeyboardEvent<HTMLDivElement>) => void;
-    onChange: (state: {
-        value: any;
-    }) => void;
-    trimAlignValue: (v: number, nextProps?: Partial<Props>) => number;
-    getUpperBound: () => number;
-    getLowerBound: () => number;
-}
-export interface GenericSlider<Props, State> extends Pick<React.ComponentClass<Props, State>, 'displayName' | 'defaultProps' | 'propTypes' | 'contextType' | 'contextTypes' | 'childContextTypes'> {
-    new (props: Props, context?: any): GenericSliderClass<Props, State>;
-}
+import type React from 'react';
+export declare type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt';
+export declare type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number) => void;
+export declare type AriaValueFormat = (value: number) => string;

lib/Slider.d.ts

@@ -1,50 +0,64 @@
-import React from 'react';
-import type { GenericSliderProps, GenericSliderState } from './interface';
-export interface SliderProps extends GenericSliderProps {
-    value?: number;
-    defaultValue?: number;
+import * as React from 'react';
+import type { HandlesProps } from './Handles';
+import type { AriaValueFormat } from './interface';
+import type { MarkObj } from './Marks';
+/**
+ * New:
+ * - click mark to update range value
+ * - handleRender
+ * - Fix handle with count not correct
+ * - Fix pushable not work in some case
+ * - No more FindDOMNode
+ * - Move all position related style into inline style
+ * - Key: up is plus, down is minus
+ * - fix Key with step = null not align with marks
+ * - Change range should not trigger onChange
+ * - keyboard support pushable
+ */
+export interface SliderProps<ValueType = number | number[]> {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
+    range?: boolean;
+    count?: number;
     min?: number;
     max?: number;
     step?: number | null;
-    prefixCls?: string;
-    onChange?: (value: number) => void;
-    onBeforeChange?: (value: number) => void;
-    onAfterChange?: (value: number) => void;
+    value?: ValueType;
+    defaultValue?: ValueType;
+    onChange?: (value: ValueType) => void;
+    /** @deprecated It's always better to use `onChange` instead */
+    onBeforeChange?: (value: ValueType) => void;
+    /** @deprecated It's always better to use `onChange` instead */
+    onAfterChange?: (value: ValueType) => void;
+    allowCross?: boolean;
+    pushable?: boolean | number;
+    /** range only */
+    draggableTrack?: boolean;
+    reverse?: boolean;
     vertical?: boolean;
     included?: boolean;
-    disabled?: boolean;
-    reverse?: boolean;
-    minimumTrackStyle?: React.CSSProperties;
-    trackStyle?: React.CSSProperties;
-    handleStyle?: React.CSSProperties;
-    tabIndex?: number;
-    ariaLabelForHandle?: string;
-    ariaLabelledByForHandle?: string;
-    ariaValueTextFormatterForHandle?: (value: number) => string;
     startPoint?: number;
-    handle?: (props: {
-        className: string;
-        prefixCls?: string;
-        vertical?: boolean;
-        offset: number;
-        value: number;
-        dragging?: boolean;
-        disabled?: boolean;
-        min?: number;
-        max?: number;
-        reverse?: boolean;
-        index: number;
-        tabIndex?: number;
-        ariaLabel: string;
-        ariaLabelledBy: string;
-        ariaValueTextFormatter?: (value: number) => string;
-        style?: React.CSSProperties;
-        ref?: React.Ref<any>;
-    }) => React.ReactElement;
+    trackStyle?: React.CSSProperties | React.CSSProperties[];
+    handleStyle?: React.CSSProperties | React.CSSProperties[];
+    railStyle?: React.CSSProperties;
+    dotStyle?: React.CSSProperties;
+    activeDotStyle?: React.CSSProperties;
+    marks?: Record<string | number, React.ReactNode | MarkObj>;
+    dots?: boolean;
+    handleRender?: HandlesProps['handleRender'];
+    tabIndex?: number | number[];
+    ariaLabelForHandle?: string | string[];
+    ariaLabelledByForHandle?: string | string[];
+    ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
 }
-export interface SliderState extends GenericSliderState {
-    value: number;
-    dragging: boolean;
+export interface SliderRef {
+    focus: () => void;
+    blur: () => void;
 }
-declare const _default: React.ComponentClass<SliderProps, SliderState>;
-export default _default;
+declare const Slider: React.ForwardRefExoticComponent<SliderProps<number | number[]> & React.RefAttributes<SliderRef>>;
+export default Slider;

lib/Slider.js

@@ -12,286 +12,432 @@ "use strict";
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var React = _interopRequireWildcard(require("react"));
 
-var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
+var _shallowequal = _interopRequireDefault(require("shallowequal"));
+
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+
+var _Handles = _interopRequireDefault(require("./Handles"));
+
+var _useDrag3 = _interopRequireDefault(require("./hooks/useDrag"));
+
+var _context = _interopRequireDefault(require("./context"));
+
+var _Tracks = _interopRequireDefault(require("./Tracks"));
+
+var _Marks = _interopRequireDefault(require("./Marks"));
+
+var _Steps = _interopRequireDefault(require("./Steps"));
+
+var _useOffset3 = _interopRequireDefault(require("./hooks/useOffset"));
+
 var _warning = _interopRequireDefault(require("rc-util/lib/warning"));
 
-var _Track = _interopRequireDefault(require("./common/Track"));
+var Slider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _classNames;
 
-var _createSlider = _interopRequireDefault(require("./common/createSlider"));
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'rc-slider' : _props$prefixCls,
+      className = props.className,
+      style = props.style,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      autoFocus = props.autoFocus,
+      onFocus = props.onFocus,
+      onBlur = props.onBlur,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      value = props.value,
+      defaultValue = props.defaultValue,
+      range = props.range,
+      count = props.count,
+      onChange = props.onChange,
+      onBeforeChange = props.onBeforeChange,
+      onAfterChange = props.onAfterChange,
+      _props$allowCross = props.allowCross,
+      allowCross = _props$allowCross === void 0 ? true : _props$allowCross,
+      _props$pushable = props.pushable,
+      pushable = _props$pushable === void 0 ? false : _props$pushable,
+      draggableTrack = props.draggableTrack,
+      reverse = props.reverse,
+      vertical = props.vertical,
+      _props$included = props.included,
+      included = _props$included === void 0 ? true : _props$included,
+      startPoint = props.startPoint,
+      trackStyle = props.trackStyle,
+      handleStyle = props.handleStyle,
+      railStyle = props.railStyle,
+      dotStyle = props.dotStyle,
+      activeDotStyle = props.activeDotStyle,
+      marks = props.marks,
+      dots = props.dots,
+      handleRender = props.handleRender,
+      _props$tabIndex = props.tabIndex,
+      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+      ariaLabelForHandle = props.ariaLabelForHandle,
+      ariaLabelledByForHandle = props.ariaLabelledByForHandle,
+      ariaValueTextFormatterForHandle = props.ariaValueTextFormatterForHandle;
+  var handlesRef = React.useRef();
+  var containerRef = React.useRef();
+  var direction = React.useMemo(function () {
+    if (vertical) {
+      return reverse ? 'ttb' : 'btt';
+    }
 
-var utils = _interopRequireWildcard(require("./utils"));
+    return reverse ? 'rtl' : 'ltr';
+  }, [reverse, vertical]); // ============================ Range =============================
 
-var Slider = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Slider, _React$Component);
+  var mergedMin = React.useMemo(function () {
+    return isFinite(min) ? min : 0;
+  }, [min]);
+  var mergedMax = React.useMemo(function () {
+    return isFinite(max) ? max : 100;
+  }, [max]); // ============================= Step =============================
 
-  var _super = (0, _createSuper2.default)(Slider);
+  var mergedStep = React.useMemo(function () {
+    return step !== null && step <= 0 ? 1 : step;
+  }, [step]); // ============================= Push =============================
 
-  /* eslint-enable */
-  function Slider(props) {
-    var _this;
+  var mergedPush = React.useMemo(function () {
+    if (pushable === true) {
+      return mergedStep;
+    }
 
-    (0, _classCallCheck2.default)(this, Slider);
-    _this = _super.call(this, props);
+    return pushable >= 0 ? pushable : false;
+  }, [pushable, mergedStep]); // ============================ Marks =============================
 
-    _this.positionGetValue = function (position) {
-      return [];
-    };
+  var markList = React.useMemo(function () {
+    var keys = Object.keys(marks || {});
+    return keys.map(function (key) {
+      var mark = marks[key];
+      var markObj = {
+        value: Number(key)
+      };
 
-    _this.onEnd = function (force) {
-      var dragging = _this.state.dragging;
+      if (mark && (0, _typeof2.default)(mark) === 'object' && ! /*#__PURE__*/React.isValidElement(mark) && ('label' in mark || 'style' in mark)) {
+        markObj.style = mark.style;
+        markObj.label = mark.label;
+      } else {
+        markObj.label = mark;
+      }
 
-      _this.removeDocumentEvents();
+      return markObj;
+    }).sort(function (a, b) {
+      return a.value - b.value;
+    });
+  }, [marks]); // ============================ Format ============================
 
-      if (dragging || force) {
-        _this.props.onAfterChange(_this.getValue());
+  var _useOffset = (0, _useOffset3.default)(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush),
+      _useOffset2 = (0, _slicedToArray2.default)(_useOffset, 2),
+      formatValue = _useOffset2[0],
+      offsetValues = _useOffset2[1]; // ============================ Values ============================
+
+
+  var _useMergedState = (0, _useMergedState3.default)(defaultValue, {
+    value: value
+  }),
+      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+      mergedValue = _useMergedState2[0],
+      setValue = _useMergedState2[1];
+
+  var rawValues = React.useMemo(function () {
+    var valueList = mergedValue === null || mergedValue === undefined ? [] : Array.isArray(mergedValue) ? mergedValue : [mergedValue];
+
+    var _valueList = (0, _slicedToArray2.default)(valueList, 1),
+        _valueList$ = _valueList[0],
+        val0 = _valueList$ === void 0 ? mergedMin : _valueList$;
+
+    var returnValues = mergedValue === null ? [] : [val0]; // Format as range
+
+    if (range) {
+      returnValues = (0, _toConsumableArray2.default)(valueList); // When count provided or value is `undefined`, we fill values
+
+      if (count || mergedValue === undefined) {
+        var pointCount = count >= 0 ? count + 1 : 2;
+        returnValues = returnValues.slice(0, pointCount); // Fill with count
+
+        while (returnValues.length < pointCount) {
+          var _returnValues;
+
+          returnValues.push((_returnValues = returnValues[returnValues.length - 1]) !== null && _returnValues !== void 0 ? _returnValues : mergedMin);
+        }
       }
 
-      _this.setState({
-        dragging: false
+      returnValues.sort(function (a, b) {
+        return a - b;
       });
-    };
+    } // Align in range
 
-    var defaultValue = props.defaultValue !== undefined ? props.defaultValue : props.min;
-    var value = props.value !== undefined ? props.value : defaultValue;
-    _this.state = {
-      value: _this.trimAlignValue(value),
-      dragging: false
-    };
-    (0, _warning.default)(!('minimumTrackStyle' in props), 'minimumTrackStyle will be deprecated, please use trackStyle instead.');
-    (0, _warning.default)(!('maximumTrackStyle' in props), 'maximumTrackStyle will be deprecated, please use railStyle instead.');
-    return _this;
-  }
-  /**
-   * [Legacy] Used for inherit other component.
-   * It's a bad code style which should be refactor.
-   */
 
-  /* eslint-disable @typescript-eslint/no-unused-vars, class-methods-use-this */
+    returnValues.forEach(function (val, index) {
+      returnValues[index] = formatValue(val);
+    });
+    return returnValues;
+  }, [mergedValue, range, mergedMin, count, formatValue]); // =========================== onChange ===========================
 
+  var rawValuesRef = React.useRef(rawValues);
+  rawValuesRef.current = rawValues;
 
-  (0, _createClass2.default)(Slider, [{
-    key: "calcValueByPos",
-    value: function calcValueByPos(value) {
-      return 0;
-    }
-  }, {
-    key: "calcOffset",
-    value: function calcOffset(value) {
-      return 0;
-    }
-  }, {
-    key: "saveHandle",
-    value: function saveHandle(index, h) {}
-  }, {
-    key: "removeDocumentEvents",
-    value: function removeDocumentEvents() {}
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props = this.props,
-          min = _this$props.min,
-          max = _this$props.max,
-          value = _this$props.value,
-          onChange = _this$props.onChange;
+  var getTriggerValue = function getTriggerValue(triggerValues) {
+    return range ? triggerValues : triggerValues[0];
+  };
 
-      if (!('min' in this.props || 'max' in this.props)) {
-        return;
-      }
+  var triggerChange = function triggerChange(nextValues) {
+    // Order first
+    var cloneNextValues = (0, _toConsumableArray2.default)(nextValues).sort(function (a, b) {
+      return a - b;
+    }); // Trigger event if needed
 
-      var theValue = value !== undefined ? value : prevState.value;
-      var nextValue = this.trimAlignValue(theValue, this.props);
+    if (onChange && !(0, _shallowequal.default)(cloneNextValues, rawValuesRef.current)) {
+      onChange(getTriggerValue(cloneNextValues));
+    } // We set this later since it will re-render component immediately
 
-      if (nextValue === prevState.value) {
-        return;
-      } // eslint-disable-next-line
 
+    setValue(cloneNextValues);
+  };
 
-      this.setState({
-        value: nextValue
-      });
+  var changeToCloseValue = function changeToCloseValue(newValue) {
+    if (!disabled) {
+      var valueIndex = 0;
+      var valueDist = mergedMax - mergedMin;
+      rawValues.forEach(function (val, index) {
+        var dist = Math.abs(newValue - val);
 
-      if (!(min === prevProps.min && max === prevProps.max) && utils.isValueOutOfRange(theValue, this.props)) {
-        onChange(nextValue);
+        if (dist <= valueDist) {
+          valueDist = dist;
+          valueIndex = index;
+        }
+      }); // Create new values
+
+      var cloneNextValues = (0, _toConsumableArray2.default)(rawValues);
+      cloneNextValues[valueIndex] = newValue; // Fill value to match default 2
+
+      if (range && !rawValues.length && count === undefined) {
+        cloneNextValues.push(newValue);
       }
+
+      triggerChange(cloneNextValues);
+      onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(cloneNextValues);
     }
-  }, {
-    key: "onChange",
-    value: function onChange(state) {
-      var props = this.props;
-      var isNotControlled = !('value' in props);
-      var nextState = state.value > this.props.max ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-        value: this.props.max
-      }) : state;
+  }; // ============================ Click =============================
 
-      if (isNotControlled) {
-        this.setState(nextState);
-      }
 
-      var changedValue = nextState.value;
-      props.onChange(changedValue);
+  var onSliderMouseDown = function onSliderMouseDown(e) {
+    e.preventDefault();
+
+    var _containerRef$current = containerRef.current.getBoundingClientRect(),
+        width = _containerRef$current.width,
+        height = _containerRef$current.height,
+        left = _containerRef$current.left,
+        top = _containerRef$current.top,
+        bottom = _containerRef$current.bottom,
+        right = _containerRef$current.right;
+
+    var clientX = e.clientX,
+        clientY = e.clientY;
+    var percent;
+
+    switch (direction) {
+      case 'btt':
+        percent = (bottom - clientY) / height;
+        break;
+
+      case 'ttb':
+        percent = (clientY - top) / height;
+        break;
+
+      case 'rtl':
+        percent = (right - clientX) / width;
+        break;
+
+      default:
+        percent = (clientX - left) / width;
     }
-  }, {
-    key: "onStart",
-    value: function onStart(position) {
-      this.setState({
-        dragging: true
-      });
-      var props = this.props;
-      var prevValue = this.getValue();
-      props.onBeforeChange(prevValue);
-      var value = this.calcValueByPos(position);
-      this.startValue = value;
-      this.startPosition = position;
-      if (value === prevValue) return;
-      this.prevMovedHandleIndex = 0;
-      this.onChange({
-        value: value
-      });
+
+    var nextValue = mergedMin + percent * (mergedMax - mergedMin);
+    changeToCloseValue(formatValue(nextValue));
+  }; // =========================== Keyboard ===========================
+
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      keyboardValue = _React$useState2[0],
+      setKeyboardValue = _React$useState2[1];
+
+  var onHandleOffsetChange = function onHandleOffsetChange(offset, valueIndex) {
+    if (!disabled) {
+      var next = offsetValues(rawValues, offset, valueIndex);
+      onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(getTriggerValue(rawValues));
+      triggerChange(next.values);
+      onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(getTriggerValue(next.values));
+      setKeyboardValue(next.value);
     }
-  }, {
-    key: "onMove",
-    value: function onMove(e, position) {
-      utils.pauseEvent(e);
-      var oldValue = this.state.value;
-      var value = this.calcValueByPos(position);
-      if (value === oldValue) return;
-      this.onChange({
-        value: value
-      });
+  };
+
+  React.useEffect(function () {
+    if (keyboardValue !== null) {
+      var valueIndex = rawValues.indexOf(keyboardValue);
+
+      if (valueIndex >= 0) {
+        handlesRef.current.focus(valueIndex);
+      }
     }
-  }, {
-    key: "onKeyboard",
-    value: function onKeyboard(e) {
-      var _this$props2 = this.props,
-          reverse = _this$props2.reverse,
-          vertical = _this$props2.vertical;
-      var valueMutator = utils.getKeyboardValueMutator(e, vertical, reverse);
 
-      if (valueMutator) {
-        utils.pauseEvent(e);
-        var state = this.state;
-        var oldValue = state.value;
-        var mutatedValue = valueMutator(oldValue, this.props);
-        var value = this.trimAlignValue(mutatedValue);
-        if (value === oldValue) return;
-        this.onChange({
-          value: value
-        });
-        this.props.onAfterChange(value);
-        this.onEnd();
+    setKeyboardValue(null);
+  }, [keyboardValue]); // ============================= Drag =============================
+
+  var mergedDraggableTrack = React.useMemo(function () {
+    if (draggableTrack && mergedStep === null) {
+      if (process.env.NODE_ENV !== 'production') {
+        (0, _warning.default)(false, '`draggableTrack` is not supported when `step` is `null`.');
       }
+
+      return false;
     }
-  }, {
-    key: "getValue",
-    value: function getValue() {
-      return this.state.value;
+
+    return draggableTrack;
+  }, [draggableTrack, mergedStep]);
+
+  var finishChange = function finishChange() {
+    onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(getTriggerValue(rawValuesRef.current));
+  };
+
+  var _useDrag = (0, _useDrag3.default)(containerRef, direction, rawValues, mergedMin, mergedMax, formatValue, triggerChange, finishChange, offsetValues),
+      _useDrag2 = (0, _slicedToArray2.default)(_useDrag, 4),
+      draggingIndex = _useDrag2[0],
+      draggingValue = _useDrag2[1],
+      cacheValues = _useDrag2[2],
+      onStartDrag = _useDrag2[3];
+
+  var onStartMove = function onStartMove(e, valueIndex) {
+    onStartDrag(e, valueIndex);
+    onBeforeChange === null || onBeforeChange === void 0 ? void 0 : onBeforeChange(getTriggerValue(rawValuesRef.current));
+  }; // Auto focus for updated handle
+
+
+  var dragging = draggingIndex !== -1;
+  React.useEffect(function () {
+    if (!dragging) {
+      var valueIndex = rawValues.lastIndexOf(draggingValue);
+      handlesRef.current.focus(valueIndex);
     }
-  }, {
-    key: "getLowerBound",
-    value: function getLowerBound() {
-      var minPoint = this.props.startPoint || this.props.min;
-      return this.state.value > minPoint ? minPoint : this.state.value;
-    }
-  }, {
-    key: "getUpperBound",
-    value: function getUpperBound() {
-      if (this.state.value < this.props.startPoint) {
-        return this.props.startPoint;
-      }
+  }, [dragging]); // =========================== Included ===========================
 
-      return this.state.value;
+  var sortedCacheValues = React.useMemo(function () {
+    return (0, _toConsumableArray2.default)(cacheValues).sort(function (a, b) {
+      return a - b;
+    });
+  }, [cacheValues]); // Provide a range values with included [min, max]
+  // Used for Track, Mark & Dot
+
+  var _React$useMemo = React.useMemo(function () {
+    if (!range) {
+      return [mergedMin, sortedCacheValues[0]];
     }
-  }, {
-    key: "trimAlignValue",
-    value: function trimAlignValue(v) {
-      var nextProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
-      if (v === null) {
-        return null;
+    return [sortedCacheValues[0], sortedCacheValues[sortedCacheValues.length - 1]];
+  }, [sortedCacheValues, range, mergedMin]),
+      _React$useMemo2 = (0, _slicedToArray2.default)(_React$useMemo, 2),
+      includedStart = _React$useMemo2[0],
+      includedEnd = _React$useMemo2[1]; // ============================= Refs =============================
+
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        handlesRef.current.focus(0);
+      },
+      blur: function blur() {
+        var _document = document,
+            activeElement = _document.activeElement;
+
+        if (containerRef.current.contains(activeElement)) {
+          activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur();
+        }
       }
+    };
+  }); // ========================== Auto Focus ==========================
 
-      var mergedProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props), nextProps);
-      var val = utils.ensureValueInRange(v, mergedProps);
-      return utils.ensureValuePrecision(val, mergedProps);
+  React.useEffect(function () {
+    if (autoFocus) {
+      handlesRef.current.focus(0);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  }, []); // =========================== Context ============================
 
-      var _this$props3 = this.props,
-          prefixCls = _this$props3.prefixCls,
-          vertical = _this$props3.vertical,
-          included = _this$props3.included,
-          disabled = _this$props3.disabled,
-          minimumTrackStyle = _this$props3.minimumTrackStyle,
-          trackStyle = _this$props3.trackStyle,
-          handleStyle = _this$props3.handleStyle,
-          tabIndex = _this$props3.tabIndex,
-          ariaLabelForHandle = _this$props3.ariaLabelForHandle,
-          ariaLabelledByForHandle = _this$props3.ariaLabelledByForHandle,
-          ariaValueTextFormatterForHandle = _this$props3.ariaValueTextFormatterForHandle,
-          min = _this$props3.min,
-          max = _this$props3.max,
-          startPoint = _this$props3.startPoint,
-          reverse = _this$props3.reverse,
-          handleGenerator = _this$props3.handle;
-      var _this$state = this.state,
-          value = _this$state.value,
-          dragging = _this$state.dragging;
-      var offset = this.calcOffset(value);
-      var handle = handleGenerator({
-        className: "".concat(prefixCls, "-handle"),
-        prefixCls: prefixCls,
-        vertical: vertical,
-        offset: offset,
-        value: value,
-        dragging: dragging,
-        disabled: disabled,
-        min: min,
-        max: max,
-        reverse: reverse,
-        index: 0,
-        tabIndex: tabIndex,
-        ariaLabel: ariaLabelForHandle,
-        ariaLabelledBy: ariaLabelledByForHandle,
-        ariaValueTextFormatter: ariaValueTextFormatterForHandle,
-        style: handleStyle[0] || handleStyle,
-        ref: function ref(h) {
-          return _this2.saveHandle(0, h);
-        }
-      });
-      var trackOffset = startPoint !== undefined ? this.calcOffset(startPoint) : 0;
-      var mergedTrackStyle = trackStyle[0] || trackStyle;
+  var context = React.useMemo(function () {
+    return {
+      min: mergedMin,
+      max: mergedMax,
+      direction: direction,
+      disabled: disabled,
+      step: mergedStep,
+      included: included,
+      includedStart: includedStart,
+      includedEnd: includedEnd,
+      range: range,
+      tabIndex: tabIndex,
+      ariaLabelForHandle: ariaLabelForHandle,
+      ariaLabelledByForHandle: ariaLabelledByForHandle,
+      ariaValueTextFormatterForHandle: ariaValueTextFormatterForHandle
+    };
+  }, [mergedMin, mergedMax, direction, disabled, mergedStep, included, includedStart, includedEnd, range, tabIndex, ariaLabelForHandle, ariaLabelledByForHandle, ariaValueTextFormatterForHandle]); // ============================ Render ============================
 
-      var track = /*#__PURE__*/_react.default.createElement(_Track.default, {
-        className: "".concat(prefixCls, "-track"),
-        vertical: vertical,
-        included: included,
-        offset: trackOffset,
-        reverse: reverse,
-        length: offset - trackOffset,
-        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, minimumTrackStyle), mergedTrackStyle)
-      });
+  return /*#__PURE__*/React.createElement(_context.default.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), vertical), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-horizontal"), !vertical), _classNames)),
+    style: style,
+    onMouseDown: onSliderMouseDown
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-rail"),
+    style: railStyle
+  }), /*#__PURE__*/React.createElement(_Tracks.default, {
+    prefixCls: prefixCls,
+    style: trackStyle,
+    values: sortedCacheValues,
+    startPoint: startPoint,
+    onStartMove: mergedDraggableTrack ? onStartMove : null
+  }), /*#__PURE__*/React.createElement(_Steps.default, {
+    prefixCls: prefixCls,
+    marks: markList,
+    dots: dots,
+    style: dotStyle,
+    activeStyle: activeDotStyle
+  }), /*#__PURE__*/React.createElement(_Handles.default, {
+    ref: handlesRef,
+    prefixCls: prefixCls,
+    style: handleStyle,
+    values: cacheValues,
+    draggingIndex: draggingIndex,
+    onStartMove: onStartMove,
+    onOffsetChange: onHandleOffsetChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    handleRender: handleRender
+  }), /*#__PURE__*/React.createElement(_Marks.default, {
+    prefixCls: prefixCls,
+    marks: markList,
+    onClick: changeToCloseValue
+  })));
+});
 
-      return {
-        tracks: track,
-        handles: handle
-      };
-    }
-  }]);
-  return Slider;
-}(_react.default.Component);
+if (process.env.NODE_ENV !== 'production') {
+  Slider.displayName = 'Slider';
+}
 
-var _default = (0, _createSlider.default)(Slider);
-
+var _default = Slider;
 exports.default = _default;

package.json

 {
   "name": "rc-slider",
-  "version": "9.7.5",
+  "version": "10.0.0-alpha.0",
   "description": "Slider UI component for React",
@@ -55,6 +55,8 @@ "engines": {
     "rc-tooltip": "^5.0.1",
-    "rc-util": "^5.16.1",
+    "rc-util": "^5.18.1",
     "shallowequal": "^1.1.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
     "@types/classnames": "^2.2.9",
@@ -64,2 +66,3 @@ "@types/jest": "^26.0.0",
     "@types/react-dom": "^16.9.0",
+    "@types/shallowequal": "^1.1.1",
     "@umijs/fabric": "^2.0.0",
@@ -81,4 +84,5 @@ "cross-env": "^7.0.0",
     "react-dom": "^16.0.0",
+    "regenerator-runtime": "^0.13.9",
     "typescript": "^4.0.5"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

65

increased by25%

Worsened metrics

Total package byte prevSize

132902

decreased by-27.32%

Dev dependency count

25

increased by19.05%

Lines of code

2934

decreased by-34.74%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

8

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedrc-util@^5.18.1