Merge pull request #178 from uptick/refactor/update-dependencies

refactor: updated dependencies and replaced the DragDropContext decorator.

Author: dreadera

.storybook/preview.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import "../dist/react-keyed-file-browser.css"
+
+export const decorators = [(Story) => <Story/>];

README.md

@@ -77,6 +77,19 @@ Optionally, include the built css with an import:
 
 ```
 
+Optionally, use your own React DND Provider:
+
+```javascript
+import { RawFileBrowser } from 'react-keyed-file-browser'
+
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+
+<DndProvider backend={HTML5Backend}>
+  <RawFileBrowser files={[]}/>
+</DndProvider>
+```
+
 or tag:
 
 ```html

index.js

@@ -1 +1 @@
-module.exports = require('./dist/react-keyed-file-browser');
+module.exports = require('./dist/react-keyed-file-browser')

package.json

@@ -33,10 +33,11 @@
   "homepage": "https://github.com/uptick/react-keyed-file-browser#readme",
   "dependencies": {
     "classnames": "^2.2.6",
-    "date-fns": "^2.12.0",
+    "date-fns": "^2.22.1",
+    "lodash.flow": "^3.5.0",
     "prop-types": "^15.7.2",
-    "react-dnd": "^8.0",
-    "react-dnd-html5-backend": "^8.0"
+    "react-dnd": "^14.0.2",
+    "react-dnd-html5-backend": "^14.0"
   },
   "peerDependencies": {
     "react": "0.14.x || 15.x || 16.x",
@@ -47,18 +48,15 @@
     "@babel/plugin-proposal-class-properties": "^7.3.0",
     "@babel/plugin-proposal-decorators": "^7.3.0",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
-    "@babel/preset-env": "^7.10.3",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-env": "^7.14.4",
+    "@babel/preset-react": "^7.13.13",
     "@sambego/storybook-state": "^2.0.1",
-    "@storybook/react": "^6.0.16",
-    "babel-cli": "^6.6.4",
+    "@storybook/react": "^6.2.9",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.5",
     "css-loader": "^3.4.2",
-    "dotenv": "^8.2.0",
     "eslint": "^6.8.0",
     "eslint-config-standard": "^14.1.1",
-    "eslint-config-standard-jsx": "^8.1.0",
     "eslint-config-standard-react": "^9.2.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.20.2",
@@ -72,9 +70,8 @@
     "react-dom": "^16.13.0",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
-    "typescript": "^3.8.3",
     "webpack": "^4.29.1",
-    "webpack-cli": "^3.2.3",
+    "webpack-cli": "^4.7.0",
     "webpack-node-externals": "^1.5.4"
   }
 }

src/browser.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { Component } from 'react'
 // drag and drop
-import HTML5Backend from 'react-dnd-html5-backend'
-import { DragDropContext } from 'react-dnd'
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
 
 // default components (most overridable)
 import { DefaultDetail } from './details'
@@ -854,8 +854,16 @@ class RawFileBrowser extends React.Component {
   }
 }
 
-@DragDropContext(HTML5Backend)
-class FileBrowser extends RawFileBrowser { }
+class FileBrowser extends Component {
+  render() {
+    return (
+      <DndProvider backend={HTML5Backend}>
+        <RawFileBrowser {...this.props} />
+      </DndProvider>
+    )
+  }
+}
 
 export default FileBrowser
+
 export { RawFileBrowser }

src/files/list-thumbnail.js

@@ -3,6 +3,7 @@ import ClassNames from 'classnames'
 import { DragSource, DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { formatDistanceToNow } from 'date-fns'
+import flow from 'lodash/flow'
 
 import BaseFile, { BaseFileConnectors } from './../base-file.js'
 import { fileSize } from './utils.js'
@@ -127,13 +128,10 @@ class RawListThumbnailFile extends BaseFile {
   }
 }
 
-@DragSource('file', BaseFileConnectors.dragSource, BaseFileConnectors.dragCollect)
-@DropTarget(
-  ['file', 'folder', NativeTypes.FILE],
-  BaseFileConnectors.targetSource,
-  BaseFileConnectors.targetCollect
-)
-class ListThumbnailFile extends RawListThumbnailFile {}
+const ListThumbnailFile = flow(
+  DragSource('file', BaseFileConnectors.dragSource, BaseFileConnectors.dragCollect), 
+  DropTarget(['file', 'folder', NativeTypes.FILE], BaseFileConnectors.targetSource, BaseFileConnectors.targetCollect)
+)(RawListThumbnailFile)
 
 export default ListThumbnailFile
 export { RawListThumbnailFile }

src/files/table.js

@@ -3,6 +3,7 @@ import ClassNames from 'classnames'
 import { DragSource, DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { formatDistanceToNow } from 'date-fns'
+import flow from 'lodash/flow'
 
 import BaseFile, { BaseFileConnectors } from './../base-file.js'
 import { fileSize } from './utils.js'
@@ -95,13 +96,10 @@ class RawTableFile extends BaseFile {
   }
 }
 
-@DragSource('file', BaseFileConnectors.dragSource, BaseFileConnectors.dragCollect)
-@DropTarget(
-  ['file', 'folder', NativeTypes.FILE],
-  BaseFileConnectors.targetSource,
-  BaseFileConnectors.targetCollect
-)
-class TableFile extends RawTableFile {}
+const TableFile = flow(
+  DragSource('file', BaseFileConnectors.dragSource, BaseFileConnectors.dragCollect), 
+  DropTarget(['file', 'folder', NativeTypes.FILE], BaseFileConnectors.targetSource, BaseFileConnectors.targetCollect)
+)(RawTableFile)
 
 export default TableFile
 export { RawTableFile }

src/folders/list-thumbnail.js

@@ -2,6 +2,7 @@ import React from 'react'
 import ClassNames from 'classnames'
 import { DragSource, DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
+import flow from 'lodash/flow'
 
 import BaseFolder, { BaseFolderConnectors } from './../base-folder.js'
 import { BaseFileConnectors } from './../base-file.js'
@@ -122,13 +123,10 @@ class RawListThumbnailFolder extends BaseFolder {
   }
 }
 
-@DragSource('folder', BaseFolderConnectors.dragSource, BaseFolderConnectors.dragCollect)
-@DropTarget(
-  ['file', 'folder', NativeTypes.FILE],
-  BaseFileConnectors.targetSource,
-  BaseFileConnectors.targetCollect
-)
-class ListThumbnailFolder extends RawListThumbnailFolder {}
+const ListThumbnailFolder = flow(
+  DragSource('folder', BaseFolderConnectors.dragSource, BaseFolderConnectors.dragCollect), 
+  DropTarget(['file', 'folder', NativeTypes.FILE], BaseFileConnectors.targetSource, BaseFileConnectors.targetCollect)
+)(RawListThumbnailFolder)
 
 export default ListThumbnailFolder
 export { RawListThumbnailFolder }

src/folders/table.js

@@ -2,6 +2,7 @@ import React from 'react'
 import ClassNames from 'classnames'
 import { DragSource, DropTarget } from 'react-dnd'
 import { NativeTypes } from 'react-dnd-html5-backend'
+import flow from 'lodash/flow'
 
 import BaseFolder, { BaseFolderConnectors } from './../base-folder.js'
 import { BaseFileConnectors } from './../base-file.js'
@@ -91,13 +92,10 @@ class RawTableFolder extends BaseFolder {
   }
 }
 
-@DragSource('folder', BaseFolderConnectors.dragSource, BaseFolderConnectors.dragCollect)
-@DropTarget(
-  ['file', 'folder', NativeTypes.FILE],
-  BaseFileConnectors.targetSource,
-  BaseFileConnectors.targetCollect
-)
-class TableFolder extends RawTableFolder {}
+const TableFolder = flow(
+  DragSource('folder', BaseFolderConnectors.dragSource, BaseFolderConnectors.dragCollect), 
+  DropTarget(['file', 'folder', NativeTypes.FILE], BaseFileConnectors.targetSource, BaseFileConnectors.targetCollect)
+)(RawTableFolder)
 
 export default TableFolder
 export { RawTableFolder }

src/headers/table.js

@@ -53,12 +53,11 @@ class RawTableHeader extends React.Component {
   }
 }
 
-@DropTarget(
-  ['file', 'folder', NativeTypes.FILE],
-  BaseFileConnectors.targetSource,
+const TableHeader = DropTarget(
+  ['file', 'folder', NativeTypes.FILE], 
+  BaseFileConnectors.targetSource, 
   BaseFileConnectors.targetCollect
-)
-class TableHeader extends RawTableHeader {}
+)(RawTableHeader)
 
 export default TableHeader
 export { RawTableHeader }

src/icons/index.js

@@ -1 +1 @@
-export FontAwesome from './FontAwesome'
+export { default as FontAwesome } from './FontAwesome'