= buttonComponent || DefaultButton;
67 |
68 | return (
69 |
70 | {
71 | kindsToShow.map(kind => {
72 | const title = buttonTitles?.[kind];
73 | const Icon = buttonIcons?.[kind] || defaultIcon[kind] as React.ComponentType;
74 | return (
75 |
82 |
83 |
84 | );
85 | })
86 | }
87 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/src/FormikUndoProvider.tsx:
--------------------------------------------------------------------------------
1 | import { useFormikContext, FormikValues } from 'formik';
2 | import React, { ReactNode, useCallback, useContext, useMemo, useRef } from 'react';
3 | import { useValueRef } from './hooks';
4 | import { AutoSaveOptions } from './types';
5 |
6 |
7 | interface FormikUndoContext {
8 | saveCheckpoint: (values?: Values) => void;
9 | addCheckpointEquivalent: (targetValue: Values, equivalentValue: Values) => void;
10 | reset: () => void;
11 | undo: () => void;
12 | redo: () => void;
13 | undoableCount: number;
14 | redoableCount: number;
15 | didCreateCurrentValues: boolean;
16 | }
17 |
18 |
19 | const reactContext = React.createContext>(null!);
20 |
21 |
22 | export const useFormikUndo = (): FormikUndoContext => {
23 | const formikUndoContext = useContext(reactContext);
24 | if (!formikUndoContext) {
25 | throw new Error(
26 | 'FormikUndo context not found. ' +
27 | 'Make sure you call useFormikUndo() inside a FormikUndo context.'
28 | );
29 | }
30 | return formikUndoContext;
31 | };
32 |
33 |
34 | /**
35 | * Test equality field by field (i.e. 1-deep equality).
36 | */
37 | export const areFormikValuesEqual = (a: Values | undefined, b: Values | undefined) => {
38 | if (a === undefined) {
39 | return b === undefined;
40 | }
41 | if (b === undefined) {
42 | return a === undefined;
43 | }
44 | const aKeys = Object.keys(a).filter(key => a[key] !== undefined);
45 | const bKeys = Object.keys(b).filter(key => b[key] !== undefined);
46 | if (aKeys.length !== bKeys.length) {
47 | return false;
48 | }
49 | for (const aKey of aKeys) {
50 | if (a[aKey] !== b[aKey]) {
51 | return false;
52 | }
53 | }
54 | return true;
55 | };
56 |
57 |
58 |
59 | interface FormikUndoContextProviderProps {
60 | autoSave?: boolean | AutoSaveOptions;
61 | children?: ReactNode;
62 | }
63 |
64 |
65 | export const FormikUndoContextProvider = ({
66 | autoSave: autoSaveOptions, children
67 | }: FormikUndoContextProviderProps) => {
68 | const formikContext = useFormikContext();
69 | if (!formikContext) {
70 | throw new Error(
71 | 'Formik context not found. Make sure that: \n' +
72 | ' 1- you use inside a context.\n' +
73 | ' 2- Your app and FormikUndoContextProvider are using the same Formik module instance.'
74 | );
75 | }
76 | const {
77 | values: formikValues, setValues: setFormikValues
78 | } = formikContext;
79 | const formikValuesRef = useValueRef(formikValues);
80 | const checkpoints = useRef([formikValues]).current;
81 | const checkpointEquivalences = useRef>(new Map()).current;
82 | const currentCheckpointIndexRef = useRef(0);
83 | const lastValuesModifiedByUsRef = useRef();
84 |
85 | const currentCheckpointIndex = currentCheckpointIndexRef.current;
86 | const currentCheckpoint = checkpoints[currentCheckpointIndex];
87 |
88 | const doValuesMatchCheckpoint = useCallback(
89 | (values: Values, checkpoint: Values) => {
90 | if (areFormikValuesEqual(values, checkpoint)) {
91 | return true;
92 | }
93 | const equivalences = checkpointEquivalences.get(checkpoint);
94 | return equivalences && equivalences.find(equivalence => areFormikValuesEqual(equivalence, values));
95 | },
96 | [],
97 | );
98 |
99 | const valuesChangedSinceCurrentCheckpoint = !doValuesMatchCheckpoint(formikValues, currentCheckpoint);
100 | if (valuesChangedSinceCurrentCheckpoint) {
101 | // If values have been manually changed, we discard all history past current checkpoint.
102 | checkpoints.splice(currentCheckpointIndex + 1, checkpoints.length);
103 | }
104 | const undoableCount = currentCheckpointIndexRef.current + (valuesChangedSinceCurrentCheckpoint ? 1 : 0);
105 | const redoableCount = valuesChangedSinceCurrentCheckpoint
106 | ? 0
107 | : checkpoints.length - currentCheckpointIndexRef.current - 1;
108 | const didCreateCurrentValues = areFormikValuesEqual(formikValues, lastValuesModifiedByUsRef.current);
109 |
110 |
111 |
112 | const saveCheckpoint = useCallback(
113 | (values?: Values) => {
114 | const valuesToSave = values || formikValuesRef.current;
115 | if (areFormikValuesEqual(valuesToSave, lastValuesModifiedByUsRef.current)) {
116 | return; // This change was created by us. Saving aborted.
117 | }
118 | const currentCheckpoint = checkpoints[currentCheckpointIndexRef.current];
119 | if (doValuesMatchCheckpoint(valuesToSave, currentCheckpoint)) {
120 | return; // The state of the form has not changed. Nothing to do.
121 | }
122 | // console.log('SAVING', JSON.stringify((valuesToSave as any).content));
123 | // console.log('SAVING',valuesToSave);
124 | checkpoints.push(valuesToSave);
125 | currentCheckpointIndexRef.current++;
126 | },
127 | [formikValuesRef, checkpoints, currentCheckpointIndexRef],
128 | );
129 |
130 | const addCheckpointEquivalent = useCallback(
131 | (targetValue: Values, equivalentValue: Values) => {
132 | if (!checkpointEquivalences.has(targetValue)) {
133 | checkpointEquivalences.set(targetValue, []);
134 | }
135 | checkpointEquivalences.get(targetValue).push(equivalentValue);
136 | },
137 | [checkpoints],
138 | );
139 |
140 | const jumpToCheckpoint = useCallback(
141 | (checkpointIndex: number) => {
142 | currentCheckpointIndexRef.current = checkpointIndex;
143 | const checkpoint = checkpoints[checkpointIndex];
144 | if (checkpoint === undefined) {
145 | throw new Error(`jumpToCheckpoint(${checkpointIndex}): out of bounds`);
146 | }
147 | lastValuesModifiedByUsRef.current = checkpoint;
148 | setFormikValues(checkpoint);
149 | },
150 | [setFormikValues, checkpoints],
151 | );
152 |
153 | const doeFormikValuesMatchCurrentCheckpoint = useCallback(
154 | () => {
155 | const currentCheckpoint = checkpoints[currentCheckpointIndexRef.current];
156 | return doValuesMatchCheckpoint(formikValuesRef.current, currentCheckpoint);
157 | },
158 | [checkpoints, formikValuesRef],
159 | );
160 |
161 |
162 | const reset = useCallback(
163 | () => {
164 | if (!doeFormikValuesMatchCurrentCheckpoint()) {
165 | // Values have been changed by user.
166 | checkpoints.push(formikValuesRef.current); // save the current value (since we may redo later).
167 | }
168 | jumpToCheckpoint(0);
169 | },
170 | [jumpToCheckpoint, checkpoints, formikValuesRef, doeFormikValuesMatchCurrentCheckpoint],
171 | );
172 |
173 | const undo = useCallback(
174 | () => {
175 | // console.log('undo');
176 | if (doeFormikValuesMatchCurrentCheckpoint()) {
177 | // Values haven't been changed since current checkpoint. Therefore we need to go back in history.
178 | jumpToCheckpoint(currentCheckpointIndexRef.current - 1);
179 | } else {
180 | // Values have been changed by user.
181 | checkpoints.push(formikValuesRef.current); // save the current value (in case we need to redo later).
182 | jumpToCheckpoint(currentCheckpointIndexRef.current);
183 | }
184 | },
185 | [jumpToCheckpoint, checkpoints, formikValuesRef, doeFormikValuesMatchCurrentCheckpoint],
186 | );
187 |
188 | const redo = useCallback(
189 | () => {
190 | jumpToCheckpoint(currentCheckpointIndexRef.current + 1);
191 | },
192 | [jumpToCheckpoint, currentCheckpointIndexRef],
193 | );
194 |
195 | const context = useMemo(
196 | () => ({ saveCheckpoint, undo, reset, redo, undoableCount, redoableCount, addCheckpointEquivalent, didCreateCurrentValues }),
197 | [saveCheckpoint, undo, reset, redo, undoableCount, redoableCount, addCheckpointEquivalent, didCreateCurrentValues],
198 | );
199 |
200 | return (
201 |
202 | {children}
203 |
204 | );
205 | };
206 |
--------------------------------------------------------------------------------
/src/WordEditingCheckpointPicker.ts:
--------------------------------------------------------------------------------
1 | import { CheckpointPicker, SaveRequest } from './CheckpointPicker';
2 | import { FormikValues } from 'formik';
3 | import { FormikValuesDiff } from './getFormikValuesDiff';
4 |
5 |
6 | const splitToWords = (str: string) => str.split(/\s+/g);
7 |
8 |
9 |
10 | interface ConstructorOptions {
11 | preventWordCutting: boolean;
12 | }
13 |
14 | function escapeRegExp(str: string) {
15 | return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
16 | }
17 |
18 |
19 | /**
20 | * This middleware prevents saving in the middle of editing a word.
21 | */
22 |
23 | export class WordEditingCheckpointPicker extends CheckpointPicker {
24 |
25 | private readonly preventWordCutting: boolean;
26 |
27 | constructor({ preventWordCutting }: ConstructorOptions) {
28 | super();
29 | this.preventWordCutting = preventWordCutting;
30 | }
31 |
32 | pick(
33 | previousValues: T,
34 | previousValuesDiff: FormikValuesDiff,
35 | newValues: T,
36 | valuesDiff: FormikValuesDiff,
37 | ): SaveRequest | undefined {
38 |
39 |
40 | // console.log('modifiedFieldsKeys', modifiedFieldsKeys);
41 | const modifiedPaths = Object.keys(valuesDiff);
42 |
43 | if (modifiedPaths.length !== 1) {
44 | return; // Does not look like word editing. We should not prevent it.
45 | }
46 |
47 | const modifiedPath = modifiedPaths[0];
48 | const valueDiff = valuesDiff[modifiedPath]
49 |
50 | const previousValue = valueDiff[0];
51 | if (typeof previousValue !== 'string') {
52 | return; // Does not look like word editing. We should not prevent it.
53 | }
54 |
55 | const newValue = valueDiff[1];
56 | if (typeof newValue !== 'string') {
57 | return; // Does not look like word editing. We should not prevent it.
58 | }
59 |
60 | if (!this.preventWordCutting) {
61 | return { value: newValues };
62 | }
63 |
64 | // console.log('previousValue ', JSON.stringify(previousValue));
65 | // console.log('newValue ', JSON.stringify(newValue));
66 |
67 | if ((new RegExp(`${escapeRegExp(previousValue)}[\\s\\-]+`)).test(newValue)) {
68 | // User just added some space. Not worth saving, but we dont want FormikUndo to consider that this is a new state.
69 | // Therefore we state that the newValue is equivalent to the value we want to save.
70 | return { value: previousValues, equivalent: newValues };
71 | }
72 |
73 | // Note: Comparing the number of words may be optimized, since we should not really need to create the array of words.
74 | const previousValueWords = splitToWords(previousValue);
75 | const newValueWords = splitToWords(newValue);
76 |
77 | if (previousValueWords.length === newValueWords.length) {
78 | return; // No words have been removed added, this state is not interesting.
79 | }
80 |
81 | return { value: previousValues }; // Word count has changed
82 | }
83 |
84 |
85 | }
86 |
--------------------------------------------------------------------------------
/src/getFormikValuesDiff.ts:
--------------------------------------------------------------------------------
1 | import { FormikValues } from 'formik';
2 |
3 | export type FormikValuesDiff = Record;
4 |
5 |
6 | /**
7 | * Compute the diff between the two formik values `a`and `b`.
8 | * {
9 | * ["path.to.key"]: [oldValue, newValue],
10 | * ["path.to.other.key"]: [oldValue, newValue],
11 | * ...
12 | * }
13 | */
14 |
15 |
16 | // Same as `typeof`, without the `null` bug.
17 | const getTypeOf = (val: unknown): string =>
18 | val === null ? 'null' : typeof val;
19 |
20 |
21 | // Mutate the same output object to save time.
22 | const computeDiff = (a: unknown, b: unknown, output: FormikValuesDiff, path: string): void => {
23 | if (a === b) {
24 | return;
25 | }
26 | const typeA = getTypeOf(a);
27 | const typeB = getTypeOf(b);
28 | if (typeA !== typeB) {
29 | output[path] = [a, b];
30 | return;
31 | }
32 | if (typeA === 'object') { // Object and Arrays
33 | const keys = fastArrayUniqueMerge(Object.keys(a), Object.keys(b));
34 | for (const key of keys) {
35 | if (key.indexOf('.') >= 0) {
36 | throw new Error('Object key cannot contain the dot (`.`) character because it is used to express path');
37 | }
38 | computeDiff((a as any)[key], (b as any)[key], output, `${path}.${key}`);
39 | }
40 | return;
41 | }
42 | // Other types
43 | output[path] = [a, b];
44 | return;
45 | };
46 |
47 |
48 | export const fastArrayUniqueMerge = (a: string[], b: string[]): string[] => {
49 | const set = new Set(a);
50 | for (const elt of b) {
51 | set.add(elt);
52 | }
53 | return Array.from(set);
54 | };
55 |
56 |
57 |
58 | export const getFormikValuesDiff = (a: FormikValues, b: FormikValues): FormikValuesDiff => {
59 | const output: FormikValuesDiff = {};
60 | const keys = fastArrayUniqueMerge(Object.keys(a), Object.keys(b));
61 | for (const key of keys) {
62 | computeDiff(a[key], b[key], output, key);
63 | }
64 | return output;
65 | };
66 |
67 |
68 |
69 | // const a = {
70 | // foo: 'foo',
71 | // checked: true,
72 | // active: false,
73 | // arr: [
74 | // {
75 | // yoo: 'ypp',
76 | // yoo2: 'ypp',
77 | // a: [1, 2, 'hohohoh'],
78 | // },
79 | // true,
80 | // 'fooooooo',
81 | // ]
82 | // };
83 |
84 | // const b = {
85 | // foo: 'foo1',
86 | // checked: false,
87 | // active: false,
88 | // arr: [
89 | // {
90 | // yoo: 'ypp!',
91 | // 'yoo2': 'ypp',
92 | // a: [1, 2, 'hohohoh', 'yo'],
93 | // },
94 | // false,
95 | // 'fooooooo',
96 | // ]
97 | // };
98 |
99 | // const diff = getFormikValuesDiff(a, b);
100 |
101 | // console.log('diff', JSON.stringify(diff, null, 2));
102 |
--------------------------------------------------------------------------------
/src/hooks.ts:
--------------------------------------------------------------------------------
1 | import { DependencyList, MutableRefObject, useCallback, useEffect, useRef, useState, SetStateAction } from 'react';
2 |
3 | /**
4 | * Constantly update the value without changing the ref.
5 | */
6 | export const useValueRef = (currentValue: T): MutableRefObject => {
7 | const ref = useRef(currentValue);
8 | ref.current = currentValue;
9 | return ref;
10 | };
11 |
12 |
13 | const isFunction = (val: unknown): val is Function =>
14 | typeof val === 'function';
15 |
16 |
17 | /**
18 | * Provide a state that triggers a re-render depending on which dependency is used.
19 | * `stateValue` and `valueRef.current` provide the same value.
20 | * However a dependency on `valueRef` will not trigger a re-render when the value changes.
21 | */
22 | export const useStateAndRef = (initialValue: T) => {
23 | const [value, setValue] = useState(initialValue);
24 | const ref = useRef(initialValue);
25 | const setValueAndRef = useCallback(
26 | (setStateAction: SetStateAction) => {
27 | const newValue = isFunction(setStateAction) ? setStateAction(ref.current) : setStateAction;
28 | ref.current = newValue;
29 | setValue(newValue);
30 | },
31 | [setValue, ref],
32 | );
33 | return [value, ref, setValueAndRef] as const;
34 | };
35 |
36 |
37 | /**
38 | * Like a normal useEffect(), but skips as long as `depToMonitor` has not changed.
39 | */
40 | export const useEffectAfterFirstChange =
41 | (effect: React.EffectCallback, depToMonitor: unknown, otherDeps?: DependencyList | undefined): void => {
42 | const initialDepValueRef = useRef(depToMonitor);
43 | const effectRef = useValueRef(effect);
44 | useEffect(
45 | () => {
46 | if (depToMonitor !== initialDepValueRef.current) {
47 | initialDepValueRef.current = {}; // Set it to a unequalable value, so `effectRef` everytime after that.
48 | return effectRef.current();
49 | }
50 | },
51 | // eslint-disable-next-line react-hooks/exhaustive-deps
52 | [...(otherDeps || []), effectRef, depToMonitor, initialDepValueRef],
53 | );
54 | };
55 |
56 |
57 | export const useThrottler = (intialValue: T, delay: number) => {
58 | const [value, valueRef, setValue] = useStateAndRef(intialValue);
59 | const newestValueGetterRef = useRef<() => T>();
60 | const timerRef = useRef | null>(null);
61 |
62 | const restartTimer = useCallback(
63 | () => {
64 | timerRef.current = setTimeout(() => {
65 | const newValue = newestValueGetterRef.current!();
66 | if (newValue !== valueRef.current) {
67 | restartTimer();
68 | setValue(newValue);
69 | } else {
70 | // Stop throttling.
71 | timerRef.current = null;
72 | }
73 | }, delay);
74 | },
75 | [delay, valueRef, setValue],
76 | );
77 | const submitNewValue = useCallback(
78 | (getValue: () => T, resetTimer?: boolean) => {
79 | newestValueGetterRef.current = getValue;
80 | if (delay === 0 || resetTimer || timerRef.current === null) {
81 | restartTimer();
82 | setValue(getValue());
83 | }
84 | },
85 | [delay, restartTimer, setValue],
86 | );
87 | useEffect(() => {
88 | return () => {
89 | timerRef.current && clearTimeout(timerRef.current);
90 | };
91 | }, []);
92 | return [value, submitNewValue] as const;
93 | };
94 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { useFormikUndo } from './FormikUndoProvider';
2 | export { FormikUndo } from './FormikUndo';
3 | export { FormikUndoControlBar } from './FormikUndoControlBar';
4 |
5 | export type { FormikUndoControlBarProps } from './FormikUndoControlBar';
6 | export type { AutoSaveOptions } from './types';
7 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | export interface AutoSaveOptions {
5 | throttleDelay: number;
6 | enabled: boolean;
7 | saveOnFieldChange: boolean;
8 | preventWordCutting: boolean;
9 | }
10 |
--------------------------------------------------------------------------------
/src/useFormikUndoAutoSave.tsx:
--------------------------------------------------------------------------------
1 | import { useFormikContext, FormikValues } from 'formik';
2 | import { useMemo, useRef } from 'react';
3 | import { CheckpointPicker, SaveRequest } from './CheckpointPicker';
4 | import { EditedFieldChangedCheckpointPicker } from './EditedFieldChangedCheckpointPicker';
5 | import { areFormikValuesEqual, useFormikUndo } from './FormikUndoProvider';
6 | import { useEffectAfterFirstChange, useThrottler, useValueRef } from './hooks';
7 | import { WordEditingCheckpointPicker } from './WordEditingCheckpointPicker';
8 | import { AutoSaveOptions } from './types';
9 | import { getFormikValuesDiff, FormikValuesDiff } from './getFormikValuesDiff';
10 |
11 |
12 |
13 | const defaultOptions: AutoSaveOptions = {
14 | throttleDelay: 2000,
15 | enabled: true,
16 | saveOnFieldChange: true,
17 | preventWordCutting: true,
18 | };
19 |
20 |
21 | export const getModifiedFieldsKeys = (arrayA: T, arrayB: T) => {
22 | const set = new Set([...Object.keys(arrayA), ...Object.keys(arrayB)]);
23 | return Array.from(set.values()).filter(key => arrayA[key] !== arrayB[key]);
24 | };
25 |
26 |
27 | export const useFormikUndoAutoSave = (options: Partial = {}) => {
28 | const { throttleDelay, enabled, saveOnFieldChange, preventWordCutting } = { ...defaultOptions, ...options };
29 | const { values: newFormikValues } = useFormikContext();
30 | const previousFormikValuesRef = useRef(newFormikValues);
31 | const previousValuesDiffRef = useRef({});
32 | const { saveCheckpoint, addCheckpointEquivalent, didCreateCurrentValues } = useFormikUndo();
33 | const didCreateCurrentValuesRef = useValueRef(didCreateCurrentValues);
34 | const [throttledValue, submitValueToThrottler] = useThrottler(newFormikValues, throttleDelay);
35 |
36 | const checkpointPickers = useMemo[]>(
37 | () => {
38 | const pickers: CheckpointPicker[] = [];
39 | pickers.push(new WordEditingCheckpointPicker({ preventWordCutting }));
40 | if (saveOnFieldChange) {
41 | pickers.push(new EditedFieldChangedCheckpointPicker());
42 | }
43 | return pickers;
44 | },
45 | [preventWordCutting],
46 | );
47 |
48 | useEffectAfterFirstChange(
49 | () => {
50 | if (!enabled) {
51 | return;
52 | }
53 | saveCheckpoint(throttledValue);
54 | },
55 | throttledValue,
56 | [saveCheckpoint, enabled],
57 | );
58 |
59 | useEffectAfterFirstChange(
60 | () => {
61 | if (!enabled) {
62 | return;
63 | }
64 |
65 | if (didCreateCurrentValuesRef.current) {
66 | return; // This value was created by formik-undo and we should not autosave it.
67 | }
68 |
69 | const previousFormikValues = previousFormikValuesRef.current;
70 | const previousValuesDiff = previousValuesDiffRef.current;
71 |
72 | previousFormikValuesRef.current = newFormikValues;
73 |
74 | const valuesDiff = getFormikValuesDiff(previousFormikValues, newFormikValues);
75 | // console.log('valuesDiff', JSON.stringify(valuesDiff));
76 |
77 | if (Object.keys(valuesDiff).length === 0) {
78 | return; // Nothing actually changed, even though the containing object may be different.
79 | }
80 |
81 | previousValuesDiffRef.current = valuesDiff;
82 |
83 | // We do not want to save the same value several times.
84 | // Therefore we need to only keep one request per formik value.
85 | // We store all requests in a map, and the winner per-value will be selected later.
86 | const allRequestsMap = new Map[]>();
87 | allRequestsMap.set(previousFormikValues, []);
88 | allRequestsMap.set(newFormikValues, []);
89 | for (const picker of checkpointPickers) {
90 | const request = picker.pick(previousFormikValues, previousValuesDiff, newFormikValues, valuesDiff);
91 | if (!request) {
92 | continue;
93 | }
94 | // The picker may have decided to save the previous or the current value.
95 | if (!(request.value === previousFormikValues || request.value === newFormikValues)) {
96 | throw new Error('Picker are only allowed to return one of the two provided values');
97 | }
98 | if (request.equivalent) {
99 | addCheckpointEquivalent(request.value, request.equivalent);
100 | }
101 | allRequestsMap.get(request.value).push(request);
102 | }
103 |
104 | // For each formik values, choose the best one.
105 | const chosenRequests: SaveRequest[] = [];
106 | allRequestsMap.forEach((requests, values) => {
107 | // requests with `now` take precedence.
108 | if (requests.length === 0) {
109 | return;
110 | }
111 | const saveNowRequest = requests.find(({ now }) => now);
112 | if (saveNowRequest) {
113 | chosenRequests.push(saveNowRequest);
114 | } else {
115 | chosenRequests.push(requests[0]); // They are all equal, so we take any.
116 | }
117 | });
118 |
119 | const [saveNowRequests, saveWithThrottleRequests] = chosenRequests.reduce(
120 | (arrays, request) => {
121 | const [saveNowRequests, saveWithThrottleRequests] = arrays;
122 | if (request.now) {
123 | saveNowRequests.push(request);
124 | } else {
125 | saveWithThrottleRequests.push(request);
126 | }
127 | return arrays;
128 | },
129 | [[], []] as [SaveRequest[], SaveRequest[]],
130 | );
131 |
132 | if (saveNowRequests.length === 1) {
133 | const valueToSave = saveNowRequests[0].value;
134 | submitValueToThrottler(() => valueToSave, true);
135 | } else if (saveNowRequests.length === 2) {
136 | // Picker are only allowed to return one of the two provided values.
137 | // Therefore we know `saveNowRequests` contains exactly `previousFormikValues` and `newFormikValues`.
138 | // We save them in chronological order.
139 | submitValueToThrottler(() => previousFormikValues, true);
140 | submitValueToThrottler(() => newFormikValues, true);
141 | }
142 |
143 | if (saveWithThrottleRequests.length === 1) {
144 | const valueToSave = saveWithThrottleRequests[0].value;
145 | submitValueToThrottler(() => valueToSave);
146 | } else if (saveWithThrottleRequests.length === 2) {
147 | // Picker are only allowed to return one of the two provided values.
148 | // Therefore we know `saveWithThrottleRequests` contains exactly `previousFormikValues` and `newFormikValues`.
149 | // We submit the latest one, `newFormikValues`.
150 | submitValueToThrottler(() => newFormikValues);
151 | }
152 |
153 | },
154 | newFormikValues,
155 | [enabled, didCreateCurrentValuesRef, submitValueToThrottler],
156 | );
157 | };
158 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "declarationDir": "./dist",
5 | "module": "es6",
6 | "noImplicitAny": true,
7 | "outDir": "./dist",
8 | "target": "es5",
9 | "jsx": "react",
10 | "allowSyntheticDefaultImports": true,
11 | "moduleResolution": "Node",
12 | "lib": [
13 | "DOM", "ESNExt"
14 | ]
15 | },
16 | "include": [
17 | "src/**/*"
18 | ],
19 | "exclude": [
20 | "node_modules",
21 | "dist",
22 | "extras"
23 | ]
24 | }
25 |
--------------------------------------------------------------------------------