import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
class ActionItem extends React.Component {
render() {
let children = null;
if (this.props.item.children && this.props.item.children.length > 0) {
children = <ul>
{this.props.item.children.map(function(child) {
return <ActionItem key={child.id} item={child} />;
})}
</ul>;
}
return <li data-id={this.props.item.id} data-icon={this.props.item.icon}> {this.props.item.title}
{children}
</li>;
}
}
class TodoItem extends React.Component {
render() {
return <li data-id={this.props.item.id}>
<input type="checkbox" data-role="none" defaultChecked={this.props.item.checked} />
{this.props.item.todo}
</li>;
}
}
class App extends React.Component {
render() {
return (
<div>
<mobiscroll.Card
theme=" "
themeVariant=" "
lang=" "
>
<mobiscroll.Listview
itemType={ActionItem}
data={this.state.actions}
theme=" "
themeVariant=" "
lang=" "
swipe={false}
enhance={true}
/>
</mobiscroll.Card>
<mobiscroll.Card
theme=" "
themeVariant=" "
lang=" "
>
<mobiscroll.Listview
itemType={TodoItem}
data={this.state.todos}
theme=" "
themeVariant=" "
lang=" "
stages={this.todoStages}
/>
</mobiscroll.Card>
</div>
);
}
constructor(props) {
super(props);
this.state = {
actions: [{
id: 1,
title: 'Edit profile',
icon: 'line-user',
children: [{
id: 2,
title: 'Change password',
icon: 'line-key'
}, {
id: 3,
title: 'Change personal information',
icon: 'line-user'
}]
}, {
id: 4,
title: 'Settings',
icon: 'line-settings',
children: [{
id: 5,
title: 'Sound settings',
icon: 'line-megaphone'
}, {
id: 6,
title: 'Notification settings',
icon: 'line-params'
}, {
id: 7,
title: 'Change theme',
icon: 'line-t-shirt'
}]
}, {
id: 8,
title: 'Rate',
icon: 'line-heart',
children: [{
id: 9,
title: 'Rate this application',
icon: 'line-star'
}]
}, {
id: 10,
title: 'Tell a friend',
icon: 'line-bubble',
children: [{
id: 11,
title: 'Share it in Email',
icon: 'line-mail'
}, {
id: 12,
title: 'Share it on Social Media',
icon: 'line-world'
}]
}, {
id: 13,
title: 'Term of service',
icon: 'line-note',
children: [{
id: 14,
title: 'This application content is under WTFPL license.'
}]
}, {
id: 15,
title: 'Contact us',
icon: 'line-mail',
children: [{
id: 16,
title: 'Let us know if we can help',
icon: 'line-mail'
}]
}, {
id: 17,
title: 'About us',
icon: 'line-world',
children: [{
id: 18,
title: 'We are the Mobiscroll team.'
}]
}],
todos: [{
id: 19,
todo: 'Do the laundry',
checked: true
}, {
id: 20,
todo: 'Check out new Mobiscroll features',
checked: false
}, {
id: 21,
todo: 'Don\'t forget Mom\'s birthday',
checked: true
}, {
id: 22,
todo: 'Update my app with the latest Mobiscroll',
checked: false
}, {
id: 23,
todo: 'Buy new shoes',
checked: false
}, {
id: 24,
todo: 'Need ketchup for pizza',
checked: false
}],
nextId: 25
};
}
todoStages = {
left: [{
key: 'stage1',
icon: 'plus',
color: '#31c6e7',
text: 'Add',
action: function (event, inst) {
this.state.todos.splice(event.index + 1, 0, {
id: this.state.nextId++,
todo: 'New Todo',
checked: false
});
this.setState({
todos: this.state.todos
});
}.bind(this)
}],
right: [{
key: 'stage2',
color: '#009688',
text: 'Remove',
icon: 'remove',
action: function (event, inst) {
this.state.todos.splice(event.index, 1);
this.setState({
todos: this.state.todos
});
return false;
}.bind(this)
}]
};
}