@nextui-org/react-utils
Version:
A set of utilities for react on client side
141 lines (138 loc) • 3.52 kB
JavaScript
"use client";
// src/dom.ts
import {
useImperativeHandle,
useLayoutEffect,
useRef
} from "react";
function canUseDOM() {
return !!(typeof window !== "undefined" && window.document && window.document.createElement);
}
var isBrowser = canUseDOM();
function getUserAgentBrowser(navigator) {
const { userAgent: ua, vendor } = navigator;
const android = /(android)/i.test(ua);
switch (true) {
case /CriOS/.test(ua):
return "Chrome for iOS";
case /Edg\//.test(ua):
return "Edge";
case (android && /Silk\//.test(ua)):
return "Silk";
case (/Chrome/.test(ua) && /Google Inc/.test(vendor)):
return "Chrome";
case /Firefox\/\d+\.\d+$/.test(ua):
return "Firefox";
case android:
return "AOSP";
case /MSIE|Trident/.test(ua):
return "IE";
case (/Safari/.test(navigator.userAgent) && /Apple Computer/.test(ua)):
return "Safari";
case /AppleWebKit/.test(ua):
return "WebKit";
default:
return null;
}
}
function getUserAgentOS(navigator) {
const { userAgent: ua, platform } = navigator;
switch (true) {
case /Android/.test(ua):
return "Android";
case /iPhone|iPad|iPod/.test(platform):
return "iOS";
case /Win/.test(platform):
return "Windows";
case /Mac/.test(platform):
return "Mac";
case /CrOS/.test(ua):
return "Chrome OS";
case /Firefox/.test(ua):
return "Firefox OS";
default:
return null;
}
}
function detectDeviceType(navigator) {
const { userAgent: ua } = navigator;
if (/(tablet)|(iPad)|(Nexus 9)/i.test(ua))
return "tablet";
if (/(mobi)/i.test(ua))
return "phone";
return "desktop";
}
function detectOS(os) {
if (!isBrowser)
return false;
return getUserAgentOS(window.navigator) === os;
}
function detectBrowser(browser) {
if (!isBrowser)
return false;
return getUserAgentBrowser(window.navigator) === browser;
}
function detectTouch() {
if (!isBrowser)
return false;
return window.ontouchstart === null && window.ontouchmove === null && window.ontouchend === null;
}
function createDOMRef(ref) {
return {
UNSAFE_getDOMNode() {
return ref.current;
}
};
}
function createFocusableRef(domRef, focusableRef = domRef) {
return {
...createDOMRef(domRef),
focus() {
if (focusableRef.current) {
focusableRef.current.focus();
}
}
};
}
function useDOMRef(ref) {
const domRef = useRef(null);
useImperativeHandle(ref, () => domRef.current);
return domRef;
}
function useFocusableRef(ref, focusableRef) {
const domRef = useRef(null);
useImperativeHandle(ref, () => createFocusableRef(domRef, focusableRef));
return domRef;
}
function useSyncRef(context, ref) {
useLayoutEffect(() => {
if (context && context.ref && ref && ref.current) {
context.ref.current = ref.current;
return () => {
var _a;
if ((_a = context.ref) == null ? void 0 : _a.current) {
context.ref.current = null;
}
};
}
}, [context, ref]);
}
function areRectsIntersecting(rect1, rect2) {
return rect1 && rect2 && rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y;
}
export {
canUseDOM,
isBrowser,
getUserAgentBrowser,
getUserAgentOS,
detectDeviceType,
detectOS,
detectBrowser,
detectTouch,
createDOMRef,
createFocusableRef,
useDOMRef,
useFocusableRef,
useSyncRef,
areRectsIntersecting
};