use-good-hooks 1.0.40 → 1.0.41
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 +3 -3
- package/dist/use-history-state.d.ts +2 -2
- package/dist/use-history-state.js +40 -40
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -230,7 +230,7 @@ const TextEditor = () => {
|
|
|
230
230
|
<button onClick={actions.redo} disabled={!state.canRedo}>
|
|
231
231
|
Redo
|
|
232
232
|
</button>
|
|
233
|
-
<button onClick={actions.
|
|
233
|
+
<button onClick={actions.initial}>Initial State</button>
|
|
234
234
|
</div>
|
|
235
235
|
<p>Past states: {state.past.length}</p>
|
|
236
236
|
<p>Future states: {state.future.length}</p>
|
|
@@ -256,7 +256,7 @@ Returns a tuple `[historyState, historyActions]`:
|
|
|
256
256
|
|
|
257
257
|
**historyState** (Object): - `canRedo`: Boolean indicating if redo is possible - `canUndo`: Boolean indicating if undo is possible - `future`: Array of future states (for redo) - `past`: Array of past states (for undo) - `paused`: Boolean indicating if the history is paused - `present`: The current state value
|
|
258
258
|
|
|
259
|
-
**historyActions** (Object): - `
|
|
259
|
+
**historyActions** (Object): - `initial`: Function to reset to initial state - `pause`: Function to pause history tracking (updates won't be recorded) - `redo`: Function to move to the next state (redo) - `replace`: Function to replace the state without adding to history - `resume`: Function to resume history tracking - `set`: Function to update the state and record history (debounced by default) - `setDirect`: Function to update the state immediately, bypassing debounce - `undo`: Function to move to the previous state (undo)
|
|
260
260
|
|
|
261
261
|
#### Example with onChange callback
|
|
262
262
|
|
|
@@ -265,7 +265,7 @@ const Editor = () => {
|
|
|
265
265
|
const [state, actions] = useHistoryState('', {
|
|
266
266
|
onChange: ({ action, state }) => {
|
|
267
267
|
console.log(`Action: ${action}, State: ${state}`);
|
|
268
|
-
// Action can be: 'SET', 'UNDO', 'REDO', '
|
|
268
|
+
// Action can be: 'SET', 'UNDO', 'REDO', 'INITIAL', 'REPLACE'
|
|
269
269
|
}
|
|
270
270
|
});
|
|
271
271
|
|
|
@@ -3,7 +3,7 @@ import { DebounceSettings } from 'lodash';
|
|
|
3
3
|
export { DebounceSettings }
|
|
4
4
|
|
|
5
5
|
export declare type HistoryAction<T> = {
|
|
6
|
-
type: '
|
|
6
|
+
type: 'INITIAL';
|
|
7
7
|
initialState: T;
|
|
8
8
|
} | {
|
|
9
9
|
type: 'PAUSE';
|
|
@@ -50,7 +50,7 @@ declare const useHistoryState: <T>(initialState: T, options?: HistoryOptions<T>)
|
|
|
50
50
|
paused: boolean;
|
|
51
51
|
present: T;
|
|
52
52
|
}, {
|
|
53
|
-
|
|
53
|
+
initial: () => void;
|
|
54
54
|
pause: () => void;
|
|
55
55
|
redo: () => void;
|
|
56
56
|
replace: (newPresent: T) => void;
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import { useRef as A, useReducer as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { useRef as A, useReducer as N, useMemo as D, useEffect as O } from "react";
|
|
2
|
+
import T from "lodash/cloneDeep";
|
|
3
|
+
import b from "lodash/debounce";
|
|
4
|
+
import c from "lodash/size";
|
|
5
|
+
const h = {
|
|
6
6
|
future: [],
|
|
7
7
|
past: [],
|
|
8
8
|
present: null
|
|
9
|
-
},
|
|
10
|
-
const w = A(f),
|
|
9
|
+
}, i = (f, p) => p ? f : T(f), g = (f, p, w) => w ? f === p : JSON.stringify(f) === JSON.stringify(p), F = (f, p) => {
|
|
10
|
+
const w = A(f), d = A(p ?? {}), [l, a] = N(
|
|
11
11
|
(n, e) => {
|
|
12
12
|
const {
|
|
13
13
|
immutable: u = !0,
|
|
14
14
|
maxCapacity: r = 10,
|
|
15
15
|
onChange: S = () => null
|
|
16
|
-
} =
|
|
17
|
-
if (e.type === "
|
|
16
|
+
} = d.current, { future: R, past: y, paused: E, present: m } = n;
|
|
17
|
+
if (e.type === "INITIAL") {
|
|
18
18
|
const s = {
|
|
19
19
|
future: [],
|
|
20
20
|
past: [],
|
|
21
|
-
paused:
|
|
22
|
-
present:
|
|
21
|
+
paused: E,
|
|
22
|
+
present: i(e.initialState, u)
|
|
23
23
|
};
|
|
24
24
|
return S({
|
|
25
25
|
action: e.type,
|
|
@@ -32,13 +32,13 @@ const L = {
|
|
|
32
32
|
paused: !0
|
|
33
33
|
};
|
|
34
34
|
if (e.type === "REDO") {
|
|
35
|
-
if (
|
|
35
|
+
if (c(R) === 0)
|
|
36
36
|
return n;
|
|
37
37
|
const s = R[0], o = {
|
|
38
38
|
future: R.slice(1),
|
|
39
|
-
past: [...y,
|
|
40
|
-
paused:
|
|
41
|
-
present:
|
|
39
|
+
past: [...y, i(m, u)],
|
|
40
|
+
paused: E,
|
|
41
|
+
present: i(s, u)
|
|
42
42
|
};
|
|
43
43
|
return S({
|
|
44
44
|
action: e.type,
|
|
@@ -63,12 +63,12 @@ const L = {
|
|
|
63
63
|
}), t;
|
|
64
64
|
} else if (e.type === "SET") {
|
|
65
65
|
const { newPresent: s } = e;
|
|
66
|
-
if (
|
|
66
|
+
if (g(s, m, u))
|
|
67
67
|
return n;
|
|
68
|
-
if (
|
|
68
|
+
if (E) {
|
|
69
69
|
const U = {
|
|
70
70
|
...n,
|
|
71
|
-
present:
|
|
71
|
+
present: i(s, u)
|
|
72
72
|
};
|
|
73
73
|
return S({
|
|
74
74
|
action: e.type,
|
|
@@ -76,25 +76,25 @@ const L = {
|
|
|
76
76
|
}), U;
|
|
77
77
|
}
|
|
78
78
|
let t = [...y];
|
|
79
|
-
m !== null && (t = [...t,
|
|
79
|
+
m !== null && (t = [...t, i(m, u)]), r > 0 && c(t) > r && (t = t.slice(c(t) - r));
|
|
80
80
|
const o = {
|
|
81
81
|
future: [],
|
|
82
82
|
past: t,
|
|
83
|
-
paused:
|
|
84
|
-
present:
|
|
83
|
+
paused: E,
|
|
84
|
+
present: i(s, u)
|
|
85
85
|
};
|
|
86
86
|
return S({
|
|
87
87
|
action: e.type,
|
|
88
88
|
state: o.present
|
|
89
89
|
}), o;
|
|
90
90
|
} else if (e.type === "UNDO") {
|
|
91
|
-
if (
|
|
91
|
+
if (c(y) === 0)
|
|
92
92
|
return n;
|
|
93
|
-
const s = y[
|
|
94
|
-
future: [
|
|
93
|
+
const s = y[c(y) - 1], t = y.slice(0, c(y) - 1), o = {
|
|
94
|
+
future: [i(m, u), ...R],
|
|
95
95
|
past: t,
|
|
96
|
-
paused:
|
|
97
|
-
present:
|
|
96
|
+
paused: E,
|
|
97
|
+
present: i(s, u)
|
|
98
98
|
};
|
|
99
99
|
return S({
|
|
100
100
|
action: e.type,
|
|
@@ -106,30 +106,30 @@ const L = {
|
|
|
106
106
|
}
|
|
107
107
|
},
|
|
108
108
|
{
|
|
109
|
-
...
|
|
110
|
-
paused:
|
|
111
|
-
present:
|
|
109
|
+
...h,
|
|
110
|
+
paused: d.current.paused ?? !1,
|
|
111
|
+
present: i(
|
|
112
112
|
w.current,
|
|
113
|
-
|
|
113
|
+
d.current.immutable
|
|
114
114
|
)
|
|
115
115
|
}
|
|
116
116
|
), P = D(() => ({
|
|
117
|
-
canRedo:
|
|
118
|
-
canUndo:
|
|
117
|
+
canRedo: c(l.future) !== 0,
|
|
118
|
+
canUndo: c(l.past) !== 0,
|
|
119
119
|
future: l.future,
|
|
120
120
|
past: l.past,
|
|
121
121
|
paused: l.paused,
|
|
122
122
|
present: l.present
|
|
123
|
-
}), [l]),
|
|
124
|
-
const { debounceMs: n = 250, debounceSettings: e } =
|
|
123
|
+
}), [l]), I = D(() => {
|
|
124
|
+
const { debounceMs: n = 250, debounceSettings: e } = d.current, u = b(
|
|
125
125
|
(r) => a({ type: "SET", newPresent: r }),
|
|
126
126
|
n,
|
|
127
127
|
e
|
|
128
128
|
);
|
|
129
129
|
return {
|
|
130
|
-
|
|
130
|
+
initial: () => {
|
|
131
131
|
a({
|
|
132
|
-
type: "
|
|
132
|
+
type: "INITIAL",
|
|
133
133
|
initialState: w.current
|
|
134
134
|
});
|
|
135
135
|
},
|
|
@@ -156,10 +156,10 @@ const L = {
|
|
|
156
156
|
}
|
|
157
157
|
};
|
|
158
158
|
}, []);
|
|
159
|
-
return
|
|
160
|
-
p && (
|
|
161
|
-
}, [p]), [P,
|
|
159
|
+
return O(() => {
|
|
160
|
+
p && (d.current = p);
|
|
161
|
+
}, [p]), [P, I];
|
|
162
162
|
};
|
|
163
163
|
export {
|
|
164
|
-
|
|
164
|
+
F as default
|
|
165
165
|
};
|
package/package.json
CHANGED