rooks
Version:
Essential React custom hooks ⚓ to super charge your components!
1,293 lines (1,220 loc) • 145 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.rooks = {}, global.React));
}(this, (function (exports, react) { 'use strict';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
/**
* useArrayState
* @description Array state manager hook for React
* @param {Array<T>} initialState Initial state of the array
* @returns {UseArrayStateReturnValue<T>} Array state manager hook for React
* @see {@link https://react-hooks.org/docs/useArrayState}
*
* @example
*
* const [array, controls] = useArrayState([1, 2, 3]);
*
* controls.push(4); // [1, 2, 3, 4]
* controls.pop(); // [1, 2, 3]
* controls.unshift(0); // [0, 1, 2, 3]
* controls.shift(); // [1, 2, 3]
* controls.reverse(); // [3, 2, 1]
* controls.concat([4, 5, 6]); // [3, 2, 1, 4, 5, 6]
* controls.fill(0); // [0, 0, 0, 0, 0, 0]
*/
function useArrayState(initialArray) {
if (initialArray === void 0) { initialArray = []; }
var _a = react.useState(initialArray), array = _a[0], setArray = _a[1];
var push = react.useCallback(function (value) {
setArray(__spreadArray(__spreadArray([], array, true), [value], false));
}, [array]);
var pop = react.useCallback(function () {
setArray(array.slice(0, array.length - 1));
}, [array]);
var clear = react.useCallback(function () {
setArray([]);
}, []);
var unshift = react.useCallback(function (value) {
setArray(__spreadArray([value], array, true));
}, [array]);
var shift = react.useCallback(function () {
setArray(array.slice(1));
}, [array]);
var reverse = react.useCallback(function () {
setArray(__spreadArray([], array, true).reverse());
}, [array]);
var concat = react.useCallback(function (value) {
setArray(__spreadArray(__spreadArray([], array, true), value, true));
}, [array]);
var fill = react.useCallback(function (value, start, end) {
setArray(__spreadArray([], array, true).fill(value, start, end));
}, [array]);
var controls = react.useMemo(function () {
return {
push: push,
pop: pop,
clear: clear,
unshift: unshift,
shift: shift,
reverse: reverse,
concat: concat,
fill: fill,
};
}, [push, pop, clear, unshift, shift, reverse, concat, fill]);
var returnValue = react.useMemo(function () {
return [array, controls];
}, [array, controls]);
return returnValue;
}
/**
* useIsomorphicEffect
* Resolves to useEffect when "window" is not in scope and useLayout effect in the browser
*
* @param {Function} callback Callback function to be called on mount
* @see https://react-hooks.org/docs/useIsomorphicEffect
*/
var useIsomorphicEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
/**
* useFreshRef
*
* @param value The value which needs to be fresh at all times. Probably
* best used with functions
* @param preferLayoutEffect Should the value be updated using a layout effect
* or a passive effect. Defaults to false.
* @returns A ref containing the fresh value
* @see https://react-hooks.org/docs/useFreshRef
*/
function useFreshRef(value, preferLayoutEffect) {
if (preferLayoutEffect === void 0) { preferLayoutEffect = false; }
var useEffectToUse = preferLayoutEffect ? useIsomorphicEffect : react.useEffect;
var ref = react.useRef(value);
useEffectToUse(function () {
ref.current = value;
});
return ref;
}
/**
* @description useGetIsMounted hook checks if a component is mounted or not at the time.
* Useful for async effects. Returns a callback that returns a boolean representing if the component
* is mounted at the time.
* @returns () => boolean
* @see https://react-hooks.org/docs/useGetIsMounted
*/
var useGetIsMounted = function () {
var isMountedRef = react.useRef(false);
var get = react.useCallback(function () { return isMountedRef.current; }, []);
react.useEffect(function () {
isMountedRef.current = true;
return function () {
isMountedRef.current = false;
};
}, []);
return get;
};
/**
* A version of useEffect that accepts an async function
*
* @param {Effect<T>} effect Async function that can return a cleanup function and takes in an AbortSignal
* @param {DependencyList} deps If present, effect will only activate if the values in the list change
* @param {CleanupFunction} cleanup The destroy/cleanup function. Will be called with previous result if it exists.
* @see https://react-hooks.org/docs/useAsyncEffect
* @example
* ```jsx
* useAsyncEffect(
async (shouldContinueEffect) => {
const data1 = await fetchData1(arg1, arg2);
if(shouldContinueEffect()) {
const data2 = await fetchData2(arg1, arg2);
}
...
},
[arg1, arg2],
(previousResult) => {
// ... do something with previousResult ...
}
);
* ```
*/
function useAsyncEffect(effect, deps, cleanup) {
var _this = this;
// We need to synchronize the async callback response with
// the closure it was called in
var lastCallId = react.useRef(0);
var getIsMounted = useGetIsMounted();
var effectRef = useFreshRef(effect);
var callback = react.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
var callId, shouldContinueEffect, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
callId = ++lastCallId.current;
shouldContinueEffect = function () {
return getIsMounted() && callId === lastCallId.current;
};
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, effectRef.current(shouldContinueEffect)];
case 2: return [2 /*return*/, _a.sent()];
case 3:
error_1 = _a.sent();
throw error_1;
case 4: return [2 /*return*/];
}
});
}); }, __spreadArray([getIsMounted], deps, true));
react.useEffect(function () {
var result;
callback().then(function (value) {
result = value;
});
return function () {
cleanup === null || cleanup === void 0 ? void 0 : cleanup(result);
};
}, [callback, cleanup]);
}
/**
* useDidMount hook
* @description Calls a function on mount
*
* @param {Function} callback Callback function to be called on mount
* @see https://react-hooks.org/docs/useDidMount
*/
function useDidMount(callback) {
react.useEffect(function () {
if (typeof callback === "function") {
callback();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}
var noop = function () { };
var config = {
attributes: true,
characterData: true,
childList: true,
subtree: true,
};
/**
*
* useMutationObserver hook
*
* Returns a mutation observer for a React Ref and fires a callback
*
* @param {MutableRefObject<HTMLElement | null>} ref React ref on which mutations are to be observed
* @param {MutationCallback} callback Function that needs to be fired on mutation
* @param {MutationObserverInit} options
* @see https://react-hooks.org/docs/useMutationObserver
*/
function useMutationObserver(ref, callback, options) {
if (options === void 0) { options = config; }
react.useEffect(function () {
// Create an observer instance linked to the callback function
if (ref.current) {
var observer_1 = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer_1.observe(ref.current, options);
return function () {
observer_1.disconnect();
};
}
return noop;
}, [callback, options, ref]);
}
/**
* @param element HTML element whose boundingclientrect is needed
* @returns DOMRect
*/
function getBoundingClientRect(element) {
return element.getBoundingClientRect();
}
/**
* useBoundingclientRect hook
*
* @param ref The React ref whose ClientRect is needed
* @returns DOMRect | null
* @see https://react-hooks.org/docs/useBoundingclientRect
*/
function useBoundingclientrect(ref) {
var _a = react.useState(null), domRect = _a[0], setDomRect = _a[1];
var update = react.useCallback(function () {
setDomRect(ref.current ? getBoundingClientRect(ref.current) : null);
}, [ref]);
useDidMount(function () {
update();
});
useMutationObserver(ref, update);
return domRect;
}
/**
* Credit to material-ui for this snippet
*/
function setRef(ref, value) {
if (typeof ref === "function") {
ref(value);
}
else if (ref !== null && ref !== undefined) {
ref.current = value;
}
}
/**
* useForkRef
* Joins refs together and returns a combination of the two as a new ref
*
* @param refA
* @param refB
* @returns MutableRefObject
* @see https://react-hooks.org/docs/useForkRef
*/
function useForkRef(refA, refB) {
/**
* This will create a new function if the ref props change and are defined.
* This means react will call the old forkRef with `null` and the new forkRef
* with the ref. Cleanup naturally emerges from this behavior
*/
return react.useMemo(function () {
if (refA === null && refB === null) {
return null;
}
return function (refValue) {
setRef(refA, refValue);
setRef(refB, refValue);
};
}, [refA, refB]);
}
var config$1 = {
attributes: true,
characterData: true,
childList: true,
subtree: true,
};
/**
*
* useMutationObserverRef hook
*
* Returns a mutation observer for a React Ref and fires a callback
*
* @param {MutationCallback} callback Function that needs to be fired on mutation
* @param {MutationObserverInit} options
* @see https://react-hooks.org/docs/useMutationObserverRef
*/
function useMutationObserverRef(callback, options) {
if (options === void 0) { options = config$1; }
var _a = react.useState(null), node = _a[0], setNode = _a[1];
react.useEffect(function () {
// Create an observer instance linked to the callback function
if (node) {
var observer_1 = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer_1.observe(node, options);
return function () {
observer_1.disconnect();
};
}
return noop;
}, [node, callback, options]);
var ref = react.useCallback(function (nodeElement) {
setNode(nodeElement);
}, []);
return [ref];
}
/**
* @param element HTML element whose boundingclientrect is needed
* @returns DOMRect
*/
function getBoundingClientRect$1(element) {
return element.getBoundingClientRect();
}
/**
* useBoundingclientrectRef hook
* Tracks the boundingclientrect of a React Ref and fires a callback when the element's size changes.
*
* @returns [CallbackRef | null, DOMRect | null, () => void]
* @see https://react-hooks.org/docs/useBoundingclientRectRef
*/
function useBoundingclientrectRef() {
var _a = react.useState(null), domRect = _a[0], setDomRect = _a[1];
var _b = react.useState(null), node = _b[0], setNode = _b[1];
var update = react.useCallback(function () {
setDomRect(node ? getBoundingClientRect$1(node) : null);
}, [node]);
react.useEffect(function () {
update();
}, [update]);
var ref = react.useCallback(function (nodeElement) {
setNode(nodeElement);
}, []);
var mutationObserverRef = useMutationObserverRef(update)[0];
var forkedRef = useForkRef(ref, mutationObserverRef);
return [forkedRef, domRect, update];
}
/**
* A setInterval hook that calls a callback after a interval duration
* when a condition is true
*
* @param callback The callback to be invoked after interval
* @param intervalDurationMs Amount of time in ms after which to invoke
* @param when The condition which when true, sets the interval
* @param startImmediate If the callback should be invoked immediately
* @see https://react-hooks.org/docs/useIntervalWhen
*/
function useIntervalWhen(callback, intervalDurationMs, when, startImmediate) {
if (intervalDurationMs === void 0) { intervalDurationMs = 0; }
if (when === void 0) { when = true; }
if (startImmediate === void 0) { startImmediate = false; }
var savedRefCallback = react.useRef();
react.useEffect(function () {
savedRefCallback.current = callback;
});
function internalCallback() {
var _a;
(_a = savedRefCallback.current) === null || _a === void 0 ? void 0 : _a.call(savedRefCallback);
}
react.useEffect(function () {
if (when) {
if (startImmediate) {
internalCallback();
}
var interval_1 = window.setInterval(internalCallback, intervalDurationMs);
return function () {
window.clearInterval(interval_1);
};
}
return noop;
}, [when, intervalDurationMs, startImmediate]);
}
/**
*
* useCountdown
* Easy way to countdown until a given endtime in intervals
*
* @param endTime Time to countdown
* @param options Countdown options
* @see https://react-hooks.org/docs/useCountdown
*/
function useCountdown(endTime, options) {
if (options === void 0) { options = {}; }
var _a = options.interval, interval = _a === void 0 ? 1000 : _a, onDown = options.onDown, onEnd = options.onEnd;
var _b = react.useState(function () { return new Date(); }), time = _b[0], setTime = _b[1];
var restTime = endTime.getTime() - time.getTime();
var count = restTime > 0 ? Math.ceil(restTime / interval) : 0;
useIntervalWhen(onTick, count ? interval : undefined, true, true);
return count;
function onTick() {
var newTime = new Date();
if (newTime > endTime) {
if (onEnd) {
onEnd(newTime);
}
setTime(endTime);
return;
}
if (onDown) {
onDown(restTime, newTime);
}
setTime(newTime);
}
}
/**
*
* @typedef handler
* @type {object}
* @property {number} value The value of the counter
* @property {Function} increment Increment counter value by 1
* @property {Function} decrement Decrement counter value by 1
* @property {Function} incrementBy Increment counter by incrAmount
* @property {Function} decrementBy Decrement counter by decrAmount
* @property {Function} reset Reset counter to initialValue
* @see {@link https://react-hooks.org/docs/useCounter}
*/
/**
* Counter hook
*
* @param {number} initialValue The initial value of the counter
* @returns {handler} A handler to interact with the counter
* @see https://react-hooks.org/docs/useCounter
*/
function useCounter(initialValue) {
var _a = react.useState(initialValue), counter = _a[0], setCounter = _a[1];
/**
* Increment counter by an amount
*
* @param {number} incrAmount
*/
var incrementBy = react.useCallback(function (incrAmount) {
setCounter(function (currentCounter) { return currentCounter + incrAmount; });
}, []);
/**
*
* Decrement counter by an amount
*
* @param {*} decrAmount
*/
var decrementBy = react.useCallback(function (decrAmount) {
incrementBy(-decrAmount);
}, [incrementBy]);
/**
* Increment counter by 1
*/
var increment = react.useCallback(function () {
incrementBy(1);
}, [incrementBy]);
/**
* Decrement counter by 1
*/
var decrement = react.useCallback(function () {
incrementBy(-1);
}, [incrementBy]);
/**
* Reset counter to initial value
*/
var reset = react.useCallback(function () {
setCounter(initialValue);
}, [initialValue]);
return {
decrement: decrement,
decrementBy: decrementBy,
increment: increment,
incrementBy: incrementBy,
reset: reset,
value: counter,
};
}
/**
* lodash (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright jQuery Foundation and other contributors <https://jquery.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/
/** Used as the `TypeError` message for "Functions" methods. */
var FUNC_ERROR_TEXT = 'Expected a function';
/** Used as references for various `Number` constants. */
var NAN = 0 / 0;
/** `Object#toString` result references. */
var symbolTag = '[object Symbol]';
/** Used to match leading and trailing whitespace. */
var reTrim = /^\s+|\s+$/g;
/** Used to detect bad signed hexadecimal string values. */
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
/** Used to detect binary string values. */
var reIsBinary = /^0b[01]+$/i;
/** Used to detect octal string values. */
var reIsOctal = /^0o[0-7]+$/i;
/** Built-in method references without a dependency on `root`. */
var freeParseInt = parseInt;
/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
/** Detect free variable `self`. */
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
/** Used as a reference to the global object. */
var root = freeGlobal || freeSelf || Function('return this')();
/** Used for built-in method references. */
var objectProto = Object.prototype;
/**
* Used to resolve the
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
* of values.
*/
var objectToString = objectProto.toString;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeMax = Math.max,
nativeMin = Math.min;
/**
* Gets the timestamp of the number of milliseconds that have elapsed since
* the Unix epoch (1 January 1970 00:00:00 UTC).
*
* @static
* @memberOf _
* @since 2.4.0
* @category Date
* @returns {number} Returns the timestamp.
* @example
*
* _.defer(function(stamp) {
* console.log(_.now() - stamp);
* }, _.now());
* // => Logs the number of milliseconds it took for the deferred invocation.
*/
var now = function() {
return root.Date.now();
};
/**
* Creates a debounced function that delays invoking `func` until after `wait`
* milliseconds have elapsed since the last time the debounced function was
* invoked. The debounced function comes with a `cancel` method to cancel
* delayed `func` invocations and a `flush` method to immediately invoke them.
* Provide `options` to indicate whether `func` should be invoked on the
* leading and/or trailing edge of the `wait` timeout. The `func` is invoked
* with the last arguments provided to the debounced function. Subsequent
* calls to the debounced function return the result of the last `func`
* invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is
* invoked on the trailing edge of the timeout only if the debounced function
* is invoked more than once during the `wait` timeout.
*
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
*
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
* for details over the differences between `_.debounce` and `_.throttle`.
*
* @static
* @memberOf _
* @since 0.1.0
* @category Function
* @param {Function} func The function to debounce.
* @param {number} [wait=0] The number of milliseconds to delay.
* @param {Object} [options={}] The options object.
* @param {boolean} [options.leading=false]
* Specify invoking on the leading edge of the timeout.
* @param {number} [options.maxWait]
* The maximum time `func` is allowed to be delayed before it's invoked.
* @param {boolean} [options.trailing=true]
* Specify invoking on the trailing edge of the timeout.
* @returns {Function} Returns the new debounced function.
* @example
*
* // Avoid costly calculations while the window size is in flux.
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
*
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
* jQuery(element).on('click', _.debounce(sendMail, 300, {
* 'leading': true,
* 'trailing': false
* }));
*
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
* var source = new EventSource('/stream');
* jQuery(source).on('message', debounced);
*
* // Cancel the trailing debounced invocation.
* jQuery(window).on('popstate', debounced.cancel);
*/
function debounce(func, wait, options) {
var lastArgs,
lastThis,
maxWait,
result,
timerId,
lastCallTime,
lastInvokeTime = 0,
leading = false,
maxing = false,
trailing = true;
if (typeof func != 'function') {
throw new TypeError(FUNC_ERROR_TEXT);
}
wait = toNumber(wait) || 0;
if (isObject(options)) {
leading = !!options.leading;
maxing = 'maxWait' in options;
maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
trailing = 'trailing' in options ? !!options.trailing : trailing;
}
function invokeFunc(time) {
var args = lastArgs,
thisArg = lastThis;
lastArgs = lastThis = undefined;
lastInvokeTime = time;
result = func.apply(thisArg, args);
return result;
}
function leadingEdge(time) {
// Reset any `maxWait` timer.
lastInvokeTime = time;
// Start the timer for the trailing edge.
timerId = setTimeout(timerExpired, wait);
// Invoke the leading edge.
return leading ? invokeFunc(time) : result;
}
function remainingWait(time) {
var timeSinceLastCall = time - lastCallTime,
timeSinceLastInvoke = time - lastInvokeTime,
result = wait - timeSinceLastCall;
return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
}
function shouldInvoke(time) {
var timeSinceLastCall = time - lastCallTime,
timeSinceLastInvoke = time - lastInvokeTime;
// Either this is the first call, activity has stopped and we're at the
// trailing edge, the system time has gone backwards and we're treating
// it as the trailing edge, or we've hit the `maxWait` limit.
return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
(timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
}
function timerExpired() {
var time = now();
if (shouldInvoke(time)) {
return trailingEdge(time);
}
// Restart the timer.
timerId = setTimeout(timerExpired, remainingWait(time));
}
function trailingEdge(time) {
timerId = undefined;
// Only invoke if we have `lastArgs` which means `func` has been
// debounced at least once.
if (trailing && lastArgs) {
return invokeFunc(time);
}
lastArgs = lastThis = undefined;
return result;
}
function cancel() {
if (timerId !== undefined) {
clearTimeout(timerId);
}
lastInvokeTime = 0;
lastArgs = lastCallTime = lastThis = timerId = undefined;
}
function flush() {
return timerId === undefined ? result : trailingEdge(now());
}
function debounced() {
var time = now(),
isInvoking = shouldInvoke(time);
lastArgs = arguments;
lastThis = this;
lastCallTime = time;
if (isInvoking) {
if (timerId === undefined) {
return leadingEdge(lastCallTime);
}
if (maxing) {
// Handle invocations in a tight loop.
timerId = setTimeout(timerExpired, wait);
return invokeFunc(lastCallTime);
}
}
if (timerId === undefined) {
timerId = setTimeout(timerExpired, wait);
}
return result;
}
debounced.cancel = cancel;
debounced.flush = flush;
return debounced;
}
/**
* Checks if `value` is the
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @since 0.1.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject(value) {
var type = typeof value;
return !!value && (type == 'object' || type == 'function');
}
/**
* Checks if `value` is object-like. A value is object-like if it's not `null`
* and has a `typeof` result of "object".
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
* @example
*
* _.isObjectLike({});
* // => true
*
* _.isObjectLike([1, 2, 3]);
* // => true
*
* _.isObjectLike(_.noop);
* // => false
*
* _.isObjectLike(null);
* // => false
*/
function isObjectLike(value) {
return !!value && typeof value == 'object';
}
/**
* Checks if `value` is classified as a `Symbol` primitive or object.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
* @example
*
* _.isSymbol(Symbol.iterator);
* // => true
*
* _.isSymbol('abc');
* // => false
*/
function isSymbol(value) {
return typeof value == 'symbol' ||
(isObjectLike(value) && objectToString.call(value) == symbolTag);
}
/**
* Converts `value` to a number.
*
* @static
* @memberOf _
* @since 4.0.0
* @category Lang
* @param {*} value The value to process.
* @returns {number} Returns the number.
* @example
*
* _.toNumber(3.2);
* // => 3.2
*
* _.toNumber(Number.MIN_VALUE);
* // => 5e-324
*
* _.toNumber(Infinity);
* // => Infinity
*
* _.toNumber('3.2');
* // => 3.2
*/
function toNumber(value) {
if (typeof value == 'number') {
return value;
}
if (isSymbol(value)) {
return NAN;
}
if (isObject(value)) {
var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
value = isObject(other) ? (other + '') : other;
}
if (typeof value != 'string') {
return value === 0 ? value : +value;
}
value = value.replace(reTrim, '');
var isBinary = reIsBinary.test(value);
return (isBinary || reIsOctal.test(value))
? freeParseInt(value.slice(2), isBinary ? 2 : 8)
: (reIsBadHex.test(value) ? NAN : +value);
}
var lodash_debounce = debounce;
/**
* Debounce hook
* Debounces a function
*
* @param callback The callback to debounce
* @param wait The duration to debounce
* @param options The options object.
* @param options.leading Specify invoking on the leading edge of the timeout.
* @param options.maxWait The maximum time func is allowed to be delayed before it’s invoked.
* @param options.trailing Specify invoking on the trailing edge of the timeout.
* @returns Returns the new debounced function.
* @see https://react-hooks.org/docs/useDebounce
*/
function useDebounce(callback, wait, options) {
var createDebouncedCallback = react.useCallback(function (function_) {
return lodash_debounce(function_, wait, options);
}, [wait, options]);
var debouncedCallbackRef = react.useRef(createDebouncedCallback(callback));
react.useEffect(function () {
debouncedCallbackRef.current = createDebouncedCallback(callback);
}, [callback, createDebouncedCallback]);
return debouncedCallbackRef.current;
}
/**
* useWillUnmount hook
* Fires a callback just before component unmounts
*
* @param {Function} callback Callback to be called before unmount
* @see https://react-hooks.org/docs/useWillUnmount
*/
function useWillUnmount(callback) {
// run only once
react.useEffect(function () {
return callback;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}
/**
* useDidUpdate hook
*
* Fires a callback on component update
* Can take in a list of conditions to fire callback when one of the
* conditions changes
*
* @param {Function} callback The callback to be called on update
* @param {Array} conditions The list of variables which trigger update when they are changed
* @see https://react-hooks.org/docs/useDidUpdate
*/
function useDidUpdate(callback, conditions) {
var hasMountedRef = react.useRef(false);
var internalConditions = react.useMemo(function () {
if (typeof conditions !== "undefined" && !Array.isArray(conditions)) {
return [conditions];
}
else if (Array.isArray(conditions) && conditions.length === 0) {
console.warn("Using [] as the second argument makes useDidUpdate a noop. The second argument should either be `undefined` or an array of length greater than 0.");
}
return conditions;
}, [conditions]);
react.useEffect(function () {
if (hasMountedRef.current) {
callback();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, internalConditions);
useDidMount(function () {
hasMountedRef.current = true;
});
useWillUnmount(function () {
hasMountedRef.current = false;
});
}
var defaultUseDebounceValueOptions = {
initializeWithNull: false,
};
/**
* useDebouncedValue
* @param value The value to debounce
* @param timeout The duration to debounce
* @param options The options object.
* @see https://react-hooks.org/docs/useDebouncedValue
*/
var useDebouncedValue = function (value, timeout, options) {
if (options === void 0) { options = {}; }
// eslint-disable-next-line prefer-object-spread
var initializeWithNull = Object.assign({}, defaultUseDebounceValueOptions, options).initializeWithNull;
var _a = react.useState(initializeWithNull ? null : value), updatedValue = _a[0], setUpdatedValue = _a[1];
var debouncedSetUpdatedValue = useDebounce(setUpdatedValue, timeout);
useDidMount(function () {
if (initializeWithNull) {
debouncedSetUpdatedValue(value);
}
});
useDidUpdate(function () {
debouncedSetUpdatedValue(value);
}, [value]);
// No need to add `debouncedSetUpdatedValue ` to dependencies as it is a ref.current.
// returning both updatedValue and setUpdatedValue (not the debounced version) to instantly update this if needed.
return [updatedValue, setUpdatedValue];
};
/**
* useFreshTick
* @param callback The callback to be called on mount
* @returns A fresh callback.
* @see https://react-hooks.org/docs/useFreshCallback
*/
function useFreshTick(callback) {
var freshRef = useFreshRef(callback);
function tick() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
if (typeof freshRef.current === "function") {
freshRef.current.apply(freshRef, args);
}
}
return tick;
}
var isDevelopmentEnvironment = process.env.NODE_ENV !== "production";
// eslint-disable-next-line import/no-mutable-exports
var warning = function () { };
if (isDevelopmentEnvironment) {
var printWarning_1 = function (actualMessage) {
var message = "Warning: ".concat(actualMessage);
if (typeof console !== "undefined") {
console.error(message);
}
try {
// --- Welcome to debugging React ---
// This error was thrown as a convenience so that you can use this stack
// to find the call site that caused this warning to fire.
throw new Error(message);
// eslint-disable-next-line no-empty
}
catch (_a) { }
};
warning = function (condition, actualMessage) {
if (!condition) {
printWarning_1(actualMessage);
}
};
}
/**
* useGlobalObjectEventListener hook
*
* A react hook to an event listener to a global object
*
* @param {Window|Document} globalObject The global object to add event onto
* @param {string} eventName The event to track
* @param {Function} callback The callback to be called on event
* @param {ListenerOptions} listenerOptions The options to be passed to the event listener
* @param {boolean} when Should the event listener be active
* @param {boolean} isLayoutEffect Should it use layout effect. Defaults to false
* @see https://react-hooks.org/docs/useGlobalObjectEventListener
*/
function useGlobalObjectEventListener(globalObject, eventName, callback, listenerOptions, when, isLayoutEffect) {
if (listenerOptions === void 0) { listenerOptions = {}; }
if (when === void 0) { when = true; }
if (isLayoutEffect === void 0) { isLayoutEffect = false; }
var freshCallback = useFreshTick(callback);
var useEffectToRun = isLayoutEffect ? useIsomorphicEffect : react.useEffect;
useEffectToRun(function () {
warning(typeof globalObject !== "undefined", "[useGlobalObjectEventListener]: Cannot attach event handlers to undefined.");
if (typeof globalObject !== "undefined" && when) {
globalObject.addEventListener(eventName, freshCallback, listenerOptions);
return function () {
globalObject.removeEventListener(eventName, freshCallback, listenerOptions);
};
}
return function () { };
}, [eventName, listenerOptions]);
}
/**
*
* useOnWindowResize hook
*
* Fires a callback when window resizes
*
* @param {Function} callback Callback to be called before unmount
* @param {boolean} when When the handler should be applied
* @param {boolean} isLayoutEffect Should it use layout effect. Defaults to false
* @see https://react-hooks.org/docs/useOnWindowResize
*/
function useOnWindowResize(callback, when, isLayoutEffect) {
if (when === void 0) { when = true; }
if (isLayoutEffect === void 0) { isLayoutEffect = false; }
useGlobalObjectEventListener(global.window, "resize", callback, { passive: true }, when, isLayoutEffect);
}
/**
*
* useOnWindowScroll hook
* Fires a callback when window scroll
*
* @param {Function} callback Callback to be called before unmount
* @param {boolean} when When the handler should be applied
* @param {boolean} isLayoutEffect Should it use layout effect. Defaults to false
* @see https://react-hooks.org/docs/useOnWindowScroll
*
*/
function useOnWindowScroll(callback, when, isLayoutEffect) {
if (when === void 0) { when = true; }
if (isLayoutEffect === void 0) { isLayoutEffect = false; }
useGlobalObjectEventListener(global.window, "scroll", callback, { passive: true }, when, isLayoutEffect);
}
/* eslint-disable id-length */
var getDimensionObject = function (node) {
var rect = node.getBoundingClientRect();
return {
bottom: rect.bottom,
height: rect.height,
left: rect.left,
right: rect.right,
top: rect.top,
width: rect.width,
x: rect.left,
y: rect.top,
};
};
var noWindowReturnValue = [undefined, null, null];
/**
* useDimensionsRef
* @param updateOnScroll Whether to update on scroll
* @param updateOnResize Whether to update on resize
* @returns [React.Ref<HTMLDivElement>, UseDimensionsRefReturn, HTMLElement | null]
* @see https://react-hooks.org/docs/useDimensionsRef
*/
var useDimensionsRef = function (_a) {
var _b = _a === void 0 ? {} : _a, _c = _b.updateOnScroll, updateOnScroll = _c === void 0 ? true : _c, _d = _b.updateOnResize, updateOnResize = _d === void 0 ? true : _d;
var _e = react.useState(null), dimensions = _e[0], setDimensions = _e[1];
var _f = react.useState(null), node = _f[0], setNode = _f[1];
var ref = react.useCallback(function (nodeFromCallback) {
setNode(nodeFromCallback);
}, []);
var measure = react.useCallback(function () {
window.requestAnimationFrame(function () {
if (node) {
setDimensions(getDimensionObject(node));
}
});
}, [node]);
react.useLayoutEffect(function () {
measure();
}, [measure]);
useOnWindowResize(function () {
measure();
}, updateOnResize, true);
useOnWindowScroll(function () {
measure();
}, updateOnScroll, true);
if (typeof window === "undefined") {
console.warn("useDimensionsRef: window is undefined.");
return noWindowReturnValue;
}
return [ref, dimensions, node];
};
/**
* useDocumentEventListener hook
*
* @description A react hook to an event listener to the document
*
* @param {string} eventName The event to track
* @param {Function} callback The callback to be called on event
* @param {ListenerOptions} listenerOptions The options to be passed to the event listener
* @param {boolean} isLayoutEffect Should it use layout effect. Defaults to false
* @see https://react-hooks.org/docs/useDocumentEventListener
*/
function useDocumentEventListener(eventName, callback, listenerOptions, isLayoutEffect) {
if (listenerOptions === void 0) { listenerOptions = {}; }
if (isLayoutEffect === void 0) { isLayoutEffect = false; }
useGlobalObjectEventListener(global.document, eventName, callback, listenerOptions, true, isLayoutEffect);
}
/**
* useEffectOnceWhen hook
*
* @description It fires a callback once when a condition is true or become true.
* Fires the callback at most one time.
*
* @param callback The callback to fire
* @param when The condition which needs to be true
* @see https://react-hooks.org/docs/useEffectOnceWhen
*/
function useEffectOnceWhen(callback, when) {
if (when === void 0) { when = true; }
var hasRunOnceRef = react.useRef(false);
var callbackRef = react.useRef(callback);
react.useEffect(function () {
callbackRef.current = callback;
});
react.useEffect(function () {
if (when && !hasRunOnceRef.current) {
callbackRef.current();
hasRunOnceRef.current = true;
}
}, [when]);
}
/**
* useRefElement hook for React
* Helps bridge gap between callback ref and state
* Manages the element called with callback ref api using state variable
* @returns {[RefElementOrNull, (element: HTMLElementOrNull) => void]}
* @see https://react-hooks.org/docs/useRefElement
*/
function useRefElement() {
var _a = react.useState(null), refElement = _a[0], setRefElement = _a[1];
var ref = react.useCallback(function (element) {
setRefElement(element);
}, []);
return [ref, refElement];
}
/**
* useEventListenerRef hook
*
* A react hook to an event listener to an element
* Returns a ref
*
* @param {string} eventName The event to track`
* @param {Function} callback The callback to be called on event
* @param {object} listenerOptions The options to be passed to the event listener
* @param {boolean} isLayoutEffect Should it use layout effect. Defaults to false
* @returns {Function} A callback ref that can be used as ref prop
* @see https://react-hooks.org/docs/useEventListenerRef
*/
function useEventListenerRef(eventName, callback, listenerOptions, isLayoutEffect) {
if (listenerOptions === void 0) { listenerOptions = {}; }
if (isLayoutEffect === void 0) { isLayoutEffect = false; }
var _a = useRefElement(), ref = _a[0], element = _a[1];
var freshCallback = useFreshTick(callback);
var useEffectToRun = isLayoutEffect ? useIsomorphicEffect : react.useEffect;
useEffectToRun(function () {
if (!(element === null || element === void 0 ? void 0 : element.addEventListener)) {