import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
let ids = 15;
class ListItem extends React.Component {
render() {
return <li data-id={this.props.item.id}>
{this.props.item.title}
<div className="md-wo-status">
{this.props.item.status}
</div>
</li>;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [{
id: 1,
title: "Work order #0001",
status: "Assigned"
}, {
id: 2,
title: "Work order #0002",
status: "Assigned"
}, {
id: 3,
title: "Work order #0003",
status: "Assigned"
}, {
id: 4,
title: "Work order #0004",
status: "Assigned"
}, {
id: 5,
title: "Work order #0005",
status: "Assigned"
}, {
id: 6,
title: "Work order #0006",
status: "Assigned"
}, {
id: 7,
title: 'Work order #0007',
status: 'Assigned'
}, {
id: 8,
title: 'Work order #0008',
status: 'Assigned'
}, {
id: 9,
title: 'Work order #0009',
status: 'Assigned'
}, {
id: 10,
title: 'Work order #0010',
status: 'Assigned'
}, {
id: 11,
title: 'Work order #0011',
status: 'Assigned'
}, {
id: 12,
title: 'Work order #0012',
status: 'Assigned'
}, {
id: 13,
title: 'Work order #0013',
status: 'Assigned'
}, {
id: 14,
title: 'Work order #0014',
status: 'Assigned'
}, {
id: 15,
title: 'Work order #0015',
status: 'Assigned'
}]
};
}
stages = {
left: [{
percent: 25,
color: 'crimson',
icon: 'checkmark',
text: 'Complete',
action: (event, inst) => {
event.target.firstElementChild.innerText = "Completed";
}
}, {
percent: 50,
color: 'green',
icon: 'plus',
text: 'Spawn',
action: (event) => {
this.addItem(event.index + 1, event.target.getAttribute('data-id'));
}
}],
right: [{
percent: -50,
color: 'red',
icon: 'remove',
text: 'Delete',
confirm: true,
action: (event, inst) => {
inst.remove(event.target, null, () => {
this.removeItem(event.index);
});
return false;
}
}, {
percent: -25,
color: 'olive',
icon: 'clock',
text: 'Pending',
action: (event, inst) => {
event.target.firstElementChild.innerText = "Pending";
}
}]
}
addItem(index, dataID) {
ids += 1;
const items = this.state.items.slice(0);
const newItem = {
id: ids,
title: 'Work order #000' + ids + ' created from WO #000' + dataID,
status: 'Assigned'
};
items.splice(index, 0, newItem);
this.setState({
items: items
});
}
removeItem(index) {
const items = this.state.items.slice(0);
items.splice(index, 1);
this.setState({
items: items
});
}
onItemAdd = (event, inst) => {
// Your custom event handler goes here
}
onItemRemove = (event, inst) => {
// Your custom event handler goes here
}
onInit = (event, inst) => {
// Your custom event handler goes here
}
onItemTap = (event, inst) => {
// Your custom event handler goes here
}
onNavEnd = (event, inst) => {
// Your custom event handler goes here
}
onNavStart = (event, inst) => {
// Your custom event handler goes here
}
onSlideEnd = (event, inst) => {
// Your custom event handler goes here
}
onSlideStart = (event, inst) => {
// Your custom event handler goes here
}
onSort = (event, inst) => {
// Your custom event handler goes here
}
onSortChange = (event, inst) => {
// Your custom event handler goes here
}
onSortEnd = (event, inst) => {
// Your custom event handler goes here
}
onSortStart = (event, inst) => {
// Your custom event handler goes here
}
onSortUpdate = (event, inst) => {
// Your custom event handler goes here
}
onStageChange = (event, inst) => {
// Your custom event handler goes here
}
onListEnd = (event, inst) => {
// Your custom event handler goes here
}
render() {
return (
<mobiscroll.Listview
itemType={ListItem}
data={this.state.items}
stages={this.stages}
theme=" "
themeVariant=" "
lang=" "
sortable={{handle:'left'}}
iconSlide={true}
striped={true}
onItemAdd={this.onItemAdd}
onItemRemove={this.onItemRemove}
onInit={this.onInit}
onItemTap={this.onItemTap}
onNavEnd={this.onNavEnd}
onNavStart={this.onNavStart}
onSlideEnd={this.onSlideEnd}
onSlideStart={this.onSlideStart}
onSort={this.onSort}
onSortChange={this.onSortChange}
onSortEnd={this.onSortEnd}
onSortStart={this.onSortStart}
onSortUpdate={this.onSortUpdate}
onStageChange={this.onStageChange}
onListEnd={this.onListEnd}
/>
);
}
}