Getting started on draggable columns
This commit is contained in:
parent
ce273c08cd
commit
dbb7e5a644
@ -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);
|
||||
|
@ -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));
|
||||
|
@ -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",
|
||||
|
34
yarn.lock
34
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:
|
||||
|
Loading…
Reference in New Issue
Block a user