@grandlinex/react-components
Version:
273 lines (272 loc) • 8.21 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useQData = useQData;
exports.useQData19 = useQData19;
exports.useAsync = useAsync;
exports.useAutoClose = useAutoClose;
exports.useAutoClose18 = useAutoClose18;
exports.useTabStore = useTabStore;
exports.useKeyListener = useKeyListener;
exports.usePathQueryMap = usePathQueryMap;
const react_1 = require("react");
function useQData(q, init) {
const [element, setElement] = (0, react_1.useState)(init);
async function refresh() {
try {
const res = await q();
setElement(res);
}
catch (e) {
console.error(e);
setElement(null);
}
}
(0, react_1.useEffect)(() => {
if (element === undefined) {
refresh();
}
});
return [element, setElement, refresh];
}
/**
*
* @param q - Query function
* @param init - Initial value
* @return [state, isPending, refresh]
*/
function useQData19(q, init) {
const [state, formAction, isPending] = (0, react_1.useActionState)(async () => {
return q();
}, init);
return [state, isPending, formAction];
}
function useAsync(callback, dependencies = []) {
const [loading, setLoading] = (0, react_1.useState)(true);
const [error, setError] = (0, react_1.useState)();
const [value, setValue] = (0, react_1.useState)();
const callbackMemoized = (0, react_1.useCallback)(() => {
setLoading(true);
setError(undefined);
setValue(undefined);
callback()
.then(setValue)
.catch(setError)
.finally(() => setLoading(false));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, dependencies);
(0, react_1.useEffect)(() => {
callbackMemoized();
}, [callbackMemoized]);
return [value, loading, error];
}
function useAutoClose(closeFc, disabeld, extendSearch) {
const menuRef = (0, react_1.useRef)(null);
const closeFunc = (event) => {
if (menuRef.current && !menuRef.current.contains(event.target)) {
const es = extendSearch
? event.path?.find((el) => {
return el.className === extendSearch;
})
: false;
if (!es) {
closeFc();
}
}
};
(0, react_1.useEffect)(() => {
if (!disabeld) {
document.addEventListener('click', closeFunc);
}
return () => {
try {
document.removeEventListener('click', closeFunc);
}
catch (e) {
console.warn(e);
}
};
}, [disabeld]);
return menuRef;
}
function useAutoClose18({ extendSearch, closeFc, init, noScip, }) {
const menuRef = (0, react_1.useRef)(null);
const [open, setOpen] = (0, react_1.useState)(init || false);
const [skip, setSkip] = (0, react_1.useState)(noScip !== undefined ? !noScip : true);
function xOpen(b) {
if (!b) {
setSkip(noScip !== undefined ? !noScip : true);
}
setOpen(b);
}
const closeFunc = (event) => {
if (open && menuRef.current && !menuRef.current.contains(event.target)) {
const es = extendSearch
? event.path?.find((el) => {
return el.className === extendSearch;
})
: false;
if (!es) {
if (skip) {
setSkip(false);
}
else {
xOpen(false);
closeFc?.();
}
}
}
};
(0, react_1.useEffect)(() => {
if (open) {
document.addEventListener('click', closeFunc);
}
return () => {
if (open) {
document.removeEventListener('click', closeFunc);
}
};
});
return [menuRef, open, xOpen];
}
function useTabStore() {
const [panel, setPanel] = (0, react_1.useState)(null);
const [currentTabLeft, setCurrentTabLeft] = (0, react_1.useState)(0);
const [currentTabRight, setCurrentTabRight] = (0, react_1.useState)(0);
const [tabsLeft, setTabsLeft] = (0, react_1.useState)([]);
const [tabsRight, setTabsRight] = (0, react_1.useState)([]);
const moveTab = (key, dest, target, position) => {
if (dest === target) {
return;
}
if (dest === 'left') {
const tab = tabsLeft.find((e) => e.key === key);
const nTabs = tabsLeft.filter((e) => e.key !== key);
if (tab) {
setTabsLeft(nTabs);
setTabsRight([...tabsRight, tab]);
}
}
if (dest === 'right') {
const tab = tabsRight.find((e) => e.key === key);
const nTabs = tabsRight.filter((e) => e.key !== key);
if (tab) {
setTabsRight(nTabs);
setTabsLeft([...tabsLeft, tab]);
}
}
};
const addTab = (el, pos) => {
if (pos === 'left') {
const n = [...tabsLeft, el];
setTabsLeft(n);
setCurrentTabLeft(n.length - 1);
}
else {
const n = [...tabsRight, el];
setTabsRight(n);
setCurrentTabRight(n.length - 1);
}
};
const closeTab = (el, pos) => {
if (pos === 'left') {
if (tabsLeft[currentTabLeft - 1]) {
setCurrentTabLeft(currentTabLeft - 1);
}
else if (tabsLeft[0]) {
setCurrentTabLeft(0);
}
setTabsLeft(tabsLeft.filter((e) => e.key !== el));
}
else {
if (tabsRight[currentTabRight - 1]) {
setCurrentTabRight(currentTabRight - 1);
}
else if (tabsLeft[0]) {
setCurrentTabRight(0);
}
setTabsRight(tabsRight.filter((e) => e.key !== el));
}
};
const setCurrentTab = (index, pos) => {
if (pos === 'left') {
setCurrentTabLeft(index);
}
else {
setCurrentTabRight(index);
}
};
const reset = () => {
setCurrentTabLeft(0);
setCurrentTabRight(0);
setTabsLeft([]);
setTabsRight([]);
};
const tabState = {
currentTabRight,
currentTabLeft,
tabsLeft,
tabsRight,
panel,
};
return {
tabState,
addTab,
closeTab,
moveTab,
setCurrentTab,
setPanel,
reset,
};
}
function useKeyListener(binds) {
const keys = (0, react_1.useMemo)(() => {
const s = new Set();
binds.forEach((b) => {
s.add(b.key.secondary);
});
return Array.from(s);
}, [binds]);
const keyDown = (event) => {
const k = event.code;
if (keys.includes(k)) {
const c = binds.find((b) => {
if (b.key.secondary !== k) {
return false;
}
switch (b.key.primary) {
case 'ctrl':
return event.ctrlKey;
case 'shift':
return event.shiftKey;
case 'alt':
return event.altKey;
case 'meta':
return event.metaKey;
default:
return false;
}
});
if (c) {
event.preventDefault();
c.action();
}
}
};
(0, react_1.useEffect)(() => {
document.addEventListener('keydown', keyDown);
return () => {
document.removeEventListener('keydown', keyDown);
};
});
}
function usePathQueryMap() {
return (0, react_1.useMemo)(() => {
const f = window.location.search.replace(/^\?/, '').split('&');
const map = new Map();
for (const s of f) {
const c = s.split('=');
map.set(c[0], c[1]);
}
return map;
}, []);
}