react-native-calendars-datepicker
Version:
Customizable date picker for React Native that supports Hijri calendar
78 lines • 2.45 kB
JavaScript
import React, { memo, useCallback, useMemo } from 'react';
import { Image, Pressable, StyleSheet, useColorScheme, View } from 'react-native';
import { useCalendarContext } from '../../calendar-context';
import { YEAR_PAGE_SIZE } from '../../utils';
import { isEqual } from 'lodash';
import { COLORS } from '../../theme';
const arrow_left = require('../../assets/images/arrow_left.png');
const PrevButton = ({
style,
imageStyle,
className,
imageClassName
}) => {
const {
currentYear,
calendarView,
onChangeMonth,
onChangeYear,
components = {},
isRTL
} = useCalendarContext();
const colorScheme = useColorScheme();
const theme = colorScheme ?? 'light';
const defaultStyles = useMemo(() => createDefaultStyles(isRTL), [isRTL]);
const onPress = useCallback(() => {
switch (calendarView) {
case 'day':
return onChangeMonth(-1);
case 'month':
return onChangeYear(currentYear - 1);
case 'year':
return onChangeYear(currentYear - YEAR_PAGE_SIZE);
default:
return {};
}
}, [calendarView, currentYear, onChangeMonth, onChangeYear]);
const iconStyle = useMemo(() => ({
...defaultStyles.icon,
tintColor: COLORS[theme].foreground,
...imageStyle
}), [imageStyle, theme, defaultStyles.icon]);
return /*#__PURE__*/React.createElement(Pressable, {
disabled: calendarView === 'time',
onPress: onPress,
testID: "btn-prev",
accessibilityRole: "button",
accessibilityLabel: "Prev"
}, /*#__PURE__*/React.createElement(View, {
style: [defaultStyles.iconContainer, defaultStyles.prev, style],
className: className
}, components.IconPrev || /*#__PURE__*/React.createElement(Image, {
source: arrow_left,
style: iconStyle,
className: imageClassName
})));
};
const customComparator = (prev, next) => {
const areEqual = prev.className === next.className && isEqual(prev.style, next.style) && isEqual(prev.imageStyle, next.imageStyle) && isEqual(prev.imageClassName, next.imageClassName);
return areEqual;
};
export default /*#__PURE__*/memo(PrevButton, customComparator);
const createDefaultStyles = isRTL => StyleSheet.create({
iconContainer: {
padding: 4
},
prev: {
marginRight: isRTL ? 0 : 3,
marginLeft: isRTL ? 3 : 0
},
icon: {
width: 14,
height: 14,
transform: [{
rotate: isRTL ? '180deg' : '0deg'
}]
}
});
//# sourceMappingURL=prev-button.js.map