react-native-actions-sheet-picker-serial-luncher
Version:
Fork from react-native-actions-sheet-picker
198 lines (185 loc) • 8.07 kB
JavaScript
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); }
import React, { useRef, createRef, useState } from 'react';
import { View, TouchableOpacity, TextInput, ActivityIndicator, Text, Dimensions, SafeAreaView } from 'react-native';
import ActionSheet, { SheetManager } from 'react-native-actions-sheet';
import { FlatList } from 'react-native-gesture-handler';
export const onOpen = id => {
SheetManager.show(id);
};
export const onClose = id => {
SheetManager.hide(id);
};
export const Picker = _ref => {
var _style$actionSheet$ba, _style$actionSheet, _style$input, _style$close, _style$close$text, _style$close2, _style$label, _style$label$text, _style$label2, _style$activityIndica, _style$activityIndica2, _style$activityIndica3;
let {
id,
data = [],
inputValue,
searchable = false,
loading = false,
label,
height = Math.floor(Dimensions.get('window').height * 0.5),
closeText = 'Close',
placeholderText = 'Search',
noDataFoundText = 'No Data Found.',
placeholderTextColor = '#8B93A5',
setSelected,
onSearch,
searchInputProps,
flatListProps,
actionsSheetProps,
renderListItem,
style
} = _ref;
const [selectedKey, setSelectedKey] = useState(null);
const actionSheetRef = /*#__PURE__*/createRef();
const scrollViewRef = useRef(null);
const onClose = () => {
SheetManager.hide(id);
};
const Item = _ref2 => {
var _style$item, _style$item2;
let {
item,
index
} = _ref2;
return /*#__PURE__*/React.createElement(TouchableOpacity, {
style: [{
paddingVertical: 20,
borderBottomWidth: 0.5,
borderColor: '#CDD4D9'
}, style === null || style === void 0 ? void 0 : (_style$item = style.item) === null || _style$item === void 0 ? void 0 : _style$item.container],
onPress: () => {
itemOnPress(item);
setSelectedKey(index);
}
}, /*#__PURE__*/React.createElement(Text, {
style: [{
fontWeight: selectedKey !== index ? 'normal' : 'bold'
}, style === null || style === void 0 ? void 0 : (_style$item2 = style.item) === null || _style$item2 === void 0 ? void 0 : _style$item2.text]
}, item.name ? item.name : null));
};
const itemOnPress = item => {
setSelected(item);
onClose();
};
const keyExtractor = (_item, index) => index.toString();
return /*#__PURE__*/React.createElement(ActionSheet, _extends({
id: id,
ref: actionSheetRef,
indicatorColor: 'transparent',
gestureEnabled: true,
keyboardShouldPersistTaps: "always"
}, actionsSheetProps, {
containerStyle: style === null || style === void 0 ? void 0 : style.actionSheet
}), /*#__PURE__*/React.createElement(SafeAreaView, {
style: {
height: height
}
}, /*#__PURE__*/React.createElement(FlatList, _extends({
disableScrollViewPanResponder: true,
contentContainerStyle: {
paddingHorizontal: 20
},
stickyHeaderIndices: [0],
ListHeaderComponent: /*#__PURE__*/React.createElement(View, {
style: {
backgroundColor: (_style$actionSheet$ba = style === null || style === void 0 ? void 0 : (_style$actionSheet = style.actionSheet) === null || _style$actionSheet === void 0 ? void 0 : _style$actionSheet.backgroundColor) !== null && _style$actionSheet$ba !== void 0 ? _style$actionSheet$ba : '#fff'
}
}, searchable ? /*#__PURE__*/React.createElement(View, {
style: {
flexDirection: 'row',
width: '100%',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 10
}
}, /*#__PURE__*/React.createElement(View, {
style: {
flexBasis: '75%'
}
}, /*#__PURE__*/React.createElement(TextInput, _extends({
style: (_style$input = style === null || style === void 0 ? void 0 : style.input) !== null && _style$input !== void 0 ? _style$input : {
height: 40,
borderWidth: 1,
borderColor: '#CDD4D9',
borderRadius: 6,
padding: 10,
color: '#333'
},
value: inputValue,
placeholderTextColor: placeholderTextColor,
onChangeText: onSearch,
placeholder: placeholderText,
clearButtonMode: "always",
autoCapitalize: "none",
autoCorrect: false
}, searchInputProps))), /*#__PURE__*/React.createElement(TouchableOpacity, {
style: [{
padding: 10
}, style === null || style === void 0 ? void 0 : (_style$close = style.close) === null || _style$close === void 0 ? void 0 : _style$close.container],
onPress: () => {
onClose();
}
}, /*#__PURE__*/React.createElement(Text, {
style: (_style$close$text = style === null || style === void 0 ? void 0 : (_style$close2 = style.close) === null || _style$close2 === void 0 ? void 0 : _style$close2.text) !== null && _style$close$text !== void 0 ? _style$close$text : {
color: '#333'
}
}, closeText))) : null, /*#__PURE__*/React.createElement(View, {
style: [{
marginTop: 10,
paddingBottom: 5
}, style === null || style === void 0 ? void 0 : (_style$label = style.label) === null || _style$label === void 0 ? void 0 : _style$label.container]
}, /*#__PURE__*/React.createElement(Text, {
style: (_style$label$text = style === null || style === void 0 ? void 0 : (_style$label2 = style.label) === null || _style$label2 === void 0 ? void 0 : _style$label2.text) !== null && _style$label$text !== void 0 ? _style$label$text : {
color: '#333',
fontSize: 16,
fontWeight: 'bold'
}
}, label)), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
style: [{
marginVertical: 20
}, style === null || style === void 0 ? void 0 : (_style$activityIndica = style.activityIndicator) === null || _style$activityIndica === void 0 ? void 0 : _style$activityIndica.style],
color: (_style$activityIndica2 = style === null || style === void 0 ? void 0 : (_style$activityIndica3 = style.activityIndicator) === null || _style$activityIndica3 === void 0 ? void 0 : _style$activityIndica3.color) !== null && _style$activityIndica2 !== void 0 ? _style$activityIndica2 : '#999'
}) : null),
ListEmptyComponent: () => {
if (!loading) {
var _style$noDataFound, _style$noDataFound$te, _style$noDataFound2;
return /*#__PURE__*/React.createElement(View, {
style: [{
flex: 1,
alignItems: 'center',
paddingTop: 20
}, style === null || style === void 0 ? void 0 : (_style$noDataFound = style.noDataFound) === null || _style$noDataFound === void 0 ? void 0 : _style$noDataFound.container]
}, /*#__PURE__*/React.createElement(Text, {
style: (_style$noDataFound$te = style === null || style === void 0 ? void 0 : (_style$noDataFound2 = style.noDataFound) === null || _style$noDataFound2 === void 0 ? void 0 : _style$noDataFound2.text) !== null && _style$noDataFound$te !== void 0 ? _style$noDataFound$te : {
color: '#333'
}
}, noDataFoundText));
}
return null;
},
ref: scrollViewRef,
nestedScrollEnabled: true,
data: data,
renderItem: _ref3 => {
let {
item,
index
} = _ref3;
if (renderListItem) {
return renderListItem(item, index);
}
return /*#__PURE__*/React.createElement(Item, {
item: item,
index: index
});
},
keyExtractor: keyExtractor,
onMomentumScrollEnd: () => {
var _actionSheetRef$curre;
return (_actionSheetRef$curre = actionSheetRef.current) === null || _actionSheetRef$curre === void 0 ? void 0 : _actionSheetRef$curre.handleChildScrollEnd();
}
}, flatListProps))));
};
//# sourceMappingURL=Picker.js.map