rc-slider - npm Package Compare versions

Comparing version 11.0.1 to 11.0.2

es/Handles/index.d.ts

@@ -26,4 +26,5 @@ import * as React from 'react';
     focus: (index: number) => void;
+    hideHelp: VoidFunction;
 }
 declare const Handles: React.ForwardRefExoticComponent<HandlesProps & React.RefAttributes<HandlesRef>>;
 export default Handles;

es/Handles/index.js

@@ -7,2 +7,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { flushSync } from 'react-dom';
 import { getIndex } from "../util";
@@ -23,25 +24,40 @@ import Handle from "./Handle";
   var handlesRef = React.useRef({});
-  React.useImperativeHandle(ref, function () {
-    return {
-      focus: function focus(index) {
-        var _handlesRef$current$i;
-        (_handlesRef$current$i = handlesRef.current[index]) === null || _handlesRef$current$i === void 0 || _handlesRef$current$i.focus();
-      }
-    };
-  });
 
   // =========================== Active ===========================
-  var _React$useState = React.useState(-1),
+  var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    activeIndex = _React$useState2[0],
-    setActiveIndex = _React$useState2[1];
+    activeVisible = _React$useState2[0],
+    setActiveVisible = _React$useState2[1];
+  var _React$useState3 = React.useState(-1),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeIndex = _React$useState4[0],
+    setActiveIndex = _React$useState4[1];
+  var onActive = function onActive(index) {
+    setActiveIndex(index);
+    setActiveVisible(true);
+  };
   var onHandleFocus = function onHandleFocus(e, index) {
-    setActiveIndex(index);
+    onActive(index);
     onFocus === null || onFocus === void 0 || onFocus(e);
   };
   var onHandleMouseEnter = function onHandleMouseEnter(e, index) {
-    setActiveIndex(index);
+    onActive(index);
   };
 
   // =========================== Render ===========================
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus(index) {
+        var _handlesRef$current$i;
+        (_handlesRef$current$i = handlesRef.current[index]) === null || _handlesRef$current$i === void 0 || _handlesRef$current$i.focus();
+      },
+      hideHelp: function hideHelp() {
+        flushSync(function () {
+          setActiveVisible(false);
+        });
+      }
+    };
+  });
+
+  // =========================== Render ===========================
   // Handle Props
@@ -73,3 +89,3 @@ var handleProps = _objectSpread({
     }, handleProps));
-  }), activeHandleRender && /*#__PURE__*/React.createElement(Handle, _extends({
+  }), activeHandleRender && activeVisible && /*#__PURE__*/React.createElement(Handle, _extends({
     key: "a11y"
@@ -76,0 +92,0 @@ }, handleProps, {

es/hooks/useDrag.d.ts

 import * as React from 'react';
 import type { Direction, OnStartMove } from '../interface';
 import type { OffsetValues } from './useOffset';
-declare function useDrag(containerRef: React.RefObject<HTMLDivElement>, direction: Direction, rawValues: number[], min: number, max: number, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: () => void, offsetValues: OffsetValues, editable: boolean): [
+declare function useDrag(containerRef: React.RefObject<HTMLDivElement>, direction: Direction, rawValues: number[], min: number, max: number, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: (draggingDelete: boolean) => void, offsetValues: OffsetValues, editable: boolean): [
     draggingIndex: number,
@@ -6,0 +6,0 @@ draggingValue: number,

es/hooks/useDrag.js

@@ -116,2 +116,5 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 
+    // We declare it here since closure can't get outer latest value
+    var deleteMark = false;
+
     // Moving
@@ -149,3 +152,3 @@ var onMouseMove = function onMouseMove(event) {
       // Check if need mark remove
-      var deleteMark = editable ? Math.abs(removeDist) > REMOVE_DIST : false;
+      deleteMark = editable ? Math.abs(removeDist) > REMOVE_DIST : false;
       setDraggingDelete(deleteMark);
@@ -164,4 +167,5 @@ updateCacheValue(valueIndex, offSetPercent, deleteMark);
       mouseUpEventRef.current = null;
+      finishChange(deleteMark);
       setDraggingIndex(-1);
-      finishChange();
+      setDraggingDelete(false);
     };
@@ -168,0 +172,0 @@ document.addEventListener('mouseup', onMouseUp);

es/Slider.js

@@ -209,3 +209,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
   });
-  var finishChange = useEvent(function () {
+  var finishChange = useEvent(function (draggingDelete) {
+    // Trigger from `useDrag` will tell if it's a delete action
+    if (draggingDelete) {
+      handlesRef.current.hideHelp();
+    }
     var finishValue = getTriggerValue(rawValues);
@@ -223,2 +227,3 @@ onAfterChange === null || onAfterChange === void 0 || onAfterChange(finishValue);
       var nextFocusIndex = Math.max(0, index - 1);
+      handlesRef.current.hideHelp();
       handlesRef.current.focus(nextFocusIndex);
@@ -225,0 +230,0 @@ }

lib/Handles/index.d.ts

@@ -26,4 +26,5 @@ import * as React from 'react';
     focus: (index: number) => void;
+    hideHelp: VoidFunction;
 }
 declare const Handles: React.ForwardRefExoticComponent<HandlesProps & React.RefAttributes<HandlesRef>>;
 export default Handles;

lib/Handles/index.js

@@ -14,2 +14,3 @@ "use strict";
 var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _util = require("../util");
@@ -33,25 +34,40 @@ var _Handle = _interopRequireDefault(require("./Handle"));
   var handlesRef = React.useRef({});
-  React.useImperativeHandle(ref, function () {
-    return {
-      focus: function focus(index) {
-        var _handlesRef$current$i;
-        (_handlesRef$current$i = handlesRef.current[index]) === null || _handlesRef$current$i === void 0 || _handlesRef$current$i.focus();
-      }
-    };
-  });
 
   // =========================== Active ===========================
-  var _React$useState = React.useState(-1),
+  var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    activeIndex = _React$useState2[0],
-    setActiveIndex = _React$useState2[1];
+    activeVisible = _React$useState2[0],
+    setActiveVisible = _React$useState2[1];
+  var _React$useState3 = React.useState(-1),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    activeIndex = _React$useState4[0],
+    setActiveIndex = _React$useState4[1];
+  var onActive = function onActive(index) {
+    setActiveIndex(index);
+    setActiveVisible(true);
+  };
   var onHandleFocus = function onHandleFocus(e, index) {
-    setActiveIndex(index);
+    onActive(index);
     onFocus === null || onFocus === void 0 || onFocus(e);
   };
   var onHandleMouseEnter = function onHandleMouseEnter(e, index) {
-    setActiveIndex(index);
+    onActive(index);
   };
 
   // =========================== Render ===========================
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus(index) {
+        var _handlesRef$current$i;
+        (_handlesRef$current$i = handlesRef.current[index]) === null || _handlesRef$current$i === void 0 || _handlesRef$current$i.focus();
+      },
+      hideHelp: function hideHelp() {
+        (0, _reactDom.flushSync)(function () {
+          setActiveVisible(false);
+        });
+      }
+    };
+  });
+
+  // =========================== Render ===========================
   // Handle Props
@@ -83,3 +99,3 @@ var handleProps = (0, _objectSpread2.default)({
     }, handleProps));
-  }), activeHandleRender && /*#__PURE__*/React.createElement(_Handle.default, (0, _extends2.default)({
+  }), activeHandleRender && activeVisible && /*#__PURE__*/React.createElement(_Handle.default, (0, _extends2.default)({
     key: "a11y"
@@ -86,0 +102,0 @@ }, handleProps, {

lib/hooks/useDrag.d.ts

 import * as React from 'react';
 import type { Direction, OnStartMove } from '../interface';
 import type { OffsetValues } from './useOffset';
-declare function useDrag(containerRef: React.RefObject<HTMLDivElement>, direction: Direction, rawValues: number[], min: number, max: number, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: () => void, offsetValues: OffsetValues, editable: boolean): [
+declare function useDrag(containerRef: React.RefObject<HTMLDivElement>, direction: Direction, rawValues: number[], min: number, max: number, formatValue: (value: number) => number, triggerChange: (values: number[]) => void, finishChange: (draggingDelete: boolean) => void, offsetValues: OffsetValues, editable: boolean): [
     draggingIndex: number,
@@ -6,0 +6,0 @@ draggingValue: number,

lib/hooks/useDrag.js

@@ -126,2 +126,5 @@ "use strict";
 
+    // We declare it here since closure can't get outer latest value
+    var deleteMark = false;
+
     // Moving
@@ -159,3 +162,3 @@ var onMouseMove = function onMouseMove(event) {
       // Check if need mark remove
-      var deleteMark = editable ? Math.abs(removeDist) > REMOVE_DIST : false;
+      deleteMark = editable ? Math.abs(removeDist) > REMOVE_DIST : false;
       setDraggingDelete(deleteMark);
@@ -174,4 +177,5 @@ updateCacheValue(valueIndex, offSetPercent, deleteMark);
       mouseUpEventRef.current = null;
+      finishChange(deleteMark);
       setDraggingIndex(-1);
-      finishChange();
+      setDraggingDelete(false);
     };
@@ -178,0 +182,0 @@ document.addEventListener('mouseup', onMouseUp);

lib/Slider.js

@@ -218,3 +218,7 @@ "use strict";
   });
-  var finishChange = (0, _rcUtil.useEvent)(function () {
+  var finishChange = (0, _rcUtil.useEvent)(function (draggingDelete) {
+    // Trigger from `useDrag` will tell if it's a delete action
+    if (draggingDelete) {
+      handlesRef.current.hideHelp();
+    }
     var finishValue = getTriggerValue(rawValues);
@@ -232,2 +236,3 @@ onAfterChange === null || onAfterChange === void 0 || onAfterChange(finishValue);
       var nextFocusIndex = Math.max(0, index - 1);
+      handlesRef.current.hideHelp();
       handlesRef.current.focus(nextFocusIndex);
@@ -234,0 +239,0 @@ }

package.json

 {
   "name": "rc-slider",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "description": "Slider UI component for React",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

166513

1.12%

Lines of code

3729

1.3%

No dependency changes