@react-md/form/es/slider/useDiscreteValueVisibility.js

This package is for creating all the different form input types.

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;
};
import { useCallback, useEffect, useRef, useState } from "react";
import { useIsUserInteractionMode } from "@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
 */
export 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 = useRef(null);
    var isKeyboard = 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(useState(false), 2), isModeTransition = _d[0], setModeTransition = _d[1];
    var _e = __read(useState(false), 2), visible = _e[0], setVisible = _e[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]);
    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 = 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 = 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,
    };
}
//# sourceMappingURL=useDiscreteValueVisibility.js.map