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

Persian Calendar Modal Component for React Native

import React, {useContext } from 'react';
import { View, Text, Icon } from 'native-base';
import { persianCalendarCss } from './main.css';
import { Touchable } from './Touchable';
import {CalendarContext} from './context';
import {CALENDARSHOW} from './helper';

const Footer = (props) => {

    const calendarContext = useContext(CalendarContext);

    const pressCloseModal = () => {
        calendarContext.hideModal(false);
    };

    const pressBack=()=>{
        props.setShowCalendar(CALENDARSHOW);
    };


    return (
        <View style={persianCalendarCss.footerJalali}>
         
            {props.showCalendar=== CALENDARSHOW?
                <View style={persianCalendarCss.footerRow}>
                    <Touchable style={persianCalendarCss.TouchCalYear}
                    onPress={props.pressSelectDate}>
                        <Icon name='md-checkmark' type='Ionicons'
                            style={persianCalendarCss.iconCheck} />
                    </Touchable>

                    <Touchable style={persianCalendarCss.TouchCalYear}
                            onPress={props.goToToday}>
                        <Text>
                          امروز
                        </Text>
                    </Touchable>

                    <Touchable style={persianCalendarCss.TouchCalYear}
                    onPress={pressCloseModal}>
                        <Icon name='md-close' type='Ionicons'
                            style={persianCalendarCss.iconClose} />
                    </Touchable>
                </View>
                :
                <View style={persianCalendarCss.viewBack}>
                    <Touchable
                        onPress={pressBack}
                        style={persianCalendarCss.touchBack}
                    >
                        <Icon name='ios-arrow-back' type='Ionicons' style={persianCalendarCss.iconBack}/>
                    </Touchable>

                </View>
            }

        </View>
    );
};

export default Footer;