32 lines
1.0 KiB
TypeScript
32 lines
1.0 KiB
TypeScript
|
/*
|
||
|
|
* Copyright (C) Contributors to the Suwayomi project
|
||
|
|
*
|
||
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||
|
|
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import { Droppable, DroppableProps } from 'react-beautiful-dnd';
|
||
|
|
|
||
|
|
// issue: https://github.com/atlassian/react-beautiful-dnd/issues/2399
|
||
|
|
// credit for fix: https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194
|
||
|
|
export default function StrictModeDroppable({ children, ...props }: DroppableProps) {
|
||
|
|
const [enabled, setEnabled] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const animation = requestAnimationFrame(() => setEnabled(true));
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
cancelAnimationFrame(animation);
|
||
|
|
setEnabled(false);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (!enabled) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return <Droppable {...props}>{children}</Droppable>;
|
||
|
|
}
|