@wordpress/components/build/range-control/utils.js

UI components for WordPress.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.floatClamp = floatClamp;
exports.useControlledRangeValue = useControlledRangeValue;
exports.useDebouncedHoverInteraction = useDebouncedHoverInteraction;

var _lodash = require("lodash");

var _element = require("@wordpress/element");

var _hooks = require("../utils/hooks");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * A float supported clamp function for a specific value.
 *
 * @param {number|null} value The value to clamp.
 * @param {number}      min   The minimum value.
 * @param {number}      max   The maximum value.
 *
 * @return {number} A (float) number
 */
function floatClamp(value, min, max) {
  if (typeof value !== 'number') {
    return null;
  }

  return parseFloat((0, _lodash.clamp)(value, min, max));
}
/**
 * Hook to store a clamped value, derived from props.
 *
 * @param {Object} settings         Hook settings.
 * @param {number} settings.min     The minimum value.
 * @param {number} settings.max     The maximum value.
 * @param {number} settings.value  	The current value.
 * @param {any}    settings.initial The initial value.
 *
 * @return {[*, Function]} The controlled value and the value setter.
 */


function useControlledRangeValue({
  min,
  max,
  value: valueProp,
  initial
}) {
  const [state, setInternalState] = (0, _hooks.useControlledState)(floatClamp(valueProp, min, max), {
    initial,
    fallback: null
  });
  const setState = (0, _element.useCallback)(nextValue => {
    if (nextValue === null) {
      setInternalState(null);
    } else {
      setInternalState(floatClamp(nextValue, min, max));
    }
  }, [min, max]);
  return [state, setState];
}
/**
 * Hook to encapsulate the debouncing "hover" to better handle the showing
 * and hiding of the Tooltip.
 *
 * @param {Object}   settings                     Hook settings.
 * @param {Function} [settings.onShow=noop]       A callback function invoked when the element is shown.
 * @param {Function} [settings.onHide=noop]       A callback function invoked when the element is hidden.
 * @param {Function} [settings.onMouseMove=noop]  A callback function invoked when the mouse is moved.
 * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element.
 * @param {number}   [settings.timeout=300]       Timeout before the element is shown or hidden.
 *
 * @return {Object} Bound properties for use on a React.Node.
 */


function useDebouncedHoverInteraction({
  onHide = _lodash.noop,
  onMouseLeave = _lodash.noop,
  onMouseMove = _lodash.noop,
  onShow = _lodash.noop,
  timeout = 300
}) {
  const [show, setShow] = (0, _element.useState)(false);
  const timeoutRef = (0, _element.useRef)();
  const setDebouncedTimeout = (0, _element.useCallback)(callback => {
    window.clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(callback, timeout);
  }, [timeout]);
  const handleOnMouseMove = (0, _element.useCallback)(event => {
    onMouseMove(event);
    setDebouncedTimeout(() => {
      if (!show) {
        setShow(true);
        onShow();
      }
    });
  }, []);
  const handleOnMouseLeave = (0, _element.useCallback)(event => {
    onMouseLeave(event);
    setDebouncedTimeout(() => {
      setShow(false);
      onHide();
    });
  }, []);
  (0, _element.useEffect)(() => {
    return () => {
      window.clearTimeout(timeoutRef.current);
    };
  });
  return {
    onMouseMove: handleOnMouseMove,
    onMouseLeave: handleOnMouseLeave
  };
}
//# sourceMappingURL=utils.js.map