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
index 9866aae583..7344020e9e 100644
--- 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
index 93074e8792..76970abf8b 100644
--- 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
+}) => (
(
top: 0,
display: 'inline-block',
transform: `translate(calc(${clientOffset.x}px - 50%), calc(${clientOffset.y}px - 50%))`,
+ ...style,
}}
+ {...restProps}
>
{children}
@@ -23,6 +29,10 @@ 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),
@@ -30,13 +40,25 @@ Container.propTypes = {
};
Container.defaultProps = {
+ style: {},
+ className: undefined,
children: undefined,
};
-export const Column = ({ column }) => (
- {column.title}
+export const Column = ({ column, className, ...restProps }) => (
+
+ {column.title}
+
);
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
index 8b1ea2807d..76c7eb53ce 100644
--- 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((
}
/>
));
@@ -16,4 +20,89 @@ describe('Container', () => {
cursor: 'move',
});
});
+
+ it('should apply custom styles', () => {
+ const tree = shallow((
+ }
+ 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((
+ }
+ 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((
+ }
+ 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((
+
+ ));
+
+ 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((
+
+ ));
+
+ 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
index 9866aae583..7344020e9e 100644
--- 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
index 3b33ef0803..5268ee8e00 100644
--- 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
}) => (
{children}
@@ -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
+}) => (
{column.title}
@@ -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);
diff --git a/packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx b/packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx
index eb18debc7e..df62d9695f 100644
--- a/packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/drag-drop.test.jsx
@@ -1,36 +1,136 @@
import React from 'react';
import { Paper } from 'material-ui';
-import { createMount, getClasses } from 'material-ui/test-utils';
-import { setupConsole } from '@devexpress/dx-testing';
-import { Container } from './drag-drop';
-
-describe('Container', () => {
- let mount;
- let classes;
- let resetConsole;
-
- beforeAll(() => {
- resetConsole = setupConsole({ ignore: ['SheetsRegistry'] });
- mount = createMount();
- classes = getClasses((
-
- ));
- });
- afterAll(() => {
- mount.cleanUp();
- resetConsole();
+import { createShallow, getClasses } from 'material-ui/test-utils';
+import { Container, Column } from './drag-drop';
+
+describe('DragDrop', () => {
+ describe('Container', () => {
+ let shallow;
+ let classes;
+ beforeAll(() => {
+ shallow = createShallow({ dive: true });
+ classes = getClasses((
+ }
+ />
+ ));
+ });
+
+ it('should have correct styles', () => {
+ const tree = shallow((
+ }
+ />
+ ));
+
+ expect(tree.find(Paper).hasClass(classes.container))
+ .toBeTruthy();
+ });
+
+ it('should apply custom styles', () => {
+ const tree = shallow((
+ }
+ style={{ color: 'red' }}
+ />
+ ));
+
+ expect(tree.find(Paper).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((
+ }
+ className="custom-class"
+ />
+ ));
+
+ expect(tree.is(`.${classes.container}`))
+ .toBeTruthy();
+ expect(tree.is('.custom-class'))
+ .toBeTruthy();
+ });
+
+ it('should pass rest props to the root element', () => {
+ const tree = shallow((
+ }
+ data={{ a: 1 }}
+ />
+ ));
+
+ expect(tree.props().data)
+ .toMatchObject({ a: 1 });
+ });
});
- it('should have correct styles', () => {
- const tree = mount((
-
- ));
+ describe('Column', () => {
+ let shallow;
+ let classes;
+ beforeAll(() => {
+ shallow = createShallow({ dive: true });
+ classes = getClasses((
+
+ ));
+ });
+
+ it('should pass the className prop to the root element', () => {
+ const tree = shallow((
+
+ ));
+
+ expect(tree.is(`.${classes.column}`))
+ .toBeTruthy();
+ expect(tree.is('.custom-class'))
+ .toBeTruthy();
+ });
+
+ it('should pass rest props to the root element', () => {
+ const tree = shallow((
+
+ ));
- expect(tree.find(Paper).hasClass(classes.container))
- .toBeTruthy();
+ expect(tree.props().data)
+ .toMatchObject({ a: 1 });
+ });
});
});
diff --git a/packages/dx-react-grid/docs/reference/drag-drop-context.md b/packages/dx-react-grid/docs/reference/drag-drop-context.md
index f3981d242e..f239ceef73 100644
--- a/packages/dx-react-grid/docs/reference/drag-drop-context.md
+++ b/packages/dx-react-grid/docs/reference/drag-drop-context.md
@@ -46,6 +46,15 @@ Field | Type | Description
------|------|------------
column | [Column](#column) | Specifies a column being dragged.
+## Plugin Components
+
+Name | Properties | Description
+-----|------------|------------
+DragDropContext.Container | [ContainerProps](#containerprops) | A component that renders a container for columns being dragged.
+DragDropContext.Column | [ColumnProps](#columnprops) | A component that renders a column being dragged.
+
+If you specify additional properties, they are added to the component's root element.
+
## Plugin Developer Reference
### Imports