@tchesa/react-native-modern-datepicker
Version:
A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale)
52 lines • 2.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { View, StyleSheet, Text, Animated } from 'react-native';
import { Header, Days } from '.';
import { useCalendar } from '../DatePicker';
const Calendar = () => {
const { options, state, utils, onSelectedChange } = useCalendar();
const [mainState] = state;
const style = styles(options);
const [{ shownAnimation }, changeMonthAnimation] = utils.useMonthAnimation(mainState.activeDate, options.daysAnimationDistance);
useEffect(() => {
mainState.selectedDate && (onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(mainState.selectedDate));
}, [mainState.selectedDate, onSelectedChange]);
return (_jsxs(View, { style: style.container, children: [_jsx(Header, { changeMonth: changeMonthAnimation }), _jsx(View, { style: [style.daysName, utils.flexDirection], children: utils.config.dayNamesShort.map(item => (_jsx(Text, { style: style.daysNameText, children: item }, item))) }), _jsx(View, { style: style.daysContainer, children: _jsx(Animated.View, { style: [style.days, shownAnimation], children: _jsx(Days, {}) }) })] }));
};
const styles = (theme) => StyleSheet.create({
container: {
flexDirection: 'column',
flex: 1,
},
daysName: {
paddingBottom: 10,
marginBottom: 0,
alignItems: 'center',
justifyContent: 'space-around',
borderBottomColor: theme.borderColor,
borderBottomWidth: 1,
marginHorizontal: 15,
},
daysNameText: {
fontFamily: theme.defaultFont,
color: theme.textSecondaryColor,
fontSize: theme.textFontSize,
},
daysContainer: {
flex: 1,
position: 'relative',
overflow: 'hidden',
margin: 15,
marginTop: 5,
marginBottom: 0,
},
days: {
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
right: 0,
},
});
export { Calendar };
//# sourceMappingURL=Calendar.js.map