@quidone/react-native-wheel-picker
Version:
Picker is a UI component for selecting an item from a list of options.
70 lines (69 loc) • 3.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _ScrollContentOffsetContext = require("../contexts/ScrollContentOffsetContext");
var _PickerItemHeightContext = require("../contexts/PickerItemHeightContext");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const PickerItemContainer = _ref => {
let {
index,
item,
faces,
renderItem,
itemTextStyle
} = _ref;
const offset = (0, _ScrollContentOffsetContext.useScrollContentOffset)();
const height = (0, _PickerItemHeightContext.usePickerItemHeight)();
const {
opacity,
rotateX,
translateY
} = (0, _react.useMemo)(() => {
const inputRange = faces.map(f => height * (index + f.index));
return {
opacity: offset.interpolate({
inputRange: inputRange,
outputRange: faces.map(x => x.opacity),
extrapolate: 'clamp'
}),
rotateX: offset.interpolate({
inputRange: inputRange,
outputRange: faces.map(x => `${x.deg}deg`),
extrapolate: 'extend'
}),
translateY: offset.interpolate({
inputRange: inputRange,
outputRange: faces.map(x => x.offsetY),
extrapolate: 'extend'
})
};
}, [faces, height, index, offset]);
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
style: [{
height,
opacity,
transform: [{
translateY
},
// first translateY, then rotateX for correct transformation.
{
rotateX
}, {
perspective: 1000
} // without this line this Animation will not render on Android https://reactnative.dev/docs/animations#bear-in-mind
]
}]
}, renderItem({
item,
index,
itemTextStyle
}));
};
var _default = /*#__PURE__*/(0, _react.memo)(PickerItemContainer);
exports.default = _default;
//# sourceMappingURL=PickerItemContainer.js.map