@react-md/form
Version:
This package is for creating all the different form input types.
122 lines • 5.02 kB
JavaScript
;
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useDiscreteValueVisibility = void 0;
var react_1 = require("react");
var utils_1 = require("@react-md/utils");
/**
* @internal
*/
var noop = function () {
// do nothing
};
/**
* This is a completely internal hook that helps control the visibility of the
* discrete value tooltip's visibility for the `Slider` and `RangeSlider`.
*
* Note: This isn't 100% there since the tooltip doesn't animate in when the
* user holds the mouse down in the same spot for the `animationDuration`.
*
* @internal
* @remarks \@since 2.5.0
*/
function useDiscreteValueVisibility(_a) {
var active = _a.active, animate = _a.animate, animationDuration = _a.animationDuration, discrete = _a.discrete, disabled = _a.disabled, _b = _a.onBlur, propOnBlur = _b === void 0 ? noop : _b, _c = _a.onFocus, propOnFocus = _c === void 0 ? noop : _c;
var ref = (0, react_1.useRef)(null);
var isKeyboard = (0, utils_1.useIsUserInteractionMode)("keyboard");
// when the user interaction mode changes from keyboard -> mouse by clicking
// on the track, need to make sure that the thumb value has the animation
// state enabled so it moves at the same speed as the thumb instead of jumping
// immediately
var _d = __read((0, react_1.useState)(false), 2), isModeTransition = _d[0], setModeTransition = _d[1];
var _e = __read((0, react_1.useState)(false), 2), visible = _e[0], setVisible = _e[1];
(0, react_1.useEffect)(function () {
if (!discrete) {
setVisible(false);
setModeTransition(false);
return;
}
if (discrete && visible && disabled) {
setVisible(false);
return;
}
if (!isKeyboard) {
// only considered a "transition" when the tooltip is already visible and
// switching away from keyboard mode
setModeTransition(visible);
return;
}
// when swapping from mouse/touch -> keyboard, the tooltip's visibility will
// need to be enabled since default drag behavior is to hide on drag end.
// The drag process automatically focuses the current "target" thumb to help
// the user switch between the modes more easily so if the active element is
// the current thumb, we're good to go
setModeTransition(false);
setVisible(!disabled && document.activeElement === ref.current);
}, [isKeyboard, visible, discrete, disabled]);
(0, react_1.useEffect)(function () {
if (!discrete) {
return;
}
if (!active) {
setVisible(false);
setModeTransition(false);
return;
}
// need to delay the visibility for the same `animationDuration` as the
// thumb's active state so that the tooltip appears at the same time the
// thumb stops animating with click drag events
var timeout = window.setTimeout(function () {
setVisible(true);
setModeTransition(false);
}, animationDuration);
return function () {
window.clearTimeout(timeout);
};
}, [active, animationDuration, discrete]);
var onBlur = (0, react_1.useCallback)(function (event) {
propOnBlur(event);
var track = event.currentTarget.parentElement;
// need to hide on blur because it _usually_ means the user clicked
// somewhere else on the page after using the keyboard. However, it is
// possible the user used the keyboard to update the value and then
// clicked on the track to update more quickly, so verify that the next
// focus element isn't the track or any children of the track.
if (!track ||
document.activeElement ||
!track.contains(document.activeElement)) {
ref.current = null;
setVisible(false);
}
}, [propOnBlur]);
var onFocus = (0, react_1.useCallback)(function (event) {
ref.current = event.currentTarget;
propOnFocus(event);
if (discrete && isKeyboard) {
setVisible(true);
}
}, [discrete, propOnFocus, isKeyboard]);
return {
onBlur: onBlur,
onFocus: onFocus,
animateValue: isModeTransition || (animate && isKeyboard),
visible: visible,
};
}
exports.useDiscreteValueVisibility = useDiscreteValueVisibility;
//# sourceMappingURL=useDiscreteValueVisibility.js.map