@tchesa/react-native-modern-datepicker
Version:
A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale)
130 lines • 6.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import PropTypes from 'prop-types';
import { View, TouchableOpacity, Text, Image, StyleSheet, Animated, I18nManager } from 'react-native';
import { useCalendar } from '../DatePicker';
const Header = ({ changeMonth }) => {
const { options, state, utils, disableDateChange, minimumDate, maximumDate, isGregorian, mode, } = useCalendar();
const [mainState, setMainState] = state;
const style = styles(options);
const [disableChange, setDisableChange] = useState(false);
const [{ lastDate, shownAnimation, hiddenAnimation }, changeMonthAnimation,] = utils.useMonthAnimation(mainState.activeDate, options.headerAnimationDistance, () => setDisableChange(false));
const prevDisable = disableDateChange ||
Boolean(minimumDate && utils.checkArrowMonthDisabled(mainState.activeDate, true));
const nextDisable = disableDateChange ||
Boolean(maximumDate && utils.checkArrowMonthDisabled(mainState.activeDate, false));
const onChangeMonth = (type) => {
if (disableChange)
return;
setDisableChange(true);
changeMonthAnimation(type);
const modificationNumber = type === 'NEXT' ? 1 : -1;
const unit = isGregorian ? 'month' : 'jMonth';
const newDate = utils.getDate(mainState.activeDate).add(modificationNumber, unit);
setMainState({
type: 'set',
activeDate: utils.getFormated(newDate),
});
changeMonth(type);
};
return (_jsxs(View, { style: [style.container, I18nManager.isRTL && style.reverseContainer], children: [_jsx(TouchableOpacity, { activeOpacity: 0.7, onPress: () => !nextDisable && onChangeMonth('NEXT'), style: style.arrowWrapper, children: _jsx(Image, { source: require('../../assets/arrow.png'), style: [style.arrow, nextDisable && style.disableArrow] }) }), _jsxs(View, { style: style.monthYearContainer, children: [_jsxs(Animated.View, { style: [
style.monthYear,
shownAnimation,
style.activeMonthYear,
I18nManager.isRTL && style.reverseMonthYear,
], children: [_jsxs(TouchableOpacity, { activeOpacity: 0.7, style: [style.centerWrapper, style.monthYearWrapper, utils.flexDirection], onPress: () => !disableDateChange &&
setMainState({
type: 'toggleMonth',
}), children: [_jsx(Text, { style: [style.headerText, style.monthText], children: utils.getMonthYearText(mainState.activeDate).split(' ')[0] }), _jsx(Text, { style: [style.headerText, style.monthText], children: utils.getMonthYearText(mainState.activeDate).split(' ')[1] })] }), mode === 'datepicker' && (_jsx(TouchableOpacity, { activeOpacity: 0.7, style: [
style.centerWrapper,
{ marginRight: I18nManager.isRTL ? 0 : 5, marginLeft: I18nManager.isRTL ? 5 : 0 },
], onPress: () => setMainState({
type: 'toggleTime',
}), children: _jsx(Text, { style: style.headerText, children: utils.toPersianNumber(utils.getTime(mainState.activeDate)) }) }))] }), _jsxs(Animated.View, { style: [
style.monthYear,
hiddenAnimation,
utils.flexDirection,
I18nManager.isRTL && style.reverseMonthYear,
], children: [_jsx(Text, { style: style.headerText, children: utils.getMonthYearText(lastDate).split(' ')[0] }), _jsx(Text, { style: style.headerText, children: utils.getMonthYearText(lastDate).split(' ')[1] }), mode === 'datepicker' && (_jsx(Text, { style: style.headerText, children: utils.toPersianNumber(utils.getTime(mainState.activeDate)) }))] })] }), _jsx(TouchableOpacity, { activeOpacity: 0.7, onPress: () => !prevDisable && onChangeMonth('PREVIOUS'), style: style.arrowWrapper, children: _jsx(Image, { source: require('../../assets/arrow.png'), style: [style.arrow, style.leftArrow, prevDisable && style.disableArrow] }) })] }));
};
const styles = (theme) => StyleSheet.create({
container: {
alignItems: 'center',
flexDirection: 'row-reverse',
},
reverseContainer: {
flexDirection: 'row',
},
arrowWrapper: {
padding: 20,
position: 'relative',
zIndex: 1,
opacity: 1,
},
arrow: {
width: 18,
height: 18,
opacity: 0.9,
tintColor: theme.mainColor,
margin: 2,
},
leftArrow: {
transform: [
{
rotate: '180deg',
},
],
},
disableArrow: {
opacity: 0,
},
monthYearContainer: {
flex: 1,
position: 'relative',
alignItems: 'center',
justifyContent: 'center',
},
monthYear: {
position: 'absolute',
alignItems: 'center',
flexDirection: 'row-reverse',
},
reverseMonthYear: {
flexDirection: 'row',
},
activeMonthYear: {
zIndex: 999,
},
monthYearWrapper: {
alignItems: 'center',
},
headerText: {
fontSize: theme.textHeaderFontSize,
padding: 2,
color: theme.textHeaderColor,
fontFamily: theme.defaultFont,
textAlignVertical: 'center',
},
monthText: {
fontFamily: theme.headerFont,
},
centerWrapper: {
borderColor: theme.borderColor,
paddingVertical: 4,
paddingHorizontal: 8,
alignItems: 'center',
borderRadius: 5,
borderWidth: 1,
},
time: {
marginRight: 5,
},
});
Header.defaultProps = {
changeMonth: () => null,
};
Header.propTypes = {
changeMonth: PropTypes.func,
};
export { Header };
//# sourceMappingURL=Header.js.map