react-native-persian-calendar-modal/main/PersianCalendar.js

Persian Calendar Modal Component for React Native

import React, { useState, useEffect,useRef,useContext} from 'react';
import { Dimensions } from 'react-native';
import { View,Text } from 'native-base';
import PersianCalendarPicker from '../src';
import {persianCalendarCss} from './main.css';
var moment = require('moment-jalaali');
import { gregorianToJalaliDay, gregorianToJalaliMonth,numMonthToNameMonth } from './helper';
import Svg, { Line } from 'react-native-svg';
import ChangeInitial from './ChangeInitial';
import Footer from './Footer';
import {CALENDARSHOW} from './helper';
import {CalendarContext} from './context';



const PersianCalendar = () => {



  const calendarRef = useRef(null);
  const calendarContext = useContext(CalendarContext);

  const [showCalendar, setShowCalendar] = useState(CALENDARSHOW);  //switch between calendar and years

  let tempCurrentDay,tempCurrentMonth,tempD,tempYear,hasInitialFormat=false;
  if (calendarContext.value && calendarContext.format) {
      tempInitialDate=new moment(calendarContext.value,calendarContext.format);
    hasInitialFormat=true;

    //
    tempCurrentDay = gregorianToJalaliDay(moment(calendarContext.value).format('dddd'));
    tempCurrentMonth = numMonthToNameMonth(moment(calendarContext.value, calendarContext.format).
      jMonth() + 1);

    tempD = moment(calendarContext.value, calendarContext.format).jDate();
    tempYear= moment(calendarContext.value, calendarContext.format).jYear();
  }

  let initial = hasInitialFormat===true ? tempInitialDate :new moment();
  const [initailDate, setInitialDate] = useState(initial);

  let currentDayJalali = tempCurrentDay ? tempCurrentDay: gregorianToJalaliDay(moment().format('dddd'));
  let currentMonthJalali = tempCurrentMonth ? tempCurrentMonth : gregorianToJalaliMonth(moment().format('jMMMM'));
  let currentD = tempD ?tempD:`jD`;
  let currentYear=tempYear?tempYear:`jYYYY`;

  let currentDay;
    if(calendarContext.format){
      currentDay=moment().format(calendarContext.format);
    }else currentDay= moment().format(`${currentDayJalali} ${currentD} ${currentMonthJalali} ${currentYear}`);

  const [date, setDate] = useState(currentDay);


  useEffect(()=>{
    if(hasInitialFormat===true){ //if send context.valuse set selectedDay
     calendarRef.current.handleOnPressDay(currentD);
    }
  },[]);


  const onDateChange = (selectDate) => {
    let jalialiDate = moment(selectDate).format("DD/MM/YYYY");
    let jDay = gregorianToJalaliDay(moment(selectDate).format('dddd'));
    let jMonth = gregorianToJalaliMonth(moment(selectDate).format('jMMMM'));
    // jalialiDate = moment(jalialiDate, 'DD/MM/YYYY').format(`${jDay} jD ${jMonth} jYYYY`);

    if(calendarContext.format){
        jalialiDate=moment(jalialiDate,'DD/MM/YYYY').format(calendarContext.format);

    }else {
        jalialiDate = moment(jalialiDate, 'DD/MM/YYYY').format(`${jDay} jD ${jMonth} jYYYY`);
      // jalialiDate=moment(jalialiDate,'DD/MM/YYYY').format('jYYYY/jMM/jDD');
    }


    setDate(jalialiDate);

  };

  let width = Dimensions.get('window').width;
  let calWidth = width - 50;


  const goToToday=()=>{
    onDateChange(moment());
    setInitialDate(moment());
    calendarRef.current.goToToday();
  };

  const pressSelectDate=()=>{
    calendarContext.hideModal(false);
    calendarContext.setCalDate(date);
  };

  const changeCalendar=(type)=>{
    setShowCalendar(type);
  };

  return (
    <View style={persianCalendarCss.containerJalali}>

      {showCalendar === CALENDARSHOW ?
        <View style={persianCalendarCss.containerTitle}>
          <View style={persianCalendarCss.selectedDate}>

              <Text style={persianCalendarCss.textDarkBlue}>{date}</Text>


          </View>

          <Svg width="350" height="2">
            <Line strokeDasharray="5, 10" x1="10" y1="0" x2="300" y2="0" stroke="gray" strokeWidth="1" />
          </Svg>
        </View>
        : false
      }


      <View style={persianCalendarCss.viewMainpersian}>
        {showCalendar === CALENDARSHOW ?
        <View>
           <PersianCalendarPicker
            onDateChange={onDateChange}
            isRTL={true}
            width={calWidth}
            initialDate={initailDate}
            ref={calendarRef}
            changeCalendar={changeCalendar}
            allowRangeSelection={false}
            {...calendarContext.config}
          />
          </View>
          :
          <View style={persianCalendarCss.viewYear}>
            <ChangeInitial
              setInitialDate={setInitialDate}
              type={showCalendar}
              changeCalendar={changeCalendar}
              initialDate={initailDate}
            />
          </View>

        }
      </View>



        <View style={persianCalendarCss.containerFooter}>
          <Svg width="350" height="2">
            <Line strokeDasharray="5, 10" x1="10" y1="0" x2="300" y2="0" stroke="gray" strokeWidth="1" />
          </Svg>

          <Footer
            showCalendar={showCalendar}
            goToToday={goToToday}
            pressSelectDate={pressSelectDate}
            setShowCalendar={setShowCalendar}
          />
        </View>

    </View>
  )
};

export default PersianCalendar;