diff --git a/packages/components-react/src/hooks/useRedoUndo.ts b/packages/components-react/src/hooks/useRedoUndo.ts index 50a224528..044c6ff08 100644 --- a/packages/components-react/src/hooks/useRedoUndo.ts +++ b/packages/components-react/src/hooks/useRedoUndo.ts @@ -10,6 +10,7 @@ export function useRedoUndo(initialValue: T, options: RedoUndoOptions) { const [currentValue, setCurrentValue] = useState(initialValue); const pastRef = useRef([]); const futureRef = useRef([]); + const skippedHistories = useRef([]); const finalOptions = useMemo>(() => { return { maxHistory: 20, @@ -57,6 +58,7 @@ export function useRedoUndo(initialValue: T, options: RedoUndoOptions) { const reset = useCallback(() => { pastRef.current = []; futureRef.current = []; + skippedHistories.current = []; }, []); useEffect(() => { @@ -65,12 +67,19 @@ export function useRedoUndo(initialValue: T, options: RedoUndoOptions) { }, [initialValue, reset]); const update = useCallback( - (value: React.SetStateAction) => { + (value: React.SetStateAction, skip: boolean = false) => { setCurrentValue((pre) => { const newValue = typeof value === 'function' ? (value as Function)(pre) : value; + if (skip) { + skippedHistories.current.push(newValue); + } + if (pre) { - pastRef.current = [...pastRef.current, pre].slice(-finalOptions.maxHistory!); + // skip 来跳过不需要记录的历史 + pastRef.current = [...pastRef.current, pre] + .filter((state) => !skippedHistories.current.includes(state)) + .slice(-finalOptions.maxHistory!); } return newValue;