Add react-bootstrap-table2-drag

gulpfile.babel.js

@@ -79,6 +79,7 @@ function umd(done) {
  () => gulp.src('./webpack/next.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
  () => gulp.src('./webpack/editor.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
  () => gulp.src('./webpack/filter.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+ () => gulp.src('./webpack/drag.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
  () => gulp.src('./webpack/overlay.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
  () => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
  () => gulp.src('./webpack/toolkit.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))

package.json

@@ -32,6 +32,11 @@
  "name": "Chun-MingChen",
  "email": "nick830314@gmail.com",
  "url": "https://github.com/Chun-MingChen"
+ },
+ {
+ "name": "J. Eric Hartzog",
+ "email": "eric@avario.io",
+ "url": "https://github.com/jehartzog"
  }
  ],
  "license": "MIT",

packages/react-bootstrap-table2-drag/README.md

@@ -0,0 +1,53 @@
+# react-bootstrap-table2-drag
+
+**[Live Demo for Drag](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Drag%20and%20Drop)**
+
+-----
+
+## Install
+
+```sh
+$ npm install react-bootstrap-table2-drag --save
+$ npm install react-dnd@2.6.0 react-dnd-html5-backend@2.6.0 -E --save
+```
+
+## How
+
+### Provide drag context to entire App
+
+You must set up the [DragDropContext](http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context) at your application root:
+
+```js
+import HTML5Backend from 'react-dnd-html5-backend'
+import { DragDropContext } from 'react-dnd'
+
+class YourApp {
+/* ... */
+}
+
+export default DragDropContext(HTML5Backend)(YourApp)
+```
+
+### Add drag to table
+
+```js
+import dragFactory, { dragFormatter } from 'react-bootstrap-table2-drag';
+
+const drag = dragFactory({
+ afterDragDrop: (fromIndex, toIndex) => console.log(`Move row index ${fromIndex} to index ${toIndex}`)
+});
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'drag',
+ text: 'Order rows',
+ isDummyField: true,
+ formatter: dragFormatter
+}];
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } drag={drag} />
+```
+
+

packages/react-bootstrap-table2-drag/index.js

@@ -0,0 +1,17 @@
+import DragSource from './src/components/drag-source';
+import DragTarget from './src/components/drag-target';
+import DragCell from './src/components/drag-cell';
+import dragFormatter from './src/components/drag-formatter';
+import createContext from './src/context';
+
+export default (options = {}) => ({
+ createContext,
+ options
+});
+
+export {
+ DragSource,
+ DragTarget,
+ DragCell,
+ dragFormatter
+};

packages/react-bootstrap-table2-drag/package.json

@@ -0,0 +1,53 @@
+{
+ "name": "react-bootstrap-table2-drag",
+ "version": "0.1.0",
+ "description": "it's a row drag and drop addon for react-bootstrap-table2",
+ "main": "./lib/index.js",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
+ },
+ "license": "MIT",
+ "keywords": [
+ "react",
+ "bootstrap",
+ "table",
+ "grid",
+ "react-bootstrap-table-addons",
+ "react-component"
+ ],
+ "files": [
+ "lib/",
+ "dist/"
+ ],
+ "tags": [
+ "react"
+ ],
+ "author": "J. Eric Hartzog",
+ "contributors": [
+ {
+ "name": "J. Eric Hartzog",
+ "email": "eric@avario.io",
+ "url": "https://github.com/jehartzog"
+ },
+ {
+ "name": "Allen Fang",
+ "email": "ayu780129@hotmail.com",
+ "url": "https://github.com/AllenFang"
+ },
+ {
+ "name": "Chun-MingChen",
+ "email": "nick830314@gmail.com",
+ "url": "https://github.com/Chun-MingChen"
+ }
+ ],
+ "dependencies": {
+ "react-dnd": "2.6.0",
+ "react-dnd-html5-backend": "2.6.0"
+ },
+ "peerDependencies": {
+ "prop-types": "^15.0.0",
+ "react": "^16.3.0",
+ "react-dom": "^16.3.0"
+ }
+}

packages/react-bootstrap-table2-drag/src/components/default-button.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <span className="glyphicon glyphicon-move" />;

packages/react-bootstrap-table2-drag/src/components/drag-cell.js

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import DragSource from './drag-source';
+import DragTarget from './drag-target';
+import DefaultButton from './default-button';
+
+const DragCell = ({ index, Button = DefaultButton }) => (
+ <DragTarget index={ index }>
+ <DragSource index={ index }><Button /></DragSource>
+ </DragTarget>
+);
+
+DragCell.propTypes = {
+ index: PropTypes.number.isRequired,
+ Button: PropTypes.func
+};
+
+DragCell.defaultProps = {
+ Button: DefaultButton
+};
+
+export default DragCell;

packages/react-bootstrap-table2-drag/src/components/drag-formatter.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import DragCell from './drag-cell';
+
+const dragFormatter = (cell, row, rowIndex) => (
+ <DragCell index={ rowIndex } />
+);
+
+export default dragFormatter;

packages/react-bootstrap-table2-drag/src/components/drag-source.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { DragSource } from 'react-dnd';
+
+import { DRAG_TYPES } from '../const';
+import { Consumer } from '../context';
+
+const source = {
+ beginDrag(props) {
+ return {
+ index: props.index,
+ onDragDrop: props.onDragDrop
+ };
+ }
+};
+
+const collectSource = (connect, monitor) => ({
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+});
+
+const Source = ({ connectDragSource, children }) => (
+ connectDragSource(
+ <div>
+ {children}
+ </div>
+ )
+);
+
+const WrappedSource = DragSource(DRAG_TYPES.ROW, source, collectSource)(Source);
+
+const ProvideContext = props => (
+ <Consumer>
+ { ({ onDragDrop }) => <WrappedSource onDragDrop={ onDragDrop } { ...props } /> }
+ </Consumer>
+);
+
+export default ProvideContext;

packages/react-bootstrap-table2-drag/src/components/drag-target.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DropTarget } from 'react-dnd';
+
+import { DRAG_TYPES } from '../const';
+
+const target = {
+ drop(props, monitor) {
+ const item = monitor.getItem();
+ item.onDragDrop(item.index, props.index);
+ }
+};
+
+const collectTarget = connect => ({
+ connectDropTarget: connect.dropTarget()
+});
+
+const Target = ({ connectDropTarget, children }) => (
+ connectDropTarget(
+ <div>{children}</div>
+ )
+);
+
+const WrappedTarget = DropTarget(DRAG_TYPES.ROW, target, collectTarget)(Target);
+
+export default WrappedTarget;

packages/react-bootstrap-table2-drag/src/const.js

@@ -0,0 +1,3 @@
+export const DRAG_TYPES = {
+ ROW: 'ROW'
+};

packages/react-bootstrap-table2-drag/src/context.js

@@ -0,0 +1,43 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DragContext = React.createContext();
+
+export default (
+ _,
+) => {
+ class DragProvider extends React.Component {
+ static propTypes = {
+ children: PropTypes.node.isRequired,
+ drag: PropTypes.shape({
+ options: PropTypes.shape({
+ afterDragDrop: PropTypes.func
+ })
+ })
+ }
+
+ handleDragDrop = (fromIndex, toIndex) => {
+ const { afterDragDrop } = this.props.drag.options;
+ if (_.isFunction(afterDragDrop)) afterDragDrop(fromIndex, toIndex);
+ }
+
+ render() {
+ return (
+ <DragContext.Provider
+ value={ {
+ onDragDrop: this.handleDragDrop
+ } }
+ >
+ {this.props.children}
+ </DragContext.Provider>
+ );
+ }
+ }
+
+ return {
+ Provider: DragProvider
+ };
+};
+
+export const Consumer = DragContext.Consumer;

packages/react-bootstrap-table2-example/.storybook/webpack.config.js

@@ -9,6 +9,7 @@ const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style
 const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
 const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
 const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
+const dndSourcePath = path.join(__dirname, '../../react-bootstrap-table2-drag/index.js');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -24,7 +25,8 @@ const aliasPath = {
  'react-bootstrap-table2-filter': filterSourcePath,
  'react-bootstrap-table2-overlay': overlaySourcePath,
  'react-bootstrap-table2-paginator': paginationSourcePath,
- 'react-bootstrap-table2-toolkit': toolkitSourcePath
+ 'react-bootstrap-table2-toolkit': toolkitSourcePath,
+ 'react-bootstrap-table2-drag': dndSourcePath
 };
 
 const loaders = [{