From 4f2a529f994e0cf7a625d471b3aae5d5b84a319a Mon Sep 17 00:00:00 2001 From: "Bilal H. Abdeen" Date: Sat, 17 Aug 2019 18:26:42 +1000 Subject: [PATCH 1/3] Update README.md 1. The code in the original file has 2 bugs (see below), which I fixed. 1.a the "state" statement has syntax issues 1.b. the statement with "this.MultiSelect" produces an error. 2. The new code demonstrates some advanced features (see below.) 2.a. Using multiple components on the same screen 2.b. For a component with single-selection, updating the dropdown's name/label (the selectText prop) dynamically to display the selected option 2.c. an example for the callback function for the "onAddItem" prop --- README.md | 232 ++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 162 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 18518da..569c1c0 100644 --- a/README.md +++ b/README.md @@ -38,76 +38,168 @@ import MultiSelect from 'react-native-multiple-select'; class MultiSelectExample extends Component { - this.state = { - selectedItems = []; - }; - - this.items = [{ - id: '92iijs7yta', - name: 'Ondo', - }, { - id: 'a0s0a8ssbsd', - name: 'Ogun', - }, { - id: '16hbajsabsd', - name: 'Calabar', - }, { - id: 'nahs75a5sg', - name: 'Lagos', - }, { - id: '667atsas', - name: 'Maiduguri', - }, { - id: 'hsyasajs', - name: 'Anambra', - }, { - id: 'djsjudksjd', - name: 'Benue', - }, { - id: 'sdhyaysdj', - name: 'Kaduna', - }, { - id: 'suudydjsjd', - name: 'Abuja', - }]; - - onSelectedItemsChange = selectedItems => { - this.setState({ selectedItems }); - }; - - render() { - const { selectedItems } = this.state; - return ( - - { this.multiSelect = component }} - onSelectedItemsChange={this.onSelectedItemsChange} - selectedItems={selectedItems} - selectText="Pick Items" - searchInputPlaceholderText="Search Items..." - onChangeInput={ (text)=> console.log(text)} - altFontFamily="ProximaNova-Light" - tagRemoveIconColor="#CCC" - tagBorderColor="#CCC" - tagTextColor="#CCC" - selectedItemTextColor="#CCC" - selectedItemIconColor="#CCC" - itemTextColor="#000" - displayKey="name" - searchInputStyle={{ color: '#CCC' }} - submitButtonColor="#CCC" - submitButtonText="Submit" - /> - - {this.multiSelect.getSelectedItemsExt(selectedItems)} - - - ); - } -} + state = { + demo1_SelectText: 'Demo 1 Field', + demo1_ItemsList: ROLE_OPTIONS, + demo1_SelectedItems: [], + demo2_SelectText: 'Demo 2 Field', + demo2_ItemsList: LICENCE_OPTIONS, + demo2_SelectedItems: [], + }; + + items = [{ + id: '92iijs7yta', + name: 'Ondo', + }, { + id: 'a0s0a8ssbsd', + name: 'Ogun', + }, { + id: '16hbajsabsd', + name: 'Calabar', + }, { + id: 'nahs75a5sg', + name: 'Lagos', + }, { + id: '667atsas', + name: 'Maiduguri', + }, { + id: 'hsyasajs', + name: 'Anambra', + }, { + id: 'djsjudksjd', + name: 'Benue', + }, { + id: 'sdhyaysdj', + name: 'Kaduna', + }, { + id: 'suudydjsjd', + name: 'Abuja', + }]; + + // // Call the action creator + demo1_OnSelectedItemsChange = (selectedItems) => { + console.log('demo1_OnSelectedItemsChange - SelectedItems: ', selectedItems); + // Add your code here for using the selcted value in your app + + this.setState({ + // To set the "selectText" prop to the selected value + // Can be useful for components with "single" selections (where the prop "single" is set) + demo1_SelectText: selectedItems[0], + }); + }; + + demo1_OnAddItem = (newItemsList) => { + console.log('demo1_OnAddItem - newItemsList: ', newItemsList, ' - length: ', newItemsList.length); + // You can add your code here to add the newly added item to the original items list. + + // 1. Removes the "LAST" element from the new items list. This the item, which was added by the user. + const lastElement = newItemsList.pop(); + + // 2. Adds the new element (which was extracted above) to the "TOP" of new items list. + // This makes it appear on top of the list. So, it is easier for the user to click on it. + newItemsList.unshift(lastElement); + + // Note 1: The steps 1 & 2 (above) are optional. + + // Note 2: Instead of 1 & 2 (above), it would have been better if entering a new value + // would result in selecting it without the need to select it from the list. + // Check [issue #110](https://github.com/toystars/react-native-multiple-select/issues/110) + + this.setState({ + demo1_ItemsList: newItemsList, + }); + } + + demo2_OnSelectedItemsChange = (selectedItems) => { + console.log('demo2_OnSelectedItemsChange - SelectedItems: ', selectedItems); + // Add your code here for using the selcted value in your app + + this.setState({ + // Use only for "multiple" selections (where the prop "single" is NOT set) + demo2_SelectedItems: selectedItems, + }); + }; + + demo2_OnAddItem = (newItemsList) => { + console.log('demo1_OnAddItem - newItemsList: ', newItemsList, ' - length: ', newItemsList.length); + // You can add your code here to add the newly added item to the original items list. + + // 1. Removes the "LAST" element from the new items list. This the item, which was added by the user. + const lastElement = newItemsList.pop(); + + // 2. Adds the new element (which was extracted above) to the "TOP" of new items list. + // This makes it appear on top of the list. So, it is easier for the user to click on it. + newItemsList.unshift(lastElement); + + // Note 1: The steps 1 & 2 (above) are optional. + + // Note 2: Instead of 1 & 2 (above), it would have been better if entering a new value + // would result in selecting it without the need to select it from the list. + // Check [issue #110](https://github.com/toystars/react-native-multiple-select/issues/110) + + this.setState({ + demo2_ItemsList: newItemsList, + }); + } + + render() { + return ( + + + { this.demo1_MultiSelect = component; }} + + canAddItems={true} + onAddItem={this.demo1_OnAddItem} + /> + + + {this.demo1_MultiSelect && this.demo1_MultiSelect.getSelectedItemsExt(this.state.demo1_SelectedItems)} + + + + { this.demo2_MultiSelect = component; }} + + canAddItems={true} + onAddItem={this.demo2_OnAddItem} + /> + + + {/* Istead of the prop "hideTags={false}" (above), you can use the following. */} + {/* {this.demo2_MultiSelect && this.licenceMultiSelect.getSelectedItemsExt(this.state.licenceSelectedItems)} */} + + + + ); + } // end of: render +} // end of: component ``` From facf6f9083ed2a9c1ba5731a568c99823171d268 Mon Sep 17 00:00:00 2001 From: "Bilal H. Abdeen" Date: Sat, 17 Aug 2019 18:51:58 +1000 Subject: [PATCH 2/3] Update README.md --- README.md | 73 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 37 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 569c1c0..ea4afc7 100644 --- a/README.md +++ b/README.md @@ -39,42 +39,43 @@ import MultiSelect from 'react-native-multiple-select'; class MultiSelectExample extends Component { state = { - demo1_SelectText: 'Demo 1 Field', - demo1_ItemsList: ROLE_OPTIONS, - demo1_SelectedItems: [], - demo2_SelectText: 'Demo 2 Field', - demo2_ItemsList: LICENCE_OPTIONS, - demo2_SelectedItems: [], - }; - - items = [{ - id: '92iijs7yta', - name: 'Ondo', - }, { - id: 'a0s0a8ssbsd', - name: 'Ogun', - }, { - id: '16hbajsabsd', - name: 'Calabar', - }, { - id: 'nahs75a5sg', - name: 'Lagos', - }, { - id: '667atsas', - name: 'Maiduguri', - }, { - id: 'hsyasajs', - name: 'Anambra', - }, { - id: 'djsjudksjd', - name: 'Benue', - }, { - id: 'sdhyaysdj', - name: 'Kaduna', - }, { - id: 'suudydjsjd', - name: 'Abuja', - }]; + demo1_SelectText: 'Demo 1 Field', + demo1_SelectedItems: [], + + demo1_ItemsList: [{ + id: '11', + name: 'Orange', + }, { + id: '12', + name: 'Apple', + }, { + id: '13', + name: 'Banana', + }, { + id: '14', + name: 'Tomato', + }], + + demo2_SelectText: 'Demo 2 Field', + demo2_SelectedItems: [], + + demo2_ItemsList: [{ + id: '21', + name: 'Red', + }, { + id: '22', + name: 'Yellow', + }, { + id: '23', + name: 'White', + }, { + id: '24', + name: 'Blue', + }, { + id: '25', + name: 'Black', + }], +}; // // Call the action creator demo1_OnSelectedItemsChange = (selectedItems) => { From ca1a304521e0fe86f042c29f86c547809d60a64d Mon Sep 17 00:00:00 2001 From: "Bilal H. Abdeen" Date: Sat, 17 Aug 2019 18:55:39 +1000 Subject: [PATCH 3/3] Update README.md --- README.md | 54 +++++++++++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/README.md b/README.md index ea4afc7..337bc42 100644 --- a/README.md +++ b/README.md @@ -43,37 +43,37 @@ class MultiSelectExample extends Component { demo1_SelectedItems: [], demo1_ItemsList: [{ - id: '11', - name: 'Orange', - }, { - id: '12', - name: 'Apple', - }, { - id: '13', - name: 'Banana', - }, { - id: '14', - name: 'Tomato', + id: '11', + name: 'Orange', + }, { + id: '12', + name: 'Apple', + }, { + id: '13', + name: 'Banana', + }, { + id: '14', + name: 'Tomato', }], demo2_SelectText: 'Demo 2 Field', demo2_SelectedItems: [], demo2_ItemsList: [{ - id: '21', - name: 'Red', - }, { - id: '22', - name: 'Yellow', - }, { - id: '23', - name: 'White', - }, { - id: '24', - name: 'Blue', - }, { - id: '25', - name: 'Black', + id: '21', + name: 'Red', + }, { + id: '22', + name: 'Yellow', + }, { + id: '23', + name: 'White', + }, { + id: '24', + name: 'Blue', + }, { + id: '25', + name: 'Black', }], }; @@ -146,7 +146,7 @@ class MultiSelectExample extends Component { render() { return ( - + - +