From 4a36da0fdf32ee8a0ded6d14425a07924731507a Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Thu, 18 Jan 2024 15:49:02 -0800 Subject: [PATCH] Remove react-dnd --- packages/desktop-client/package.json | 2 - .../src/components/FinancesApp.tsx | 6 +- .../desktop-client/src/components/sort.tsx | 177 ------------------ yarn.lock | 72 +------ 4 files changed, 3 insertions(+), 254 deletions(-) delete mode 100644 packages/desktop-client/src/components/sort.tsx diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json index 50d0572774b..05df3ccb74a 100644 --- a/packages/desktop-client/package.json +++ b/packages/desktop-client/package.json @@ -49,8 +49,6 @@ "memoize-one": "^6.0.0", "pikaday": "1.8.2", "react": "18.2.0", - "react-dnd": "^16.0.1", - "react-dnd-html5-backend": "^16.0.1", "react-dom": "18.2.0", "react-error-boundary": "^4.0.11", "react-markdown": "^8.0.7", diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx index 29c241a14da..3cbd1c51907 100644 --- a/packages/desktop-client/src/components/FinancesApp.tsx +++ b/packages/desktop-client/src/components/FinancesApp.tsx @@ -1,7 +1,5 @@ // @ts-strict-ignore import React, { type ReactElement, useEffect, useMemo } from 'react'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend as Backend } from 'react-dnd-html5-backend'; import { Route, Routes, @@ -267,9 +265,7 @@ export function FinancesApp() { - - {app} - + {app} diff --git a/packages/desktop-client/src/components/sort.tsx b/packages/desktop-client/src/components/sort.tsx deleted file mode 100644 index 3a93640bedd..00000000000 --- a/packages/desktop-client/src/components/sort.tsx +++ /dev/null @@ -1,177 +0,0 @@ -// @ts-strict-ignore -import React, { - createContext, - useEffect, - useRef, - useLayoutEffect, - useState, - useContext, - type Context, -} from 'react'; -import { useDrag, useDrop } from 'react-dnd'; - -import { useMergedRefs } from '../hooks/useMergedRefs'; -import { theme } from '../style'; - -import { View } from './common/View'; - -export type DragState = { - state: 'start-preview' | 'start' | 'end'; - type?: string; - item?: T; - preview?: boolean; -}; - -export type DropPosition = 'top' | 'bottom'; - -export type OnDragChangeCallback = ( - drag: DragState, -) => Promise | void; - -type UseDraggableArgs = { - item?: T; - type: string; - canDrag: boolean; - onDragChange: OnDragChangeCallback; -}; - -export function useDraggable({ - item, - type, - canDrag, - onDragChange, -}: UseDraggableArgs) { - const _onDragChange = useRef(onDragChange); - - const [, dragRef] = useDrag({ - type, - item: () => { - _onDragChange.current({ state: 'start-preview', type, item }); - - setTimeout(() => { - _onDragChange.current({ state: 'start' }); - }, 0); - - return { type, item }; - }, - collect: monitor => ({ isDragging: monitor.isDragging() }), - - end(dragState) { - _onDragChange.current({ state: 'end', type, item: dragState.item }); - }, - - canDrag() { - return canDrag; - }, - }); - - useLayoutEffect(() => { - _onDragChange.current = onDragChange; - }); - - return { dragRef }; -} - -export type OnDropCallback = ( - id: string, - dropPos: DropPosition, - targetId: unknown, -) => Promise | void; - -type OnLongHoverCallback = () => Promise | void; - -type UseDroppableArgs = { - types: string | string[]; - id: unknown; - onDrop: OnDropCallback; - onLongHover?: OnLongHoverCallback; -}; - -export function useDroppable({ - types, - id, - onDrop, - onLongHover, -}: UseDroppableArgs) { - const ref = useRef(null); - const [dropPos, setDropPos] = useState(null); - - const [{ isOver }, dropRef] = useDrop< - { item: T }, - unknown, - { isOver: boolean } - >({ - accept: types, - drop({ item }) { - onDrop(item.id, dropPos, id); - }, - hover(_, monitor) { - const hoverBoundingRect = ref.current.getBoundingClientRect(); - const hoverMiddleY = - (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; - const clientOffset = monitor.getClientOffset(); - const hoverClientY = clientOffset.y - hoverBoundingRect.top; - const pos: DropPosition = hoverClientY < hoverMiddleY ? 'top' : 'bottom'; - - setDropPos(pos); - }, - collect(monitor) { - return { isOver: monitor.isOver() }; - }, - }); - - useEffect(() => { - let timeout; - if (onLongHover && isOver) { - timeout = setTimeout(onLongHover, 700); - } - - return () => timeout && clearTimeout(timeout); - }, [isOver]); - - return { - dropRef: useMergedRefs(dropRef, ref), - dropPos: isOver ? dropPos : null, - }; -} - -type ItemPosition = 'first' | 'last'; -export const DropHighlightPosContext: Context = - createContext(null); - -type DropHighlightProps = { - pos: DropPosition; - offset?: { - top?: number; - bottom?: number; - }; -}; -export function DropHighlight({ pos, offset }: DropHighlightProps) { - const itemPos = useContext(DropHighlightPosContext); - - if (pos == null) { - return null; - } - - const topOffset = (itemPos === 'first' ? 2 : 0) + (offset?.top || 0); - const bottomOffset = (itemPos === 'last' ? 2 : 0) + (offset?.bottom || 0); - - const posStyle = - pos === 'top' ? { top: -2 + topOffset } : { bottom: -1 + bottomOffset }; - - return ( - - ); -} diff --git a/yarn.lock b/yarn.lock index b1c12d740ff..55c60878eec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -100,8 +100,6 @@ __metadata: memoize-one: "npm:^6.0.0" pikaday: "npm:1.8.2" react: "npm:18.2.0" - react-dnd: "npm:^16.0.1" - react-dnd-html5-backend: "npm:^16.0.1" react-dom: "npm:18.2.0" react-error-boundary: "npm:^4.0.11" react-markdown: "npm:^8.0.7" @@ -3050,27 +3048,6 @@ __metadata: languageName: node linkType: hard -"@react-dnd/asap@npm:^5.0.1": - version: 5.0.2 - resolution: "@react-dnd/asap@npm:5.0.2" - checksum: a75039720b89da11bc678c2b61b1d2840c8349023ef2b8f8ca9099e7ece6953e9be704bf393bf799eae83d245f62115eb5302499612c2aa009c1d91caa9462df - languageName: node - linkType: hard - -"@react-dnd/invariant@npm:^4.0.1": - version: 4.0.2 - resolution: "@react-dnd/invariant@npm:4.0.2" - checksum: b638e9643e6e93da03ef463be3c1b92055daadc391fc08e4ce8639ef8c7738f91058ec83ee52a0d0df0d3a6dd2811a7703e1450737708f043c2e909c0a99dd31 - languageName: node - linkType: hard - -"@react-dnd/shallowequal@npm:^4.0.1": - version: 4.0.2 - resolution: "@react-dnd/shallowequal@npm:4.0.2" - checksum: 7f21d691bddbfd4d2830948cbeefecca1600b2b46bcb1934926795f07ae8a1fa60a3dfd3a2112be5ef682c3820c80a99711e9fa15843f7e300acb25a4ecb70ab - languageName: node - linkType: hard - "@react-spring/animated@npm:~9.7.2": version: 9.7.2 resolution: "@react-spring/animated@npm:9.7.2" @@ -7299,17 +7276,6 @@ __metadata: languageName: node linkType: hard -"dnd-core@npm:^16.0.1": - version: 16.0.1 - resolution: "dnd-core@npm:16.0.1" - dependencies: - "@react-dnd/asap": "npm:^5.0.1" - "@react-dnd/invariant": "npm:^4.0.1" - redux: "npm:^4.2.0" - checksum: 711dc30f88f7c5cb5308f105b337f6a4db7ad098e985d2e120189f17a3d1865d283aadef1641dc129706e0399746835a90e2a92ef65f0cdcf5aa0d0cb8c79265 - languageName: node - linkType: hard - "doctrine@npm:^2.1.0": version: 2.1.0 resolution: "doctrine@npm:2.1.0" @@ -9471,7 +9437,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2": +"hoist-non-react-statics@npm:^3.3.0": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -13927,40 +13893,6 @@ __metadata: languageName: node linkType: hard -"react-dnd-html5-backend@npm:^16.0.1": - version: 16.0.1 - resolution: "react-dnd-html5-backend@npm:16.0.1" - dependencies: - dnd-core: "npm:^16.0.1" - checksum: fa0feacc01ba8c923fc21461cc5919a856f09384f9a684b4c70ab9cdddc4a6ec64f0de4f65946a8061284ed92c5e3104caca56ae58884235604898a909d82e90 - languageName: node - linkType: hard - -"react-dnd@npm:^16.0.1": - version: 16.0.1 - resolution: "react-dnd@npm:16.0.1" - dependencies: - "@react-dnd/invariant": "npm:^4.0.1" - "@react-dnd/shallowequal": "npm:^4.0.1" - dnd-core: "npm:^16.0.1" - fast-deep-equal: "npm:^3.1.3" - hoist-non-react-statics: "npm:^3.3.2" - peerDependencies: - "@types/hoist-non-react-statics": ">= 3.3.1" - "@types/node": ">= 12" - "@types/react": ">= 16" - react: ">= 16.14" - peerDependenciesMeta: - "@types/hoist-non-react-statics": - optional: true - "@types/node": - optional: true - "@types/react": - optional: true - checksum: e27cf5156c306d183585099854c597266eda014c51e7dfca657f7099d5db0a09a4fe07e4c8cbc3b04ca613b805878a8f97f23cc8e13887dbfb1f05efbe5a12e7 - languageName: node - linkType: hard - "react-dom@npm:18.2.0": version: 18.2.0 resolution: "react-dom@npm:18.2.0" @@ -14368,7 +14300,7 @@ __metadata: languageName: node linkType: hard -"redux@npm:^4.0.0, redux@npm:^4.0.5, redux@npm:^4.2.0": +"redux@npm:^4.0.0, redux@npm:^4.0.5": version: 4.2.1 resolution: "redux@npm:4.2.1" dependencies: