141 lines
3.4 KiB
Plaintext
141 lines
3.4 KiB
Plaintext
"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
|
|
};
|