import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
mobiscroll.settings = {
theme: ' ',
themeVariant: ' ',
lang: ' '
};
const now = new Date();
class ListItem extends React.Component {
render() {
return <li data-id={this.props.item.id} data-icon={this.props.item.icon}>
<h4>{this.props.item.name}</h4>
<h4>{this.props.item.company}</h4>
<span className="md-time" style={{ position:'absolute', right:'1.25em', top:'50%', marginTop:'-9px' }}>
{this.props.item.formatedTime}
</span>
</li>;
}
}
class App extends React.Component {
render() {
const data = this.filter();
return (
<mobiscroll.Form className="md-schedule">
<div>
<mobiscroll.Segmented name="range" value="today" checked={this.state.range === 'today'} onChange={this.setRange}>
Today
</mobiscroll.Segmented>
<mobiscroll.Segmented name="range" value="week" checked={this.state.range === 'week'} onChange={this.setRange}>
This Week
</mobiscroll.Segmented>
<mobiscroll.Segmented name="range" value="custom" checked={this.state.range === 'custom'} onChange={this.setRange} onClick={this.show}>
Custom
</mobiscroll.Segmented>
<mobiscroll.Range
ref={this.setRef}
theme=" "
themeVariant=" "
lang=" "
value={this.state.customRange}
onSet={this.onSet}
type="hidden"
/>
<mobiscroll.Switch value={this.state.calls} onChange={this.setCalls}>
Show Calls
</mobiscroll.Switch>
<mobiscroll.Switch value={this.state.meetings} onChange={this.setMeetings}>
Show Meetings
</mobiscroll.Switch>
</div>
<mobiscroll.FormGroup>
<mobiscroll.FormGroupTitle>My Schedule</mobiscroll.FormGroupTitle>
<div className="mbsc-empty" style={{ display: !data.length ? 'block': 'none'}}>
<h3>Nothing scheduled</h3>
</div>
<mobiscroll.Listview
itemType={ListItem}
data={data}
theme=" "
themeVariant=" "
lang=" "
swipe={false}
enhance={true}
striped={true}
/>
</mobiscroll.FormGroup>
</mobiscroll.Form>
);
}
constructor(props) {
super(props);
const items = [{
id: 1,
name: "Owen Adams",
company: "Sunholdings Corp.",
icon: "phone",
type: "call"
}, {
id: 2,
name: "Kian Phillips",
company: "sol-flex Corp.",
icon: "location",
type: "meeting"
}, {
id: 3,
name: "Robert Bradley",
company: "Silvermedia",
icon: "location",
type: "meeting"
}, {
id: 4,
name: "Lydia Young",
company: "Zimplex",
icon: "phone",
type: "call"
}, {
id: 5,
name: "Hollie Hudson",
company: "Stanelectrics",
icon: "location",
type: "meeting"
}, {
id: 6,
name: "Lynn Elliott",
company: "Techhex",
icon: "location",
type: "meeting"
}, {
id: 7,
name: "Konner Murray",
company: "HACME Corp.",
icon: "phone",
type: "call"
}, {
id: 8,
name: "Morgan Downs",
company: "Itex Corp.",
icon: "location",
type: "meeting"
}, {
id: 9,
name: "Warren Boone",
company: "Sumline",
icon: "location",
type: "meeting"
}, {
id: 10,
name: "Charlie Jenkins",
company: "Quaddoex",
icon: "phone",
type: "call"
}, {
id: 11,
name: "Jillian Hobbs",
company: "Indizap",
icon: "location",
type: "meeting",
formatedTime: ''
}, {
id: 12,
name: "Donald Mccormick",
company: "Zootrax",
icon: "phone",
type: "call"
}, {
id: 13,
name: "Luke Harper",
company: "Unihouse",
icon: "phone",
type: "call"
}, {
id: 14,
name: "Leah West",
company: "Ap-care",
icon: "phone",
type: "call"
}, {
id: 15,
name: "Billie Rivas",
company: "Technoit Corp.",
icon: "location",
type: "meeting"
}, {
id: 16,
name: "Janae Diaz",
company: "Plex-ron Corp.",
icon: "location",
type: "meeting"
}, {
id: 17,
name: "Raquel Bentley",
company: "Silicon-lax",
icon: "phone",
type: "call"
}, {
id: 18,
name: "Harley Burke",
company: "Lamzone",
icon: "location",
type: "meeting"
}];
// Genarate random dates
for (let i = 0; i < items.length; i++) {
const item = items[i];
const tempTime = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + (i > 5 ? (i - 5) : 0),
now.getHours() + i * 2,
Math.round((now.getMinutes() + i * 5) / 5) * 5);
item.date = tempTime;
item.formatedTime = mobiscroll.util.datetime.formatDate('D d hh:ii', tempTime);
}
this.items = items;
this.state = {
calls: true,
meetings: true,
range: 'today',
customRange: [
new Date(now.getFullYear(), now.getMonth(), now.getDate()),
new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6)
]
};
}
setCalls = (event) => {
this.setState({
calls: event.target.checked
});
};
setMeetings = (event) => {
this.setState({
meetings: event.target.checked
});
};
setRange = (event) => {
this.setState({
range: event.target.value
});
};
onSet = (event, inst) => {
this.setState({
customRange: inst.getVal()
});
};
setRef = (comp) => {
this.range = comp;
};
show = () => {
this.range.instance.show();
};
filter () {
let start = now;
let end = now;
let range = [now, now];
let filteredData = [];
const state = this.state;
switch (state.range) {
case 'today':
start = new Date(now.setHours(0, 0, 0, 0));
end = new Date(now.setHours(23, 59, 59, 999));
break;
case 'week':
start = new Date(now.setHours(0, 0, 0, 0));
end = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + (7 - now.getDay()), 23, 59, 59, 999
);
break;
default:
range = state.customRange;
start = range[0];
end = range[1];
}
for (let i = 0; i < this.items.length; i++) {
let item = this.items[i];
if ((
(item.type == 'call' && state.calls) ||
(item.type == 'meeting' && state.meetings)
) && (item.date >= start) && (item.date <= end)) {
filteredData.push(item);
}
}
return filteredData;
}
}