react-native-multiple-select-pro
Version:
select single, all options
447 lines (446 loc) • 15.3 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 _Entypo = _interopRequireDefault(require("react-native-vector-icons/Entypo"));
var _MaterialCommunityIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const COLORS = {
primary: '#00bbda',
white: '#FFFFFF',
black: '#000000',
borderColor: '#C8C8C8',
textColor: '#7F7F7F',
red: 'red'
};
const MultiSelector = ({
title,
bgColor,
containerHeight,
buttonBGColor,
buttonTxtColor,
txtColor,
checkboxColor,
dataSet,
setData,
buttonName,
hideButtonBGColor,
hideButtonTxtColor,
inputBoxHeight
}) => {
const [search, setSearch] = (0, _react.useState)('');
const [filteredDataSource, setFilteredDataSource] = (0, _react.useState)([]);
const [masterDataSource, setMasterDataSource] = (0, _react.useState)([]);
const [checkedItems, setCheckedItems] = (0, _react.useState)([]);
const [, setState] = (0, _react.useState)(false);
const [checkedAll, setCheckedAll] = (0, _react.useState)(false);
const [isSelect, setIsSelect] = (0, _react.useState)(false);
const [selectedItems, setselectedItems] = (0, _react.useState)([]);
const [isHide, setIsHide] = (0, _react.useState)(true);
(0, _react.useEffect)(() => {
setFilteredDataSource(dataSet);
setMasterDataSource(dataSet);
}, []);
const __title = title || 'Search here';
const __bgColor = bgColor || COLORS.primary;
const __maxHeight = containerHeight || '60%';
const __buttonBGColor = buttonBGColor || COLORS.white;
const __buttonTxtColor = buttonTxtColor || COLORS.primary;
const __txtColor = txtColor || COLORS.white;
const __checkboxColor = checkboxColor || COLORS.white;
const __buttonName = buttonName || 'Submit';
const __hideButtonTxtColor = hideButtonTxtColor || COLORS.white;
const __hideButtonBGColor = hideButtonBGColor || COLORS.primary;
const __inputBoxHeight = inputBoxHeight || 35;
const searchFilterFunction = text => {
if (text) {
const newData = masterDataSource.filter(function (item) {
const itemData = item.title ? item.title.toUpperCase() : ''.toUpperCase();
const textData = text.toUpperCase();
return itemData.indexOf(textData) > -1;
});
setFilteredDataSource(newData);
setSearch(text);
} else {
setFilteredDataSource(masterDataSource);
setSearch(text);
}
};
const findNumberInArray = (0, _react.useCallback)((numbers, targetNumber) => {
const foundNumbers = numbers.filter(function (item) {
return item === targetNumber;
});
if (foundNumbers.length > 0) {
return foundNumbers;
} else {
return null;
}
}, [checkedItems]);
const getItemPressHandler = (0, _react.useCallback)(item => {
let isChecked = findNumberInArray(checkedItems, item === null || item === void 0 ? void 0 : item.id);
if (isChecked === null) {
checkedItems.push(item.id);
setState(prev => !prev);
const uniqueSortArr = removeDuplicatesAndSort(checkedItems);
var filteredArray = dataSet === null || dataSet === void 0 ? void 0 : dataSet.filter(function (itm) {
return uniqueSortArr.indexOf(itm.id) > -1;
});
setData(filteredArray);
setselectedItems(filteredArray);
} else {
let removeItem = checkedItems.filter(item => item != isChecked);
setCheckedItems(removeItem);
const uniqueSortArr = removeDuplicatesAndSort(removeItem);
var filteredArray = dataSet === null || dataSet === void 0 ? void 0 : dataSet.filter(function (itm) {
return uniqueSortArr.indexOf(itm.id) > -1;
});
setData(filteredArray);
setselectedItems(filteredArray);
setState(prev => !prev);
}
}, [checkedItems]);
const selectAllHandler = (0, _react.useCallback)(() => {
if (!checkedAll) {
setCheckedItems([]);
masterDataSource === null || masterDataSource === void 0 || masterDataSource.map(item => {
checkedItems.push(item.id);
});
setCheckedItems(Array.from(new Set(checkedItems)));
setCheckedAll(true);
const uniqueSortArr = removeDuplicatesAndSort(checkedItems);
var filteredArray = dataSet === null || dataSet === void 0 ? void 0 : dataSet.filter(function (itm) {
return uniqueSortArr.indexOf(itm.id) > -1;
});
setData(filteredArray);
setselectedItems(filteredArray);
}
if (checkedAll) {
setCheckedItems([]);
setCheckedAll(false);
setData([]);
setselectedItems([]);
}
setState(prev => !prev);
}, [checkedItems, masterDataSource]);
function removeDuplicatesAndSort(arr) {
const uniqueSet = new Set(arr);
const uniqueArray = Array.from(uniqueSet).sort((a, b) => a - b);
return uniqueArray;
}
const SelectionListItemView = ({
item
}) => {
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.7,
style: {
flexDirection: 'row',
alignItems: 'center',
padding: 5,
backgroundColor: __bgColor
},
onPress: () => getItemPressHandler(item)
}, findNumberInArray(checkedItems, item === null || item === void 0 ? void 0 : item.id) !== null && /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
name: "checkbox-outline",
size: 20,
color: __checkboxColor
}), findNumberInArray(checkedItems, item === null || item === void 0 ? void 0 : item.id) === null && /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
name: "checkbox-blank-outline",
size: 20,
color: __checkboxColor
}), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: [styles.itemStyle, {
color: __txtColor
}]
}, item.title));
};
const ItemSeparatorView = () => {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
height: 0.5,
width: '100%',
backgroundColor: COLORS.borderColor
}
});
};
const SelectedListItemView = ({
item
}) => {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
padding: 2,
borderColor: 'gray',
borderWidth: 1,
borderRadius: 20,
flexDirection: 'row',
marginVertical: 2,
marginLeft: 5
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
color: COLORS.textColor,
paddingLeft: 5,
fontSize: 13
}
}, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/_react.default.createElement(_Entypo.default, {
name: 'cross',
size: 20,
color: 'red',
onPress: () => {
getItemPressHandler(item);
}
}));
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
borderRadius: 5,
maxHeight: __maxHeight,
backgroundColor: 'white'
}
}, isSelect ? /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
style: [styles.firstInput, {
height: __inputBoxHeight
}],
onChangeText: text => searchFilterFunction(text),
value: search,
underlineColorAndroid: "transparent",
textAlignVertical: "auto",
placeholder: (checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.length) > 0 ? `${__title} (` + (checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.length) + ' item selected)' : __title
}) : /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => {
setIsSelect(true);
setselectedItems([]);
},
activeOpacity: 0.7,
style: styles.secondInputContainer
}, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
style: [styles.secondInput, {
height: __inputBoxHeight
}],
textAlignVertical: "auto",
onChangeText: text => searchFilterFunction(text),
onPressIn: () => searchFilterFunction(),
value: search,
underlineColorAndroid: "transparent",
placeholder: (checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.length) > 0 ? `${__title} (` + (checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.length) + ' item selected)' : __title + ' Search Here',
editable: false,
selectTextOnFocus: false
}), /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
name: "arrow-down",
style: styles.icon,
size: 18
})), !isSelect && !isHide && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
backgroundColor: 'white',
marginTop: 5
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
horizontal: false
}, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
horizontal: true
}, selectedItems && /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
nestedScrollEnabled: true,
data: selectedItems,
renderItem: SelectedListItemView,
initialNumToRender: 15,
numColumns: 2,
contentContainerStyle: styles.flatListContainer
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flexDirection: 'row',
justifyContent: 'space-evenly'
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.7,
onPress: () => {
setIsHide(true);
setCheckedItems([]);
setCheckedAll(false);
searchFilterFunction('');
},
style: {
backgroundColor: COLORS.red,
borderRadius: 5,
flexDirection: 'row',
alignItems: 'center',
width: 55,
height: 30,
alignSelf: 'center',
justifyContent: 'center',
marginVertical: 10
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
color: __hideButtonTxtColor
}
}, "Clear")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.7,
onPress: () => {
setIsHide(true);
searchFilterFunction('');
},
style: {
backgroundColor: __hideButtonBGColor,
borderRadius: 5,
flexDirection: 'row',
alignItems: 'center',
width: 55,
height: 30,
alignSelf: 'center',
justifyContent: 'center',
marginVertical: 10
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
color: __hideButtonTxtColor
}
}, "Hide !")))), isSelect && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
borderRadius: 5,
elevation: 4,
backgroundColor: 'white'
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
data: filteredDataSource,
keyExtractor: (_item, index) => index.toString(),
ItemSeparatorComponent: ItemSeparatorView,
renderItem: SelectionListItemView,
initialNumToRender: 15
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flexDirection: 'row',
justifyContent: 'space-evenly',
paddingVertical: 5
}
}, (search === null || search === void 0 ? void 0 : search.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.7,
onPress: () => {
selectAllHandler();
},
style: {
backgroundColor: __buttonBGColor,
borderRadius: 2,
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 4,
paddingRight: 8
}
}, /*#__PURE__*/_react.default.createElement(_MaterialCommunityIcons.default, {
name: !checkedAll ? 'checkbox-blank-outline' : 'checkbox-outline',
size: 20,
color: __buttonTxtColor
}), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
color: __buttonTxtColor
}
}, "Select All")), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 0.7,
onPress: () => {
setIsSelect(false);
if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0) {
setIsHide(false);
setSearch('');
}
},
style: {
backgroundColor: __buttonBGColor,
padding: 5,
borderRadius: 2
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
color: __buttonTxtColor
}
}, __buttonName)))));
};
var _default = exports.default = MultiSelector;
const styles = _reactNative.StyleSheet.create({
flatListContainer: {
justifyContent: 'space-between'
},
secondInputContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
shadowColor: 'black',
shadowOpacity: 0.26,
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 10,
elevation: 3,
backgroundColor: 'white',
borderRadius: 5,
alignItems: 'center'
},
secondInput: {
paddingLeft: 10,
padding: 0
},
icon: {
paddingRight: 5
},
itemStyle: {
flexWrap: 'wrap',
paddingLeft: 5,
paddingRight: 20,
fontSize: 14,
fontWeight: 'normal'
},
firstInput: {
borderWidth: 1,
paddingLeft: 10,
marginVertical: 5,
borderColor: COLORS.primary,
backgroundColor: COLORS.white,
borderRadius: 5,
padding: 0
},
container: {
backgroundColor: COLORS.primary,
borderRadius: 5,
marginHorizontal: 15,
marginVertical: 5
},
textColorWhite: {
color: COLORS.white
},
timeStyle: {
height: 30,
padding: 5,
borderWidth: 1,
borderRadius: 5,
alignItems: 'center',
flexDirection: 'row',
backgroundColor: COLORS.white,
borderColor: COLORS.black,
width: '38%'
},
selectedDateStyle: {
backgroundColor: COLORS.white,
flexDirection: 'row',
height: 30,
width: '38%',
padding: 5,
borderRadius: 5,
borderWidth: 1
},
empCode: {
flexDirection: 'row',
height: 30,
borderWidth: 1,
borderRadius: 5,
alignItems: 'center',
borderColor: COLORS.black,
width: '85%',
justifyContent: 'space-between',
alignSelf: 'center',
backgroundColor: 'white',
paddingHorizontal: 10
}
});
//# sourceMappingURL=MultiSelector.js.map