import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
mobiscroll.settings = {
lang: ' ',
theme: ' ',
themeVariant: ' '
};
class ListItem extends React.Component {
render() {
return <li data-selected={this.props.item.selected}>{this.props.item.name}</li>;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
people: [
{ id: 0, name: 'Ashlee Conner', selected: true },
{ id: 1, name: 'Bianca Baker', selected: false },
{ id: 2, name: 'Christopher Tran', selected: false },
{ id: 3, name: 'Konner Stone', selected: false },
{ id: 4, name: 'Leon Medina', selected: false },
{ id: 5, name: 'Nora Leonard', selected: false },
{ id: 6, name: 'Octavio Daniels', selected: false },
{ id: 7, name: 'Russell Wang', selected: false },
{ id: 8, name: 'Teresa Livingston', selected: false },
{ id: 9, name: 'Zoe Gilbert', selected: false }
],
selectedUser: null,
selectedTab: 'profile',
data: []
}
this.getData();
}
render() {
let content;
const selectedUser = this.state.selectedUser;
switch (this.state.selectedTab) {
case 'profile':
if(selectedUser !== null) {
content = <div className="mbsc-form-grid">
<mobiscroll.Card>
<mobiscroll.CardContent>
<div className="mbsc-row">
<div className="mbsc-col-md-6 mbsc-col-12">
<mobiscroll.Input value={selectedUser.first} onChange={this.changeFirstName} inputStyle="box" labelStyle="floating">First name</mobiscroll.Input>
</div>
<div className="mbsc-col-md-6 mbsc-col-12">
<mobiscroll.Input value={selectedUser.last} onChange={this.changeLastName} inputStyle="box" labelStyle="floating">Last name</mobiscroll.Input>
</div>
</div>
<div className="mbsc-row">
<div className="mbsc-col-md-6 mbsc-col-12">
<mobiscroll.Input value={selectedUser.email} onChange={this.changeEmail} inputStyle="box" labelStyle="floating">Email</mobiscroll.Input>
</div>
</div>
<div className="mbsc-row">
<div className="mbsc-col-md-6 mbsc-col-12">
<mobiscroll.Input value={selectedUser.company} onChange={this.changeCompany} inputStyle="box" labelStyle="floating">Company</mobiscroll.Input>
</div>
<div className="mbsc-col-md-6 mbsc-col-12">
<mobiscroll.Dropdown value={selectedUser.role} onChange={this.changeRole} inputStyle="box" labelStyle="floating" label="Role">
<option value="ceo">CEO</option>
<option value="cto">CTO</option>
<option value="vpp">VP of Product</option>
<option value="vpm">VP of Marketing</option>
<option value="vpe">VP of Engineering</option>
</mobiscroll.Dropdown>
</div>
</div>
<div className="mbsc-row">
<div className="mbsc-col-md-6 mbsc-col-12">
<mobiscroll.Textarea value={selectedUser.notes} onChange={this.changeNotes} inputStyle="box" labelStyle="floating">Notes</mobiscroll.Textarea>
</div>
</div>
<div className="mbsc-row mbsc-justify-content-end">
<div className="mbsc-col-md-6 mbsc-col-12">
<div className="mbsc-pull-right mbsc-btn-group">
<mobiscroll.Button color="primary">Update</mobiscroll.Button>
<mobiscroll.Button color="secondary">Email</mobiscroll.Button>
<mobiscroll.Button color="secondary">Call</mobiscroll.Button>
<mobiscroll.Button color="secondary">Meet</mobiscroll.Button>
</div>
</div>
</div>
</mobiscroll.CardContent>
</mobiscroll.Card>
</div>
}
break;
case 'conv':
if(selectedUser !== null) {
content = <div className="mbsc-form-grid">
{selectedUser.conv.map((conv, key) => {
return (
<div key={key}>
<mobiscroll.Card collapsible open>
<mobiscroll.CardHeader>
<span className="mbsc-bold">{conv.title}</span>
<span className="mbsc-pull-right mbsc-card-subtitle">{this.formatDate(conv.date)}</span>
</mobiscroll.CardHeader>
<mobiscroll.CardContent>{conv.text}</mobiscroll.CardContent>
</mobiscroll.Card>
</div>
);
})}
</div>
}
break;
case 'tasks':
if(selectedUser !== null) {
const selectedUser = this.state.selectedUser;
content = <div className="mbsc-form-grid">
<mobiscroll.Card>
<mobiscroll.CardHeader>
<h2 className="mbsc-card-title">Qualification process with lead</h2>
</mobiscroll.CardHeader>
<mobiscroll.CardContent className="mbsc-no-padding">
<mobiscroll.Checkbox checked={selectedUser.tasks[0]} onChange={this.setTasks.bind(this, 0)}>Understanding business problem we can fix.</mobiscroll.Checkbox>
<mobiscroll.Checkbox checked={selectedUser.tasks[1]} onChange={this.setTasks.bind(this, 1)}>How are they solving the problem at the moment?</mobiscroll.Checkbox>
<mobiscroll.Checkbox checked={selectedUser.tasks[2]} onChange={this.setTasks.bind(this, 2)}>Do you have a budget allocated to solve this problem?</mobiscroll.Checkbox>
<mobiscroll.Checkbox checked={selectedUser.tasks[3]} onChange={this.setTasks.bind(this, 3)}>Understanding the budget signoff process.</mobiscroll.Checkbox>
<mobiscroll.Checkbox checked={selectedUser.tasks[4]} onChange={this.setTasks.bind(this, 4)}>What other solutions are you evaluating?</mobiscroll.Checkbox>
<mobiscroll.Checkbox checked={selectedUser.tasks[5]} onChange={this.setTasks.bind(this, 5)}>What does success look like?</mobiscroll.Checkbox>
<mobiscroll.Checkbox checked={selectedUser.tasks[6]} onChange={this.setTasks.bind(this, 6)}>What does solving the problem mean to you personally?</mobiscroll.Checkbox>
<mobiscroll.Checkbox checked={selectedUser.tasks[7]} onChange={this.setTasks.bind(this, 7)}>What's the deadline?</mobiscroll.Checkbox>
</mobiscroll.CardContent>
</mobiscroll.Card>
</div>
}
break;
}
return (
<mobiscroll.Form className="md-master-detail-demo">
<div className="mbsc-grid mbsc-no-padding">
<div className="mbsc-row">
<div className="mbsc-col-12 mbsc-col-md-2 mbsc-col-sm-3">
<mobiscroll.Listview select="single" itemType={ListItem} data={this.state.people} onItemTap={this.changeUser} />
</div>
<div className="mbsc-col-12 mbsc-col-md-10 mbsc-col-sm-9 md-col-border">
<mobiscroll.TabNav display="inline">
<mobiscroll.NavItem selected={this.state.selectedTab == 'profile'} onClick={this.selectTab.bind(null, 'profile')}>Profile</mobiscroll.NavItem>
<mobiscroll.NavItem selected={this.state.selectedTab == 'conv'} onClick={this.selectTab.bind(null, 'conv')}>Conversations</mobiscroll.NavItem>
<mobiscroll.NavItem selected={this.state.selectedTab == 'tasks'} onClick={this.selectTab.bind(null, 'tasks')}>Tasks</mobiscroll.NavItem>
</mobiscroll.TabNav>
{content}
</div>
</div>
</div>
</mobiscroll.Form>
);
}
getData() {
mobiscroll.util.getJson('https://trial.mobiscroll.com/master-detail/', (data) => {
this.setState({ data: data, selectedUser: data.length ? data[0] : null });
}, 'jsonp');
}
selectTab = (newTab) => {
this.setState({ selectedTab: newTab });
}
changeUser = (event, inst) => {
this.setState({ selectedUser: this.state.data[event.index]});
}
changeFirstName = (event) => {
const updatedUser = this.state.selectedUser;
updatedUser.first = event.target.value;
this.setState({ selectedUser: updatedUser });
}
changeLastName = (event) => {
const updatedUser = this.state.selectedUser;
updatedUser.last = event.target.value;
this.setState({ selectedUser: updatedUser });
}
changeEmail = (event) => {
const updatedUser = this.state.selectedUser;
updatedUser.email = event.target.value;
this.setState({ selectedUser: updatedUser });
}
changeCompany = (event) => {
const updatedUser = this.state.selectedUser;
updatedUser.company = event.target.value;
this.setState({ selectedUser: updatedUser });
}
changeRole = (event) => {
const updatedUser = this.state.selectedUser;
updatedUser.role = event.target.value;
this.setState({ selectedUser: updatedUser });
}
changeNotes = (event) => {
const updatedUser = this.state.selectedUser;
updatedUser.notes = event.target.value;
this.setState({ selectedUser: updatedUser });
}
formatDate(date) {
return mobiscroll.util.datetime.formatDate('D, d h:ii A', new Date(date));
}
setTasks = (index) => {
const updatedUser = this.state.selectedUser;
updatedUser.tasks[index] = event.target.checked;
this.setState({ selectedUser: updatedUser });
}
}
.demo-main-cont.demo-comp-listview { padding: 0; }
.demo-comp-listview .demo-note { margin: 10px; }
.md-master-detail-demo,
.md-master-detail-demo .mbsc-row {
height: 100%;
}
.md-master-detail-demo .mbsc-grid {
height: 100%;
}
.md-master-detail-demo .md-col-border {
overflow: auto;
height: 100%;
min-height: 800px;
border-left: 1px solid #ccc;
}
.md-master-detail-demo .mbsc-ms-c {
border-top: 0;
}
.md-master-tab,
.md-master-item {
display: none;
}
.md-master-tab-sel,
.md-master-item-sel {
display: block;
}