rc-slider
Advanced tools
Comparing version 11.0.1 to 11.0.2
@@ -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; |
@@ -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, { |
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, |
@@ -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); |
@@ -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 @@ } |
@@ -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; |
@@ -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, { |
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, |
@@ -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); |
@@ -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 @@ } |
{ | ||
"name": "rc-slider", | ||
"version": "11.0.1", | ||
"version": "11.0.2", | ||
"description": "Slider UI component for React", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
166513
3729