react-native-wheel-picker-expo
Version:
React Native wheel picker like iOS
277 lines (241 loc) • 9.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _expoLinearGradient = require("expo-linear-gradient");
var _util = require("./util");
var Haptics = _interopRequireWildcard(require("expo-haptics"));
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; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
class WheelPickerExpo extends _react.PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "flatListRef", /*#__PURE__*/_react.default.createRef());
_defineProperty(this, "backgroundColor", (0, _util.setAlphaColor)(this.props.backgroundColor, 1));
_defineProperty(this, "state", {
selectedIndex: 0,
itemHeight: 40,
listHeight: 200,
data: []
});
_defineProperty(this, "userTouch", false);
_defineProperty(this, "handleOnPressItem", index => {
if (index >= 0 && index <= this.props.items.length - 1) {
var _this$flatListRef$cur;
(_this$flatListRef$cur = this.flatListRef.current) === null || _this$flatListRef$cur === void 0 ? void 0 : _this$flatListRef$cur.scrollToIndex({
animated: true,
index: index
});
}
});
}
componentDidUpdate(prevProps) {
var _this$props$items, _prevProps$items;
if (((_this$props$items = this.props.items) === null || _this$props$items === void 0 ? void 0 : _this$props$items.length) !== ((_prevProps$items = prevProps.items) === null || _prevProps$items === void 0 ? void 0 : _prevProps$items.length)) {
this.setData();
}
}
componentDidMount() {
this.setData();
}
get gradientColor() {
return _reactNative.Platform.select({
ios: (0, _util.setAlphaColor)(this.backgroundColor, 0.2),
android: (0, _util.setAlphaColor)(this.backgroundColor, 0.4),
web: (0, _util.setAlphaColor)(this.backgroundColor, 0.4)
});
}
get gradientContainerStyle() {
const {
itemHeight
} = this.state;
const {
selectedStyle
} = this.props;
return [{
height: 2 * itemHeight,
borderColor: selectedStyle === null || selectedStyle === void 0 ? void 0 : selectedStyle.borderColor
}, styles.gradientContainer];
}
handleOnSelect(index) {
const {
items,
onChange,
haptics
} = this.props;
const selectedIndex = Math.abs(index);
if (selectedIndex >= 0 && selectedIndex <= items.length - 1) {
if (haptics && this.userTouch && this.state.selectedIndex !== selectedIndex) {
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
}
this.setState({
selectedIndex
});
onChange && onChange({
index: selectedIndex,
item: items[selectedIndex]
});
}
}
setData() {
let {
itemHeight,
listHeight
} = this.state;
const {
items,
height
} = this.props;
if (items !== null && items !== void 0 && items.length) {
const additionalItem = {
label: '',
value: null
};
const data = [additionalItem, additionalItem, ...items, additionalItem, additionalItem];
if (height) {
listHeight = height;
itemHeight = listHeight / 5;
}
this.setState({
data,
itemHeight,
listHeight
});
}
}
render() {
const {
data,
itemHeight,
listHeight,
selectedIndex
} = this.state;
const {
width,
initialSelectedIndex,
flatListProps,
selectedStyle
} = this.props;
if (!data.length) return;
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
height: listHeight,
width,
backgroundColor: this.backgroundColor
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({
keyExtractor: (_, index) => index.toString(),
showsVerticalScrollIndicator: false,
renderItem: options => PickerItem(options, selectedIndex, { ...styles.listItem,
backgroundColor: this.backgroundColor,
fontSize: itemHeight / 2,
height: itemHeight
}, this.handleOnPressItem, this.props.renderItem)
}, flatListProps, {
onTouchStart: e => {
this.userTouch = true;
!!(flatListProps !== null && flatListProps !== void 0 && flatListProps.onTouchStart) && flatListProps.onTouchStart(e);
},
ref: this.flatListRef,
initialScrollIndex: initialSelectedIndex,
data: data,
onScroll: event => {
let index = Math.round(event.nativeEvent.contentOffset.y / itemHeight);
this.handleOnSelect(index);
},
getItemLayout: (_, index) => ({
length: itemHeight,
offset: index * itemHeight,
index
}),
snapToInterval: itemHeight
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [this.gradientContainerStyle, styles.topGradient, {
borderBottomWidth: selectedStyle === null || selectedStyle === void 0 ? void 0 : selectedStyle.borderWidth
}],
pointerEvents: "none"
}, /*#__PURE__*/_react.default.createElement(_expoLinearGradient.LinearGradient, {
style: styles.linearGradient,
colors: [this.backgroundColor, this.gradientColor]
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [this.gradientContainerStyle, styles.bottomGradient, {
borderTopWidth: selectedStyle === null || selectedStyle === void 0 ? void 0 : selectedStyle.borderWidth
}],
pointerEvents: "none"
}, /*#__PURE__*/_react.default.createElement(_expoLinearGradient.LinearGradient, {
style: styles.linearGradient,
colors: [this.gradientColor, this.backgroundColor]
})));
}
}
_defineProperty(WheelPickerExpo, "defaultProps", {
items: [],
backgroundColor: '#FFFFFF',
width: 150,
haptics: false
});
const Item = /*#__PURE__*/_react.default.memo(({
fontSize,
label,
fontColor,
textAlign
}) => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
fontSize,
color: fontColor,
textAlign
}
}, label));
const PickerItem = ({
item,
index
}, indexSelected, style, onPress, renderItem) => {
const gap = Math.abs(index - (indexSelected + 2));
const sizeText = [style.fontSize, style.fontSize / 1.5, style.fontSize / 2];
const fontSize = gap > 1 ? sizeText[2] : sizeText[gap];
const fontColor = (0, _util.adaptiveColor)(style.backgroundColor);
const textAlign = 'center';
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 1,
onPress: () => onPress(index - 2)
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: style
}, typeof renderItem === 'function' && renderItem({
fontSize,
fontColor,
label: item.label,
textAlign
}), !renderItem && /*#__PURE__*/_react.default.createElement(Item, {
fontSize: fontSize,
fontColor: fontColor,
textAlign: textAlign,
label: item.label
})));
};
const styles = _reactNative.StyleSheet.create({
listItem: {
alignItems: 'center',
justifyContent: 'center'
},
gradientContainer: {
position: 'absolute',
width: '100%'
},
linearGradient: {
flex: 1
},
topGradient: {
top: 0
},
bottomGradient: {
bottom: 0
}
});
var _default = WheelPickerExpo;
exports.default = _default;
//# sourceMappingURL=index.js.map