76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
import Group from './Group';
|
|
import Item from './Item';
|
|
|
|
export default class Kanban extends Component {
|
|
static Group = Group;
|
|
static Item = Item;
|
|
state = {
|
|
childOrder: React.Children.map(this.props.children, (d, i) => i)
|
|
}
|
|
showPlace = (offset, container, isAfter) => {
|
|
this.place.style.width = offset.width + 'px';
|
|
this.place.style.height = offset.height + 'px';
|
|
this.place.style.margin = '10px 10px 10px 10px';
|
|
this.place.style.display = 'inline-block';
|
|
if (isAfter) {
|
|
jQuery(container).after(this.place);
|
|
} else {
|
|
jQuery(container).before(this.place);
|
|
}
|
|
}
|
|
showItemPlace = (offset, container, isAfter) => {
|
|
this.itemPlace.style.width = offset.width + 'px';
|
|
this.itemPlace.style.height = offset.height + 'px';
|
|
this.itemPlace.style.margin = '0 5px 5px 5px';
|
|
this.itemPlace.style.display = 'inline-block';
|
|
if (isAfter) {
|
|
jQuery(container).after(this.itemPlace);
|
|
} else {
|
|
jQuery(container).before(this.itemPlace);
|
|
}
|
|
}
|
|
hidePlace = () => {
|
|
this.place.style.removeProperty('left');
|
|
this.place.style.removeProperty('top');
|
|
this.place.style.removeProperty('width');
|
|
this.place.style.removeProperty('height');
|
|
this.place.style.removeProperty('display');
|
|
this.itemPlace.style.removeProperty('left');
|
|
this.itemPlace.style.removeProperty('top');
|
|
this.itemPlace.style.removeProperty('width');
|
|
this.itemPlace.style.removeProperty('height');
|
|
this.itemPlace.style.removeProperty('display');
|
|
}
|
|
onChange = () => {
|
|
let groups = [];
|
|
jQuery(this.container).find('.kanban-group').each((index, ele) => {
|
|
const currentGroup = []
|
|
let group_id = jQuery(ele).attr("data-value");
|
|
jQuery(ele).find('.kanban-item').each((index, item) => {
|
|
currentGroup[index] = jQuery(item).attr('data-value');
|
|
let item_id = jQuery(item).attr("data-value");
|
|
})
|
|
groups[index] = {'groupid':group_id,items:currentGroup};
|
|
});
|
|
this.props.onChange && this.props.onChange({datas:JSON.stringify(groups)});
|
|
}
|
|
render() {
|
|
return (
|
|
<div ref={ref => this.scroller = ref} className="kanban-scroller" >
|
|
<div ref={ref => this.container = ref} className="kanban-container" style={{ minWidth: (React.Children.count(this.props.children) + 1) * 320 }}>
|
|
{
|
|
React.Children.map(this.props.children, child => {
|
|
return child.toString() === '[object Object]' ? React.Children.map(child, c => {
|
|
return React.cloneElement(c, { root: this, scroller: this.scroller })
|
|
}) : React.cloneElement(child, { root: this, scroller: this.scroller })
|
|
})
|
|
}
|
|
<div className="kanban-group-place" ref={ref => this.place = ref} />
|
|
<div className="kanban-group-item-place" ref={ref => this.itemPlace = ref} />
|
|
{this.props.addAction}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
} |