text: import React, {Component} from 'react'
  import {PropTypes} from 'prop-types' 
  import moment from 'moment'
  //import 'moment/locale/zh-cn';
  import Scheduler, {SchedulerData, ViewTypes, CellUnits, DATE_FORMAT, DemoData} from '../src/index'
  import Nav from './Nav'
  import ViewSrcCode from './ViewSrcCode'
  import withDragDropContext from './withDnDContext'
  
  class InfiniteScroll2 extends Component{
      constructor(props){
          super(props);
  
          let schedulerData = new SchedulerData(new moment().format(DATE_FORMAT), ViewTypes.Custom, false, false, {
              headerEnabled: false,
              customCellWidth: 30,
              nonAgendaDayCellHeaderFormat: 'M/D|HH:mm',
              views: [
                  {viewName: 'Day', viewType: ViewTypes.Custom, showAgenda: false, isEventPerspective: false},
              ]
          }, {
              getCustomDateFunc: this.getCustomDate,
              isNonWorkingTimeFunc: this.isNonWorkingTime
          });
          schedulerData.localeMoment.locale('pt-br');
          schedulerData.setResources(DemoData.resources);
          schedulerData.setEvents(DemoData.events);
          this.state = {
              viewModel: schedulerData
          }
      }
  
      render(){
          const {viewModel} = this.state;
          return (
              <div>
                  <Nav />
                  <div>
                      <h3 style={{textAlign: 'center'}}>Infinite scroll 2<ViewSrcCode srcCodeUrl="https://github.com/StephenChou1017/react-big-scheduler/blob/master/example/InfiniteScroll2.js" /></h3>
                      <Scheduler schedulerData={viewModel}
                                 prevClick={this.prevClick}
                                 nextClick={this.nextClick}
                                 onSelectDate={this.onSelectDate}
                                 onViewChange={this.onViewChange}
                                 eventItemClick={this.eventClicked}
                                 viewEventClick={this.ops1}
                                 viewEventText="Ops 1"
                                 viewEvent2Text="Ops 2"
                                 viewEvent2Click={this.ops2}
                                 updateEventStart={this.updateEventStart}
                                 updateEventEnd={this.updateEventEnd}
                                 moveEvent={this.moveEvent}
                                 newEvent={this.newEvent}
                                 onScrollLeft={this.onScrollLeft}
                                 onScrollRight={this.onScrollRight}
                                 onScrollTop={this.onScrollTop}
                                 onScrollBottom={this.onScrollBottom}
                                 toggleExpandFunc={this.toggleExpandFunc}
                      />
                  </div>
              </div>
          )
      }
  
      prevClick = (schedulerData)=> {
          schedulerData.prev();
          schedulerData.setEvents(DemoData.events);
          this.setState({
              viewModel: schedulerData
          })
      }
  
      nextClick = (schedulerData)=> {
          schedulerData.next();
          schedulerData.setEvents(DemoData.events);
          this.setState({
              viewModel: schedulerData
          })
      }
  
      onViewChange = (schedulerData, view) => {
          schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
          schedulerData.setEvents(DemoData.events);
          this.setState({
              viewModel: schedulerData
          })
      }
  
      onSelectDate = (schedulerData, date) => {
          schedulerData.setDate(date);
          schedulerData.setEvents(DemoData.events);
          this.setState({
              viewModel: schedulerData
          })
      }
  
      eventClicked = (schedulerData, event) => {
          alert(`You just clicked an event: {id: ${event.id}, title: ${event.title}}`);
      };
  
      ops1 = (schedulerData, event) => {
          alert(`You just executed ops1 to event: {id: ${event.id}, title: ${event.title}}`);
      };
  
      ops2 = (schedulerData, event) => {
          alert(`You just executed ops2 to event: {id: ${event.id}, title: ${event.title}}`);
      };
  
      newEvent = (schedulerData, slotId, slotName, start, end, type, item) => {
          if(confirm(`Do you want to create a new event? {slotId: ${slotId}, slotName: ${slotName}, start: ${start}, end: ${end}, type: ${type}, item: ${item}}`)){
  
              let newFreshId = 0;
              schedulerData.events.forEach((item) => {
                  if(item.id >= newFreshId)
                      newFreshId = item.id + 1;
              });
  
              let newEvent = {
                  id: newFreshId,
                  title: 'New event you just created',
                  start: start,
                  end: end,
                  resourceId: slotId,
                  bgColor: 'purple'
              }
              schedulerData.addEvent(newEvent);
              this.setState({
                  viewModel: schedulerData
              })
          }
      }
  
      updateEventStart = (schedulerData, event, newStart) => {
          if(confirm(`Do you want to adjust the start of the event? {eventId: ${event.id}, eventTitle: ${event.title}, newStart: ${newStart}}`)) {
              schedulerData.updateEventStart(event, newStart);
          }
          this.setState({
              viewModel: schedulerData
          })
      }
  
      updateEventEnd = (schedulerData, event, newEnd) => {
          if(confirm(`Do you want to adjust the end of the event? {eventId: ${event.id}, eventTitle: ${event.title}, newEnd: ${newEnd}}`)) {
              schedulerData.updateEventEnd(event, newEnd);
          }
          this.setState({
              viewModel: schedulerData
          })
      }
  
      moveEvent = (schedulerData, event, slotId, slotName, start, end) => {
          if(confirm(`Do you want to move the event? {eventId: ${event.id}, eventTitle: ${event.title}, newSlotId: ${slotId}, newSlotName: ${slotName}, newStart: ${start}, newEnd: ${end}`)) {
              schedulerData.moveEvent(event, slotId, slotName, start, end);
              this.setState({
                  viewModel: schedulerData
              })
          }
      }
  
      onScrollRight = (schedulerData, schedulerContent, maxScrollLeft) => {
        schedulerData.next();
        schedulerData.setEvents(DemoData.events);
        this.setState({
            viewModel: schedulerData
        });
  
        schedulerContent.scrollLeft = maxScrollLeft - 10;
      }
  
      onScrollLeft = (schedulerData, schedulerContent, maxScrollLeft) => {
        schedulerData.prev();
        schedulerData.setEvents(DemoData.events);
        this.setState({
            viewModel: schedulerData
        });
  
        schedulerContent.scrollLeft = 10;
      }
  
      onScrollTop = (schedulerData, schedulerContent, maxScrollTop) => {
          console.log('onScrollTop');
      }
  
      onScrollBottom = (schedulerData, schedulerContent, maxScrollTop) => {
          console.log('onScrollBottom');
      }
  
      getCustomDate = (schedulerData, num, date = undefined) => {
          let selectDate = schedulerData.startDate;
          if(date != undefined)
              selectDate = date; 
          
          let startDate = selectDate,
              endDate = schedulerData.localeMoment(startDate).add(1, 'days').format(DATE_FORMAT),
              cellUnit = CellUnits.Hour;
          if(num === 1) {
              startDate = schedulerData.startDate;
              endDate = schedulerData.localeMoment(schedulerData.endDate).add(1, 'days').format(DATE_FORMAT);
          } else if(num === -1) {
              startDate = schedulerData.localeMoment(schedulerData.startDate).add(-1, 'days').format(DATE_FORMAT);
              endDate = schedulerData.endDate;
          }
  
          return {
              startDate,
              endDate,
              cellUnit
          };
      }
  
      isNonWorkingTime = (schedulerData, time) => {
          const { localeMoment } = schedulerData;
          if(schedulerData.cellUnit === CellUnits.Hour){
              let hour = localeMoment(time).hour();
              if(hour < 1)
                  return true;
          }
          else {
              let dayOfWeek = localeMoment(time).weekday();
              if (dayOfWeek === 0 || dayOfWeek === 6)
                  return true;
          }
      
          return false;
      }
  
      toggleExpandFunc = (schedulerData, slotId) => {
          schedulerData.toggleExpandStatus(slotId);
          this.setState({
              viewModel: schedulerData
          });
      }
  }
  
  export default withDragDropContext(InfiniteScroll2)
  