react-native-calendars-datepicker
Version:
Customizable date picker for React Native that supports Hijri calendar
119 lines • 3.19 kB
JavaScript
import React from 'react';
import { Animated, Text } from 'react-native';
import styles from './wheel-picker.style';
import { isEqual } from 'lodash';
const WheelPickerItem = ({
textStyle,
textClassName,
style,
height,
option,
index,
visibleRest,
currentScrollIndex,
opacityFunction,
rotationFunction,
scaleFunction
}) => {
const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
const translateY = relativeScrollIndex.interpolate({
inputRange: (() => {
const range = [0];
for (let i = 1; i <= visibleRest + 1; i++) {
range.unshift(-i);
range.push(i);
}
return range;
})(),
outputRange: (() => {
const range = [0];
for (let i = 1; i <= visibleRest + 1; i++) {
let y = height / 2 * (1 - Math.sin(Math.PI / 2 - rotationFunction(i)));
for (let j = 1; j < i; j++) {
y += height * (1 - Math.sin(Math.PI / 2 - rotationFunction(j)));
}
range.unshift(y);
range.push(-y);
}
return range;
})()
});
const opacity = relativeScrollIndex.interpolate({
inputRange: (() => {
const range = [0];
for (let i = 1; i <= visibleRest + 1; i++) {
range.unshift(-i);
range.push(i);
}
return range;
})(),
outputRange: (() => {
const range = [1];
for (let x = 1; x <= visibleRest + 1; x++) {
const y = opacityFunction(x);
range.unshift(y);
range.push(y);
}
return range;
})()
});
const scale = relativeScrollIndex.interpolate({
inputRange: (() => {
const range = [0];
for (let i = 1; i <= visibleRest + 1; i++) {
range.unshift(-i);
range.push(i);
}
return range;
})(),
outputRange: (() => {
const range = [1.0];
for (let x = 1; x <= visibleRest + 1; x++) {
const y = scaleFunction(x);
range.unshift(y);
range.push(y);
}
return range;
})()
});
const rotateX = relativeScrollIndex.interpolate({
inputRange: (() => {
const range = [0];
for (let i = 1; i <= visibleRest + 1; i++) {
range.unshift(-i);
range.push(i);
}
return range;
})(),
outputRange: (() => {
const range = ['0deg'];
for (let x = 1; x <= visibleRest + 1; x++) {
const y = rotationFunction(x);
range.unshift(`${y}deg`);
range.push(`${y}deg`);
}
return range;
})()
});
return /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.option, style, {
height,
opacity,
transform: [{
translateY
}, {
rotateX
}, {
scale
}]
}]
}, /*#__PURE__*/React.createElement(Text, {
style: textStyle,
className: textClassName
}, option === null || option === void 0 ? void 0 : option.text));
};
const customComparator = (prevProps, nextProps) => {
return prevProps.textClassName === nextProps.textClassName && isEqual(prevProps.textStyle, nextProps.textStyle);
};
export default /*#__PURE__*/React.memo(WheelPickerItem, customComparator);
//# sourceMappingURL=wheel-picker-item.js.map