From 7f78a8b86dda223ce7734f36d02c72a3a926d4ab Mon Sep 17 00:00:00 2001 From: Chris Trevino Date: Thu, 7 Mar 2019 11:46:24 -0800 Subject: [PATCH] Prepare Hooks API for Initial Release (#1251) * refactor: split up useMonitorSubscription into two hooks * fix: resolve two-backend issue When the DragDropProvider is removed from the DOM, it was not emitting a message to the DragDropManager so that it could handle refcounts properly and break-down the HTML5Backend. This change adds a useEffect hook invocation to fire off an event that will cause the DnDManager to destroy the backend. * refactor: update the react peer dependency of React-Dnd * refactor: clean up monitor modules --- .../src/00 Chessboard/Board.tsx | 51 +++++++++-------- .../src/00 Chessboard/index.tsx | 56 ++++++------------- packages/react-dnd/package.json | 4 +- packages/react-dnd/src/DragDropContext.tsx | 7 ++- packages/react-dnd/src/DragDropContextType.ts | 17 ++++++ packages/react-dnd/src/DragSource.ts | 7 ++- ...rceMonitor.ts => DragSourceMonitorImpl.ts} | 14 ++--- packages/react-dnd/src/DropTarget.ts | 7 ++- ...getMonitor.ts => DropTargetMonitorImpl.ts} | 14 ++--- packages/react-dnd/src/hooks/useDragSource.ts | 46 ++++++--------- .../src/hooks/useDragSourceMonitor.ts | 22 ++++++++ packages/react-dnd/src/hooks/useDropTarget.ts | 29 ++++------ .../src/hooks/useDropTargetMonitor.ts | 23 ++++++++ .../react-dnd/src/hooks/useMonitorOutput.ts | 9 ++- ...Subscription.ts => useRegisteredSource.ts} | 26 ++++++--- packages/react-dnd/src/hooks/util.ts | 7 --- packages/react-dnd/src/interfaces.ts | 12 ++-- packages/react-dnd/src/registerSource.ts | 16 +++--- packages/react-dnd/src/registerTarget.ts | 16 +++--- 19 files changed, 202 insertions(+), 181 deletions(-) create mode 100644 packages/react-dnd/src/DragDropContextType.ts rename packages/react-dnd/src/{createSourceMonitor.ts => DragSourceMonitorImpl.ts} (89%) rename packages/react-dnd/src/{createTargetMonitor.ts => DropTargetMonitorImpl.ts} (83%) create mode 100644 packages/react-dnd/src/hooks/useDragSourceMonitor.ts create mode 100644 packages/react-dnd/src/hooks/useDropTargetMonitor.ts rename packages/react-dnd/src/hooks/{useMonitorSubscription.ts => useRegisteredSource.ts} (56%) diff --git a/packages/documentation-examples/src/00 Chessboard/Board.tsx b/packages/documentation-examples/src/00 Chessboard/Board.tsx index 4f6d7f0792..399cd9c826 100644 --- a/packages/documentation-examples/src/00 Chessboard/Board.tsx +++ b/packages/documentation-examples/src/00 Chessboard/Board.tsx @@ -1,47 +1,46 @@ import * as React from 'react' import { BoardSquare } from './BoardSquare' import { Knight } from './Knight' + export interface BoardProps { knightPosition: [number, number] } -export default class Board extends React.Component { - public render() { - const squares = [] - for (let i = 0; i < 64; i += 1) { - squares.push(this.renderSquare(i)) - } - - return ( -
- {squares} -
- ) - } - - private renderSquare(i: number) { +const Board: React.FC = ({ + knightPosition: [knightX, knightY], +}) => { + function renderSquare(i: number) { const x = i % 8 const y = Math.floor(i / 8) return (
- {this.renderPiece(x, y)} + {renderPiece(x, y)}
) } - - private renderPiece(x: number, y: number) { - const [knightX, knightY] = this.props.knightPosition + function renderPiece(x: number, y: number) { const isKnightHere = x === knightX && y === knightY return isKnightHere ? : null } + + const squares = [] + for (let i = 0; i < 64; i += 1) { + squares.push(renderSquare(i)) + } + return ( +
+ {squares} +
+ ) } +export default Board diff --git a/packages/documentation-examples/src/00 Chessboard/index.tsx b/packages/documentation-examples/src/00 Chessboard/index.tsx index 7bf0ed40b0..e4224b312b 100644 --- a/packages/documentation-examples/src/00 Chessboard/index.tsx +++ b/packages/documentation-examples/src/00 Chessboard/index.tsx @@ -10,43 +10,23 @@ export interface ChessboardTutorialAppState { /** * Unlike the tutorial, export a component so it can be used on the website. */ -export default class ChessboardTutorialApp extends React.Component< - {}, - ChessboardTutorialAppState -> { - public state: ChessboardTutorialAppState = { knightPosition: [1, 7] } - private unobserve?: (() => void) +const ChessboardTutorialApp: React.FC = () => { + const [knightPos, setKnightPos] = React.useState<[number, number]>([1, 7]) - public componentDidMount() { - this.unobserve = observe(this.handleChange) - } - public componentWillUnmount() { - if (this.unobserve) { - this.unobserve() - } - } - - public render() { - const { knightPosition } = this.state - return ( -
- -
- ) - } - - private handleChange = (knightPosition: [number, number]) => { - const nextState = { knightPosition } - if (this.state) { - this.setState(nextState) - } else { - this.state = nextState - } - } + React.useEffect(() => + observe((newPos: [number, number]) => setKnightPos(newPos)), + ) + return ( +
+ +
+ ) } + +export default ChessboardTutorialApp diff --git a/packages/react-dnd/package.json b/packages/react-dnd/package.json index 9e46b92906..9f880d5ae2 100644 --- a/packages/react-dnd/package.json +++ b/packages/react-dnd/package.json @@ -45,7 +45,7 @@ "webpack-cli": "^3.2.3" }, "peerDependencies": { - "react": ">= 16.3", - "react-dom": ">= 16.3" + "react": ">= 16.8", + "react-dom": ">= 16.8" } } diff --git a/packages/react-dnd/src/DragDropContext.tsx b/packages/react-dnd/src/DragDropContext.tsx index c4aa9f8cad..18210a82cb 100644 --- a/packages/react-dnd/src/DragDropContext.tsx +++ b/packages/react-dnd/src/DragDropContext.tsx @@ -11,7 +11,6 @@ import { ContextComponent } from './interfaces' const invariant = require('invariant') const hoistStatics = require('hoist-non-react-statics') const isClassComponent = require('recompose/isClassComponent').default - /** * The React context type */ @@ -55,6 +54,12 @@ export const DragDropContextProvider: React.FC< DragDropContextProviderProps > = ({ backend, context, debugMode, children }) => { const contextValue = createChildContext(backend, context, debugMode) + React.useEffect(() => { + return () => + contextValue.dragDropManager.dispatch({ + type: 'DragDropContextProvider::Exiting', + }) + }) return {children} } diff --git a/packages/react-dnd/src/DragDropContextType.ts b/packages/react-dnd/src/DragDropContextType.ts new file mode 100644 index 0000000000..dcaf50b66d --- /dev/null +++ b/packages/react-dnd/src/DragDropContextType.ts @@ -0,0 +1,17 @@ +import * as React from 'react' +import { DragDropManager } from 'dnd-core' + +/** + * The React context type + */ +export interface DragDropContext { + dragDropManager: DragDropManager | undefined +} + +/** + * Create the React Context + */ +export const context = React.createContext>({ + dragDropManager: undefined, +}) +export const { Consumer, Provider } = context diff --git a/packages/react-dnd/src/DragSource.ts b/packages/react-dnd/src/DragSource.ts index f1a8b52160..7516c36c5c 100644 --- a/packages/react-dnd/src/DragSource.ts +++ b/packages/react-dnd/src/DragSource.ts @@ -1,6 +1,6 @@ declare var require: any import * as React from 'react' -import { SourceType } from 'dnd-core' +import { SourceType, DragDropManager } from 'dnd-core' import { DragSourceSpec, DragSourceCollector, @@ -11,7 +11,7 @@ import checkDecoratorArguments from './utils/checkDecoratorArguments' import decorateHandler from './decorateHandler' import registerSource from './registerSource' import createSourceFactory from './createSourceFactory' -import createSourceMonitor from './createSourceMonitor' +import DragSourceMonitorImpl from './DragSourceMonitorImpl' import createSourceConnector from './createSourceConnector' import isValidType from './utils/isValidType' const invariant = require('invariant') @@ -84,7 +84,8 @@ export default function DragSource( containerDisplayName: 'DragSource', createHandler: createSource, registerHandler: registerSource, - createMonitor: createSourceMonitor, + createMonitor: (manager: DragDropManager) => + new DragSourceMonitorImpl(manager), createConnector: createSourceConnector, DecoratedComponent, getType, diff --git a/packages/react-dnd/src/createSourceMonitor.ts b/packages/react-dnd/src/DragSourceMonitorImpl.ts similarity index 89% rename from packages/react-dnd/src/createSourceMonitor.ts rename to packages/react-dnd/src/DragSourceMonitorImpl.ts index 1a59cd80f8..a3200c5e85 100644 --- a/packages/react-dnd/src/createSourceMonitor.ts +++ b/packages/react-dnd/src/DragSourceMonitorImpl.ts @@ -13,19 +13,19 @@ const invariant = require('invariant') let isCallingCanDrag = false let isCallingIsDragging = false -class SourceMonitor implements DragSourceMonitor { +export default class DragSourceMonitorImpl implements DragSourceMonitor { private internalMonitor: DragDropMonitor - private sourceId: Identifier | undefined + private sourceId: Identifier | null = null constructor(manager: DragDropManager) { this.internalMonitor = manager.getMonitor() } - public receiveHandlerId(sourceId: Identifier) { + public receiveHandlerId(sourceId: Identifier | null) { this.sourceId = sourceId } - public getHandlerId(): Identifier | undefined { + public getHandlerId(): Identifier | null { return this.sourceId } @@ -137,9 +137,3 @@ class SourceMonitor implements DragSourceMonitor { return this.internalMonitor.getDifferenceFromInitialOffset() } } - -export default function createSourceMonitor( - manager: DragDropManager, -): DragSourceMonitor { - return new SourceMonitor(manager) as DragSourceMonitor -} diff --git a/packages/react-dnd/src/DropTarget.ts b/packages/react-dnd/src/DropTarget.ts index 17d22fa1c3..88512a0268 100644 --- a/packages/react-dnd/src/DropTarget.ts +++ b/packages/react-dnd/src/DropTarget.ts @@ -1,6 +1,6 @@ declare var require: any import * as React from 'react' -import { TargetType } from 'dnd-core' +import { TargetType, DragDropManager } from 'dnd-core' import { DropTargetSpec, DndOptions, @@ -11,9 +11,9 @@ import checkDecoratorArguments from './utils/checkDecoratorArguments' import decorateHandler from './decorateHandler' import registerTarget from './registerTarget' import createTargetFactory from './createTargetFactory' -import createTargetMonitor from './createTargetMonitor' import createTargetConnector from './createTargetConnector' import isValidType from './utils/isValidType' +import DropTargetMonitorImpl from './DropTargetMonitorImpl' const invariant = require('invariant') const isPlainObject = require('lodash/isPlainObject') @@ -77,7 +77,8 @@ export default function DropTarget( containerDisplayName: 'DropTarget', createHandler: createTarget, registerHandler: registerTarget, - createMonitor: createTargetMonitor, + createMonitor: (manager: DragDropManager) => + new DropTargetMonitorImpl(manager), createConnector: createTargetConnector, DecoratedComponent, getType, diff --git a/packages/react-dnd/src/createTargetMonitor.ts b/packages/react-dnd/src/DropTargetMonitorImpl.ts similarity index 83% rename from packages/react-dnd/src/createTargetMonitor.ts rename to packages/react-dnd/src/DropTargetMonitorImpl.ts index 664cc667cc..ec2b133721 100644 --- a/packages/react-dnd/src/createTargetMonitor.ts +++ b/packages/react-dnd/src/DropTargetMonitorImpl.ts @@ -11,19 +11,19 @@ const invariant = require('invariant') let isCallingCanDrop = false -export class TargetMonitor implements DropTargetMonitor { +export default class DropTargetMonitorImpl implements DropTargetMonitor { private internalMonitor: DragDropMonitor - private targetId: Identifier | undefined + private targetId: Identifier | null = null constructor(manager: DragDropManager) { this.internalMonitor = manager.getMonitor() } - public receiveHandlerId(targetId: Identifier) { + public receiveHandlerId(targetId: Identifier | null) { this.targetId = targetId } - public getHandlerId(): Identifier | undefined { + public getHandlerId(): Identifier | null { return this.targetId } @@ -89,9 +89,3 @@ export class TargetMonitor implements DropTargetMonitor { return this.internalMonitor.getDifferenceFromInitialOffset() } } - -export default function createTargetMonitor( - manager: DragDropManager, -): DropTargetMonitor { - return new TargetMonitor(manager) as DropTargetMonitor -} diff --git a/packages/react-dnd/src/hooks/useDragSource.ts b/packages/react-dnd/src/hooks/useDragSource.ts index 4ea01fd446..0f8a35545a 100644 --- a/packages/react-dnd/src/hooks/useDragSource.ts +++ b/packages/react-dnd/src/hooks/useDragSource.ts @@ -1,17 +1,11 @@ -import { useMemo, useEffect } from 'react' +import { useEffect } from 'react' import { SourceType } from 'dnd-core' -import registerSource from '../registerSource' -import createSourceMonitor from '../createSourceMonitor' -import { - DragSourceMonitor, - DragPreviewOptions, - DragSourceHookSpec, -} from '../interfaces' +import { DragPreviewOptions, DragSourceHookSpec } from '../interfaces' import { useDragSourceHandler } from './useDragSourceHandler' import { useDragDropManager } from './useDragDropManager' -import { useMonitorSubscription } from './useMonitorSubscription' -import { Ref, HandlerManager, isRef } from './util' +import { Ref, isRef } from './util' import { useMonitorOutput } from './useMonitorOutput' +import { useDragSourceMonitor } from './useDragSourceMonitor' /** * useDragSource hook (This API is experimental and subject to breaking changes in non-major versions) @@ -28,23 +22,15 @@ export function useDragSource( dragPreviewOptions?: DragPreviewOptions }, ): CustomProps { - const dragDropManager = useDragDropManager() - const backend = dragDropManager.getBackend() - const sourceMonitor = useMemo(() => createSourceMonitor(dragDropManager), [ - dragDropManager, - ]) as DragSourceMonitor & HandlerManager - + const manager = useDragDropManager() + const backend = manager.getBackend() const handler = useDragSourceHandler(sourceSpec) + const sourceMonitor = useDragSourceMonitor(type, handler, manager) - useMonitorSubscription( - registerSource, - type, - handler, - dragDropManager, - sourceMonitor, - ) - - useEffect(function connectDragSourceToBackend() { + /* + * Connect the Drag Source Element to the Backend + */ + useEffect(function connectDragSource() { const dragSourceNode = ref.current const dragSourceOptions = sourceSpec.dragSourceOptions return backend.connectDragSource( @@ -54,17 +40,17 @@ export function useDragSource( ) }, []) - useEffect(function connectDragPreviewToBackend() { + /* + * Connect the Drag Previem Element to the Backend + */ + useEffect(function connectDragPreview() { if (sourceSpec.dragPreview == null) { return undefined } - - // Accept ref or dom node const dragPreviewNode = isRef(sourceSpec.dragPreview) ? (sourceSpec.dragPreview as Ref).current : sourceSpec.dragPreview - - const dragPreviewOptions = sourceSpec.dragPreviewOptions + const { dragPreviewOptions } = sourceSpec return backend.connectDragPreview( sourceMonitor.getHandlerId(), dragPreviewNode, diff --git a/packages/react-dnd/src/hooks/useDragSourceMonitor.ts b/packages/react-dnd/src/hooks/useDragSourceMonitor.ts new file mode 100644 index 0000000000..bff89a14d5 --- /dev/null +++ b/packages/react-dnd/src/hooks/useDragSourceMonitor.ts @@ -0,0 +1,22 @@ +import { useMemo, useEffect } from 'react' +import registerSource from '../registerSource' +import { DragDropManager, SourceType, DragSource } from 'dnd-core' +import DragSourceMonitorImpl from '../DragSourceMonitorImpl' + +export function useDragSourceMonitor( + type: SourceType, + source: DragSource, + manager: DragDropManager, +) { + const monitor = useMemo(() => new DragSourceMonitorImpl(manager), [manager]) + useEffect( + function registerSourceWithMonitor() { + const { handlerId, unregister } = registerSource(type, source, manager) + monitor.receiveHandlerId(handlerId) + return unregister + }, + [monitor], + ) + + return monitor +} diff --git a/packages/react-dnd/src/hooks/useDropTarget.ts b/packages/react-dnd/src/hooks/useDropTarget.ts index 99ecf4e778..4d26368d45 100644 --- a/packages/react-dnd/src/hooks/useDropTarget.ts +++ b/packages/react-dnd/src/hooks/useDropTarget.ts @@ -1,13 +1,11 @@ -import { useMemo, useEffect } from 'react' +import { useEffect } from 'react' import { TargetType } from 'dnd-core' -import registerTarget from '../registerTarget' -import createTargetMonitor from '../createTargetMonitor' -import { DropTargetMonitor, DropTargetHookSpec } from '../interfaces' +import { DropTargetHookSpec } from '../interfaces' import { useDragDropManager } from './useDragDropManager' -import { useMonitorSubscription } from './useMonitorSubscription' -import { Ref, HandlerManager } from './util' +import { Ref } from './util' import { useDropTargetHandler } from './useDropTargetHandler' import { useMonitorOutput } from './useMonitorOutput' +import { useDropTargetMonitor } from './useDropTargetMonitor' /** * useDropTarget Hook (This API is experimental and subject to breaking changes in non-breaking versions) @@ -22,21 +20,14 @@ export function useDropTarget( dropTargetOptions?: {} }, ): CustomProps { - const dragDropManager = useDragDropManager() - const backend = dragDropManager.getBackend() - const targetMonitor = useMemo(() => createTargetMonitor(dragDropManager), [ - dragDropManager, - ]) as DropTargetMonitor & HandlerManager + const manager = useDragDropManager() + const backend = manager.getBackend() const handler = useDropTargetHandler(targetSpec) + const targetMonitor = useDropTargetMonitor(type, handler, manager) - useMonitorSubscription( - registerTarget, - type, - handler, - dragDropManager, - targetMonitor, - ) - + /* + * Connect the Drop Target Element to the Backend + */ useEffect(function connectDropTarget() { const dropTargetNode = ref.current if (dropTargetNode) { diff --git a/packages/react-dnd/src/hooks/useDropTargetMonitor.ts b/packages/react-dnd/src/hooks/useDropTargetMonitor.ts new file mode 100644 index 0000000000..34ef241d3f --- /dev/null +++ b/packages/react-dnd/src/hooks/useDropTargetMonitor.ts @@ -0,0 +1,23 @@ +import { useMemo, useEffect } from 'react' +import registerTarget from '../registerTarget' +import { DragDropManager, TargetType, DropTarget } from 'dnd-core' +import DropTargetMonitorImpl from '../DropTargetMonitorImpl' +import { DropTargetMonitor } from '../interfaces' + +export function useDropTargetMonitor( + type: TargetType, + target: DropTarget, + manager: DragDropManager, +): DropTargetMonitor { + const monitor = useMemo(() => new DropTargetMonitorImpl(manager), [manager]) + useEffect( + function registerTargetWithMonitor() { + const { handlerId, unregister } = registerTarget(type, target, manager) + monitor.receiveHandlerId(handlerId) + return unregister + }, + [monitor], + ) + + return monitor +} diff --git a/packages/react-dnd/src/hooks/useMonitorOutput.ts b/packages/react-dnd/src/hooks/useMonitorOutput.ts index e39992b154..89f5939d35 100644 --- a/packages/react-dnd/src/hooks/useMonitorOutput.ts +++ b/packages/react-dnd/src/hooks/useMonitorOutput.ts @@ -1,6 +1,6 @@ import { useEffect } from 'react' import { useCollector } from './useCollector' -import { HandlerManager } from './util' +import { HandlerManager } from '../interfaces' import { DragDropMonitor } from 'dnd-core' export function useMonitorOutput< @@ -16,10 +16,9 @@ export function useMonitorOutput< if (handlerId == null) { return undefined } - return (monitor as DragDropMonitor).subscribeToStateChange( - updateCollected, - { handlerIds: [handlerId] }, - ) + return monitor.subscribeToStateChange(updateCollected, { + handlerIds: [handlerId], + }) }) return collected diff --git a/packages/react-dnd/src/hooks/useMonitorSubscription.ts b/packages/react-dnd/src/hooks/useRegisteredSource.ts similarity index 56% rename from packages/react-dnd/src/hooks/useMonitorSubscription.ts rename to packages/react-dnd/src/hooks/useRegisteredSource.ts index fd1d3c60b8..8960ea2634 100644 --- a/packages/react-dnd/src/hooks/useMonitorSubscription.ts +++ b/packages/react-dnd/src/hooks/useRegisteredSource.ts @@ -1,26 +1,34 @@ import { useMemo, useEffect } from 'react' -import { DragDropManager, SourceType, TargetType } from 'dnd-core' +import { + DragDropManager, + SourceType, + TargetType, + DragSource, + DropTarget, + Identifier, +} from 'dnd-core' import { DragSourceMonitor, DropTargetMonitor } from '../interfaces' import { HandlerManager } from './util' export function useMonitorSubscription< + Context, Type = SourceType | TargetType, - Handler = any, + Handler = DragSource | DropTarget, Monitor = DragSourceMonitor | DropTargetMonitor, - Manager = DragDropManager + Manager = DragDropManager >( register: ( - type: any, - handler: any, - dragDropManager: any, - ) => { handlerId: any; unregister: () => void }, + type: Type, + handler: Handler, + dragDropManager: Manager, + ) => { handlerId: Identifier; unregister: () => void }, type: Type, handler: Handler, - dragDropManager: Manager, + manager: Manager, monitor: Monitor & HandlerManager, ) { const unregisterHandler = useMemo(() => { - const { handlerId, unregister } = register(type, handler, dragDropManager) + const { handlerId, unregister } = register(type, handler, manager) monitor.receiveHandlerId(handlerId) return unregister }, []) diff --git a/packages/react-dnd/src/hooks/util.ts b/packages/react-dnd/src/hooks/util.ts index 9336a6f637..82d54ec584 100644 --- a/packages/react-dnd/src/hooks/util.ts +++ b/packages/react-dnd/src/hooks/util.ts @@ -1,10 +1,3 @@ -import { Identifier } from 'dnd-core' - -export interface HandlerManager { - receiveHandlerId: (handlerId: Identifier | null) => void - getHandlerId: () => Identifier | undefined -} - export interface Ref { current: T } diff --git a/packages/react-dnd/src/interfaces.ts b/packages/react-dnd/src/interfaces.ts index 76bf2a6f9d..fd3fd0cbf4 100644 --- a/packages/react-dnd/src/interfaces.ts +++ b/packages/react-dnd/src/interfaces.ts @@ -1,8 +1,12 @@ import * as React from 'react' -import { XYCoord, DragDropMonitor, Identifier, DragDropManager } from 'dnd-core' - +import { XYCoord, Identifier, DragDropManager } from 'dnd-core' export { XYCoord } +export interface HandlerManager { + receiveHandlerId: (handlerId: Identifier | null) => void + getHandlerId: () => Identifier | null +} + /** * The React Component that manages the DragDropContext for its children. */ @@ -35,7 +39,7 @@ export interface DndComponentClass extends React.ComponentClass { new (props?: Props, context?: any): DndComponent } -export interface DragSourceMonitor extends DragDropMonitor { +export interface DragSourceMonitor extends HandlerManager { /** * Returns true if no drag operation is in progress, and the owner's canDrag() returns true or is not defined. */ @@ -99,7 +103,7 @@ export interface DragSourceMonitor extends DragDropMonitor { getSourceClientOffset(): XYCoord | null } -export interface DropTargetMonitor { +export interface DropTargetMonitor extends HandlerManager { /** * Returns true if there is a drag operation in progress, and the owner's canDrop() returns true or is not defined. */ diff --git a/packages/react-dnd/src/registerSource.ts b/packages/react-dnd/src/registerSource.ts index 02b995bafa..b1f6269c75 100644 --- a/packages/react-dnd/src/registerSource.ts +++ b/packages/react-dnd/src/registerSource.ts @@ -1,7 +1,13 @@ -import { DragDropManager, DragSource, Unsubscribe, Identifier } from 'dnd-core' +import { + DragDropManager, + DragSource, + Unsubscribe, + Identifier, + SourceType, +} from 'dnd-core' export default function registerSource( - type: string, + type: SourceType, source: DragSource, manager: DragDropManager, ): { @@ -11,12 +17,8 @@ export default function registerSource( const registry = manager.getRegistry() const sourceId = registry.addSource(type, source) - function unregisterSource() { - registry.removeSource(sourceId) - } - return { handlerId: sourceId, - unregister: unregisterSource, + unregister: () => registry.removeSource(sourceId), } } diff --git a/packages/react-dnd/src/registerTarget.ts b/packages/react-dnd/src/registerTarget.ts index 5c2405166d..0e054e6ca7 100644 --- a/packages/react-dnd/src/registerTarget.ts +++ b/packages/react-dnd/src/registerTarget.ts @@ -1,19 +1,21 @@ -import { DragDropManager, DropTarget, Unsubscribe, Identifier } from 'dnd-core' +import { + DragDropManager, + DropTarget, + Unsubscribe, + Identifier, + TargetType, +} from 'dnd-core' export default function registerTarget( - type: string, + type: TargetType, target: DropTarget, manager: DragDropManager, ): { handlerId: Identifier; unregister: Unsubscribe } { const registry = manager.getRegistry() const targetId = registry.addTarget(type, target) - function unregisterTarget() { - registry.removeTarget(targetId) - } - return { handlerId: targetId, - unregister: unregisterTarget, + unregister: () => registry.removeTarget(targetId), } }