Skip to content

Commit ec096a5

Browse files
darthtrevinodarthtrevino
committed
docs: remove example cross-referencing
1 parent ba4ec05 commit ec096a5

File tree

15 files changed

+228
-20
lines changed

15 files changed

+228
-20
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,10 @@
105105
"testMatch": [
106106
"<rootDir>/packages/**/__tests__/**/?(*.)(spec|test).(t|j)s(x|)"
107107
],
108+
"testPathIgnorePatterns": [
109+
"/packages/documentation/static/",
110+
"/packages/documentation/public/"
111+
],
108112
"transform": {
109113
"^.+\\.(ts|tsx)$": "ts-jest"
110114
},

‎packages/examples-hooks/src/01-dustbin/copy-or-move/Box.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import ItemTypes from '../single-target/ItemTypes'
2+
import ItemTypes from './ItemTypes'
33

44
import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
55
const {

‎packages/examples-hooks/src/01-dustbin/copy-or-move/Dustbin.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
3-
import ItemTypes from '../single-target/ItemTypes'
3+
import ItemTypes from './ItemTypes'
44
const {
55
useDrop,
66
} = __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__

‎packages/examples-hooks/src/01-dustbin/copy-or-move/ItemTypes.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
BOX: 'box',
3+
}

‎packages/examples-hooks/src/01-dustbin/single-target-in-iframe/Box.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react'
2+
import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
3+
import ItemTypes from './ItemTypes'
4+
const {
5+
useDrag,
6+
} = __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__
7+
8+
const style: React.CSSProperties = {
9+
border: '1px dashed gray',
10+
backgroundColor: 'white',
11+
padding: '0.5rem 1rem',
12+
marginRight: '1.5rem',
13+
marginBottom: '1.5rem',
14+
cursor: 'move',
15+
float: 'left',
16+
}
17+
18+
interface BoxProps {
19+
name: string
20+
}
21+
22+
const Box: React.FC<BoxProps> = ({ name }) => {
23+
const [{ isDragging }, drag] = useDrag({
24+
item: { name, type: ItemTypes.BOX },
25+
end: (dropResult?: { name: string }) => {
26+
if (dropResult) {
27+
alert(`You dropped ${name} into ${dropResult.name}!`)
28+
}
29+
},
30+
collect: monitor => ({
31+
isDragging: monitor.isDragging(),
32+
}),
33+
})
34+
const opacity = isDragging ? 0.4 : 1
35+
36+
return (
37+
<div ref={drag} style={{ ...style, opacity }}>
38+
{name}
39+
</div>
40+
)
41+
}
42+
43+
export default Box

‎packages/examples-hooks/src/01-dustbin/single-target-in-iframe/Dustbin.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react'
2+
import { __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__ } from 'react-dnd'
3+
import ItemTypes from './ItemTypes'
4+
5+
const {
6+
useDrop,
7+
} = __EXPERIMENTAL_DND_HOOKS_THAT_MAY_CHANGE_AND_BREAK_MY_BUILD__
8+
9+
const style: React.CSSProperties = {
10+
height: '12rem',
11+
width: '12rem',
12+
marginRight: '1.5rem',
13+
marginBottom: '1.5rem',
14+
color: 'white',
15+
padding: '1rem',
16+
textAlign: 'center',
17+
fontSize: '1rem',
18+
lineHeight: 'normal',
19+
float: 'left',
20+
}
21+
22+
const Dustbin: React.FC = () => {
23+
const [{ canDrop, isOver }, drop] = useDrop({
24+
accept: ItemTypes.BOX,
25+
drop: () => ({ name: 'Dustbin' }),
26+
collect: monitor => ({
27+
isOver: monitor.isOver(),
28+
canDrop: monitor.canDrop(),
29+
}),
30+
})
31+
32+
const isActive = canDrop && isOver
33+
let backgroundColor = '#222'
34+
if (isActive) {
35+
backgroundColor = 'darkgreen'
36+
} else if (canDrop) {
37+
backgroundColor = 'darkkhaki'
38+
}
39+
40+
return (
41+
<div ref={drop} style={{ ...style, backgroundColor }}>
42+
{isActive ? 'Release to drop' : 'Drag a box here'}
43+
</div>
44+
)
45+
}
46+
47+
export default Dustbin

‎packages/examples-hooks/src/01-dustbin/single-target-in-iframe/ItemTypes.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
BOX: 'box',
3+
}

‎packages/examples-hooks/src/01-dustbin/single-target-in-iframe/index.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import {
66
DragDropContextProvider,
77
} from 'react-dnd'
88
import HTML5Backend from 'react-dnd-html5-backend'
9-
import Dustbin from '../single-target/Dustbin'
10-
import Box from '../single-target/Box'
11-
import { isDebugMode } from '../../isDebugMode'
9+
import Dustbin from './Dustbin'
10+
import Box from './Box'
1211

1312
const {
1413
default: Frame,
@@ -18,11 +17,7 @@ const {
1817
const FrameBindingContext: React.FC = ({ children }) => (
1918
<FrameContextConsumer>
2019
{({ window }: any) => (
21-
<DragDropContextProvider
22-
backend={HTML5Backend}
23-
context={window}
24-
debugMode={isDebugMode()}
25-
>
20+
<DragDropContextProvider backend={HTML5Backend} context={window}>
2621
{children}
2722
</DragDropContextProvider>
2823
)}

‎packages/examples/src/01-dustbin/copy-or-move/Box.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
DragSourceConnector,
66
DragSourceMonitor,
77
} from 'react-dnd'
8-
import ItemTypes from '../single-target/ItemTypes'
8+
import ItemTypes from './ItemTypes'
99

1010
const style: React.CSSProperties = {
1111
border: '1px dashed gray',

‎packages/examples/src/01-dustbin/copy-or-move/Dustbin.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import { DropTarget, ConnectDropTarget } from 'react-dnd'
3-
import ItemTypes from '../single-target/ItemTypes'
3+
import ItemTypes from './ItemTypes'
44

55
const style: React.CSSProperties = {
66
height: '12rem',

‎packages/examples/src/01-dustbin/copy-or-move/ItemTypes.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
BOX: 'box',
3+
}

‎packages/examples/src/01-dustbin/single-target-in-iframe/Box.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react'
2+
import {
3+
DragSource,
4+
DragSourceMonitor,
5+
ConnectDragSource,
6+
DragSourceConnector,
7+
} from 'react-dnd'
8+
import ItemTypes from './ItemTypes'
9+
10+
const style: React.CSSProperties = {
11+
border: '1px dashed gray',
12+
backgroundColor: 'white',
13+
padding: '0.5rem 1rem',
14+
marginRight: '1.5rem',
15+
marginBottom: '1.5rem',
16+
cursor: 'move',
17+
float: 'left',
18+
}
19+
20+
export interface BoxProps {
21+
name: string
22+
23+
// Collected Props
24+
isDragging: boolean
25+
connectDragSource: ConnectDragSource
26+
}
27+
const Box: React.FC<BoxProps> = ({ name, isDragging, connectDragSource }) => {
28+
const opacity = isDragging ? 0.4 : 1
29+
return (
30+
<div ref={connectDragSource} style={{ ...style, opacity }}>
31+
{name}
32+
</div>
33+
)
34+
}
35+
36+
export default DragSource(
37+
ItemTypes.BOX,
38+
{
39+
beginDrag: (props: BoxProps) => ({ name: props.name }),
40+
endDrag(props: BoxProps, monitor: DragSourceMonitor) {
41+
const item = monitor.getItem()
42+
const dropResult = monitor.getDropResult()
43+
44+
if (dropResult) {
45+
alert(`You dropped ${item.name} into ${dropResult.name}!`)
46+
}
47+
},
48+
},
49+
(connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
50+
connectDragSource: connect.dragSource(),
51+
isDragging: monitor.isDragging(),
52+
}),
53+
)(Box)

‎packages/examples/src/01-dustbin/single-target-in-iframe/Dustbin.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react'
2+
import {
3+
DropTarget,
4+
ConnectDropTarget,
5+
DropTargetMonitor,
6+
DropTargetConnector,
7+
} from 'react-dnd'
8+
import ItemTypes from './ItemTypes'
9+
10+
const style: React.CSSProperties = {
11+
height: '12rem',
12+
width: '12rem',
13+
marginRight: '1.5rem',
14+
marginBottom: '1.5rem',
15+
color: 'white',
16+
padding: '1rem',
17+
textAlign: 'center',
18+
fontSize: '1rem',
19+
lineHeight: 'normal',
20+
float: 'left',
21+
}
22+
23+
export interface DustbinProps {
24+
canDrop: boolean
25+
isOver: boolean
26+
connectDropTarget: ConnectDropTarget
27+
}
28+
29+
const Dustbin: React.FC<DustbinProps> = ({
30+
canDrop,
31+
isOver,
32+
connectDropTarget,
33+
}) => {
34+
const isActive = canDrop && isOver
35+
let backgroundColor = '#222'
36+
if (isActive) {
37+
backgroundColor = 'darkgreen'
38+
} else if (canDrop) {
39+
backgroundColor = 'darkkhaki'
40+
}
41+
42+
return (
43+
<div ref={connectDropTarget} style={{ ...style, backgroundColor }}>
44+
{isActive ? 'Release to drop' : 'Drag a box here'}
45+
</div>
46+
)
47+
}
48+
49+
export default DropTarget(
50+
ItemTypes.BOX,
51+
{
52+
drop: () => ({ name: 'Dustbin' }),
53+
},
54+
(connect: DropTargetConnector, monitor: DropTargetMonitor) => ({
55+
connectDropTarget: connect.dropTarget(),
56+
isOver: monitor.isOver(),
57+
canDrop: monitor.canDrop(),
58+
}),
59+
)(Dustbin)

‎packages/examples/src/01-dustbin/single-target-in-iframe/ItemTypes.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
BOX: 'box',
3+
}

‎packages/examples/src/01-dustbin/single-target-in-iframe/index.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ declare var require: any
33
import React from 'react'
44
import { DragDropContextProvider } from 'react-dnd'
55
import HTML5Backend from 'react-dnd-html5-backend'
6-
import Dustbin from '../single-target/Dustbin'
7-
import Box from '../single-target/Box'
8-
import { isDebugMode } from '../../isDebugMode'
6+
import Dustbin from './Dustbin'
7+
import Box from './Box'
98

109
const {
1110
default: Frame,
@@ -15,11 +14,7 @@ const {
1514
const FrameBindingContext: React.FC = ({ children }) => (
1615
<FrameContextConsumer>
1716
{({ window }: any) => (
18-
<DragDropContextProvider
19-
backend={HTML5Backend}
20-
context={window}
21-
debugMode={isDebugMode()}
22-
>
17+
<DragDropContextProvider backend={HTML5Backend} context={window}>
2318
{children}
2419
</DragDropContextProvider>
2520
)}

0 commit comments

Comments
 (0)