diff options
| -rw-r--r-- | app/assets/javascripts/components/features/ui/components/column.jsx | 30 | ||||
| -rw-r--r-- | app/assets/javascripts/components/features/ui/index.jsx | 4 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | yarn.lock | 34 |
4 files changed, 59 insertions, 11 deletions
diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx index c382e108d..b33383428 100644 --- a/app/assets/javascripts/components/features/ui/components/column.jsx +++ b/app/assets/javascripts/components/features/ui/components/column.jsx @@ -1,5 +1,6 @@ -import ColumnHeader from './column_header'; +import ColumnHeader from './column_header'; import PureRenderMixin from 'react-addons-pure-render-mixin'; +import { DragSource } from 'react-dnd'; const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b; @@ -36,9 +37,22 @@ const style = { flexDirection: 'column' }; +const columnSource = { + beginDrag (props) { + return {}; + } +}; + +const collect = (connect, monitor) => ({ + connectDragSource: connect.dragSource(), + isDragging: monitor.isDragging() +}); + const Column = React.createClass({ propTypes: { + connectDragSource: React.PropTypes.func.isRequired, + isDragging: React.PropTypes.bool.isRequired, heading: React.PropTypes.string, icon: React.PropTypes.string, children: React.PropTypes.node @@ -58,20 +72,22 @@ const Column = React.createClass({ }, render () { + const { heading, icon, children, connectDragSource, isDragging } = this.props; + let header = ''; - if (this.props.heading) { - header = <ColumnHeader icon={this.props.icon} type={this.props.heading} onClick={this.handleHeaderClick} />; + if (heading) { + header = <ColumnHeader icon={icon} type={heading} onClick={this.handleHeaderClick} />; } - return ( - <div className='column' style={style} onWheel={this.handleWheel}> + return connectDragSource( + <div className='column' style={{...style, opacity: isDragging ? '0.5' : '1' }} onWheel={this.handleWheel}> {header} - {this.props.children} + {children} </div> ); } }); -export default Column; +export default DragSource('column', columnSource, collect)(Column); diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx index da44434b1..de0c054ba 100644 --- a/app/assets/javascripts/components/features/ui/index.jsx +++ b/app/assets/javascripts/components/features/ui/index.jsx @@ -13,6 +13,8 @@ import { debounce } from 'react-decoration'; import { uploadCompose } from '../../actions/compose'; import { refreshTimeline } from '../../actions/timelines'; import { refreshNotifications } from '../../actions/notifications'; +import { DragDropContext } from 'react-dnd'; +import HTML5Backend from 'react-dnd-html5-backend'; const UI = React.createClass({ @@ -103,4 +105,4 @@ const UI = React.createClass({ }); -export default connect()(UI); +export default connect()(DragDropContext(HTML5Backend)(UI)); diff --git a/package.json b/package.json index def42f596..7cac10a8e 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,8 @@ "react-addons-test-utils": "^15.3.2", "react-autosuggest": "^7.0.1", "react-decoration": "^1.4.0", + "react-dnd": "^2.1.4", + "react-dnd-html5-backend": "^2.1.2", "react-dom": "^15.3.0", "react-imageloader": "^2.1.0", "react-immutable-proptypes": "^2.1.0", diff --git a/yarn.lock b/yarn.lock index 8038411fe..4b33b503f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -269,7 +269,7 @@ arrify@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" -asap@~2.0.3: +asap@^2.0.3, asap@~2.0.3: version "2.0.5" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f" @@ -2098,6 +2098,19 @@ diffie-hellman@^5.0.0: miller-rabin "^4.0.0" randombytes "^2.0.0" +disposables@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/disposables/-/disposables-1.0.1.tgz#064727a25b54f502bd82b89aa2dfb8df9f1b39e3" + +dnd-core@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-2.0.2.tgz#4528da4fbeb1abb6c308414b2d2e8389f3514646" + dependencies: + asap "^2.0.3" + invariant "^2.0.0" + lodash "^4.2.0" + redux "^3.2.0" + dom-helpers@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-2.4.0.tgz#9bb4b245f637367b1fa670274272aa28fe06c367" @@ -2938,7 +2951,7 @@ intl-relativeformat@^1.3.0: dependencies: intl-messageformat "1.3.0" -invariant@2.x.x, invariant@^2.0.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1: +invariant@2.x.x, invariant@^2.0.0, invariant@^2.1.0, invariant@^2.1.1, invariant@^2.2.0, invariant@^2.2.1: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -4581,6 +4594,21 @@ react-deep-force-update@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.0.1.tgz#f911b5be1d2a6fe387507dd6e9a767aa2924b4c7" +react-dnd-html5-backend@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-2.1.2.tgz#bcff5866629c335b310b1062fe6537af35073c66" + dependencies: + lodash "^4.2.0" + +react-dnd@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-2.1.4.tgz#dd2afeddddd5ff4507d795a5bd44361c84374c0f" + dependencies: + disposables "^1.0.1" + dnd-core "^2.0.1" + invariant "^2.1.0" + lodash "^4.2.0" + "react-dom@^0.14.0 || ^15.0.0", react-dom@^15.3.0: version "15.3.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.3.2.tgz#c46b0aa5380d7b838e7a59c4a7beff2ed315531f" @@ -4872,7 +4900,7 @@ redux-thunk@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.1.0.tgz#c724bfee75dbe352da2e3ba9bc14302badd89a98" -redux@^3.5.2, redux@^3.6.0: +redux@^3.2.0, redux@^3.5.2, redux@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/redux/-/redux-3.6.0.tgz#887c2b3d0b9bd86eca2be70571c27654c19e188d" dependencies: |