import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';
class ListItem extends React.Component {
render() {
if (this.props.item.noBookmark) {
return <li className="md-no-bookmark">
<div className="md-nob-title">Traveling to the same place frequently?</div>
<div className="md-nob-txt">You can bookmark airports by tapping on the star to the left and they will show up here.</div>
<div className="md-nob-separator"></div>
<img className="md-nob-img" src="https://img.mobiscroll.com/demos/lv-bookmark.png"/>
</li>;
} else {
return <li data-role={this.props.item.header ? "list-divider" : ""} data-icon={this.props.item.header ? "" : "star"} className={this.props.item.class}>{this.props.item.text}<span className="md-iata">{this.props.item.short}</span></li>;
}
}
}
class ListviewDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
items:[{
id: 1,
header: true,
class: "headerA",
text: "A"
}, {
id: 2,
text: "Abilene, TEXAS",
short: "(ABI)"
}, {
id: 3,
text: "Agana / Tamuning, GUAM",
short: "(GUM)"
}, {
id: 4,
text: "Aguadilla, PUERTO RICO",
short: "(BQN)"
}, {
id: 5,
text: "Akron / Canton, OHIO",
short: "(CAK)"
},
{
id: 21,
header: true,
class: "headerB",
text: "B"
}, {
id: 22,
text: "Baltimore / Glen Burnie, MARYLAND",
short: "(BWI)"
}, {
id: 23,
text: "Bangor, MAINE",
short: "(BGR)"
}, {
id: 24,
text: "Bar Harbor, MAINE",
short: "(BHB)"
}, {
id: 25,
text: "Baton Rouge, LOUISIANA",
short: "(BTR)"
},
// Showing partial data. Download full source.
],
start: new Date(),
isFavorite: false
};
}
componentDidMount = () =>{
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount = () => {
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll = (event) => {
var state = this.state;
if(new Date() - state.start > 150 && !state.isFavorite) {
var currHeader,
el = event.target,
wTop = el.scrollTop,
listDeviders = document.querySelectorAll('li[data-role=list-divider]');
for (var i = listDeviders.length - 1; i >= 0; --i) {
if (window.pageYOffset > listDeviders[i].offsetTop) {
currHeader = listDeviders[i];
break;
}
}
this.setState({
firstletter: currHeader ? currHeader.textContent : '',
isScrolled: true
});
if (state.currSelected != state.firstletter) {
this.refs.menu.instance.navigate(document.querySelector('.md-item-' + state.firstletter));
}
this.setState({
currSelected: state.firstletter,
start: new Date(),
isScrolled: false
});
}
}
onItemTap = (event, inst) => {
var timer,
firstletter,
currSelected = "A",
start = new Date(),
isScrolled = false,
preventScroll = false,
isFavorite = false,
popup = document.querySelector('.md-popup'),
list = document.querySelector('.md-list'),
listDeviders = document.querySelectorAll('li[data-role=list-divider]');
function handleScroll() {
if (new Date() - start > 150 && !isFavorite && !preventScroll) {
firstletter = document.elementFromPoint(0, 100).textContent[0];
isScrolled = true;
if (currSelected != firstletter) {
this.refs.menu.instance.navigate(document.querySelector('.md-item-' + firstletter), true);
}
currSelected = firstletter;
start = new Date();
isScrolled = false;
}
preventScroll = false;
}
var i,
text = event.target.innerHTML,
listItems = list.querySelectorAll('.mbsc-lv-item:not(.star3)'),
favoriteItems = list.querySelectorAll('.star3'),
favoriteCont = document.querySelector('.md-no-bookmark');
preventScroll = true;
isFavorite = event.target.classList.contains('md-item-star');
for (i = 0; i < listItems.length; ++i) {
listItems[i].style.display = isFavorite ? 'none' : 'block';
}
for (i = 0; i < listDeviders.length; ++i) {
listDeviders[i].style.display = isFavorite ? 'none' : 'block';
}
favoriteCont.style.display = isFavorite && favoriteItems.length == 0 ? 'block' : 'none';
if (!isScrolled && !isFavorite) {
this.refs.list.instance.navigate(list.querySelector('.header' + text).nextElementSibling);
popup.classList.add('md-show-popup');
popup.innerHTML = text;
clearTimeout(timer);
timer = setTimeout(function () {
popup.classList.remove('md-show-popup');
}, 1500);
}
}
render() {
return (
<div className="md-navigate">
<div className="md-popup">
c</div>
<mobiscroll.Optionlist
ref="menu"
className="md-alfabet"
theme=" "
themeVariant=" "
type="tabs"
display="top"
select="single"
onItemTap={this.onItemTap}
>
<mobiscroll.OptionItem className="md-item-star"><span className="mbsc-ic mbsc-ic-star3"></span></mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-A" data-selected="true">A</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-B">B</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-C">C</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-D">D</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-E">E</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-F">F</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-G">G</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-H">H</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-I">I</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-J">J</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-K">K</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-L">L</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-M">M</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-N">N</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-O">O</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-P">P</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-R">R</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-S">S</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-T">T</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-V">V</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-W">W</mobiscroll.OptionItem>
<mobiscroll.OptionItem className="md-item-Y">Y</mobiscroll.OptionItem>
</mobiscroll.Optionlist>
<mobiscroll.Listview
ref="list"
className="md-list"
theme=" "
themeVariant=" "
lang=" "
itemType={ListItem}
data={this.state.items}
swipe={false}
enhance={true}
onItemTap={function (event, inst) {
var target = event.domEvent.target;
if (target.classList.contains('mbsc-ic')) {
event.target.classList.toggle('star3');
target.classList.toggle('mbsc-ic-star3');
target.classList.toggle('mbsc-ic-star');
mobiscroll.toast({
message: 'Favorites updated'
});
}
}}
/>
</div>
);
}
}