extra-react-hooks 0.6.3 → 0.6.4
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/README.md +13 -0
- package/lib/index.d.ts +22 -21
- package/lib/index.js +22 -21
- package/lib/index.js.map +1 -1
- package/lib/types.d.ts +3 -3
- package/lib/types.js +1 -1
- package/lib/use-callback-async.d.ts +2 -2
- package/lib/use-callback-async.js +19 -19
- package/lib/use-effect-async.d.ts +2 -2
- package/lib/use-effect-async.js +19 -19
- package/lib/use-finite-state-machine.d.ts +3 -3
- package/lib/use-finite-state-machine.js +13 -13
- package/lib/use-force-update.d.ts +1 -1
- package/lib/use-force-update.js +8 -8
- package/lib/use-get-set.d.ts +1 -1
- package/lib/use-get-set.js +15 -15
- package/lib/use-iife.d.ts +2 -2
- package/lib/use-iife.js +20 -20
- package/lib/use-increment.d.ts +1 -1
- package/lib/use-increment.js +11 -11
- package/lib/use-intersection-observer.d.ts +3 -0
- package/lib/use-intersection-observer.js +19 -0
- package/lib/use-intersection-observer.js.map +1 -0
- package/lib/use-is-first-render.d.ts +1 -1
- package/lib/use-is-first-render.js +23 -23
- package/lib/use-is-mounted.d.ts +1 -1
- package/lib/use-is-mounted.js +15 -15
- package/lib/use-memo-with-cleanup.d.ts +2 -2
- package/lib/use-memo-with-cleanup.js +8 -8
- package/lib/use-mount-async.d.ts +1 -1
- package/lib/use-mount-async.js +4 -4
- package/lib/use-mount.d.ts +2 -2
- package/lib/use-mount.js +4 -4
- package/lib/use-multiple-selection.d.ts +9 -9
- package/lib/use-multiple-selection.js +49 -49
- package/lib/use-render-counter.d.ts +1 -1
- package/lib/use-render-counter.js +6 -6
- package/lib/use-resize-observer.d.ts +2 -2
- package/lib/use-resize-observer.js +13 -13
- package/lib/use-single-selection.d.ts +7 -7
- package/lib/use-single-selection.js +22 -22
- package/lib/use-state-cycle.d.ts +2 -2
- package/lib/use-state-cycle.js +15 -15
- package/lib/use-step.d.ts +2 -2
- package/lib/use-step.js +25 -25
- package/lib/use-toggle.d.ts +1 -1
- package/lib/use-toggle.js +8 -8
- package/lib/use-unmount.d.ts +1 -1
- package/lib/use-unmount.js +4 -4
- package/lib/use-update-effect.d.ts +2 -2
- package/lib/use-update-effect.js +10 -10
- package/package.json +1 -1
- package/src/index.ts +1 -0
- package/src/use-intersection-observer.ts +44 -0
- package/CHANGELOG.md +0 -234
package/README.md
CHANGED
|
@@ -116,6 +116,19 @@ function useResizeObserver(
|
|
|
116
116
|
): void
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
+
### useIntersectionObserver
|
|
120
|
+
```ts
|
|
121
|
+
function useIntersectionObserver(
|
|
122
|
+
callback: IntersectionObserverCallback
|
|
123
|
+
, options: IntersectionObserverInit | undefined
|
|
124
|
+
, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
|
|
125
|
+
): void
|
|
126
|
+
function useIntersectionObserver(
|
|
127
|
+
callback: IntersectionObserverCallback
|
|
128
|
+
, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>
|
|
129
|
+
): void
|
|
130
|
+
```
|
|
131
|
+
|
|
119
132
|
### useStep
|
|
120
133
|
```ts
|
|
121
134
|
function useStep<T>(
|
package/lib/index.d.ts
CHANGED
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
export * from './use-increment.js';
|
|
2
|
-
export * from './use-is-mounted.js';
|
|
3
|
-
export * from './use-is-first-render.js';
|
|
4
|
-
export * from './use-render-counter.js';
|
|
5
|
-
export * from './use-mount.js';
|
|
6
|
-
export * from './use-mount-async.js';
|
|
7
|
-
export * from './use-unmount.js';
|
|
8
|
-
export * from './use-effect-async.js';
|
|
9
|
-
export * from './use-callback-async.js';
|
|
10
|
-
export * from './use-update-effect.js';
|
|
11
|
-
export * from './use-single-selection.js';
|
|
12
|
-
export * from './use-multiple-selection.js';
|
|
13
|
-
export * from './use-state-cycle.js';
|
|
14
|
-
export * from './use-toggle.js';
|
|
15
|
-
export * from './use-resize-observer.js';
|
|
16
|
-
export * from './use-
|
|
17
|
-
export * from './use-
|
|
18
|
-
export * from './use-
|
|
19
|
-
export * from './use-
|
|
20
|
-
export * from './use-
|
|
21
|
-
export * from './use-
|
|
1
|
+
export * from './use-increment.js';
|
|
2
|
+
export * from './use-is-mounted.js';
|
|
3
|
+
export * from './use-is-first-render.js';
|
|
4
|
+
export * from './use-render-counter.js';
|
|
5
|
+
export * from './use-mount.js';
|
|
6
|
+
export * from './use-mount-async.js';
|
|
7
|
+
export * from './use-unmount.js';
|
|
8
|
+
export * from './use-effect-async.js';
|
|
9
|
+
export * from './use-callback-async.js';
|
|
10
|
+
export * from './use-update-effect.js';
|
|
11
|
+
export * from './use-single-selection.js';
|
|
12
|
+
export * from './use-multiple-selection.js';
|
|
13
|
+
export * from './use-state-cycle.js';
|
|
14
|
+
export * from './use-toggle.js';
|
|
15
|
+
export * from './use-resize-observer.js';
|
|
16
|
+
export * from './use-intersection-observer.js';
|
|
17
|
+
export * from './use-step.js';
|
|
18
|
+
export * from './use-force-update.js';
|
|
19
|
+
export * from './use-finite-state-machine.js';
|
|
20
|
+
export * from './use-iife.js';
|
|
21
|
+
export * from './use-memo-with-cleanup.js';
|
|
22
|
+
export * from './use-get-set.js';
|
package/lib/index.js
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
export * from './use-increment.js';
|
|
2
|
-
export * from './use-is-mounted.js';
|
|
3
|
-
export * from './use-is-first-render.js';
|
|
4
|
-
export * from './use-render-counter.js';
|
|
5
|
-
export * from './use-mount.js';
|
|
6
|
-
export * from './use-mount-async.js';
|
|
7
|
-
export * from './use-unmount.js';
|
|
8
|
-
export * from './use-effect-async.js';
|
|
9
|
-
export * from './use-callback-async.js';
|
|
10
|
-
export * from './use-update-effect.js';
|
|
11
|
-
export * from './use-single-selection.js';
|
|
12
|
-
export * from './use-multiple-selection.js';
|
|
13
|
-
export * from './use-state-cycle.js';
|
|
14
|
-
export * from './use-toggle.js';
|
|
15
|
-
export * from './use-resize-observer.js';
|
|
16
|
-
export * from './use-
|
|
17
|
-
export * from './use-
|
|
18
|
-
export * from './use-
|
|
19
|
-
export * from './use-
|
|
20
|
-
export * from './use-
|
|
21
|
-
export * from './use-
|
|
1
|
+
export * from './use-increment.js';
|
|
2
|
+
export * from './use-is-mounted.js';
|
|
3
|
+
export * from './use-is-first-render.js';
|
|
4
|
+
export * from './use-render-counter.js';
|
|
5
|
+
export * from './use-mount.js';
|
|
6
|
+
export * from './use-mount-async.js';
|
|
7
|
+
export * from './use-unmount.js';
|
|
8
|
+
export * from './use-effect-async.js';
|
|
9
|
+
export * from './use-callback-async.js';
|
|
10
|
+
export * from './use-update-effect.js';
|
|
11
|
+
export * from './use-single-selection.js';
|
|
12
|
+
export * from './use-multiple-selection.js';
|
|
13
|
+
export * from './use-state-cycle.js';
|
|
14
|
+
export * from './use-toggle.js';
|
|
15
|
+
export * from './use-resize-observer.js';
|
|
16
|
+
export * from './use-intersection-observer.js';
|
|
17
|
+
export * from './use-step.js';
|
|
18
|
+
export * from './use-force-update.js';
|
|
19
|
+
export * from './use-finite-state-machine.js';
|
|
20
|
+
export * from './use-iife.js';
|
|
21
|
+
export * from './use-memo-with-cleanup.js';
|
|
22
|
+
export * from './use-get-set.js';
|
|
22
23
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,eAAe,CAAA;AAC7B,cAAc,uBAAuB,CAAA;AACrC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,eAAe,CAAA;AAC7B,cAAc,4BAA4B,CAAA;AAC1C,cAAc,kBAAkB,CAAA"}
|
package/lib/types.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export interface IOptionState {
|
|
2
|
-
selected: boolean;
|
|
3
|
-
}
|
|
1
|
+
export interface IOptionState {
|
|
2
|
+
selected: boolean;
|
|
3
|
+
}
|
package/lib/types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DependencyList } from 'react';
|
|
2
|
-
export declare function useCallbackAsync<Args extends unknown[]>(callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>, deps: DependencyList): (...args: Args) => void;
|
|
1
|
+
import { DependencyList } from 'react';
|
|
2
|
+
export declare function useCallbackAsync<Args extends unknown[]>(callback: (...args: [...args: Args, signal: AbortSignal]) => Promise<void>, deps: DependencyList): (...args: Args) => void;
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { useCallback } from 'react';
|
|
2
|
-
import { go } from '@blackglory/prelude';
|
|
3
|
-
import { AbortController } from 'extra-abort';
|
|
4
|
-
import { useMemoWithCleanup } from './use-memo-with-cleanup.js';
|
|
5
|
-
const symbolAbort = Symbol();
|
|
6
|
-
export function useCallbackAsync(callback, deps) {
|
|
7
|
-
const controller = useMemoWithCleanup(() => new AbortController(), controller => controller.abort(symbolAbort), deps);
|
|
8
|
-
return useCallback((...args) => {
|
|
9
|
-
go(async () => {
|
|
10
|
-
try {
|
|
11
|
-
await callback(...args, controller.signal);
|
|
12
|
-
}
|
|
13
|
-
catch (err) {
|
|
14
|
-
if (err !== symbolAbort)
|
|
15
|
-
throw err;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
}, deps);
|
|
19
|
-
}
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
import { go } from '@blackglory/prelude';
|
|
3
|
+
import { AbortController } from 'extra-abort';
|
|
4
|
+
import { useMemoWithCleanup } from './use-memo-with-cleanup.js';
|
|
5
|
+
const symbolAbort = Symbol();
|
|
6
|
+
export function useCallbackAsync(callback, deps) {
|
|
7
|
+
const controller = useMemoWithCleanup(() => new AbortController(), controller => controller.abort(symbolAbort), deps);
|
|
8
|
+
return useCallback((...args) => {
|
|
9
|
+
go(async () => {
|
|
10
|
+
try {
|
|
11
|
+
await callback(...args, controller.signal);
|
|
12
|
+
}
|
|
13
|
+
catch (err) {
|
|
14
|
+
if (err !== symbolAbort)
|
|
15
|
+
throw err;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
}, deps);
|
|
19
|
+
}
|
|
20
20
|
//# sourceMappingURL=use-callback-async.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { DependencyList } from 'react';
|
|
2
|
-
export declare function useEffectAsync(effect: (signal: AbortSignal) => Promise<void>, deps?: DependencyList): void;
|
|
1
|
+
import { DependencyList } from 'react';
|
|
2
|
+
export declare function useEffectAsync(effect: (signal: AbortSignal) => Promise<void>, deps?: DependencyList): void;
|
package/lib/use-effect-async.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
import { go } from '@blackglory/prelude';
|
|
3
|
-
import { AbortController } from 'extra-abort';
|
|
4
|
-
const abort = Symbol();
|
|
5
|
-
export function useEffectAsync(effect, deps) {
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
const controller = new AbortController();
|
|
8
|
-
go(async () => {
|
|
9
|
-
try {
|
|
10
|
-
await effect(controller.signal);
|
|
11
|
-
}
|
|
12
|
-
catch (err) {
|
|
13
|
-
if (err !== abort)
|
|
14
|
-
throw err;
|
|
15
|
-
}
|
|
16
|
-
});
|
|
17
|
-
return () => controller.abort();
|
|
18
|
-
}, deps);
|
|
19
|
-
}
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { go } from '@blackglory/prelude';
|
|
3
|
+
import { AbortController } from 'extra-abort';
|
|
4
|
+
const abort = Symbol();
|
|
5
|
+
export function useEffectAsync(effect, deps) {
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
const controller = new AbortController();
|
|
8
|
+
go(async () => {
|
|
9
|
+
try {
|
|
10
|
+
await effect(controller.signal);
|
|
11
|
+
}
|
|
12
|
+
catch (err) {
|
|
13
|
+
if (err !== abort)
|
|
14
|
+
throw err;
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
return () => controller.abort();
|
|
18
|
+
}, deps);
|
|
19
|
+
}
|
|
20
20
|
//# sourceMappingURL=use-effect-async.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
|
|
2
|
-
export type { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
|
|
3
|
-
export declare function useFiniteStateMachine<State extends string, Event extends string>(schema: IFiniteStateMachineSchema<State, Event>, initialState: State): ObservableFiniteStateMachine<State, Event>;
|
|
1
|
+
import { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
|
|
2
|
+
export type { ObservableFiniteStateMachine, IFiniteStateMachineSchema } from 'extra-fsm';
|
|
3
|
+
export declare function useFiniteStateMachine<State extends string, Event extends string>(schema: IFiniteStateMachineSchema<State, Event>, initialState: State): ObservableFiniteStateMachine<State, Event>;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { useMemo, useEffect } from 'react';
|
|
2
|
-
import { ObservableFiniteStateMachine } from 'extra-fsm';
|
|
3
|
-
import { useForceUpdate } from './use-force-update.js';
|
|
4
|
-
export function useFiniteStateMachine(schema, initialState) {
|
|
5
|
-
const forceUpdate = useForceUpdate();
|
|
6
|
-
const fsm = useMemo(() => new ObservableFiniteStateMachine(schema, initialState), [schema, initialState]);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
const observable = fsm.observeStateChanges();
|
|
9
|
-
const subscription = observable.subscribe(() => forceUpdate());
|
|
10
|
-
return () => subscription.unsubscribe();
|
|
11
|
-
}, [fsm]);
|
|
12
|
-
return fsm;
|
|
13
|
-
}
|
|
1
|
+
import { useMemo, useEffect } from 'react';
|
|
2
|
+
import { ObservableFiniteStateMachine } from 'extra-fsm';
|
|
3
|
+
import { useForceUpdate } from './use-force-update.js';
|
|
4
|
+
export function useFiniteStateMachine(schema, initialState) {
|
|
5
|
+
const forceUpdate = useForceUpdate();
|
|
6
|
+
const fsm = useMemo(() => new ObservableFiniteStateMachine(schema, initialState), [schema, initialState]);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const observable = fsm.observeStateChanges();
|
|
9
|
+
const subscription = observable.subscribe(() => forceUpdate());
|
|
10
|
+
return () => subscription.unsubscribe();
|
|
11
|
+
}, [fsm]);
|
|
12
|
+
return fsm;
|
|
13
|
+
}
|
|
14
14
|
//# sourceMappingURL=use-finite-state-machine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useForceUpdate(): () => void;
|
|
1
|
+
export declare function useForceUpdate(): () => void;
|
package/lib/use-force-update.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
2
|
-
export function useForceUpdate() {
|
|
3
|
-
const [, setState] = useState({});
|
|
4
|
-
return useCallback(forceUpdate, []);
|
|
5
|
-
function forceUpdate() {
|
|
6
|
-
setState({});
|
|
7
|
-
}
|
|
8
|
-
}
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
export function useForceUpdate() {
|
|
3
|
+
const [, setState] = useState({});
|
|
4
|
+
return useCallback(forceUpdate, []);
|
|
5
|
+
function forceUpdate() {
|
|
6
|
+
setState({});
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
9
|
//# sourceMappingURL=use-force-update.js.map
|
package/lib/use-get-set.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useGetSet<T>(initialValue: T): [get: () => T, set: (value: T) => void];
|
|
1
|
+
export declare function useGetSet<T>(initialValue: T): [get: () => T, set: (value: T) => void];
|
package/lib/use-get-set.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useRef, useCallback } from 'react';
|
|
2
|
-
import { useForceUpdate } from './use-force-update.js';
|
|
3
|
-
export function useGetSet(initialValue) {
|
|
4
|
-
const forceUpdate = useForceUpdate();
|
|
5
|
-
const ref = useRef(initialValue);
|
|
6
|
-
return [
|
|
7
|
-
useCallback(() => ref.current, []),
|
|
8
|
-
useCallback((value) => {
|
|
9
|
-
if (ref.current !== value) {
|
|
10
|
-
ref.current = value;
|
|
11
|
-
forceUpdate();
|
|
12
|
-
}
|
|
13
|
-
}, [])
|
|
14
|
-
];
|
|
15
|
-
}
|
|
1
|
+
import { useRef, useCallback } from 'react';
|
|
2
|
+
import { useForceUpdate } from './use-force-update.js';
|
|
3
|
+
export function useGetSet(initialValue) {
|
|
4
|
+
const forceUpdate = useForceUpdate();
|
|
5
|
+
const ref = useRef(initialValue);
|
|
6
|
+
return [
|
|
7
|
+
useCallback(() => ref.current, []),
|
|
8
|
+
useCallback((value) => {
|
|
9
|
+
if (ref.current !== value) {
|
|
10
|
+
ref.current = value;
|
|
11
|
+
forceUpdate();
|
|
12
|
+
}
|
|
13
|
+
}, [])
|
|
14
|
+
];
|
|
15
|
+
}
|
|
16
16
|
//# sourceMappingURL=use-get-set.js.map
|
package/lib/use-iife.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare function useIIFE(iife: () => void, deps: React.DependencyList): void;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare function useIIFE(iife: () => void, deps: React.DependencyList): void;
|
package/lib/use-iife.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { useRef } from 'react';
|
|
2
|
-
import { useIsFirstRender } from "./use-is-first-render.js";
|
|
3
|
-
export function useIIFE(iife, deps) {
|
|
4
|
-
const oldDeps = useRef([]);
|
|
5
|
-
const isFirstRender = useIsFirstRender();
|
|
6
|
-
if (isFirstRender()) {
|
|
7
|
-
iife();
|
|
8
|
-
}
|
|
9
|
-
else {
|
|
10
|
-
if (deps.length === oldDeps.current.length) {
|
|
11
|
-
if (deps.some((x, i) => x !== oldDeps.current[i])) {
|
|
12
|
-
iife();
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
iife();
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
oldDeps.current = Array.from(deps);
|
|
20
|
-
}
|
|
1
|
+
import { useRef } from 'react';
|
|
2
|
+
import { useIsFirstRender } from "./use-is-first-render.js";
|
|
3
|
+
export function useIIFE(iife, deps) {
|
|
4
|
+
const oldDeps = useRef([]);
|
|
5
|
+
const isFirstRender = useIsFirstRender();
|
|
6
|
+
if (isFirstRender()) {
|
|
7
|
+
iife();
|
|
8
|
+
}
|
|
9
|
+
else {
|
|
10
|
+
if (deps.length === oldDeps.current.length) {
|
|
11
|
+
if (deps.some((x, i) => x !== oldDeps.current[i])) {
|
|
12
|
+
iife();
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
iife();
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
oldDeps.current = Array.from(deps);
|
|
20
|
+
}
|
|
21
21
|
//# sourceMappingURL=use-iife.js.map
|
package/lib/use-increment.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useIncrement(initialValue: number): [value: number, increment: (step?: number) => void, reset: () => void];
|
|
1
|
+
export declare function useIncrement(initialValue: number): [value: number, increment: (step?: number) => void, reset: () => void];
|
package/lib/use-increment.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
2
|
-
export function useIncrement(initialValue) {
|
|
3
|
-
const [value, setValue] = useState(initialValue);
|
|
4
|
-
return [value, useCallback(increment, []), useCallback(reset, [])];
|
|
5
|
-
function increment(step = 1) {
|
|
6
|
-
setValue(value => value + step);
|
|
7
|
-
}
|
|
8
|
-
function reset() {
|
|
9
|
-
setValue(initialValue);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
1
|
+
import { useState, useCallback } from 'react';
|
|
2
|
+
export function useIncrement(initialValue) {
|
|
3
|
+
const [value, setValue] = useState(initialValue);
|
|
4
|
+
return [value, useCallback(increment, []), useCallback(reset, [])];
|
|
5
|
+
function increment(step = 1) {
|
|
6
|
+
setValue(value => value + step);
|
|
7
|
+
}
|
|
8
|
+
function reset() {
|
|
9
|
+
setValue(initialValue);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
12
|
//# sourceMappingURL=use-increment.js.map
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { RefObject, MutableRefObject } from 'react';
|
|
2
|
+
export declare function useIntersectionObserver(callback: IntersectionObserverCallback, options: IntersectionObserverInit | undefined, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
|
|
3
|
+
export declare function useIntersectionObserver(callback: IntersectionObserverCallback, refs: Array<RefObject<HTMLElement> | MutableRefObject<HTMLElement>>): void;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { isntNull } from '@blackglory/prelude';
|
|
3
|
+
export function useIntersectionObserver(...args) {
|
|
4
|
+
if (args.length === 2) {
|
|
5
|
+
const [callback, refs] = args;
|
|
6
|
+
return useIntersectionObserver(callback, undefined, refs);
|
|
7
|
+
}
|
|
8
|
+
const [callback, options, refs] = args;
|
|
9
|
+
const deps = refs.map(x => x.current);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const observer = new IntersectionObserver(callback, options);
|
|
12
|
+
refs
|
|
13
|
+
.map(x => x.current)
|
|
14
|
+
.filter(isntNull)
|
|
15
|
+
.forEach(x => observer.observe(x));
|
|
16
|
+
return () => observer.disconnect();
|
|
17
|
+
}, deps);
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=use-intersection-observer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-intersection-observer.js","sourceRoot":"","sources":["../src/use-intersection-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAW9C,MAAM,UAAU,uBAAuB,CAAC,GAAG,IASxC;IAED,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;QACrB,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;QAE7B,OAAO,uBAAuB,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;KAC1D;IAED,MAAM,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAGrC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QAE5D,IAAI;aACD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;aACnB,MAAM,CAAC,QAAQ,CAAC;aAChB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpC,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;IACpC,CAAC,EAAE,IAAI,CAAC,CAAA;AACV,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useIsFirstRender(): () => boolean;
|
|
1
|
+
export declare function useIsFirstRender(): () => boolean;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { useRef, useCallback } from 'react';
|
|
2
|
-
var State;
|
|
3
|
-
(function (State) {
|
|
4
|
-
State[State["InitialValue"] = 0] = "InitialValue";
|
|
5
|
-
State[State["First"] = 1] = "First";
|
|
6
|
-
State[State["NotFirst"] = 2] = "NotFirst";
|
|
7
|
-
})(State || (State = {}));
|
|
8
|
-
export function useIsFirstRender() {
|
|
9
|
-
const state = useRef(State.InitialValue);
|
|
10
|
-
switch (state.current) {
|
|
11
|
-
case State.InitialValue:
|
|
12
|
-
state.current = State.First;
|
|
13
|
-
break;
|
|
14
|
-
case State.First:
|
|
15
|
-
state.current = State.NotFirst;
|
|
16
|
-
break;
|
|
17
|
-
case State.NotFirst: break;
|
|
18
|
-
}
|
|
19
|
-
return useCallback(isFirstRender, []);
|
|
20
|
-
function isFirstRender() {
|
|
21
|
-
return state.current === State.First;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
1
|
+
import { useRef, useCallback } from 'react';
|
|
2
|
+
var State;
|
|
3
|
+
(function (State) {
|
|
4
|
+
State[State["InitialValue"] = 0] = "InitialValue";
|
|
5
|
+
State[State["First"] = 1] = "First";
|
|
6
|
+
State[State["NotFirst"] = 2] = "NotFirst";
|
|
7
|
+
})(State || (State = {}));
|
|
8
|
+
export function useIsFirstRender() {
|
|
9
|
+
const state = useRef(State.InitialValue);
|
|
10
|
+
switch (state.current) {
|
|
11
|
+
case State.InitialValue:
|
|
12
|
+
state.current = State.First;
|
|
13
|
+
break;
|
|
14
|
+
case State.First:
|
|
15
|
+
state.current = State.NotFirst;
|
|
16
|
+
break;
|
|
17
|
+
case State.NotFirst: break;
|
|
18
|
+
}
|
|
19
|
+
return useCallback(isFirstRender, []);
|
|
20
|
+
function isFirstRender() {
|
|
21
|
+
return state.current === State.First;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
24
|
//# sourceMappingURL=use-is-first-render.js.map
|
package/lib/use-is-mounted.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useIsMounted(): () => boolean;
|
|
1
|
+
export declare function useIsMounted(): () => boolean;
|
package/lib/use-is-mounted.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useRef, useCallback } from 'react';
|
|
2
|
-
import { useMount } from './use-mount.js';
|
|
3
|
-
export function useIsMounted() {
|
|
4
|
-
const mounted = useRef(false);
|
|
5
|
-
useMount(() => {
|
|
6
|
-
mounted.current = true;
|
|
7
|
-
return () => {
|
|
8
|
-
mounted.current = false;
|
|
9
|
-
};
|
|
10
|
-
});
|
|
11
|
-
return useCallback(isMounted, []);
|
|
12
|
-
function isMounted() {
|
|
13
|
-
return mounted.current;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
1
|
+
import { useRef, useCallback } from 'react';
|
|
2
|
+
import { useMount } from './use-mount.js';
|
|
3
|
+
export function useIsMounted() {
|
|
4
|
+
const mounted = useRef(false);
|
|
5
|
+
useMount(() => {
|
|
6
|
+
mounted.current = true;
|
|
7
|
+
return () => {
|
|
8
|
+
mounted.current = false;
|
|
9
|
+
};
|
|
10
|
+
});
|
|
11
|
+
return useCallback(isMounted, []);
|
|
12
|
+
function isMounted() {
|
|
13
|
+
return mounted.current;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
16
|
//# sourceMappingURL=use-is-mounted.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare function useMemoWithCleanup<T>(factory: () => T, cleanup: (value: T) => void, deps?: React.DependencyList): T;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare function useMemoWithCleanup<T>(factory: () => T, cleanup: (value: T) => void, deps?: React.DependencyList): T;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useMemo, useEffect } from 'react';
|
|
2
|
-
export function useMemoWithCleanup(factory, cleanup, deps) {
|
|
3
|
-
const value = useMemo(factory, deps);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
return () => cleanup(value);
|
|
6
|
-
}, deps);
|
|
7
|
-
return value;
|
|
8
|
-
}
|
|
1
|
+
import { useMemo, useEffect } from 'react';
|
|
2
|
+
export function useMemoWithCleanup(factory, cleanup, deps) {
|
|
3
|
+
const value = useMemo(factory, deps);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
return () => cleanup(value);
|
|
6
|
+
}, deps);
|
|
7
|
+
return value;
|
|
8
|
+
}
|
|
9
9
|
//# sourceMappingURL=use-memo-with-cleanup.js.map
|
package/lib/use-mount-async.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useMountAsync(effect: (signal: AbortSignal) => Promise<void>): void;
|
|
1
|
+
export declare function useMountAsync(effect: (signal: AbortSignal) => Promise<void>): void;
|
package/lib/use-mount-async.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useEffectAsync } from './use-effect-async.js';
|
|
2
|
-
export function useMountAsync(effect) {
|
|
3
|
-
useEffectAsync(effect, []);
|
|
4
|
-
}
|
|
1
|
+
import { useEffectAsync } from './use-effect-async.js';
|
|
2
|
+
export function useMountAsync(effect) {
|
|
3
|
+
useEffectAsync(effect, []);
|
|
4
|
+
}
|
|
5
5
|
//# sourceMappingURL=use-mount-async.js.map
|
package/lib/use-mount.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { EffectCallback } from 'react';
|
|
2
|
-
export declare function useMount(effect: EffectCallback): void;
|
|
1
|
+
import { EffectCallback } from 'react';
|
|
2
|
+
export declare function useMount(effect: EffectCallback): void;
|
package/lib/use-mount.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
export function useMount(effect) {
|
|
3
|
-
useEffect(effect, []);
|
|
4
|
-
}
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
export function useMount(effect) {
|
|
3
|
+
useEffect(effect, []);
|
|
4
|
+
}
|
|
5
5
|
//# sourceMappingURL=use-mount.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
-
import { IOptionState } from "./types.js";
|
|
3
|
-
export declare function useMultipleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndexes?: number[]): {
|
|
4
|
-
selectedIndexes: number[];
|
|
5
|
-
optionStates: IOptionState[];
|
|
6
|
-
toggle: (index: number) => void;
|
|
7
|
-
select: (index: number) => void;
|
|
8
|
-
unselect: (index: number) => void;
|
|
9
|
-
};
|
|
1
|
+
import { NonEmptyArray } from '@blackglory/prelude';
|
|
2
|
+
import { IOptionState } from "./types.js";
|
|
3
|
+
export declare function useMultipleSelection<T>(options: NonEmptyArray<T>, defaultSelectedIndexes?: number[]): {
|
|
4
|
+
selectedIndexes: number[];
|
|
5
|
+
optionStates: IOptionState[];
|
|
6
|
+
toggle: (index: number) => void;
|
|
7
|
+
select: (index: number) => void;
|
|
8
|
+
unselect: (index: number) => void;
|
|
9
|
+
};
|