react-native-full-calendars
Version:
React Native Full Calendar (RNFC) is an intuitive and powerful calendar component library designed for React Native.
92 lines (90 loc) • 2.47 kB
JavaScript
;
import React, { useContext } from 'react';
import { StyleSheet } from 'react-native';
import Animated, { interpolate, makeMutable, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
import { SwiperContext } from '../store';
import { jsx as _jsx } from "react/jsx-runtime";
const preInitSize = makeMutable(99999);
export const Page = ({
index,
pageAnim,
pageWidth,
pageHeight,
isActive,
style,
viewSize
}) => {
const {
props
} = useContext(SwiperContext);
const {
buffer,
initialIndex,
vertical,
renderPage
} = props;
const translation = useDerivedValue(() => {
const translate = (index - pageAnim.value) * viewSize.value;
return translate;
}, []);
const focusAnim = useDerivedValue(() => {
if (!viewSize.value) {
return index - initialIndex;
}
return translation.value / viewSize.value;
}, [initialIndex]);
const animStyle = useAnimatedStyle(() => {
const hasInitialized = !!viewSize.value;
const isInactivePageBeforeInit = !(index === initialIndex) && !hasInitialized;
const _pageWidth = isInactivePageBeforeInit ? preInitSize : pageWidth;
const _pageHeight = isInactivePageBeforeInit ? preInitSize : pageHeight;
return pageInterpolatorSlide({
focusAnim,
pageWidth: _pageWidth,
pageHeight: _pageHeight,
vertical
});
}, [pageWidth, pageHeight, pageAnim, index, initialIndex, translation, vertical, buffer]);
return /*#__PURE__*/_jsx(Animated.View, {
pointerEvents: isActive ? 'auto' : 'none',
style: [style, styles.pageWrapper, animStyle, isActive && styles.activePage],
children: renderPage({
index,
isActive,
focusAnim,
pageWidthAnim: pageWidth,
pageHeightAnim: pageHeight,
pageAnim
})
});
};
const styles = StyleSheet.create({
pageWrapper: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute'
},
activePage: {
position: 'relative'
}
});
export const pageInterpolatorSlide = ({
focusAnim,
pageWidth,
pageHeight,
vertical
}) => {
'worklet';
const translateX = vertical ? 0 : interpolate(focusAnim.value, [-1, 0, 1], [-pageWidth.value, 0, pageWidth.value]);
const translateY = vertical ? interpolate(focusAnim.value, [-1, 0, 1], [-pageHeight.value, 0, pageHeight.value]) : 0;
return {
transform: [{
translateX
}, {
translateY
}]
};
};
//# sourceMappingURL=Page.js.map