From 49d9662ac3146c79094588704044e9d4ebbcd898 Mon Sep 17 00:00:00 2001 From: SergeyAlexeev Date: Fri, 8 Dec 2017 13:56:12 +0300 Subject: [PATCH] feat(react-grid): add components for DragDropContext plugin (#526) --- .../src/plugins/drag-drop-context.jsx | 3 + .../src/templates/drag-drop.jsx | 30 +++- .../src/templates/drag-drop.test.jsx | 95 ++++++++++- .../src/plugins/drag-drop-context.jsx | 3 + .../src/templates/drag-drop.jsx | 29 +++- .../src/templates/drag-drop.test.jsx | 158 ++++++++++++++---- .../docs/reference/drag-drop-context.md | 9 + 7 files changed, 287 insertions(+), 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 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 +}) => ( @@ -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