feat(react-grid): add components for DragDropContext plugin (#526)

DevExpress · Dec 8, 2017 · 49d9662 · 49d9662
1 parent cbdbd6e
commit 49d9662
Show file tree

Hide file tree

Showing 7 changed files with 287 additions and 40 deletions.
diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/drag-drop-context.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/drag-drop-context.jsx
@@ -13,3 +13,6 @@ export class DragDropContext extends React.PureComponent {
     );
   }
 }
+
+DragDropContext.Container = Container;
+DragDropContext.Column = Column;
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/drag-drop.jsx b/packages/dx-react-grid-bootstrap3/src/templates/drag-drop.jsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-export const Container = ({ clientOffset, children }) => (
+export const Container = ({
+  clientOffset, columns, columnTemplate,
+  style, className, children, ...restProps
+}) => (
   <ul
-    className="list-group"
+    className={classNames('list-group', className)}
     style={{
       cursor: 'move',
       position: 'fixed',
@@ -12,7 +16,9 @@ export const Container = ({ clientOffset, children }) => (
       top: 0,
       display: 'inline-block',
       transform: `translate(calc(${clientOffset.x}px - 50%), calc(${clientOffset.y}px - 50%))`,
+      ...style,
     }}
+    {...restProps}
   >
     {children}
   </ul>
@@ -23,20 +29,36 @@ Container.propTypes = {
     x: PropTypes.number.isRequired,
     y: PropTypes.number.isRequired,
   }).isRequired,
+  columns: PropTypes.array.isRequired,
+  columnTemplate: PropTypes.func.isRequired,
+  style: PropTypes.object,
+  className: PropTypes.string,
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
 };
 
 Container.defaultProps = {
+  style: {},
+  className: undefined,
   children: undefined,
 };
 
-export const Column = ({ column }) => (
-  <li className="list-group-item">{column.title}</li>
+export const Column = ({ column, className, ...restProps }) => (
+  <li
+    className={classNames('list-group-item', className)}
+    {...restProps}
+  >
+    {column.title}
+  </li>
 );
 
 Column.propTypes = {
   column: PropTypes.object.isRequired,
+  className: PropTypes.string,
+};
+
+Column.defaultProps = {
+  className: undefined,
 };
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/drag-drop.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/drag-drop.test.jsx
@@ -1,12 +1,16 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { Container } from './drag-drop';
+import { shallow } from 'enzyme';
+import { Container, Column } from './drag-drop';
 
 describe('Container', () => {
   it('should have correct styles', () => {
-    const tree = mount((
+    const tree = shallow((
       <Container
         clientOffset={{ x: 10, y: 20 }}
+        columns={[{
+          name: 'Test',
+        }]}
+        columnTemplate={() => <div />}
       />
     ));
 
@@ -16,4 +20,89 @@ describe('Container', () => {
         cursor: 'move',
       });
   });
+
+  it('should apply custom styles', () => {
+    const tree = shallow((
+      <Container
+        columns={[{
+          name: 'Test',
+        }]}
+        clientOffset={{ x: 10, y: 20 }}
+        columnTemplate={() => <div />}
+        style={{ color: 'red' }}
+      />
+    ));
+
+    expect(tree.find('ul').prop('style'))
+      .toMatchObject({
+        transform: 'translate(calc(10px - 50%), calc(20px - 50%))',
+        color: 'red',
+      });
+  });
+
+  it('should pass the className prop to the root element', () => {
+    const tree = shallow((
+      <Container
+        columns={[{
+          name: 'Test',
+        }]}
+        clientOffset={{ x: 10, y: 20 }}
+        columnTemplate={() => <div />}
+        className="custom-class"
+      />
+    ));
+
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+    expect(tree.is('.list-group'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <Container
+        columns={[{
+          name: 'Test',
+        }]}
+        clientOffset={{ x: 10, y: 20 }}
+        columnTemplate={() => <div />}
+        data={{ a: 1 }}
+      />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
+});
+
+describe('Column', () => {
+  it('should pass the className prop to the root element', () => {
+    const tree = shallow((
+      <Column
+        column={{
+          title: 'Test',
+        }}
+        className="custom-class"
+      />
+    ));
+
+    expect(tree.is('.custom-class'))
+      .toBeTruthy();
+    expect(tree.is('.list-group-item'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = shallow((
+      <Column
+        column={{
+          title: 'Test',
+        }}
+        data={{ a: 1 }}
+      />
+    ));
+
+    expect(tree.props().data)
+      .toMatchObject({ a: 1 });
+  });
 });
diff --git a/packages/dx-react-grid-material-ui/src/plugins/drag-drop-context.jsx b/packages/dx-react-grid-material-ui/src/plugins/drag-drop-context.jsx
@@ -13,3 +13,6 @@ export class DragDropContext extends React.PureComponent {
     );
   }
 }
+
+DragDropContext.Container = Container;
+DragDropContext.Column = Column;
diff --git a/packages/dx-react-grid-material-ui/src/templates/drag-drop.jsx b/packages/dx-react-grid-material-ui/src/templates/drag-drop.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { Paper, Typography } from 'material-ui';
 import { withStyles } from 'material-ui/styles';
 
@@ -22,13 +23,16 @@ const styles = theme => ({
 });
 
 const ContainerBase = ({
-  clientOffset, classes, children,
+  clientOffset, columns, columnTemplate, classes,
+  style, className, children, ...restProps
 }) => (
   <Paper
-    className={classes.container}
+    className={classNames(classes.container, className)}
     style={{
       transform: `translate(calc(${clientOffset.x}px - 50%), calc(${clientOffset.y}px - 50%))`,
+      ...style,
     }}
+    {...restProps}
   >
     {children}
   </Paper>
@@ -43,20 +47,32 @@ ContainerBase.propTypes = {
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
+  columns: PropTypes.array.isRequired,
+  columnTemplate: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
+  style: PropTypes.object,
+  className: PropTypes.string,
 };
 
 ContainerBase.defaultProps = {
+  style: {},
+  className: undefined,
   children: undefined,
 };
 
 export const Container = withStyles(styles, { name: 'DragDrop' })(ContainerBase);
 
-const ColumnBase = ({ column, classes }) => (
+const ColumnBase = ({
+  column,
+  classes,
+  className,
+  ...restProps
+}) => (
   <Typography
-    className={classes.column}
+    className={classNames(classes.column, className)}
     type="body1"
     component="p"
+    {...restProps}
   >
     {column.title}
   </Typography>
@@ -65,6 +81,11 @@ const ColumnBase = ({ column, classes }) => (
 ColumnBase.propTypes = {
   column: PropTypes.object.isRequired,
   classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+};
+
+ColumnBase.defaultProps = {
+  className: undefined,
 };
 
 export const Column = withStyles(styles, { name: 'DragDrop' })(ColumnBase);