diff --git a/packages/dnd-core/src/DragDropManagerImpl.ts b/packages/dnd-core/src/DragDropManagerImpl.ts index 6b6d769d2c..4f1d7343f2 100644 --- a/packages/dnd-core/src/DragDropManagerImpl.ts +++ b/packages/dnd-core/src/DragDropManagerImpl.ts @@ -14,6 +14,21 @@ import { } from './interfaces' import { State } from './reducers' +function makeStoreInstance(debugMode: boolean) { + // TODO: if we ever make a react-native version of this, + // we'll need to consider how to pull off dev-tooling + const reduxDevTools = window && (window as any).__REDUX_DEVTOOLS_EXTENSION__ + return createStore( + reducer, + debugMode && + reduxDevTools && + reduxDevTools({ + name: 'dnd-core', + instanceId: 'dnd-core', + }), + ) +} + export default class DragDropManagerImpl implements DragDropManager { private store: Store @@ -24,8 +39,9 @@ export default class DragDropManagerImpl constructor( createBackend: BackendFactory, private context: Context = {} as Context, + debugMode = false, ) { - const store = createStore(reducer) + const store = makeStoreInstance(debugMode) this.store = store this.monitor = new DragDropMonitorImpl( store, diff --git a/packages/dnd-core/src/factories.ts b/packages/dnd-core/src/factories.ts index a974e3ad69..aeb69281d5 100644 --- a/packages/dnd-core/src/factories.ts +++ b/packages/dnd-core/src/factories.ts @@ -4,6 +4,7 @@ import { DragDropManager, BackendFactory } from './interfaces' export function createDragDropManager( backend: BackendFactory, context: C, + debugMode?: boolean, ): DragDropManager { - return new DragDropManagerImpl(backend, context) + return new DragDropManagerImpl(backend, context, debugMode) } diff --git a/packages/documentation-examples/package.json b/packages/documentation-examples/package.json index e2c823a016..b865628fd9 100644 --- a/packages/documentation-examples/package.json +++ b/packages/documentation-examples/package.json @@ -18,11 +18,13 @@ }, "dependencies": { "@types/faker": "^4.1.4", + "@types/query-string": "^6.1.1", "@types/styled-components": "^4.0.3", "dnd-core": "^6.0.0", "faker": "^4.1.0", "immutability-helper": "^2.8.1", "lodash": "^4.17.11", + "query-string": "^6.2.0", "react-dnd": "^6.0.0", "react-dnd-html5-backend": "^6.0.0", "styled-components": "^4.0.3" diff --git a/packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx b/packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx index a757008971..02631f2384 100644 --- a/packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx +++ b/packages/documentation-examples/src/01 Dustbin/Single Target in iframe/index.tsx @@ -3,6 +3,8 @@ import { DragDropContextProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import Dustbin from '../Single Target/Dustbin' import Box from '../Single Target/Box' +import { isDebugMode } from '../../isDebugMode' + const { default: Frame, FrameContextConsumer, @@ -13,7 +15,11 @@ class FrameBindingContext extends React.Component { return ( {({ window }: any) => ( - + {this.props.children} )} diff --git a/packages/documentation-examples/src/index.ts b/packages/documentation-examples/src/index.ts index b88518be04..a971830518 100644 --- a/packages/documentation-examples/src/index.ts +++ b/packages/documentation-examples/src/index.ts @@ -16,6 +16,7 @@ import customizeDropEffects from './05 Customize/Drop Effects' import customizeHandlesAndPreviews from './05 Customize/Handles and Previews' import otherNativeFiles from './06 Other/Native Files' +export * from './isDebugMode' export const componentIndex = { chessboard, 'dustbin-single-target': dustbinSingleTarget, diff --git a/packages/documentation-examples/src/isDebugMode.ts b/packages/documentation-examples/src/isDebugMode.ts new file mode 100644 index 0000000000..122984b7e8 --- /dev/null +++ b/packages/documentation-examples/src/isDebugMode.ts @@ -0,0 +1,6 @@ +import { parse } from 'query-string' + +export function isDebugMode() { + const queryObject = parse(window.location.search) + return queryObject.debugMode !== undefined +} diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 95aaf0b388..770da3e4b8 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -4,6 +4,7 @@ "version": "6.0.0", "private": true, "dependencies": { + "@types/query-string": "^6.1.1", "@types/react": "^16.4.18", "@types/react-dom": "^16.0.9", "@types/react-helmet": "^5.0.7", @@ -26,6 +27,7 @@ "gatsby-transformer-remark": "^2.1.11", "gatsby-transformer-sharp": "^2.1.8", "prismjs": "^1.15.0", + "query-string": "^6.2.0", "react": "^16.6.1", "react-dnd": "^6.0.0", "react-dnd-documentation-examples": "^6.0.0", diff --git a/packages/documentation/src/components/header.tsx b/packages/documentation/src/components/header.tsx index 8e9920a26e..86b18eafef 100644 --- a/packages/documentation/src/components/header.tsx +++ b/packages/documentation/src/components/header.tsx @@ -2,8 +2,19 @@ import * as React from 'react' import styled from 'styled-components' import NavBar from './navbar' -const Header: React.SFC = () => ( +export interface HeaderProps { + debugMode?: boolean +} + +const DebugModeFlag = () => ( + + Debug Mode + +) + +const Header: React.SFC = ({ debugMode }) => ( + {debugMode ? : null} ) diff --git a/packages/documentation/src/components/layout.tsx b/packages/documentation/src/components/layout.tsx index f4011feab0..809c149fc8 100644 --- a/packages/documentation/src/components/layout.tsx +++ b/packages/documentation/src/components/layout.tsx @@ -3,6 +3,8 @@ import * as React from 'react' import Helmet from 'react-helmet' import styled from 'styled-components' import HTML5Backend from 'react-dnd-html5-backend' +import { isDebugMode } from 'react-dnd-documentation-examples' + import { DragDropContextProvider } from 'react-dnd' import PageBody from './pagebody' import Sidebar from './sidebar' @@ -26,6 +28,7 @@ const Layout: React.SFC = props => { .startsWith('/examples') const sidebarItems: PageGroup[] = isExampleUrl ? ExamplePages : APIPages const hideSidebar = props.hideSidebar || sitepath === '/about' + const debugMode = isDebugMode() return ( <> = props => { link={[{ rel: 'shortcut icon', type: 'image/png', href: `${favicon}` }]} > + -
- +
+ {hideSidebar ? null : ( diff --git a/packages/documentation/src/pages/404.tsx b/packages/documentation/src/pages/404.tsx index ca50e001b3..609b3ac64c 100644 --- a/packages/documentation/src/pages/404.tsx +++ b/packages/documentation/src/pages/404.tsx @@ -1,14 +1,13 @@ import * as React from 'react' import Layout from '../components/layout' -import { DragDropContextProvider } from 'react-dnd' -import Backend from 'react-dnd-html5-backend' +/** + * TODO: Add some fancy drag/droppable stuff here + */ const NotFoundPage: React.SFC = () => ( - -

NOT FOUND

-

You just hit a route that doesn't exist... the sadness.

- +

NOT FOUND

+

You just hit a route that doesn't exist... the sadness.

 ) diff --git a/packages/react-dnd/src/DragDropContext.tsx b/packages/react-dnd/src/DragDropContext.tsx index 9ccd0d1662..0bfe257f10 100644 --- a/packages/react-dnd/src/DragDropContext.tsx +++ b/packages/react-dnd/src/DragDropContext.tsx @@ -32,15 +32,17 @@ export const { Consumer, Provider } = React.createContext>( export function createChildContext( backend: BackendFactory, context?: BackendContext, + debugMode?: boolean, ) { return { - dragDropManager: createDragDropManager(backend, context), + dragDropManager: createDragDropManager(backend, context, debugMode), } } export interface DragDropContextProviderProps { backend: BackendFactory context?: BackendContext + debugMode?: boolean } /** @@ -48,8 +50,8 @@ export interface DragDropContextProviderProps { */ export const DragDropContextProvider: React.SFC< DragDropContextProviderProps -> = ({ backend, context, children }) => { - const contextValue = createChildContext(backend, context) +> = ({ backend, context, debugMode, children }) => { + const contextValue = createChildContext(backend, context, debugMode) return {children} } @@ -62,9 +64,14 @@ export const DragDropContextProvider: React.SFC< export function DragDropContext( backendFactory: BackendFactory, backendContext?: any, + debugMode?: boolean, ) { checkDecoratorArguments('DragDropContext', 'backend', backendFactory) - const childContext = createChildContext(backendFactory, backendContext) + const childContext = createChildContext( + backendFactory, + backendContext, + debugMode, + ) return function decorateContext< TargetClass extends @@ -89,9 +96,7 @@ export function DragDropContext( return this.ref.current } - public getManager() { - return childContext.dragDropManager - } + public getManager = () => childContext.dragDropManager public render() { return ( diff --git a/yarn.lock b/yarn.lock index 78efa633fd..0a7171a6e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1893,6 +1893,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c" integrity sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ== +"@types/query-string@^6.1.1": + version "6.1.1" + resolved "https://registry.yarnpkg.com/@types/query-string/-/query-string-6.1.1.tgz#1cfd9209c8dbd91b940192c8a2b7005d2a743e6f" + integrity sha512-wRUeF7KN2yxCMw4VoXzPh3GWStbGaiyVjyX22fG7mpSzt6etLvsA2S0g0IuGeXGwVNIlztzVmGP6AxZMmYTQhw== + "@types/reach__router@^1.0.0": version "1.2.2" resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.2.2.tgz#1bd96626c2866a61937758ef6be2f06309124805" @@ -13362,6 +13367,14 @@ query-string@^5.0.1: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +query-string@^6.2.0: + version "6.2.0" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.2.0.tgz#468edeb542b7e0538f9f9b1aeb26f034f19c86e1" + integrity sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA== + dependencies: + decode-uri-component "^0.2.0" + strict-uri-encode "^2.0.0" + querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -15152,6 +15165,11 @@ strict-uri-encode@^1.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= +strict-uri-encode@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" + integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY= + string-argv@^0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.0.2.tgz#dac30408690c21f3c3630a3ff3a05877bdcbd736"