Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: initial hooks experiment * fix: get chess example working * fix: ts issues * refactor: break out hook definitions (WIP) Also, creating new interfaces for DragSource, DropTarget specification interfaces * refactor: add component arg for now (investigating) * refactor: remove styled-components from examples * refactor: break up useDragSource/useDropTarget hooks * refactor: use react.fc instead of react.sfc * fix: update documentation examples peerdeps * fix: use local links for react/react-dnd to resolve hooks issues * fix: update useDragSource, usedropTarget * refactor: simplify the public dnd hooks * feat: migrate customDragLayer example to hooks * fix: update the customDragLayer example * refactor: update some dnd-core interfaces to use identifier * fix: html5 backend
- Loading branch information
1 parent
20ded76
commit 3b19a79
Showing
55 changed files
with
734 additions
and
1,025 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 14 additions & 12 deletions
26
packages/documentation-examples/src/00 Chessboard/Board.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 29 additions & 54 deletions
83
packages/documentation-examples/src/00 Chessboard/BoardSquare.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,43 @@ | ||
| import * as React from 'react' | ||
| import { | ||
| DropTarget, | ||
| DropTargetMonitor, | ||
| DropTargetConnector, | ||
| DropTargetCollector, | ||
| ConnectDropTarget, | ||
| } from 'react-dnd' | ||
| import Square from './Square' | ||
| import { useDropTarget } from 'react-dnd' | ||
| import { Square } from './Square' | ||
| import { canMoveKnight, moveKnight } from './Game' | ||
| import ItemTypes from './ItemTypes' | ||
| import Overlay from './Overlay' | ||
|
|
||
| interface CollectedProps { | ||
| isOver: boolean | ||
| canDrop: boolean | ||
| connectDropTarget: ConnectDropTarget | ||
| } | ||
| export interface BoardSquareProps { | ||
| x: number | ||
| y: number | ||
| children: any | ||
| } | ||
|
|
||
| const squareTarget = { | ||
| canDrop(props: BoardSquareProps) { | ||
| return canMoveKnight(props.x, props.y) | ||
| }, | ||
|
|
||
| drop(props: BoardSquareProps) { | ||
| moveKnight(props.x, props.y) | ||
| }, | ||
| } | ||
|
|
||
| const collect: DropTargetCollector<CollectedProps> = ( | ||
| connect: DropTargetConnector, | ||
| monitor: DropTargetMonitor, | ||
| export const BoardSquare: React.FC<BoardSquareProps> = ( | ||
| props: BoardSquareProps, | ||
| ) => { | ||
| return { | ||
| connectDropTarget: connect.dropTarget(), | ||
| isOver: !!monitor.isOver(), | ||
| canDrop: !!monitor.canDrop(), | ||
| } | ||
| } | ||
|
|
||
| class BoardSquare extends React.Component<BoardSquareProps & CollectedProps> { | ||
| public render() { | ||
| const { x, y, connectDropTarget, isOver, canDrop, children } = this.props | ||
| const black = (x + y) % 2 === 1 | ||
| const ref = React.useRef(null) | ||
| const { isOver, canDrop } = useDropTarget(ref, ItemTypes.KNIGHT, { | ||
| canDrop: () => canMoveKnight(props.x, props.y), | ||
| drop: () => moveKnight(props.x, props.y), | ||
| collect: mon => ({ | ||
| isOver: !!mon.isOver(), | ||
| canDrop: !!mon.canDrop(), | ||
| }), | ||
| }) | ||
| const black = (props.x + props.y) % 2 === 1 | ||
|
|
||
| return connectDropTarget( | ||
| <div | ||
| style={{ | ||
| position: 'relative', | ||
| width: '100%', | ||
| height: '100%', | ||
| }} | ||
| > | ||
| <Square black={black}>{children}</Square> | ||
| {isOver && !canDrop && <Overlay color="red" />} | ||
| {!isOver && canDrop && <Overlay color="yellow" />} | ||
| {isOver && canDrop && <Overlay color="green" />} | ||
| </div>, | ||
| ) | ||
| } | ||
| return ( | ||
| <div | ||
| ref={ref} | ||
| style={{ | ||
| position: 'relative', | ||
| width: '100%', | ||
| height: '100%', | ||
| }} | ||
| > | ||
| <Square black={black}>{props.children}</Square> | ||
| {isOver && !canDrop && <Overlay color="red" />} | ||
| {!isOver && canDrop && <Overlay color="yellow" />} | ||
| {isOver && canDrop && <Overlay color="green" />} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default DropTarget(ItemTypes.KNIGHT, squareTarget, collect)(BoardSquare) |
Oops, something went wrong.