1 | import { useCallback, useMemo, useRef, useState } from 'react';
|
---|
2 | import { useFirstMountState } from './useFirstMountState';
|
---|
3 | import { resolveHookState } from './misc/hookState';
|
---|
4 | export function useStateWithHistory(initialState, capacity, initialHistory) {
|
---|
5 | if (capacity === void 0) { capacity = 10; }
|
---|
6 | if (capacity < 1) {
|
---|
7 | throw new Error("Capacity has to be greater than 1, got '" + capacity + "'");
|
---|
8 | }
|
---|
9 | var isFirstMount = useFirstMountState();
|
---|
10 | var _a = useState(initialState), state = _a[0], innerSetState = _a[1];
|
---|
11 | var history = useRef((initialHistory !== null && initialHistory !== void 0 ? initialHistory : []));
|
---|
12 | var historyPosition = useRef(0);
|
---|
13 | // do the states manipulation only on first mount, no sense to load re-renders with useless calculations
|
---|
14 | if (isFirstMount) {
|
---|
15 | if (history.current.length) {
|
---|
16 | // if last element of history !== initial - push initial to history
|
---|
17 | if (history.current[history.current.length - 1] !== initialState) {
|
---|
18 | history.current.push(initialState);
|
---|
19 | }
|
---|
20 | // if initial history bigger that capacity - crop the first elements out
|
---|
21 | if (history.current.length > capacity) {
|
---|
22 | history.current = history.current.slice(history.current.length - capacity);
|
---|
23 | }
|
---|
24 | }
|
---|
25 | else {
|
---|
26 | // initiate the history with initial state
|
---|
27 | history.current.push(initialState);
|
---|
28 | }
|
---|
29 | historyPosition.current = history.current.length && history.current.length - 1;
|
---|
30 | }
|
---|
31 | var setState = useCallback(function (newState) {
|
---|
32 | innerSetState(function (currentState) {
|
---|
33 | newState = resolveHookState(newState, currentState);
|
---|
34 | // is state has changed
|
---|
35 | if (newState !== currentState) {
|
---|
36 | // if current position is not the last - pop element to the right
|
---|
37 | if (historyPosition.current < history.current.length - 1) {
|
---|
38 | history.current = history.current.slice(0, historyPosition.current + 1);
|
---|
39 | }
|
---|
40 | historyPosition.current = history.current.push(newState) - 1;
|
---|
41 | // if capacity is reached - shift first elements
|
---|
42 | if (history.current.length > capacity) {
|
---|
43 | history.current = history.current.slice(history.current.length - capacity);
|
---|
44 | }
|
---|
45 | }
|
---|
46 | return newState;
|
---|
47 | });
|
---|
48 | }, [state, capacity]);
|
---|
49 | var historyState = useMemo(function () { return ({
|
---|
50 | history: history.current,
|
---|
51 | position: historyPosition.current,
|
---|
52 | capacity: capacity,
|
---|
53 | back: function (amount) {
|
---|
54 | if (amount === void 0) { amount = 1; }
|
---|
55 | // don't do anything if we already at the left border
|
---|
56 | if (!historyPosition.current) {
|
---|
57 | return;
|
---|
58 | }
|
---|
59 | innerSetState(function () {
|
---|
60 | historyPosition.current -= Math.min(amount, historyPosition.current);
|
---|
61 | return history.current[historyPosition.current];
|
---|
62 | });
|
---|
63 | },
|
---|
64 | forward: function (amount) {
|
---|
65 | if (amount === void 0) { amount = 1; }
|
---|
66 | // don't do anything if we already at the right border
|
---|
67 | if (historyPosition.current === history.current.length - 1) {
|
---|
68 | return;
|
---|
69 | }
|
---|
70 | innerSetState(function () {
|
---|
71 | historyPosition.current = Math.min(historyPosition.current + amount, history.current.length - 1);
|
---|
72 | return history.current[historyPosition.current];
|
---|
73 | });
|
---|
74 | },
|
---|
75 | go: function (position) {
|
---|
76 | if (position === historyPosition.current) {
|
---|
77 | return;
|
---|
78 | }
|
---|
79 | innerSetState(function () {
|
---|
80 | historyPosition.current =
|
---|
81 | position < 0
|
---|
82 | ? Math.max(history.current.length + position, 0)
|
---|
83 | : Math.min(history.current.length - 1, position);
|
---|
84 | return history.current[historyPosition.current];
|
---|
85 | });
|
---|
86 | },
|
---|
87 | }); }, [state]);
|
---|
88 | return [state, setState, historyState];
|
---|
89 | }
|
---|