react-native-persian-calendar-modal/src/header-controls.js

Persian Calendar Modal Component for React Native

/**
 * Persian Calendar Picker Component
 *
 * Copyright 2016 Reza (github.com/rghorbani)
 * Licensed under the terms of the MIT license. See LICENSE file in the project root for terms.
 */

'use strict';

const React = require('react');
const PropTypes = require('prop-types');
import {Text,View,Icon} from 'native-base';

import {Touchable} from '../main/Touchable';
import {CALENDARSHOW,SELECTMONTH,SELECTYEAR} from '../main/helper';

const Utils = require('./utils');
const Controls = require('./controls');

function HeaderControls(props) {
  const {
    styles,
    currentMonth,
    currentYear,
    onPressNext,
    onPressPrevious,
    months,
    previousTitle,
    nextTitle,
    textStyle,
  } = props;
  const MONTHS = months ? months : Utils.MONTHS; // English Month Array
  // getMonth() call below will return the month number, we will use it as the
  // index for month array in english
  const previous = previousTitle ? previousTitle : 'قبلی';
  const next = nextTitle ? nextTitle : 'بعدی';
  let mon=currentMonth;
  if(currentMonth>11){
    mon=currentMonth%12;
  }else if(currentMonth<0){
    mon =mon%12;
    mon=mon+12;
    if(mon==12){
      mon=0
    }
  }

  const month = MONTHS[mon];
  const year = currentYear;


  const changeCalendar=(type)=>{
    props.changeCalendar(type);
  };


  return (
    <View style={styles.headerWrapper}>
      <Controls
        label={next}
        onPressControl={onPressNext}
        styles={[styles.monthSelector, styles.next]}
        textStyles={textStyle}
        iconName={'ios-arrow-forward'}
        iconType={'Ionicons'}
      />
      <View 
       style={[styles.row]}
      >
        
        <Touchable style={[styles.row]}
        onPress={changeCalendar}
        value={SELECTMONTH}
        >
          <Icon name={'angle-down'} type={'FontAwesome'} style={styles.iconMonth}/>
          <Text style={[styles.monthLabel, textStyle]}>
            {month}
          </Text>
        </Touchable>


        <Touchable style={[styles.row]}
         onPress={changeCalendar}
         value={SELECTYEAR}>
        <Text style={[styles.monthLabel, textStyle]}>
            {year}
          </Text>
          <Icon name={'angle-down'} type={'FontAwesome'} style={styles.iconYear}/>
    
        </Touchable>
        
      
      </View>
      <Controls
        label={previous}
        onPressControl={onPressPrevious}
        styles={[styles.monthSelector, styles.prev]}
        textStyles={textStyle}
        iconName={'ios-arrow-back'}
        iconType={'Ionicons'}
      />
    </View>
  );
}

HeaderControls.propTypes = {
  currentMonth: PropTypes.number,
  currentYear: PropTypes.number,
  onPressNext: PropTypes.func,
  onPressPrevious: PropTypes.func,
};

module.exports = HeaderControls;