@koine/react 2.0.0-beta.75 → 2.0.0-beta.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/FaviconTags.js +1 -5
- package/Meta.js +1 -5
- package/NoJs.js +1 -7
- package/Polymorphic.js +1 -1
- package/calendar/CalendarDaygridCell.js +1 -42
- package/calendar/CalendarDaygridNav.js +1 -22
- package/calendar/CalendarDaygridTable.js +1 -50
- package/calendar/CalendarLegend.js +1 -4
- package/calendar/calendar-api-google.js +1 -90
- package/calendar/types.js +1 -1
- package/calendar/useCalendar.js +1 -175
- package/calendar/useDateLocale.js +1 -16
- package/calendar/utils.js +1 -172
- package/calendar.js +1 -7
- package/{components → cjs}/FaviconTags.d.ts +1 -0
- package/cjs/FaviconTags.js +1 -0
- package/{components → cjs}/Meta.d.ts +1 -0
- package/cjs/Meta.js +1 -0
- package/{components → cjs}/NoJs.d.ts +1 -0
- package/cjs/NoJs.js +1 -0
- package/cjs/Polymorphic.js +1 -0
- package/cjs/calendar/CalendarDaygridCell.d.ts +35 -0
- package/cjs/calendar/CalendarDaygridCell.js +1 -0
- package/cjs/calendar/CalendarDaygridNav.d.ts +27 -0
- package/cjs/calendar/CalendarDaygridNav.js +1 -0
- package/cjs/calendar/CalendarDaygridTable.d.ts +25 -0
- package/cjs/calendar/CalendarDaygridTable.js +1 -0
- package/cjs/calendar/CalendarLegend.d.ts +18 -0
- package/cjs/calendar/CalendarLegend.js +1 -0
- package/cjs/calendar/calendar-api-google.d.ts +10 -0
- package/cjs/calendar/calendar-api-google.js +1 -0
- package/cjs/calendar/types.d.ts +62 -0
- package/cjs/calendar/types.js +1 -0
- package/cjs/calendar/useCalendar.d.ts +35 -0
- package/cjs/calendar/useCalendar.js +1 -0
- package/cjs/calendar/useDateLocale.d.ts +2 -0
- package/cjs/calendar/useDateLocale.js +1 -0
- package/cjs/calendar/utils.d.ts +11 -0
- package/cjs/calendar/utils.js +1 -0
- package/cjs/calendar.d.ts +7 -0
- package/cjs/calendar.js +1 -0
- package/{utils → cjs}/classed.d.ts +2 -2
- package/cjs/classed.js +1 -0
- package/{utils → cjs}/createUseMediaQueryWidth.d.ts +1 -1
- package/cjs/createUseMediaQueryWidth.js +1 -0
- package/{utils → cjs}/extendComponent.d.ts +1 -1
- package/cjs/extendComponent.js +1 -0
- package/cjs/forms/antispam.d.ts +27 -0
- package/cjs/forms/antispam.js +1 -0
- package/cjs/forms.d.ts +1 -0
- package/cjs/forms.js +1 -0
- package/{hooks → cjs}/index.d.ts +9 -0
- package/cjs/index.js +1 -0
- package/{utils → cjs}/mergeRefs.d.ts +1 -0
- package/cjs/mergeRefs.js +1 -0
- package/cjs/package.json +31 -0
- package/cjs/types.d.ts +2 -0
- package/cjs/types.js +1 -0
- package/{hooks → cjs}/useAsyncFn.d.ts +1 -1
- package/cjs/useAsyncFn.js +1 -0
- package/{hooks → cjs}/useFirstMountState.d.ts +1 -0
- package/cjs/useFirstMountState.js +1 -0
- package/{hooks → cjs}/useFixedOffset.d.ts +1 -0
- package/cjs/useFixedOffset.js +1 -0
- package/{hooks → cjs}/useFocus.d.ts +1 -0
- package/cjs/useFocus.js +1 -0
- package/{hooks → cjs}/useInterval.d.ts +1 -0
- package/cjs/useInterval.js +1 -0
- package/cjs/useIsomorphicLayoutEffect.d.ts +3 -0
- package/cjs/useIsomorphicLayoutEffect.js +1 -0
- package/{hooks → cjs}/useKeyUp.d.ts +1 -0
- package/cjs/useKeyUp.js +1 -0
- package/{hooks → cjs}/useMeasure.d.ts +1 -1
- package/cjs/useMeasure.js +1 -0
- package/{hooks → cjs}/useMountedState.d.ts +1 -0
- package/cjs/useMountedState.js +1 -0
- package/{hooks → cjs}/useNavigateAway.d.ts +1 -0
- package/cjs/useNavigateAway.js +1 -0
- package/{hooks → cjs}/usePrevious.d.ts +1 -0
- package/cjs/usePrevious.js +1 -0
- package/{hooks → cjs}/usePreviousRef.d.ts +1 -0
- package/cjs/usePreviousRef.js +1 -0
- package/{hooks → cjs}/useReveal.d.ts +1 -0
- package/cjs/useReveal.js +1 -0
- package/{hooks → cjs}/useScrollPosition.d.ts +1 -1
- package/cjs/useScrollPosition.js +1 -0
- package/{hooks → cjs}/useScrollThreshold.d.ts +1 -0
- package/cjs/useScrollThreshold.js +1 -0
- package/{hooks → cjs}/useScrollTo.d.ts +1 -0
- package/cjs/useScrollTo.js +1 -0
- package/{hooks → cjs}/useSmoothScroll.d.ts +1 -0
- package/cjs/useSmoothScroll.js +1 -0
- package/{hooks → cjs}/useSpinDelay.d.ts +1 -0
- package/cjs/useSpinDelay.js +1 -0
- package/{hooks → cjs}/useTraceUpdate.d.ts +1 -0
- package/cjs/useTraceUpdate.js +1 -0
- package/{hooks → cjs}/useUpdateEffect.d.ts +1 -0
- package/cjs/useUpdateEffect.js +1 -0
- package/{hooks → cjs}/useWindowSize.d.ts +1 -0
- package/cjs/useWindowSize.js +1 -0
- package/classed.d.ts +1 -1
- package/classed.js +1 -41
- package/createUseMediaQueryWidth.js +1 -38
- package/extendComponent.js +1 -9
- package/forms/antispam.js +1 -29
- package/forms.js +1 -1
- package/index.js +1 -26
- package/mergeRefs.js +1 -13
- package/package.json +53 -136
- package/types.js +1 -1
- package/useAsyncFn.js +1 -26
- package/useFirstMountState.js +1 -10
- package/useFixedOffset.js +1 -42
- package/useFocus.js +1 -9
- package/useInterval.js +1 -20
- package/useIsomorphicLayoutEffect.d.ts +2 -2
- package/useIsomorphicLayoutEffect.js +1 -4
- package/useKeyUp.js +1 -16
- package/useMeasure.js +1 -119
- package/useMountedState.js +1 -13
- package/useNavigateAway.js +1 -25
- package/usePrevious.js +1 -9
- package/usePreviousRef.js +1 -9
- package/useReveal.js +1 -42
- package/useScrollPosition.js +1 -58
- package/useScrollThreshold.js +1 -26
- package/useScrollTo.js +1 -18
- package/useSmoothScroll.js +1 -32
- package/useSpinDelay.js +1 -36
- package/useTraceUpdate.js +1 -17
- package/useUpdateEffect.js +1 -11
- package/useWindowSize.js +1 -20
- package/README.md +0 -1
- package/calendar.cjs.d.ts +0 -1
- package/calendar.cjs.default.js +0 -1
- package/calendar.cjs.js +0 -62
- package/calendar.cjs.mjs +0 -2
- package/calendar.esm.js +0 -35
- package/components/FaviconTags.js +0 -4
- package/components/Meta.js +0 -4
- package/components/NoJs.js +0 -6
- package/forms.cjs.d.ts +0 -1
- package/forms.cjs.default.js +0 -1
- package/forms.cjs.js +0 -11
- package/forms.cjs.mjs +0 -2
- package/forms.esm.js +0 -6
- package/hooks/index.js +0 -19
- package/hooks/useAsyncFn.js +0 -25
- package/hooks/useFirstMountState.js +0 -9
- package/hooks/useFixedOffset.js +0 -41
- package/hooks/useFocus.js +0 -8
- package/hooks/useInterval.js +0 -19
- package/hooks/useIsomorphicLayoutEffect.d.ts +0 -2
- package/hooks/useIsomorphicLayoutEffect.js +0 -3
- package/hooks/useKeyUp.js +0 -15
- package/hooks/useMeasure.js +0 -118
- package/hooks/useMountedState.js +0 -12
- package/hooks/useNavigateAway.js +0 -24
- package/hooks/usePrevious.js +0 -8
- package/hooks/usePreviousRef.js +0 -8
- package/hooks/useReveal.js +0 -41
- package/hooks/useScrollPosition.js +0 -57
- package/hooks/useScrollThreshold.js +0 -25
- package/hooks/useScrollTo.js +0 -17
- package/hooks/useSmoothScroll.js +0 -31
- package/hooks/useSpinDelay.js +0 -35
- package/hooks/useTraceUpdate.js +0 -16
- package/hooks/useUpdateEffect.js +0 -10
- package/hooks/useWindowSize.js +0 -19
- package/index.cjs.d.ts +0 -1
- package/index.cjs.default.js +0 -1
- package/index.cjs.js +0 -87
- package/index.cjs.mjs +0 -2
- package/index.esm.js +0 -58
- package/utils/Polymorphic.js +0 -1
- package/utils/classed.js +0 -40
- package/utils/createUseMediaQueryWidth.js +0 -37
- package/utils/extendComponent.js +0 -8
- package/utils/index.d.ts +0 -5
- package/utils/index.js +0 -4
- package/utils/mergeRefs.js +0 -12
- /package/{utils → cjs}/Polymorphic.d.ts +0 -0
package/useFixedOffset.js
CHANGED
|
@@ -1,42 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { debounce } from "@koine/utils";
|
|
3
|
-
import { $each, calculateFixedOffset, injectCss, listenResizeDebounced, } from "@koine/dom";
|
|
4
|
-
import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
|
|
5
|
-
const inject = (value) => {
|
|
6
|
-
injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
|
|
7
|
-
};
|
|
8
|
-
export let useFixedOffset = (selector) => {
|
|
9
|
-
const fixedOffset = useRef(0);
|
|
10
|
-
useIsomorphicLayoutEffect(() => {
|
|
11
|
-
const update = () => {
|
|
12
|
-
const newFixedOffset = calculateFixedOffset();
|
|
13
|
-
fixedOffset.current = newFixedOffset;
|
|
14
|
-
inject(newFixedOffset);
|
|
15
|
-
};
|
|
16
|
-
update();
|
|
17
|
-
if (ResizeObserver) {
|
|
18
|
-
const observer = new ResizeObserver((entries) => {
|
|
19
|
-
let newFixedOffset = 0;
|
|
20
|
-
entries.forEach((entry) => {
|
|
21
|
-
newFixedOffset += entry.contentRect.height;
|
|
22
|
-
});
|
|
23
|
-
fixedOffset.current = newFixedOffset;
|
|
24
|
-
const updateOnResize = debounce(() => inject(newFixedOffset), 400, true);
|
|
25
|
-
updateOnResize();
|
|
26
|
-
});
|
|
27
|
-
$each(selector || "[data-fixed]", ($el) => {
|
|
28
|
-
if (observer)
|
|
29
|
-
observer.observe($el);
|
|
30
|
-
});
|
|
31
|
-
return () => {
|
|
32
|
-
observer?.disconnect();
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
const listener = listenResizeDebounced(0, update);
|
|
37
|
-
return listener;
|
|
38
|
-
}
|
|
39
|
-
}, [selector]);
|
|
40
|
-
return fixedOffset;
|
|
41
|
-
};
|
|
42
|
-
export default useFixedOffset;
|
|
1
|
+
import{useRef as e}from"react";import{debounce as t}from"@koine/utils";import{$each as r,calculateFixedOffset as o,injectCss as i,listenResizeDebounced as f}from"@koine/dom";import{useIsomorphicLayoutEffect as s}from"./useIsomorphicLayoutEffect";let n=e=>{i("useFixedOffset",`html{scroll-padding-top: ${e}px}`)};export let useFixedOffset=i=>{let l=e(0);return s(()=>{let e=()=>{let e=o();l.current=e,n(e)};if(e(),!ResizeObserver)return f(0,e);{let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height}),l.current=r,t(()=>n(r),400,!0)()});return r(i||"[data-fixed]",t=>{e&&e.observe(t)}),()=>{e?.disconnect()}}},[i]),l};export default useFixedOffset;
|
package/useFocus.js
CHANGED
|
@@ -1,9 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export let useFocus = () => {
|
|
3
|
-
const elementRef = useRef(null);
|
|
4
|
-
const setFocus = () => {
|
|
5
|
-
elementRef.current && elementRef.current.focus();
|
|
6
|
-
};
|
|
7
|
-
return [elementRef, setFocus];
|
|
8
|
-
};
|
|
9
|
-
export default useFocus;
|
|
1
|
+
import{useRef as e}from"react";export let useFocus=()=>{let r=e(null);return[r,()=>{r.current&&r.current.focus()}]};export default useFocus;
|
package/useInterval.js
CHANGED
|
@@ -1,20 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { noop } from "@koine/utils";
|
|
3
|
-
export let useInterval = (callback, delay, deps = []) => {
|
|
4
|
-
const savedCallback = useRef();
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
savedCallback.current = callback;
|
|
7
|
-
}, [callback, ...deps]);
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
function tick() {
|
|
10
|
-
if (savedCallback.current)
|
|
11
|
-
savedCallback.current();
|
|
12
|
-
}
|
|
13
|
-
if (delay !== null) {
|
|
14
|
-
const id = setInterval(tick, delay);
|
|
15
|
-
return () => clearInterval(id);
|
|
16
|
-
}
|
|
17
|
-
return noop;
|
|
18
|
-
}, [delay]);
|
|
19
|
-
};
|
|
20
|
-
export default useInterval;
|
|
1
|
+
import{useEffect as r,useRef as e}from"react";import{noop as t}from"@koine/utils";export let useInterval=(n,l,u=[])=>{let o=e();r(()=>{o.current=n},[n,...u]),r(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current()},l);return()=>clearInterval(r)}return t},[l])};export default useInterval;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare let useIsomorphicLayoutEffect: typeof
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
export declare let useIsomorphicLayoutEffect: typeof useEffect;
|
|
3
3
|
export default useIsomorphicLayoutEffect;
|
|
@@ -1,4 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { isBrowser } from "@koine/utils";
|
|
3
|
-
export let useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
|
|
4
|
-
export default useIsomorphicLayoutEffect;
|
|
1
|
+
import{useEffect as o,useLayoutEffect as t}from"react";import{isBrowser as e}from"@koine/utils";export let useIsomorphicLayoutEffect=e?t:o;export default useIsomorphicLayoutEffect;
|
package/useKeyUp.js
CHANGED
|
@@ -1,16 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { on } from "@koine/dom";
|
|
3
|
-
export let useKeyUp = (callback, deps = []) => {
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
const listener = on(window, "keyup", (event) => {
|
|
6
|
-
if (!event.ctrlKey &&
|
|
7
|
-
!event.altKey &&
|
|
8
|
-
!event.shiftKey &&
|
|
9
|
-
!event.metaKey) {
|
|
10
|
-
callback(event);
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
return listener;
|
|
14
|
-
}, [callback, ...deps]);
|
|
15
|
-
};
|
|
16
|
-
export default useKeyUp;
|
|
1
|
+
import{useEffect as e}from"react";import{on as t}from"@koine/dom";export let useKeyUp=(o,r=[])=>{e(()=>t(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e)}),[o,...r])};export default useKeyUp;
|
package/useMeasure.js
CHANGED
|
@@ -1,119 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { debounce, noop } from "@koine/utils";
|
|
3
|
-
import { listenResizeDebounced, listenScrollDebounced, off, on, } from "@koine/dom";
|
|
4
|
-
let observer;
|
|
5
|
-
let findScrollContainers = (element) => {
|
|
6
|
-
const result = [];
|
|
7
|
-
if (!element || element === document.body)
|
|
8
|
-
return result;
|
|
9
|
-
const { overflow, overflowX, overflowY } = window.getComputedStyle(element);
|
|
10
|
-
if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
|
|
11
|
-
result.push(element);
|
|
12
|
-
return [...result, ...findScrollContainers(element.parentElement)];
|
|
13
|
-
};
|
|
14
|
-
const keys = [
|
|
15
|
-
"x",
|
|
16
|
-
"y",
|
|
17
|
-
"top",
|
|
18
|
-
"bottom",
|
|
19
|
-
"left",
|
|
20
|
-
"right",
|
|
21
|
-
"width",
|
|
22
|
-
"height",
|
|
23
|
-
];
|
|
24
|
-
const areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
|
|
25
|
-
export let useMeasure = (options) => {
|
|
26
|
-
const { scroll = false } = options || {};
|
|
27
|
-
const [bounds, setBounds] = useState({
|
|
28
|
-
left: 0,
|
|
29
|
-
top: 0,
|
|
30
|
-
width: 0,
|
|
31
|
-
height: 0,
|
|
32
|
-
bottom: 0,
|
|
33
|
-
right: 0,
|
|
34
|
-
x: 0,
|
|
35
|
-
y: 0,
|
|
36
|
-
});
|
|
37
|
-
const state = useRef([
|
|
38
|
-
null,
|
|
39
|
-
null,
|
|
40
|
-
null,
|
|
41
|
-
bounds,
|
|
42
|
-
]);
|
|
43
|
-
const mounted = useRef(false);
|
|
44
|
-
useEffect(() => {
|
|
45
|
-
mounted.current = true;
|
|
46
|
-
return () => void (mounted.current = false);
|
|
47
|
-
}, []);
|
|
48
|
-
const [forceRefresh, , scrollChange] = useMemo(() => {
|
|
49
|
-
const callback = (..._args) => {
|
|
50
|
-
const [element, , , lastBounds] = state.current;
|
|
51
|
-
if (!element)
|
|
52
|
-
return;
|
|
53
|
-
const size = element.getBoundingClientRect();
|
|
54
|
-
Object.freeze(size);
|
|
55
|
-
if (mounted.current && !areBoundsEqual(lastBounds, size)) {
|
|
56
|
-
state.current[3] = size;
|
|
57
|
-
setBounds(size);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
const debouncedCallback = debounce(callback);
|
|
61
|
-
return [callback, debouncedCallback, debouncedCallback];
|
|
62
|
-
}, [setBounds]);
|
|
63
|
-
function removeListeners() {
|
|
64
|
-
const [, scrollContainers, resizeObserver] = state.current;
|
|
65
|
-
if (scrollContainers) {
|
|
66
|
-
scrollContainers.forEach((element) => off(element, "scroll", scrollChange));
|
|
67
|
-
state.current[1] = null;
|
|
68
|
-
}
|
|
69
|
-
if (resizeObserver) {
|
|
70
|
-
resizeObserver.disconnect();
|
|
71
|
-
state.current[2] = null;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
function addListeners() {
|
|
75
|
-
const [element, scrollContainers] = state.current;
|
|
76
|
-
if (!element)
|
|
77
|
-
return;
|
|
78
|
-
if (!observer && ResizeObserver) {
|
|
79
|
-
observer = new ResizeObserver(scrollChange);
|
|
80
|
-
state.current[2] = observer;
|
|
81
|
-
observer.observe(element);
|
|
82
|
-
if (scroll && scrollContainers) {
|
|
83
|
-
scrollContainers.forEach((scrollContainer) => on(scrollContainer, "scroll", scrollChange, {
|
|
84
|
-
capture: true,
|
|
85
|
-
passive: true,
|
|
86
|
-
}));
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
const ref = (node) => {
|
|
91
|
-
if (!node || node === state.current[0])
|
|
92
|
-
return;
|
|
93
|
-
removeListeners();
|
|
94
|
-
state.current[0] = node;
|
|
95
|
-
state.current[1] = findScrollContainers(node);
|
|
96
|
-
addListeners();
|
|
97
|
-
};
|
|
98
|
-
useEffect(() => {
|
|
99
|
-
if (scroll) {
|
|
100
|
-
const listener = listenScrollDebounced(0, forceRefresh, 100);
|
|
101
|
-
return listener;
|
|
102
|
-
}
|
|
103
|
-
return noop;
|
|
104
|
-
}, [scroll, forceRefresh]);
|
|
105
|
-
useEffect(() => {
|
|
106
|
-
const listener = listenResizeDebounced(0, forceRefresh, 100);
|
|
107
|
-
return listener;
|
|
108
|
-
}, [forceRefresh]);
|
|
109
|
-
useEffect(() => {
|
|
110
|
-
removeListeners();
|
|
111
|
-
addListeners();
|
|
112
|
-
}, [scroll]);
|
|
113
|
-
useEffect(() => {
|
|
114
|
-
forceRefresh();
|
|
115
|
-
return removeListeners;
|
|
116
|
-
}, []);
|
|
117
|
-
return [ref, bounds, forceRefresh];
|
|
118
|
-
};
|
|
119
|
-
export default useMeasure;
|
|
1
|
+
let e;import{useEffect as t,useMemo as r,useRef as n,useState as u}from"react";import{debounce as l,noop as o}from"@koine/utils";import{listenResizeDebounced as c,listenScrollDebounced as i,off as s,on as f}from"@koine/dom";let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return[r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);export let useMeasure=p=>{let{scroll:h=!1}=p||{},[a,b]=u({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=n([null,null,null,a]),v=n(!1);t(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=r(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!d(r,n)&&(g.current[3]=n,b(n))},t=l(e);return[e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>s(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null)}function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>f(e,"scroll",y,{capture:!0,passive:!0})))}return t(()=>h?i(0,w,100):o,[h,w]),t(()=>c(0,w,100),[w]),t(()=>{x(),z()},[h]),t(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z())},a,w]};export default useMeasure;
|
package/useMountedState.js
CHANGED
|
@@ -1,13 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export let useMountedState = () => {
|
|
3
|
-
const mountedRef = useRef(false);
|
|
4
|
-
const get = useCallback(() => mountedRef.current, []);
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
mountedRef.current = true;
|
|
7
|
-
return () => {
|
|
8
|
-
mountedRef.current = false;
|
|
9
|
-
};
|
|
10
|
-
}, []);
|
|
11
|
-
return get;
|
|
12
|
-
};
|
|
13
|
-
export default useMountedState;
|
|
1
|
+
import{useCallback as t,useEffect as e,useRef as r}from"react";export let useMountedState=()=>{let u=r(!1),n=t(()=>u.current,[]);return e(()=>(u.current=!0,()=>{u.current=!1}),[]),n};export default useMountedState;
|
package/useNavigateAway.js
CHANGED
|
@@ -1,25 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { on } from "@koine/dom";
|
|
3
|
-
export let useNavigateAway = (handler) => {
|
|
4
|
-
const beforeUnloadHandlerRef = useRef();
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
beforeUnloadHandlerRef.current = (event) => {
|
|
7
|
-
const customMessageOrCondition = handler(event);
|
|
8
|
-
if (customMessageOrCondition) {
|
|
9
|
-
event.preventDefault();
|
|
10
|
-
}
|
|
11
|
-
if (typeof customMessageOrCondition === "string") {
|
|
12
|
-
return (event.returnValue = customMessageOrCondition);
|
|
13
|
-
}
|
|
14
|
-
if (event.defaultPrevented) {
|
|
15
|
-
return (event.returnValue = "");
|
|
16
|
-
}
|
|
17
|
-
return;
|
|
18
|
-
};
|
|
19
|
-
}, [handler]);
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
const listenerBeforeunload = on(window, "beforeunload", (event) => beforeUnloadHandlerRef.current?.(event));
|
|
22
|
-
return listenerBeforeunload;
|
|
23
|
-
}, []);
|
|
24
|
-
};
|
|
25
|
-
export default useNavigateAway;
|
|
1
|
+
import{useEffect as e,useRef as t}from"react";import{on as r}from"@koine/dom";export let useNavigateAway=a=>{let o=t();e(()=>{o.current=e=>{let t=a(e);return(t&&e.preventDefault(),"string"==typeof t)?e.returnValue=t:e.defaultPrevented?e.returnValue="":void 0}},[a]),e(()=>r(window,"beforeunload",e=>o.current?.(e)),[])};export default useNavigateAway;
|
package/usePrevious.js
CHANGED
|
@@ -1,9 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export let usePrevious = (state, defaulValue) => {
|
|
3
|
-
const [tuple, setTuple] = useState([state, defaulValue]);
|
|
4
|
-
if (tuple[1] !== state) {
|
|
5
|
-
setTuple([tuple[1], state]);
|
|
6
|
-
}
|
|
7
|
-
return tuple[0];
|
|
8
|
-
};
|
|
9
|
-
export default usePrevious;
|
|
1
|
+
import{useState as e}from"react";export let usePrevious=(r,t)=>{let[o,u]=e([r,t]);return o[1]!==r&&u([o[1],r]),o[0]};export default usePrevious;
|
package/usePreviousRef.js
CHANGED
|
@@ -1,9 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export let usePreviousRef = (value) => {
|
|
3
|
-
const ref = useRef();
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
ref.current = value;
|
|
6
|
-
});
|
|
7
|
-
return ref.current;
|
|
8
|
-
};
|
|
9
|
-
export default usePreviousRef;
|
|
1
|
+
import{useEffect as e,useRef as r}from"react";export let usePreviousRef=t=>{let u=r();return e(()=>{u.current=t}),u.current};export default usePreviousRef;
|
package/useReveal.js
CHANGED
|
@@ -1,42 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export let useReveal = ({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) => {
|
|
3
|
-
const ref = useRef(null);
|
|
4
|
-
const [startY, setStartY] = useState(0);
|
|
5
|
-
const [endY, setEndY] = useState(0);
|
|
6
|
-
const [startX, setStartX] = useState(0);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
if (!ref.current) {
|
|
9
|
-
return;
|
|
10
|
-
}
|
|
11
|
-
const rect = ref.current.getBoundingClientRect();
|
|
12
|
-
const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
|
13
|
-
const elementHeight = rect.height;
|
|
14
|
-
const elementTop = rect.top;
|
|
15
|
-
const distanceTop = elementTop + scrollTop;
|
|
16
|
-
const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
|
|
17
|
-
const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
|
|
18
|
-
const startY = (distanceTop + offsetTop) / document.body.clientHeight;
|
|
19
|
-
const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
|
|
20
|
-
let startX;
|
|
21
|
-
if (offsetStartX === "all") {
|
|
22
|
-
startX = direction === "left" ? -rect.right : rect.left;
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
startX = rect.width * offsetStartX;
|
|
26
|
-
startX = direction === "left" ? -startX : startX;
|
|
27
|
-
}
|
|
28
|
-
setStartY(startY);
|
|
29
|
-
setEndY(endY);
|
|
30
|
-
setStartX(startX);
|
|
31
|
-
}, [
|
|
32
|
-
setStartY,
|
|
33
|
-
setEndY,
|
|
34
|
-
setStartX,
|
|
35
|
-
offsetStartY,
|
|
36
|
-
offsetEndY,
|
|
37
|
-
offsetStartX,
|
|
38
|
-
direction,
|
|
39
|
-
]);
|
|
40
|
-
return { ref, startY, endY, startX };
|
|
41
|
-
};
|
|
42
|
-
export default useReveal;
|
|
1
|
+
import{useEffect as e,useRef as t,useState as l}from"react";export let useReveal=({direction:n="left",offsetStartY:o=-2,offsetEndY:r=0,offsetStartX:u="all"})=>{let c=t(null),[i,d]=l(0),[f,m]=l(0),[a,g]=l(0);return e(()=>{let e;if(!c.current)return;let t=c.current.getBoundingClientRect(),l=window.scrollY||document.documentElement.scrollTop,i=t.height,f=t.top+l,a=o?i*o:0,h=r?i*r:a,p=(f+a)/document.body.clientHeight,s=(f+i+h)/document.body.clientHeight;"all"===u?e="left"===n?-t.right:t.left:(e=t.width*u,e="left"===n?-e:e),d(p),m(s),g(e)},[d,m,g,o,r,u,n]),{ref:c,startY:i,endY:f,startX:a}};export default useReveal;
|
package/useScrollPosition.js
CHANGED
|
@@ -1,58 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { isBrowser } from "@koine/utils";
|
|
3
|
-
import { listenScroll } from "@koine/dom";
|
|
4
|
-
import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
|
|
5
|
-
const zeroPosition = { x: 0, y: 0 };
|
|
6
|
-
const getClientRect = (element) => element?.getBoundingClientRect();
|
|
7
|
-
const getScrollPosition = (element, boundingElement) => {
|
|
8
|
-
if (!isBrowser) {
|
|
9
|
-
return zeroPosition;
|
|
10
|
-
}
|
|
11
|
-
if (!boundingElement) {
|
|
12
|
-
return { x: window.scrollX, y: window.scrollY };
|
|
13
|
-
}
|
|
14
|
-
const targetPosition = getClientRect(element?.current || document.body);
|
|
15
|
-
const containerPosition = getClientRect(boundingElement.current);
|
|
16
|
-
if (!targetPosition) {
|
|
17
|
-
return zeroPosition;
|
|
18
|
-
}
|
|
19
|
-
return containerPosition
|
|
20
|
-
? {
|
|
21
|
-
x: (containerPosition.x || 0) - (targetPosition.x || 0),
|
|
22
|
-
y: (containerPosition.y || 0) - (targetPosition.y || 0),
|
|
23
|
-
}
|
|
24
|
-
: { x: targetPosition.left, y: targetPosition.top };
|
|
25
|
-
};
|
|
26
|
-
export let useScrollPosition = (effect, deps = [], element, boundingElement, wait) => {
|
|
27
|
-
const position = useRef(getScrollPosition(null, boundingElement));
|
|
28
|
-
let throttleTimeout = null;
|
|
29
|
-
const callBack = () => {
|
|
30
|
-
const current = getScrollPosition(element, boundingElement);
|
|
31
|
-
effect(current, position.current);
|
|
32
|
-
position.current = current;
|
|
33
|
-
throttleTimeout = null;
|
|
34
|
-
};
|
|
35
|
-
useIsomorphicLayoutEffect(() => {
|
|
36
|
-
if (!isBrowser) {
|
|
37
|
-
return undefined;
|
|
38
|
-
}
|
|
39
|
-
const handleScroll = () => {
|
|
40
|
-
if (wait) {
|
|
41
|
-
if (throttleTimeout === null) {
|
|
42
|
-
throttleTimeout = window.setTimeout(callBack, wait);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
callBack();
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const listener = listenScroll(handleScroll, boundingElement?.current);
|
|
50
|
-
return () => {
|
|
51
|
-
listener();
|
|
52
|
-
if (throttleTimeout) {
|
|
53
|
-
clearTimeout(throttleTimeout);
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
}, deps);
|
|
57
|
-
};
|
|
58
|
-
export default useScrollPosition;
|
|
1
|
+
import{useRef as t}from"react";import{isBrowser as r}from"@koine/utils";import{listenScroll as e}from"@koine/dom";import{useIsomorphicLayoutEffect as o}from"./useIsomorphicLayoutEffect";let l={x:0,y:0},n=t=>t?.getBoundingClientRect(),u=(t,e)=>{if(!r)return l;if(!e)return{x:window.scrollX,y:window.scrollY};let o=n(t?.current||document.body),u=n(e.current);return o?u?{x:(u.x||0)-(o.x||0),y:(u.y||0)-(o.y||0)}:{x:o.left,y:o.top}:l};export let useScrollPosition=(l,n=[],i,c,m)=>{let f=t(u(null,c)),s=null,d=()=>{let t=u(i,c);l(t,f.current),f.current=t,s=null};o(()=>{if(!r)return;let t=e(()=>{m?null===s&&(s=window.setTimeout(d,m)):d()},c?.current);return()=>{t(),s&&clearTimeout(s)}},n)};export default useScrollPosition;
|
package/useScrollThreshold.js
CHANGED
|
@@ -1,26 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { noop } from "@koine/utils";
|
|
3
|
-
import { listenScroll } from "@koine/dom";
|
|
4
|
-
export let useScrollThreshold = (threshold, callback) => {
|
|
5
|
-
const [isBelow, setIsBelow] = useState(false);
|
|
6
|
-
const handler = useCallback(() => {
|
|
7
|
-
if (threshold) {
|
|
8
|
-
const posY = window.scrollY;
|
|
9
|
-
const isAbove = posY < threshold;
|
|
10
|
-
const isBelow = posY > threshold;
|
|
11
|
-
setIsBelow(isBelow);
|
|
12
|
-
if (callback)
|
|
13
|
-
callback(isAbove, isBelow);
|
|
14
|
-
}
|
|
15
|
-
}, [threshold, callback]);
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
if (threshold) {
|
|
18
|
-
const listener = listenScroll(handler);
|
|
19
|
-
handler();
|
|
20
|
-
return listener;
|
|
21
|
-
}
|
|
22
|
-
return noop;
|
|
23
|
-
}, [threshold, handler]);
|
|
24
|
-
return isBelow;
|
|
25
|
-
};
|
|
26
|
-
export default useScrollThreshold;
|
|
1
|
+
import{useCallback as r,useEffect as e,useState as o}from"react";import{noop as t}from"@koine/utils";import{listenScroll as l}from"@koine/dom";export let useScrollThreshold=(i,m)=>{let[u,f]=o(!1),n=r(()=>{if(i){let r=window.scrollY,e=r<i,o=r>i;f(o),m&&m(e,o)}},[i,m]);return e(()=>{if(i){let r=l(n);return n(),r}return t},[i,n]),u};export default useScrollThreshold;
|
package/useScrollTo.js
CHANGED
|
@@ -1,18 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export let useScrollTo = (id = "", offset = 0) => {
|
|
3
|
-
if (!isBrowser) {
|
|
4
|
-
return;
|
|
5
|
-
}
|
|
6
|
-
const headerOffset = 0;
|
|
7
|
-
let element = document.getElementById(id);
|
|
8
|
-
let top = 0;
|
|
9
|
-
if (element && element.offsetParent) {
|
|
10
|
-
do {
|
|
11
|
-
top += element.offsetTop;
|
|
12
|
-
} while ((element = element.offsetParent));
|
|
13
|
-
}
|
|
14
|
-
top -= offset;
|
|
15
|
-
top -= headerOffset;
|
|
16
|
-
window.scroll(0, top);
|
|
17
|
-
};
|
|
18
|
-
export default useScrollTo;
|
|
1
|
+
import{isBrowser as e}from"@koine/utils";export let useScrollTo=(o="",t=0)=>{if(!e)return;let l=document.getElementById(o),r=0;if(l&&l.offsetParent)do r+=l.offsetTop;while(l=l.offsetParent)r-=t,r-=0,window.scroll(0,r)};export default useScrollTo;
|
package/useSmoothScroll.js
CHANGED
|
@@ -1,32 +1 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { isNumber } from "@koine/utils";
|
|
3
|
-
import { getOffsetTopSlim, scrollTo } from "@koine/dom";
|
|
4
|
-
import { useFixedOffset } from "./useFixedOffset";
|
|
5
|
-
export let useSmoothScroll = (disregardAutomaticFixedOffset) => {
|
|
6
|
-
const fixedOffset = useFixedOffset();
|
|
7
|
-
const scroll = useCallback((to, customOffset, callback, fallbackTimeout, behavior) => {
|
|
8
|
-
let top = undefined;
|
|
9
|
-
let toIsElement = false;
|
|
10
|
-
if (isNumber(to)) {
|
|
11
|
-
top = to;
|
|
12
|
-
}
|
|
13
|
-
else if (to) {
|
|
14
|
-
const el = document.getElementById(to);
|
|
15
|
-
if (el) {
|
|
16
|
-
top = getOffsetTopSlim(el) - fixedOffset.current;
|
|
17
|
-
toIsElement = true;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
if (isNumber(top)) {
|
|
21
|
-
top =
|
|
22
|
-
top +
|
|
23
|
-
(customOffset || 0) +
|
|
24
|
-
(disregardAutomaticFixedOffset || toIsElement
|
|
25
|
-
? 0
|
|
26
|
-
: fixedOffset.current);
|
|
27
|
-
scrollTo(top, callback, fallbackTimeout, behavior);
|
|
28
|
-
}
|
|
29
|
-
}, [disregardAutomaticFixedOffset, fixedOffset]);
|
|
30
|
-
return scroll;
|
|
31
|
-
};
|
|
32
|
-
export default useSmoothScroll;
|
|
1
|
+
import{useCallback as e}from"react";import{isNumber as t}from"@koine/utils";import{getOffsetTopSlim as o,scrollTo as r}from"@koine/dom";import{useFixedOffset as l}from"./useFixedOffset";export let useSmoothScroll=m=>{let i=l();return e((e,l,f,u,n)=>{let c;let p=!1;if(t(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=o(t)-i.current,p=!0)}t(c)&&r(c=c+(l||0)+(m||p?0:i.current),f,u,n)},[m,i])};export default useSmoothScroll;
|
package/useSpinDelay.js
CHANGED
|
@@ -1,36 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
var State;
|
|
3
|
-
(function (State) {
|
|
4
|
-
State[State["IDLE"] = 0] = "IDLE";
|
|
5
|
-
State[State["DELAY"] = 1] = "DELAY";
|
|
6
|
-
State[State["DISPLAY"] = 2] = "DISPLAY";
|
|
7
|
-
State[State["EXPIRE"] = 3] = "EXPIRE";
|
|
8
|
-
})(State || (State = {}));
|
|
9
|
-
export let useSpinDelay = (loading, delay = 500, minDuration = 200) => {
|
|
10
|
-
const [state, setState] = useState(State.IDLE);
|
|
11
|
-
const timeout = useRef();
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
if (loading && state === State.IDLE) {
|
|
14
|
-
clearTimeout(timeout.current);
|
|
15
|
-
timeout.current = setTimeout(() => {
|
|
16
|
-
if (!loading) {
|
|
17
|
-
return setState(State.IDLE);
|
|
18
|
-
}
|
|
19
|
-
timeout.current = setTimeout(() => {
|
|
20
|
-
setState(State.EXPIRE);
|
|
21
|
-
}, minDuration);
|
|
22
|
-
setState(State.DISPLAY);
|
|
23
|
-
}, delay);
|
|
24
|
-
setState(State.DELAY);
|
|
25
|
-
}
|
|
26
|
-
if (!loading && state !== State.DISPLAY) {
|
|
27
|
-
clearTimeout(timeout.current);
|
|
28
|
-
setState(State.IDLE);
|
|
29
|
-
}
|
|
30
|
-
}, [loading, state, delay, minDuration]);
|
|
31
|
-
useEffect(() => {
|
|
32
|
-
return () => clearTimeout(timeout.current);
|
|
33
|
-
}, []);
|
|
34
|
-
return state === State.DISPLAY || state === State.EXPIRE;
|
|
35
|
-
};
|
|
36
|
-
export default useSpinDelay;
|
|
1
|
+
import{useEffect as e,useRef as r,useState as t}from"react";export let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=t(0),l=r();return e(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3)},i),o(2)},c),o(1)),u||2===n||(clearTimeout(l.current),o(0))},[u,n,c,i]),e(()=>()=>clearTimeout(l.current),[]),2===n||3===n};export default useSpinDelay;
|
package/useTraceUpdate.js
CHANGED
|
@@ -1,17 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export let useTraceUpdate = (props) => {
|
|
3
|
-
const prev = useRef(props);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
|
|
6
|
-
if (prev.current[k] !== v) {
|
|
7
|
-
ps[k] = [prev.current[k], v];
|
|
8
|
-
}
|
|
9
|
-
return ps;
|
|
10
|
-
}, {});
|
|
11
|
-
if (Object.keys(changedProps).length > 0) {
|
|
12
|
-
console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
|
|
13
|
-
}
|
|
14
|
-
prev.current = props;
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
export default useTraceUpdate;
|
|
1
|
+
import{useEffect as e,useRef as t}from"react";export let useTraceUpdate=r=>{let c=t(r);e(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&(e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r})};export default useTraceUpdate;
|
package/useUpdateEffect.js
CHANGED
|
@@ -1,11 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useFirstMountState } from "./useFirstMountState";
|
|
3
|
-
export let useUpdateEffect = (effect, deps) => {
|
|
4
|
-
const isFirstMount = useFirstMountState();
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
if (!isFirstMount) {
|
|
7
|
-
return effect();
|
|
8
|
-
}
|
|
9
|
-
}, deps);
|
|
10
|
-
};
|
|
11
|
-
export default useUpdateEffect;
|
|
1
|
+
import{useEffect as t}from"react";import{useFirstMountState as e}from"./useFirstMountState";export let useUpdateEffect=(r,f)=>{let o=e();t(()=>{if(!o)return r()},f)};export default useUpdateEffect;
|
package/useWindowSize.js
CHANGED
|
@@ -1,20 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { debounce } from "@koine/utils";
|
|
3
|
-
import { listenResize, listenResizeDebounced } from "@koine/dom";
|
|
4
|
-
export let useWindowSize = (wait, immediate) => {
|
|
5
|
-
const [width, widthSet] = useState(0);
|
|
6
|
-
const [height, heightSet] = useState(0);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
const updateSize = () => {
|
|
9
|
-
widthSet(window.innerWidth);
|
|
10
|
-
heightSet(window.innerHeight);
|
|
11
|
-
};
|
|
12
|
-
const listener = wait
|
|
13
|
-
? listenResizeDebounced(0, updateSize, wait, immediate)
|
|
14
|
-
: listenResize(updateSize);
|
|
15
|
-
updateSize();
|
|
16
|
-
return listener;
|
|
17
|
-
}, [wait, immediate]);
|
|
18
|
-
return [width, height];
|
|
19
|
-
};
|
|
20
|
-
export default useWindowSize;
|
|
1
|
+
import{useEffect as e,useState as i}from"react";import{listenResize as r,listenResizeDebounced as t}from"@koine/dom";export let useWindowSize=(o,n)=>{let[d,w]=i(0),[m,u]=i(0);return e(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight)},i=o?t(0,e,o,n):r(e);return e(),i},[o,n]),[d,m]};export default useWindowSize;
|
package/README.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
# @koine/react
|
package/calendar.cjs.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./calendar";
|
package/calendar.cjs.default.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
exports._default = require('./calendar.cjs.js').default;
|