Skip to content

Add onSelectItem function to detect everytime item was select #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joshuadiezmo wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add onSelectItem function to detect everytime item was select #26

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f29552
Add onSelectItem function to detect everytime item was select
joshuadiezmo Jun 11, 2020
a075e1d
add showCancelButton, showHeader and showSelectButton
joshuadiezmo Jun 11, 2020
e428caa
Add close on select
joshuadiezmo Jul 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 30 additions & 12 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ class Select2 extends Component {
colorTheme: '#16a45f',
buttonTextStyle: {},
buttonStyle: {},
showSearchBox: true
showSearchBox: true,
showCancelButton: true,
showSelectButton: true,
showHeader: true,
}
state = {
show: false,
Expand Down Expand Up @@ -83,6 +86,7 @@ class Select2 extends Component {
onItemSelected = (item, isSelectSingle) => {
let selectedItem = [];
let { data } = this.state;
const {onSelectItem,closeOnSelect} = this.props;
item.checked = !item.checked;
for (let index in data) {
if (data[index].id === item.id) {
Expand All @@ -95,6 +99,12 @@ class Select2 extends Component {
if (item.checked) selectedItem.push(item);
})
this.setState({ data, selectedItem });
if(onSelectItem) {
onSelectItem(selectedItem)
if(closeOnSelect){
this.setState({show: false})
}
}
}
keyExtractor = (item, idx) => idx.toString();
renderItem = ({ item, idx }) => {
Expand Down Expand Up @@ -129,7 +139,8 @@ class Select2 extends Component {
let {
style, modalStyle, title, onSelect, onRemoveItem, popupTitle, colorTheme,
isSelectSingle, cancelButtonText, selectButtonText, searchPlaceHolderText,
selectedTitleStyle, buttonTextStyle, buttonStyle, showSearchBox
selectedTitleStyle, buttonTextStyle, buttonStyle, showSearchBox, showCancelButton, showSelectButton,
showHeader
} = this.props;
let { show, selectedItem, preSelectedItem } = this.state;
return (
Expand All @@ -149,11 +160,13 @@ class Select2 extends Component {
hideModalContentWhileAnimating
isVisible={show}>
<Animated.View style={[styles.modalContainer, modalStyle, { height: this.animatedHeight }]}>
<View>
<Text style={[styles.title, this.defaultFont, { color: colorTheme }]}>
{popupTitle || title}
</Text>
</View>
{showHeader ? (
<View>
<Text style={[styles.title, this.defaultFont, { color: colorTheme }]}>
{popupTitle || title}
</Text>
</View>
):null}
<View style={styles.line} />
{
showSearchBox
Expand Down Expand Up @@ -188,7 +201,7 @@ class Select2 extends Component {
/>

<View style={styles.buttonWrapper}>
<Button
{showCancelButton ? <Button
defaultFont={this.defaultFont}
onPress={() => {
this.cancelSelection();
Expand All @@ -197,8 +210,8 @@ class Select2 extends Component {
textColor={colorTheme}
backgroundColor='#fff'
textStyle={buttonTextStyle}
style={[styles.button, buttonStyle, { marginRight: 5, marginLeft: 10, borderWidth: 1, borderColor: colorTheme }]} />
<Button
style={[styles.button, buttonStyle, { marginRight: 5, marginLeft: 10, borderWidth: 1, borderColor: colorTheme }]} />:null}
{showSelectButton ? <Button
defaultFont={this.defaultFont}
onPress={() => {
let selectedIds = [], selectedObjectItems = [];
Expand All @@ -212,7 +225,7 @@ class Select2 extends Component {
title={selectButtonText}
backgroundColor={colorTheme}
textStyle={buttonTextStyle}
style={[styles.button, buttonStyle, { marginLeft: 5, marginRight: 10 }]} />
style={[styles.button, buttonStyle, { marginLeft: 5, marginRight: 10 }]} />:null}
</View>
</Animated.View>
</Modal>
Expand Down Expand Up @@ -323,7 +336,12 @@ Select2.propTypes = {
isSelectSingle: PropTypes.bool,
showSearchBox: PropTypes.bool,
cancelButtonText: PropTypes.string,
selectButtonText: PropTypes.string
selectButtonText: PropTypes.string,
showCancelButton: PropTypes.bool,
showSelectButton: PropTypes.bool,
showHeader: PropTypes.bool,
onSelectItem: PropTypes.func,
closeOnSelect: PropTypes.bool,
}

//make this component available to the app
Expand Down