@blump-tech/native-base-select
Version:
This module includes a customizable multi-select and a single select component for Native Base. It creates a list of items with the selected item in closed view.
263 lines (244 loc) • 10.1 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 _nativeBase = require("native-base");
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; }
/* eslint-disable react-native/no-inline-styles */
const BTSingleSelect = _ref => {
let {
label,
list,
onSelection,
selectedList,
placeholder,
pillStyle,
placeHolderStyle,
labelStyle,
selectInputStyle,
errorText,
errorStyle,
listTextStyle,
actionSheetBackgroundColor,
searchStyle
} = _ref;
const [arrayList, setArrayList] = (0, _react.useState)([...list]);
const [arrayHolder, setArrayHolder] = (0, _react.useState)([...list]);
const {
isOpen,
onOpen,
onClose
} = (0, _nativeBase.useDisclose)();
const [selectedValues, setSelectedValues] = (0, _react.useState)([...selectedList]); // selected values
const [search, setSearch] = (0, _react.useState)('');
(0, _react.useEffect)(() => {
setArrayList([...list]);
setSelectedValues([...selectedList]);
}, [list, selectedList]);
const _onClose = () => {
var data = [...arrayList];
var selectedData = [...selectedValues];
let _temp = [];
selectedData.forEach(val => {
data.forEach(el => {
if (val.name === el.name) {
_temp.push(el.name);
}
});
});
onSelection({
text: _temp.join(),
selectedList: selectedData
}); // selectInputRef.current.blur();
setSearch('');
onClose();
};
const _onFocus = () => {
setArrayList([...list]);
setArrayHolder([...list]);
setSelectedValues([...selectedList]);
onOpen();
};
const _onClick = item => {
let selectedData = [...selectedValues];
const indexSelected = selectedData.indexOf(item);
if (indexSelected > -1) {
// selectedData.splice(indexSelected, 1);
selectedData = [];
} else {
selectedData = [];
selectedData.push(item);
}
setSelectedValues(selectedData);
};
const _exists = item => {
const existingData = [...selectedValues];
return existingData.indexOf(item) > -1 ? true : false;
};
const _filterFunction = text => {
setSearch(text);
const newData = arrayHolder.filter(item => item.name.toLowerCase().includes(text.toLowerCase()));
setArrayList(newData);
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
marginTop: 20,
width: '100%'
}
}, label && /*#__PURE__*/_react.default.createElement(_nativeBase.Text, {
style: {
marginBottom: 10,
fontWeight: (labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.fontWeight) || '700',
fontSize: (labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.fontSize) || 15,
color: (labelStyle === null || labelStyle === void 0 ? void 0 : labelStyle.textColor) || '#000'
}
}, label), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => _onFocus()
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flexDirection: 'row',
flexGrow: 1,
paddingHorizontal: (selectInputStyle === null || selectInputStyle === void 0 ? void 0 : selectInputStyle.paddingHorizontal) || 14,
paddingVertical: (selectInputStyle === null || selectInputStyle === void 0 ? void 0 : selectInputStyle.paddingVertical) || 12,
backgroundColor: (selectInputStyle === null || selectInputStyle === void 0 ? void 0 : selectInputStyle.backgroundColor) || '#e5e5e5',
borderRadius: (selectInputStyle === null || selectInputStyle === void 0 ? void 0 : selectInputStyle.borderRadius) || 6,
flexWrap: 'wrap',
minHeight: 45,
height: 'auto'
}
}, selectedList.length === 0 ? /*#__PURE__*/_react.default.createElement(_nativeBase.Text, {
style: {
color: (placeHolderStyle === null || placeHolderStyle === void 0 ? void 0 : placeHolderStyle.textColor) || 'gray',
fontSize: (placeHolderStyle === null || placeHolderStyle === void 0 ? void 0 : placeHolderStyle.fontSize) || 12,
fontWeight: (placeHolderStyle === null || placeHolderStyle === void 0 ? void 0 : placeHolderStyle.fontWeight) || '400'
}
}, placeholder) : selectedList.map((el, index) => {
return /*#__PURE__*/_react.default.createElement(_nativeBase.Text, {
key: index,
style: {
fontSize: (pillStyle === null || pillStyle === void 0 ? void 0 : pillStyle.fontSize) || 14,
backgroundColor: (pillStyle === null || pillStyle === void 0 ? void 0 : pillStyle.backgroundColor) || 'silver',
color: (pillStyle === null || pillStyle === void 0 ? void 0 : pillStyle.textColor) || '#000',
padding: 8,
borderRadius: (pillStyle === null || pillStyle === void 0 ? void 0 : pillStyle.borderRadius) || 6,
margin: 3
}
}, el.name);
}))), /*#__PURE__*/_react.default.createElement(_nativeBase.Actionsheet, {
isOpen: isOpen,
hideDragIndicator: true,
onClose: () => {
_onClose();
},
size: "full"
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
justifyContent: 'center',
alignContent: 'center',
alignSelf: 'center',
alignItems: 'center',
top: -20
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => {
_onClose();
},
style: {
borderRadius: 50,
backgroundColor: 'white',
padding: 3
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../assets/cancel.png'),
resizeMode: "contain",
resizeMethod: "auto",
style: {
width: 50,
height: 50,
justifyContent: 'center',
alignSelf: 'center'
}
}))), /*#__PURE__*/_react.default.createElement(_nativeBase.Actionsheet.Content, {
style: {
backgroundColor: actionSheetBackgroundColor || '#f5f5f5'
}
}, /*#__PURE__*/_react.default.createElement(_nativeBase.KeyboardAvoidingView, {
style: {
width: '100%',
maxHeight: 350
},
behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height'
}, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
placeholder: "Search",
inlineImageLeft: "search_icon",
onChangeText: text => _filterFunction(text),
value: search,
style: {
height: 40,
borderRadius: (searchStyle === null || searchStyle === void 0 ? void 0 : searchStyle.borderRadius) || 20,
fontSize: 12,
paddingLeft: 10,
paddingRight: 10,
borderColor: (searchStyle === null || searchStyle === void 0 ? void 0 : searchStyle.borderColor) || '#e5e5e5',
borderWidth: 1,
backgroundColor: (searchStyle === null || searchStyle === void 0 ? void 0 : searchStyle.backgroundColor) || '#e5e5e5',
marginVertical: 10,
marginHorizontal: 8,
color: (searchStyle === null || searchStyle === void 0 ? void 0 : searchStyle.textColor) || '#000'
}
}), /*#__PURE__*/_react.default.createElement(_nativeBase.ScrollView, {
persistentScrollbar: true,
showsVerticalScrollIndicator: true,
style: {
width: '100%',
marginBottom: 20
}
}, arrayList.map((el, index) => {
return /*#__PURE__*/_react.default.createElement(_nativeBase.Actionsheet.Item, {
onPress: () => _onClick(el),
key: index,
startIcon: _exists(el) ? /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../assets/check.png'),
resizeMode: "contain",
resizeMethod: "auto",
style: {
width: 24,
height: 24,
justifyContent: 'center',
alignSelf: 'center'
}
}) : /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../assets/uncheck.png'),
resizeMode: "contain",
resizeMethod: "auto",
style: {
width: 20,
height: 20,
justifyContent: 'center',
alignSelf: 'center'
}
})
}, /*#__PURE__*/_react.default.createElement(_nativeBase.Text, {
key: index,
style: listTextStyle
}, el.name));
}))))), errorText.length > 0 ? /*#__PURE__*/_react.default.createElement(_nativeBase.Text, {
style: {
marginBottom: 10,
fontWeight: (errorStyle === null || errorStyle === void 0 ? void 0 : errorStyle.fontWeight) || '500',
fontSize: (errorStyle === null || errorStyle === void 0 ? void 0 : errorStyle.fontSize) || 12,
color: (errorStyle === null || errorStyle === void 0 ? void 0 : errorStyle.textColor) || 'red'
}
}, errorText) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
margin: 0
}
}));
};
var _default = /*#__PURE__*/(0, _react.memo)(BTSingleSelect);
exports.default = _default;
//# sourceMappingURL=select.component.js.map