<commit_before>var React = require('react-native');
var moment = require('moment');
var Dimensions = require('Dimensions');

var {
  AppRegistry,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View
} = React;

const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  MAX_COLUMNS = 7,
  MAX_ROWS = 7

class CalendarSwiper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      calendarDates: [moment().add(5, 'month').format(), moment().add(6, 'month').format(),moment().add(7, 'month').format(), moment().add(8, 'month').format()],
      selectedDate: null,
    }
  }

  renderMonthView(date) {
  
    var dayStart = moment(date).startOf('month').format(),
      daysInMonth = moment(dayStart).daysInMonth(),
      offset = moment(dayStart).get('day'),
      preFiller = 0,
      postFiller = 7 - (moment(dayStart).endOf('month').get('day') + 1),
      currentDay = 0,
      weekRows = [];

    for (var i = 0; i < MAX_COLUMNS; i++) {
      var days = [];
      for (var j = 0; j < MAX_ROWS; j++) {  
        if (preFiller >= offset) {
          if(currentDay < daysInMonth) {
            days.push((
              <TouchableOpacity
                onPress={this._selectDate.bind(this, moment(dayStart).set('date', currentDay + 1))}>
                <Text style={styles.dayListDay}>{currentDay+1}</Text>
              </TouchableOpacity>
            ));
            currentDay++; 
          } 
        } else {
            days.push(<TouchableWithoutFeedback><Text style={styles.dayListDay}></Text></TouchableWithoutFeedback>);
          }
        preFiller++;  
      }

      if(weekRows.length < Math.ceil((daysInMonth + offset) / 7) && days.length < 7) {
        for (var x = 0; x < postFiller; x++) {
          days.push(<TouchableWithoutFeedback><Text style={styles.dayListDay}></Text></TouchableWithoutFeedback>);
        }        
        weekRows.push(<View style={[styles.dayList, styles.lastRow]}>{days}</View>);
      } else {
        weekRows.push(<View style={styles.dayList}>{days}</View>);
      }
    }
    
    return (
      <View ref="InnerScrollView" style={styles.calendarContainer} ref={moment(dayStart).format('YYYY-MM')}>

        <View style={styles.calendarControls}>
          <TouchableOpacity style={styles.controlButton}>
            <Text>Prev</Text>
          </TouchableOpacity>

          <Text style={styles.title}>
            {moment(date).format('MMMM YYYY')}
          </Text>
          
          <TouchableOpacity style={styles.controls}>
            <Text>Next</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.calendarHeading}>
          {DAYS.map((day) => {
            return (<Text style={styles.dayListDay}>{day}</Text>) })}
        </View>

        {weekRows}
      </View>
    );
  }

  _selectDate(date) {
    console.log(date.format());
  }

  render() {
    return (
      <ScrollView
        horizontal={true}
        bounces={false}
        pagingEnabled={true}
        scrollEventThrottle={300}
        onMomentumScrollEnd={() => { console.log(this.refs)}}>
        {this.state.calendarDates.map((date) => { return this.renderMonthView(date) })}
      </ScrollView>
    )
  }
};
  var styles = StyleSheet.create({
    calendarContainer: {
      marginTop: 20,
      width: Dimensions.get('window').width
    },
    title: {
      textAlign: 'center',
      flex: 2,
    },
    calendarControls: {
      flexDirection: 'row',
      alignItems: 'center',
      margin: 10
    },
    controlButton: {
      flex: 0.1
    },
    title: {
      flex: 0.8,
      textAlign: 'center'
    },
    calendarHeading: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      borderTopWidth: 2,
      borderBottomWidth: 2
    },
    dayList: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center'
    },
    lastRow: {
      backgroundColor: 'red'
    },
    dayListDay: {
      padding: 5,
      flex: 1,
      textAlign: 'center',
      fontSize: 20,
      justifyContent: 'flex-start'
    },
    currentDay: {
      color: '#FF3333'
    }
  });

AppRegistry.registerComponent('CalendarSwiper', () => CalendarSwiper);<commit_msg>commit solid state. lunch time<commit_after>var React = require('react-native');
var moment = require('moment');
var Dimensions = require('Dimensions');

var {
  AppRegistry,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View
} = React;

const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  MAX_COLUMNS = 7,
  MAX_ROWS = 7

class CalendarSwiper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      calendarDates: [moment().subtract(3, 'months').format()],
      selectedDate: null,
    }
  }

  renderMonthView(date) {
  
    var dayStart = moment(date).startOf('month').format(),
      daysInMonth = moment(dayStart).daysInMonth(),
      offset = moment(dayStart).get('day'),
      preFiller = 0,
      currentDay = 0,
      weekRows = [];

    for (var i = 0; i < MAX_COLUMNS; i++) {
      var days = [];
      for (var j = 0; j < MAX_ROWS; j++) {  
        if (preFiller < offset) {
          days.push(<TouchableWithoutFeedback><Text style={styles.dayListDay}></Text></TouchableWithoutFeedback>);
        } else {
          if(currentDay < daysInMonth) {
            days.push((
              <TouchableOpacity
                onPress={this._selectDate.bind(this, moment(dayStart).set('date', currentDay + 1))}>
                <Text style={styles.dayListDay}>{currentDay+1}</Text>
              </TouchableOpacity>
            ));
            currentDay++; 
          } 
        } 
        preFiller++;  
      } // row

      if(days.length > 0 && days.length < 7) {
        for (var x = days.length; x < 7; x++) {
          days.push(<TouchableWithoutFeedback><Text style={styles.dayListDay}></Text></TouchableWithoutFeedback>);
        }        
        weekRows.push(<View style={styles.dayList}>{days}</View>);
      } else {
        weekRows.push(<View style={styles.dayList}>{days}</View>);
      }
    } // column
    
    return (
      <View ref="InnerScrollView" style={styles.calendarContainer}>

        <View style={styles.calendarControls}>
          <TouchableOpacity style={styles.controlButton}>
            <Text>Prev</Text>
          </TouchableOpacity>

          <Text style={styles.title}>
            {moment(date).format('MMMM YYYY')}
          </Text>
          
          <TouchableOpacity style={styles.controls}>
            <Text>Next</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.calendarHeading}>
          {DAYS.map((day) => {
            return (<Text style={styles.dayListDay}>{day}</Text>) })}
        </View>

        {weekRows}
      </View>
    );
  }

  _selectDate(date) {
    console.log(date.format());
  }
  _prependMonth(){
    var calendarDates = this.state.calendarDates;
    calendarDates.unshift(moment(calendarDates[0]).subtract(1, 'month').format());
    this.setState({calendarDates: calendarDates});
  }
  _appendMonth(){
    var calendarDates = this.state.calendarDates;
    calendarDates.push(moment(calendarDates[calendarDates.length - 1]).add(1, 'month').format());
    this.setState({calendarDates: calendarDates});
  }

  render() {
    return (
      <View>
        <ScrollView
          ref='calendar'
          horizontal={true}
          bounces={false}
          pagingEnabled={true}
          scrollEventThrottle={300}
          showsHorizontalScrollIndicator={false}
          onMomentumScrollEnd={() => { console.dir(this.refs.calendar)}}>
          {this.state.calendarDates.map((date) => { return this.renderMonthView(date) })}
        </ScrollView>
        <TouchableOpacity onPress={this._prependMonth.bind(this)}>
          <Text>Prepend</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._appendMonth.bind(this)}>
          <Text>Append</Text>
        </TouchableOpacity>
      </View>
    )
  }
};
  var styles = StyleSheet.create({
    calendarContainer: {
      marginTop: 20,
      width: Dimensions.get('window').width,
    },
    title: {
      textAlign: 'center',
      flex: 2,
    },
    calendarControls: {
      flexDirection: 'row',
      alignItems: 'center',
      margin: 10
    },
    controlButton: {
      flex: 0.1
    },
    title: {
      flex: 0.8,
      textAlign: 'center'
    },
    calendarHeading: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      borderTopWidth: 2,
      borderBottomWidth: 2
    },
    dayList: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center'
    },
    dayListDay: {
      padding: 5,
      flex: 1,
      textAlign: 'center',
      fontSize: 20,
      justifyContent: 'flex-start'
    },
    currentDay: {
      color: '#FF3333'
    }
  });

AppRegistry.registerComponent('CalendarSwiper', () => CalendarSwiper);
{'fraction_non_alphanumeric': 0.1550206174077789, 'fraction_numerical': 0.009027081243731194, 'mean_word_length': 2.300478116954763, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 95, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '595589', 'n_tokens_mistral': 2906, 'n_tokens_neox': 2788, 'n_words': 480}