@reactuses/core
Version:
<p align="center"> <a href="https://github.com/childrentime/reactuse"> <img src="https://reactuse.com/img/og.png" alt="ReactUse - Collection of essential React Hooks" width="300"> </a> </p>
1,543 lines (1,492 loc) • 152 kB
JavaScript
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var lodashEs = require('lodash-es');
var Cookies = require('js-cookie');
var screenfull = require('screenfull');
var index_js = require('use-sync-external-store/shim/index.js');
var fetchEventSource = require('@microsoft/fetch-event-source');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var Cookies__default = /*#__PURE__*/_interopDefault(Cookies);
var screenfull__default = /*#__PURE__*/_interopDefault(screenfull);
var _window_navigator, _window;
function isFunction(val) {
return typeof val === 'function';
}
function isString(val) {
return typeof val === 'string';
}
const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
const isBrowser = typeof window !== 'undefined';
const isNavigator = typeof navigator !== 'undefined';
function noop$1() {}
const isIOS = isBrowser && ((_window = window) == null ? void 0 : (_window_navigator = _window.navigator) == null ? void 0 : _window_navigator.userAgent) && /iP(?:ad|hone|od)/.test(window.navigator.userAgent);
const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
const useLatest = (value)=>{
const ref = React.useRef(value);
useIsomorphicLayoutEffect(()=>{
ref.current = value;
}, [
value
]);
return ref;
};
function on(obj, ...args) {
if (obj && obj.addEventListener) {
obj.addEventListener(...args);
}
}
function off(obj, ...args) {
if (obj && obj.removeEventListener) {
obj.removeEventListener(...args);
}
}
const defaultWindow = typeof window !== 'undefined' ? window : undefined;
const defaultDocument = typeof document !== 'undefined' ? document : undefined;
const defaultOptions$1 = {};
function defaultOnError(e) {
console.error(e);
}
function getTargetElement(target, defaultElement) {
if (!isBrowser) {
return undefined;
}
if (!target) {
return defaultElement;
}
let targetElement;
if (isFunction(target)) {
targetElement = target();
} else if ('current' in target) {
targetElement = target.current;
} else {
targetElement = target;
}
return targetElement;
}
const updateReducer = (num)=>(num + 1) % 1000000;
function useUpdate() {
const [, update] = React.useReducer(updateReducer, 0);
return update;
}
const useCustomCompareEffect = (effect, deps, depsEqual)=>{
if (process.env.NODE_ENV !== 'production') {
if (!Array.isArray(deps) || !deps.length) {
console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
}
if (typeof depsEqual !== 'function') {
console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
}
}
const ref = React.useRef(undefined);
const forceUpdate = useUpdate();
if (!ref.current) {
ref.current = deps;
}
useIsomorphicLayoutEffect(()=>{
if (!depsEqual(deps, ref.current)) {
ref.current = deps;
forceUpdate();
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
React.useEffect(effect, ref.current);
};
const useDeepCompareEffect = (effect, deps)=>{
if (process.env.NODE_ENV !== 'production') {
if (!Array.isArray(deps) || !deps.length) {
console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
}
}
useCustomCompareEffect(effect, deps, lodashEs.isEqual);
};
/**
* Creates a stable identifier for a BasicTarget that can be safely used in effect dependencies.
*
* This hook solves the problem where passing unstable function references like `() => document`
* would cause infinite re-renders when used directly in effect dependency arrays.
*
* @param target - The target element (ref, function, or direct element)
* @param defaultElement - Default element to use if target is undefined
* @returns A stable reference that only changes when the actual target element changes
*
* @example
* ```tsx
* // For ref objects: returns the ref itself (stable)
* const ref = useRef<HTMLDivElement>(null)
* const key = useStableTarget(ref) // key === ref (stable)
*
* // For functions: returns the resolved actual element
* const key = useStableTarget(() => document) // key === document (stable)
*
* // For direct elements: returns the element itself
* const key = useStableTarget(divElement) // key === divElement (stable)
* ```
*/ function useStableTarget(target, defaultElement) {
const targetRef = React.useRef(target);
targetRef.current = target;
// Calculate stable key without memoization
// For ref objects: return the ref itself (always stable)
// For functions/direct elements: resolve to the actual element
let stableKey;
if (!target) {
stableKey = defaultElement != null ? defaultElement : null;
} else if (typeof target === 'object' && 'current' in target) {
// Ref object - use the ref itself as the stable key
stableKey = target;
} else {
// Function or direct element - resolve to actual element
stableKey = getTargetElement(target, defaultElement);
}
return {
/** The stable key that can be safely used in effect dependencies */ key: stableKey,
/** A ref containing the current target (useful for accessing in effects) */ ref: targetRef
};
}
function useEventListenerImpl(eventName, handler, element, options = defaultOptions$1) {
const savedHandler = useLatest(handler);
const { key: elementKey, ref: elementRef } = useStableTarget(element, defaultWindow);
useDeepCompareEffect(()=>{
// Call getTargetElement inside effect to support ref-based targets
// (ref.current is null during render, only available in commit phase)
const targetElement = getTargetElement(elementRef.current, defaultWindow);
if (!(targetElement && targetElement.addEventListener)) {
return;
}
const eventListener = (event)=>savedHandler.current(event);
on(targetElement, eventName, eventListener, options);
return ()=>{
if (!(targetElement && targetElement.removeEventListener)) {
return;
}
off(targetElement, eventName, eventListener);
};
}, [
eventName,
elementKey,
options
]);
}
function noop() {}
const useEventListener = isBrowser ? useEventListenerImpl : noop;
const useMount = (fn)=>{
if (isDev) {
if (!isFunction(fn)) {
console.error(`useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`);
}
}
React.useEffect(()=>{
fn == null ? void 0 : fn();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
};
const useActiveElement = ()=>{
const [active, setActive] = React.useState(null);
const listener = React.useCallback(()=>{
var _window;
setActive((_window = window) == null ? void 0 : _window.document.activeElement);
}, []);
useEventListener('blur', listener, defaultWindow, true);
useEventListener('focus', listener, defaultWindow, true);
useMount(()=>{
var _window;
setActive((_window = window) == null ? void 0 : _window.document.activeElement);
});
return active;
};
function useMountedState() {
const mountedRef = React.useRef(false);
const get = React.useCallback(()=>mountedRef.current, []);
React.useEffect(()=>{
mountedRef.current = true;
return ()=>{
mountedRef.current = false;
};
}, []);
return get;
}
function asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _async_to_generator$7(fn) {
return function() {
var self = this, args = arguments;
return new Promise(function(resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep$7(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
const useAsyncEffect = (effect, cleanup = noop$1, deps)=>{
const mounted = useMountedState();
React.useEffect(()=>{
const execute = ()=>_async_to_generator$7(function*() {
if (!mounted()) {
return;
}
yield effect();
})();
execute();
return ()=>{
cleanup();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, deps);
};
const listerOptions = {
passive: true
};
const useClickOutside = (target, handler, enabled = true)=>{
const savedHandler = useLatest(handler);
const listener = (event)=>{
if (!enabled) {
return;
}
const element = getTargetElement(target);
if (!element) {
return;
}
const elements = event.composedPath();
if (element === event.target || elements.includes(element)) {
return;
}
savedHandler.current(event);
};
useEventListener('mousedown', listener, defaultWindow, listerOptions);
useEventListener('touchstart', listener, defaultWindow, listerOptions);
};
function getInitialState$5(key, defaultValue) {
// Prevent a React hydration mismatch when a default value is provided.
if (defaultValue !== undefined) {
return defaultValue;
}
if (isBrowser) {
return Cookies__default.default.get(key);
}
if (process.env.NODE_ENV !== 'production') {
console.warn('`useCookie` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
}
return '';
}
const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
const [cookieValue, setCookieValue] = React.useState(getInitialState$5(key, defaultValue));
React.useEffect(()=>{
const getStoredValue = ()=>{
const raw = Cookies__default.default.get(key);
if (raw !== undefined && raw !== null) {
return raw;
} else {
if (defaultValue === undefined) {
Cookies__default.default.remove(key);
} else {
Cookies__default.default.set(key, defaultValue, options);
}
return defaultValue;
}
};
setCookieValue(getStoredValue());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
defaultValue,
key,
JSON.stringify(options)
]);
const updateCookie = React.useCallback((newValue)=>{
const value = isFunction(newValue) ? newValue(cookieValue) : newValue;
if (value === undefined) {
Cookies__default.default.remove(key);
} else {
Cookies__default.default.set(key, value, options);
}
setCookieValue(value);
}, // eslint-disable-next-line react-hooks/exhaustive-deps
[
key,
cookieValue,
JSON.stringify(options)
]);
const refreshCookie = React.useCallback(()=>{
const cookieValue = Cookies__default.default.get(key);
if (isString(cookieValue)) {
setCookieValue(cookieValue);
}
}, [
key
]);
return [
cookieValue,
updateCookie,
refreshCookie
];
};
/**
* keep function reference immutable
*/ const useEvent = (fn)=>{
if (isDev) {
if (!isFunction(fn)) {
console.error(`useEvent expected parameter is a function, got ${typeof fn}`);
}
}
const handlerRef = React.useRef(fn);
useIsomorphicLayoutEffect(()=>{
handlerRef.current = fn;
}, [
fn
]);
return React.useCallback((...args)=>{
const fn = handlerRef.current;
return fn(...args);
}, []);
};
const useInterval = (callback, delay, options = defaultOptions$1)=>{
const { immediate, controls } = options;
const savedCallback = useLatest(callback);
const isActive = React.useRef(false);
const timer = React.useRef(null);
const clean = ()=>{
timer.current && clearInterval(timer.current);
};
const resume = useEvent(()=>{
isActive.current = true;
timer.current = setInterval(()=>savedCallback.current(), delay || 0);
});
const pause = useEvent(()=>{
isActive.current = false;
clean();
});
React.useEffect(()=>{
if (immediate) {
savedCallback.current();
}
if (controls) {
return;
}
if (delay !== null) {
resume();
return ()=>{
clean();
};
}
return undefined;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
delay,
immediate
]);
return {
isActive,
pause,
resume
};
};
function padZero(time) {
return `${time}`.length < 2 ? `0${time}` : `${time}`;
}
function getHMSTime(timeDiff) {
if (timeDiff <= 0) {
return [
'00',
'00',
'00'
];
}
if (timeDiff > 100 * 3600) {
return [
'99',
'59',
'59'
];
}
const hour = Math.floor(timeDiff / 3600);
const minute = Math.floor((timeDiff - hour * 3600) / 60);
const second = timeDiff - hour * 3600 - minute * 60;
return [
padZero(hour),
padZero(minute),
padZero(second)
];
}
const useCountDown = (time, format = getHMSTime, callback)=>{
const [remainTime, setRemainTime] = React.useState(time);
const [delay, setDelay] = React.useState(1000);
useInterval(()=>{
if (remainTime <= 0) {
setDelay(null);
return;
}
setRemainTime(remainTime - 1);
}, delay);
React.useEffect(()=>{
if (time > 0 && remainTime <= 0) {
callback && callback();
}
}, [
callback,
remainTime,
time
]);
const [hour, minute, secoud] = format(remainTime);
return [
hour,
minute,
secoud
];
};
const useCounter = (initialValue = 0, max = null, min = null)=>{
// avoid exec init code every render
const initFunc = ()=>{
let init = typeof initialValue === 'function' ? initialValue() : initialValue;
typeof init !== 'number' && console.error(`initialValue has to be a number, got ${typeof initialValue}`);
if (typeof min === 'number') {
init = Math.max(init, min);
} else if (min !== null) {
console.error(`min has to be a number, got ${typeof min}`);
}
if (typeof max === 'number') {
init = Math.min(init, max);
} else if (max !== null) {
console.error(`max has to be a number, got ${typeof max}`);
}
return init;
};
const [value, setValue] = React.useState(initFunc);
const set = useEvent((newState)=>{
setValue((v)=>{
let nextValue = typeof newState === 'function' ? newState(v) : newState;
if (typeof min === 'number') {
nextValue = Math.max(nextValue, min);
}
if (typeof max === 'number') {
nextValue = Math.min(nextValue, max);
}
return nextValue;
});
});
const inc = (delta = 1)=>{
set((value)=>value + delta);
};
const dec = (delta = 1)=>{
set((value)=>value - delta);
};
const reset = ()=>{
set(initFunc);
};
return [
value,
set,
inc,
dec,
reset
];
};
const defaultOptions = {
observe: false
};
function getInitialState$4(defaultValue) {
// Prevent a React hydration mismatch when a default value is provided.
if (defaultValue !== undefined) {
return defaultValue;
}
if (isBrowser) {
return '';
}
if (process.env.NODE_ENV !== 'production') {
console.warn('`useCssVar` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
}
return '';
}
const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
const { observe } = options;
const [variable, setVariable] = React.useState(getInitialState$4(defaultValue));
const observerRef = React.useRef();
const set = React.useCallback((v)=>{
const element = getTargetElement(target);
if (element == null ? void 0 : element.style) {
element == null ? void 0 : element.style.setProperty(prop, v);
setVariable(v);
}
}, [
prop,
target
]);
const updateCssVar = React.useCallback(()=>{
const element = getTargetElement(target);
if (element) {
var _window_getComputedStyle_getPropertyValue;
const value = (_window_getComputedStyle_getPropertyValue = window.getComputedStyle(element).getPropertyValue(prop)) == null ? void 0 : _window_getComputedStyle_getPropertyValue.trim();
setVariable(value);
}
}, [
target,
prop
]);
React.useEffect(()=>{
var _window_getComputedStyle_getPropertyValue;
const element = getTargetElement(target);
if (!element) {
return;
}
const value = (_window_getComputedStyle_getPropertyValue = window.getComputedStyle(element).getPropertyValue(prop)) == null ? void 0 : _window_getComputedStyle_getPropertyValue.trim();
/** if var don't has value and defaultValue exist */ if (!value && defaultValue) {
set(defaultValue);
} else {
updateCssVar();
}
if (!observe) {
return;
}
observerRef.current = new MutationObserver(updateCssVar);
observerRef.current.observe(element, {
attributeFilter: [
'style',
'class'
]
});
return ()=>{
if (observerRef.current) {
observerRef.current.disconnect();
}
};
}, [
observe,
target,
updateCssVar,
set,
defaultValue,
prop
]);
return [
variable,
set
];
};
const useCycleList = (list, i = 0)=>{
const [index, setIndex] = React.useState(i);
const set = (i)=>{
const length = list.length;
const nextIndex = ((index + i) % length + length) % length;
setIndex(nextIndex);
};
const next = (i = 1)=>{
set(i);
};
const prev = (i = 1)=>{
set(-i);
};
return [
list[index],
next,
prev
];
};
function guessSerializerType(rawInit) {
return rawInit == null || rawInit === undefined ? 'any' : rawInit instanceof Set ? 'set' : rawInit instanceof Map ? 'map' : rawInit instanceof Date ? 'date' : typeof rawInit === 'boolean' ? 'boolean' : typeof rawInit === 'string' ? 'string' : typeof rawInit === 'object' ? 'object' : Array.isArray(rawInit) ? 'object' : !Number.isNaN(rawInit) ? 'number' : 'any';
}
const StorageSerializers = {
boolean: {
read: (v)=>v === 'true',
write: (v)=>String(v)
},
object: {
read: (v)=>JSON.parse(v),
write: (v)=>JSON.stringify(v)
},
number: {
read: (v)=>Number.parseFloat(v),
write: (v)=>String(v)
},
any: {
read: (v)=>v,
write: (v)=>String(v)
},
string: {
read: (v)=>v,
write: (v)=>String(v)
},
map: {
read: (v)=>new Map(JSON.parse(v)),
write: (v)=>JSON.stringify(Array.from(v.entries()))
},
set: {
read: (v)=>new Set(JSON.parse(v)),
write: (v)=>JSON.stringify(Array.from(v))
},
date: {
read: (v)=>new Date(v),
write: (v)=>v.toISOString()
}
};
function getInitialState$3(key, defaultValue, storage, serializer, onError) {
// Prevent a React hydration mismatch when a default value is provided.
if (defaultValue !== undefined) {
return defaultValue;
}
if (isBrowser) {
try {
const raw = storage == null ? void 0 : storage.getItem(key);
if (raw !== undefined && raw !== null) {
return serializer == null ? void 0 : serializer.read(raw);
}
return null;
} catch (error) {
onError == null ? void 0 : onError(error);
}
}
// A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
if (process.env.NODE_ENV !== 'production') {
console.warn('`createStorage` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
}
return null;
}
function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStorage : undefined, options = defaultOptions$1) {
let storage;
const { onError = defaultOnError, effectStorageValue, mountStorageValue, listenToStorageChanges = true } = options;
const storageValueRef = useLatest(mountStorageValue != null ? mountStorageValue : effectStorageValue);
const onErrorRef = useLatest(onError);
try {
storage = getStorage();
} catch (err) {
onErrorRef.current(err);
}
const type = guessSerializerType(defaultValue);
var _options_serializer;
const serializerRef = useLatest((_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type]);
const [state, setState] = React.useState(getInitialState$3(key, defaultValue, storage, serializerRef.current, onError));
useDeepCompareEffect(()=>{
const serializer = serializerRef.current;
const storageValue = storageValueRef.current;
var _ref;
const data = (_ref = storageValue ? isFunction(storageValue) ? storageValue() : storageValue : defaultValue) != null ? _ref : null;
const getStoredValue = ()=>{
try {
const raw = storage == null ? void 0 : storage.getItem(key);
if (raw !== undefined && raw !== null) {
return serializer.read(raw);
} else {
storage == null ? void 0 : storage.setItem(key, serializer.write(data));
return data;
}
} catch (e) {
onErrorRef.current(e);
}
};
setState(getStoredValue());
}, [
key,
storage
]);
const updateState = useEvent((valOrFunc)=>{
const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
setState(currentState);
if (currentState === null) {
storage == null ? void 0 : storage.removeItem(key);
} else {
try {
storage == null ? void 0 : storage.setItem(key, serializerRef.current.write(currentState));
} catch (e) {
onErrorRef.current(e);
}
}
});
const listener = useEvent(()=>{
try {
const raw = storage == null ? void 0 : storage.getItem(key);
if (raw !== undefined && raw !== null) {
updateState(serializerRef.current.read(raw));
} else {
updateState(null);
}
} catch (e) {
onErrorRef.current(e);
}
});
React.useEffect(()=>{
if (listenToStorageChanges) {
window.addEventListener('storage', listener);
return ()=>window.removeEventListener('storage', listener);
}
return ()=>{};
}, [
listenToStorageChanges,
listener
]);
return [
state,
updateState
];
}
const useColorMode = (options)=>{
const { selector = 'html', attribute = 'class', modes, defaultValue, storageKey = 'reactuses-color-mode', storage = ()=>isBrowser ? localStorage : undefined, initialValueDetector, modeClassNames = {} } = options;
const initialValueDetectorRef = useLatest(initialValueDetector);
// Validate modes array
if (!modes || modes.length === 0) {
throw new Error('useColorMode: modes array cannot be empty');
}
// Get initial value from detector or use first mode as fallback
const getInitialValue = React.useCallback(()=>{
if (initialValueDetectorRef.current) {
const initialValueDetector = initialValueDetectorRef.current;
try {
const detectedValue = initialValueDetector();
return modes.includes(detectedValue) ? detectedValue : modes[0];
} catch (e) {
return modes[0];
}
}
return defaultValue && modes.includes(defaultValue) ? defaultValue : modes[0];
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
defaultValue,
JSON.stringify(modes)
]);
const [colorMode, setColorMode] = useStorage(storageKey, defaultValue, storage, {
mountStorageValue: getInitialValue
});
// Apply color mode to DOM element
useDeepCompareEffect(()=>{
var _window;
if (!colorMode) return;
const element = (_window = window) == null ? void 0 : _window.document.querySelector(selector);
if (!element) return;
// Remove all existing mode classes/attributes
modes.forEach((mode)=>{
const className = modeClassNames[mode] || mode;
if (attribute === 'class') {
element.classList.remove(className);
} else {
element.removeAttribute(attribute);
}
});
// Apply current mode class/attribute
const currentClassName = modeClassNames[colorMode] || colorMode;
if (attribute === 'class') {
element.classList.add(currentClassName);
} else {
element.setAttribute(attribute, currentClassName);
}
return ()=>{
// Cleanup: remove current mode class/attribute
if (attribute === 'class') {
element.classList.remove(currentClassName);
} else {
element.removeAttribute(attribute);
}
};
}, [
colorMode,
selector,
attribute,
modes,
modeClassNames
]);
const cycle = useEvent(()=>{
if (!colorMode) return;
const currentIndex = modes.indexOf(colorMode);
const nextIndex = (currentIndex + 1) % modes.length;
setColorMode(modes[nextIndex]);
});
return [
colorMode,
setColorMode,
cycle
];
};
function getSystemPreference() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const useDarkMode = (options)=>{
const { selector = 'html', attribute = 'class', classNameDark = '', classNameLight = '', storageKey = 'reactuses-color-scheme', storage = ()=>isBrowser ? localStorage : undefined, defaultValue = false } = options;
// Convert boolean-based options to string-based options for useColorMode
const [colorMode, setColorMode] = useColorMode({
selector,
attribute,
modes: [
'light',
'dark'
],
defaultValue: defaultValue ? 'dark' : 'light',
storageKey,
storage,
initialValueDetector: getSystemPreference,
modeClassNames: {
dark: classNameDark,
light: classNameLight
}
});
// Convert string mode back to boolean
const dark = colorMode === 'dark';
// Toggle function that switches between dark and light
const toggle = React.useCallback(()=>{
setColorMode(dark ? 'light' : 'dark');
}, [
dark,
setColorMode
]);
// Set function that accepts boolean value
const setDark = React.useCallback((value)=>{
if (typeof value === 'function') {
const currentDark = colorMode === 'dark';
const newDark = value(currentDark);
if (newDark !== null) {
setColorMode(newDark ? 'dark' : 'light');
}
} else if (value !== null) {
setColorMode(value ? 'dark' : 'light');
}
}, [
colorMode,
setColorMode
]);
return [
dark,
toggle,
setDark
];
};
function useUnmount(fn) {
if (isDev) {
if (!isFunction(fn)) {
console.error(`useUnmount expected parameter is a function, got ${typeof fn}`);
}
}
const fnRef = useLatest(fn);
React.useEffect(()=>()=>{
fnRef.current();
}, [
fnRef
]);
}
const useDebounceFn = (fn, wait, options)=>{
if (isDev) {
if (!isFunction(fn)) {
console.error(`useDebounceFn expected parameter is a function, got ${typeof fn}`);
}
}
const fnRef = useLatest(fn);
const debounced = React.useMemo(()=>lodashEs.debounce((...args)=>{
return fnRef.current(...args);
}, wait, options), // eslint-disable-next-line react-hooks/exhaustive-deps
[
JSON.stringify(options),
wait
]);
useUnmount(()=>{
debounced.cancel();
});
return {
run: debounced,
cancel: debounced.cancel,
flush: debounced.flush
};
};
const useDebounce = (value, wait, options)=>{
const [debounced, setDebounced] = React.useState(value);
const { run } = useDebounceFn(()=>{
setDebounced(value);
}, wait, options);
React.useEffect(()=>{
run();
}, [
run,
value
]);
return debounced;
};
function getInitialState$2(defaultValue) {
// Prevent a React hydration mismatch when a default value is provided.
if (defaultValue !== undefined) {
return defaultValue;
}
if (isBrowser) {
return document.visibilityState;
}
if (process.env.NODE_ENV !== 'production') {
console.warn('`useDocumentVisibility` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
}
return 'visible';
}
function useDocumentVisibility(defaultValue) {
const [visible, setVisible] = React.useState(getInitialState$2(defaultValue));
useEventListener('visibilitychange', ()=>{
setVisible(document.visibilityState);
}, ()=>document);
React.useEffect(()=>{
setVisible(document.visibilityState);
}, []);
return visible;
}
const useDoubleClick = ({ target, latency = 300, onSingleClick = ()=>{}, onDoubleClick = ()=>{} })=>{
const handle = React.useCallback((onSingleClick, onDoubleClick)=>{
let count = 0;
return (e)=>{
// prevent ios double click slide
if (e.type === 'touchend') {
e.stopPropagation();
e.preventDefault();
}
count += 1;
setTimeout(()=>{
if (count === 1) {
onSingleClick(e);
} else if (count === 2) {
onDoubleClick(e);
}
count = 0;
}, latency);
};
}, [
latency
]);
const handleClick = handle(onSingleClick, onDoubleClick);
const handleTouchEnd = handle(onSingleClick, onDoubleClick);
useEventListener('click', handleClick, target);
useEventListener('touchend', handleTouchEnd, target, {
passive: false
});
};
function isScrollX(node) {
if (!node) {
return false;
}
return getComputedStyle(node).overflowX === 'auto' || getComputedStyle(node).overflowX === 'scroll';
}
function isScrollY(node) {
if (!node) {
return false;
}
return getComputedStyle(node).overflowY === 'auto' || getComputedStyle(node).overflowY === 'scroll';
}
const useDraggable = (target, options = {})=>{
const { draggingElement, containerElement } = options;
var _options_handle;
const draggingHandle = (_options_handle = options.handle) != null ? _options_handle : target;
var _options_initialValue;
const [position, setPositon] = React.useState((_options_initialValue = options.initialValue) != null ? _options_initialValue : {
x: 0,
y: 0
});
useDeepCompareEffect(()=>{
var _options_initialValue;
setPositon((_options_initialValue = options.initialValue) != null ? _options_initialValue : {
x: 0,
y: 0
});
}, [
options.initialValue
]);
const [pressedDelta, setPressedDelta] = React.useState();
const filterEvent = (e)=>{
if (options.pointerTypes) {
return options.pointerTypes.includes(e.pointerType);
}
return true;
};
const handleEvent = (e)=>{
if (options.preventDefault) {
e.preventDefault();
}
if (options.stopPropagation) {
e.stopPropagation();
}
};
const start = (e)=>{
var _container_getBoundingClientRect;
const element = getTargetElement(target);
if (!filterEvent(e) || !element) {
return;
}
if (options.exact && e.target !== element) {
return;
}
const container = getTargetElement(containerElement);
const containerRect = container == null ? void 0 : (_container_getBoundingClientRect = container.getBoundingClientRect) == null ? void 0 : _container_getBoundingClientRect.call(container);
const targetRect = element.getBoundingClientRect();
const pos = {
x: e.clientX - (container && containerRect ? targetRect.left - (containerRect == null ? void 0 : containerRect.left) + container.scrollLeft : targetRect.left),
y: e.clientY - (container && containerRect ? targetRect.top - containerRect.top + container.scrollTop : targetRect.top)
};
if ((options.onStart == null ? void 0 : options.onStart.call(options, pos, e)) === false) {
return;
}
setPressedDelta(pos);
handleEvent(e);
};
const move = (e)=>{
const element = getTargetElement(target);
if (!filterEvent(e) || !element) {
return;
}
if (!pressedDelta) {
return;
}
const container = getTargetElement(containerElement);
const targetRect = element.getBoundingClientRect();
let { x, y } = position;
x = e.clientX - pressedDelta.x;
y = e.clientY - pressedDelta.y;
if (container) {
const containerWidth = isScrollX(container) ? container.scrollWidth : container.clientWidth;
const containerHeight = isScrollY(container) ? container.scrollHeight : container.clientHeight;
x = Math.min(Math.max(0, x), containerWidth - targetRect.width);
y = Math.min(Math.max(0, y), containerHeight - targetRect.height);
}
setPositon({
x,
y
});
options.onMove == null ? void 0 : options.onMove.call(options, position, e);
handleEvent(e);
};
const end = (e)=>{
if (!filterEvent(e)) {
return;
}
if (!pressedDelta) {
return;
}
setPressedDelta(undefined);
options.onEnd == null ? void 0 : options.onEnd.call(options, position, e);
handleEvent(e);
};
useEventListener('pointerdown', start, draggingHandle, true);
useEventListener('pointermove', move, draggingElement, true);
useEventListener('pointerup', end, draggingElement, true);
return [
position.x,
position.y,
!!pressedDelta,
setPositon
];
};
const useDropZone = (target, onDrop)=>{
const [over, setOver] = React.useState(false);
const counter = React.useRef(0);
useEventListener('dragenter', (event)=>{
event.preventDefault();
counter.current += 1;
setOver(true);
}, target);
useEventListener('dragover', (event)=>{
event.preventDefault();
}, target);
useEventListener('dragleave', (event)=>{
event.preventDefault();
counter.current -= 1;
if (counter.current === 0) {
setOver(false);
}
}, target);
useEventListener('drop', (event)=>{
var _event_dataTransfer;
event.preventDefault();
counter.current = 0;
setOver(false);
var _event_dataTransfer_files;
const files = Array.from((_event_dataTransfer_files = (_event_dataTransfer = event.dataTransfer) == null ? void 0 : _event_dataTransfer.files) != null ? _event_dataTransfer_files : []);
onDrop == null ? void 0 : onDrop(files.length === 0 ? null : files);
}, target);
return over;
};
const useResizeObserver = (target, callback, options = defaultOptions$1)=>{
const savedCallback = useLatest(callback);
const observerRef = React.useRef();
const { key: targetKey, ref: targetRef } = useStableTarget(target);
const stop = React.useCallback(()=>{
if (observerRef.current) {
observerRef.current.disconnect();
}
}, []);
useDeepCompareEffect(()=>{
const element = getTargetElement(targetRef.current);
if (!element) {
return;
}
observerRef.current = new ResizeObserver(savedCallback.current);
observerRef.current.observe(element, options);
return stop;
}, [
targetKey,
options
]);
return stop;
};
const useElementBounding = (target, options = defaultOptions$1)=>{
const { reset = true, windowResize = true, windowScroll = true, immediate = true } = options;
const [height, setHeight] = React.useState(0);
const [bottom, setBottom] = React.useState(0);
const [left, setLeft] = React.useState(0);
const [right, setRight] = React.useState(0);
const [top, setTop] = React.useState(0);
const [width, setWidth] = React.useState(0);
const [x, setX] = React.useState(0);
const [y, setY] = React.useState(0);
const update = useEvent(()=>{
const element = getTargetElement(target);
if (!element) {
if (reset) {
setHeight(0);
setBottom(0);
setLeft(0);
setRight(0);
setTop(0);
setWidth(0);
setX(0);
setY(0);
}
return;
}
const rect = element.getBoundingClientRect();
setHeight(rect.height);
setBottom(rect.bottom);
setLeft(rect.left);
setRight(rect.right);
setTop(rect.top);
setWidth(rect.width);
setX(rect.x);
setY(rect.y);
});
useResizeObserver(target, update);
React.useEffect(()=>{
if (immediate) {
update();
}
}, [
immediate,
update
]);
React.useEffect(()=>{
if (windowScroll) {
window.addEventListener('scroll', update, {
passive: true
});
}
if (windowResize) {
window.addEventListener('resize', update, {
passive: true
});
}
return ()=>{
if (windowScroll) {
window.removeEventListener('scroll', update);
}
if (windowResize) {
window.removeEventListener('resize', update);
}
};
}, [
update,
windowResize,
windowScroll
]);
return {
height,
bottom,
left,
right,
top,
width,
x,
y,
update
};
};
const useElementSize = (target, options = defaultOptions$1)=>{
const { box = 'content-box' } = options;
const [width, setWidth] = React.useState(0);
const [height, setHeight] = React.useState(0);
useResizeObserver(target, ([entry])=>{
const boxSize = box === 'border-box' ? entry.borderBoxSize : box === 'content-box' ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
if (boxSize) {
setWidth(boxSize.reduce((acc, { inlineSize })=>acc + inlineSize, 0));
setHeight(boxSize.reduce((acc, { blockSize })=>acc + blockSize, 0));
} else {
// fallback
setWidth(entry.contentRect.width);
setHeight(entry.contentRect.height);
}
}, options);
return [
width,
height
];
};
const useIntersectionObserver = (target, callback, options = defaultOptions$1)=>{
const savedCallback = useLatest(callback);
const observerRef = React.useRef();
const { key: targetKey, ref: targetRef } = useStableTarget(target);
const stop = React.useCallback(()=>{
if (observerRef.current) {
observerRef.current.disconnect();
}
}, []);
useDeepCompareEffect(()=>{
const element = getTargetElement(targetRef.current);
if (!element) {
return;
}
observerRef.current = new IntersectionObserver(savedCallback.current, options);
observerRef.current.observe(element);
return stop;
}, [
targetKey,
options
]);
return stop;
};
const useElementVisibility = (target, options = defaultOptions$1)=>{
const [visible, setVisible] = React.useState(false);
const callback = React.useCallback((entries)=>{
const rect = entries[0].boundingClientRect;
setVisible(rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0);
}, []);
const stop = useIntersectionObserver(target, callback, options);
return [
visible,
stop
];
};
function useEventEmitter() {
const listeners = React.useRef([]);
const _disposed = React.useRef(false);
const _event = React.useRef((listener)=>{
listeners.current.push(listener);
const disposable = {
dispose: ()=>{
if (!_disposed.current) {
for(let i = 0; i < listeners.current.length; i++){
if (listeners.current[i] === listener) {
listeners.current.splice(i, 1);
return;
}
}
}
}
};
return disposable;
});
const fire = (arg1, arg2)=>{
const queue = [];
for(let i = 0; i < listeners.current.length; i++){
queue.push(listeners.current[i]);
}
for(let i = 0; i < queue.length; i++){
queue[i].call(undefined, arg1, arg2);
}
};
const dispose = ()=>{
if (listeners.current.length !== 0) {
listeners.current.length = 0;
}
_disposed.current = true;
};
return [
_event.current,
fire,
dispose
];
}
function useSupported(callback, sync = false) {
const [supported, setSupported] = React.useState(false);
const effect = sync ? useIsomorphicLayoutEffect : React.useEffect;
effect(()=>{
setSupported(Boolean(callback()));
}, []);
return supported;
}
function asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _async_to_generator$6(fn) {
return function() {
var self = this, args = arguments;
return new Promise(function(resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep$6(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
const useEyeDropper = ()=>{
const isSupported = useSupported(()=>typeof window !== 'undefined' && 'EyeDropper' in window, true);
const open = React.useCallback((options = {})=>_async_to_generator$6(function*() {
if (!isSupported) {
return {
sRGBHex: ''
};
}
const eyeDropper = new window.EyeDropper();
return eyeDropper.open(options);
})(), [
isSupported
]);
return [
isSupported,
open
];
};
function useFavicon(href, baseUrl = '', rel = 'icon') {
React.useEffect(()=>{
const url = `${baseUrl}${href}`;
const element = document.head.querySelectorAll(`link[rel*="${rel}"]`);
element.forEach((el)=>el.href = url);
if (element.length === 0) {
const link = document.createElement('link');
link.rel = rel;
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}
}, [
baseUrl,
href,
rel
]);
}
function asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
function _async_to_generator$5(fn) {
return function() {
var self = this, args = arguments;
return new Promise(function(resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep$5(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function _extends$4() {
_extends$4 = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i];
for(var key in source){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$4.apply(this, arguments);
}
const DEFAULT_OPTIONS = {
multiple: true,
accept: '*'
};
const useFileDialog = (options = defaultOptions$1)=>{
const [files, setFiles] = React.useState(null);
const inputRef = React.useRef();
const fileOpenPromiseRef = React.useRef(null);
const resolveFileOpenPromiseRef = React.useRef();
const initFn = React.useCallback(()=>{
if (typeof document === 'undefined') {
return undefined;
}
const input = document.createElement('input');
input.type = 'file';
input.onchange = (event)=>{
const result = event.target;
setFiles(result.files);
resolveFileOpenPromiseRef.current == null ? void 0 : resolveFileOpenPromiseRef.current.call(resolveFileOpenPromiseRef, result.files);
};
return input;
}, []);
inputRef.current = initFn();
const open = (localOptions)=>_async_to_generator$5(function*() {
if (!inputRef.current) {
return;
}
const _options = _extends$4({}, DEFAULT_OPTIONS, options, localOptions);
inputRef.current.multiple = _options.multiple;
inputRef.current.accept = _options.accept;
// Only set capture attribute if it's explicitly provided
if (_options.capture !== undefined) {
inputRef.current.capture = _options.capture;
}
fileOpenPromiseRef.current = new Promise((resolve)=>{
resolveFileOpenPromiseRef.current = resolve;
});
inputRef.current.click();
return fileOpenPromiseRef.current;
})();
const reset = ()=>{
setFiles(null);
resolveFileOpenPromiseRef.current == null ? void 0 : resolveFileOpenPromiseRef.current.call(resolveFileOpenPromiseRef, null);
if (inputRef.current) {
inputRef.current.value = '';
}
};
return [
files,
open,
reset
];
};
const useFirstMountState = ()=>{
const isFirst = React.useRef(true);
if (isFirst.current) {
isFirst.current = false;
return true;
}
return isFirst.current;
};
const useFocus = (target, initialValue = false)=>{
const [focus, innerSetFocus] = React.useState(initialValue);
useEventListener('focus', ()=>innerSetFocus(true), target);
useEventListener('blur', ()=>innerSetFocus(false), target);
const setFocus = (value)=>{
const element = getTargetElement(target);
if (!element) {
return;
}
if (!value) {
element.blur();
} else if (value) {