Merge pull request #15 from casufi/master

Added prop searchIndex to allow to search by the label only

Author: stratos-vetsos

README.md

@@ -65,6 +65,7 @@ stayOpen | boolean | false | If the Select should stay open or not.
 commaSeperated | boolean | false | If you want the selected values to be a comma seperated string, turn this to "true".  ( Available only with multiple prop set to "true". )
 singleLine | boolean | false | Where the selected values ( Select's Header ) should be contained to one line.
 lifo | boolean | false | **Last In First Out Mode**. The user's last selection, goes first. ( Available only with multiple prop set to "true". )
+searchIndex | boolean | true | Enable search by both Index and Value fields
 selectAllButton | boolean | false | Whether a "select all button" should be visible on Select's header.
 isDropDown | boolean | true | Set this to true if you want to use the Select as a **Dropdown**. When you select an option, the Select collapses and the header continue to have the placeholder as a value.
 tags | boolean | false | Whether to support custom tags.

dist/index.js

@@ -1,6 +1,6 @@
 {
   "name": "react-selectrix",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "A beautiful, clean coded select replacement for React.js",
   "main": "dist/index.js",
   "scripts": {

package.json

@@ -36,11 +36,11 @@ export default class PlayGround extends React.Component {
 
 		let options = [
 			{
-				key: 'a',
-				label: 'Option A'
+				key: 'a10',
+				label: 'Option A 10'
 			},
 			{
-				key: 'b',
+				key: 'b10',
 				label: 'Option B'
 			},
 			{
@@ -87,6 +87,7 @@ export default class PlayGround extends React.Component {
 					commaSeperated={ false }
 					singleLine={ false }
 					lifo={ false }
+					searchIndex={ false }
 					selectAllButton={ true }
 					height={ 190 }
 					checkBoxes={ false }

src/PlayGround.js

@@ -41,11 +41,11 @@ export default class Searchable extends React.Component {
 
 	}
 
-	componentWillMount() {
+	UNSAFE_componentWillMount() {
 		this.calculateSize( this.props );
 	}
 
-	componentWillReceiveProps( nextProps ) {
+	UNSAFE_componentWillReceiveProps( nextProps ) {
 
 		if( nextProps.settings.multiple && ( this.props.queryString !== nextProps.queryString || this.props.selected.length !== nextProps.selected.length ) || this.props.settings.placeholder.length !== nextProps.settings.placeholder.length ) {
 			this.calculateSize( nextProps );

src/components/App/partials/Header/partials/Searchable/Searchable.js

@@ -27,11 +27,11 @@ export default class Selectrix extends React.Component {
 		} )
 	}
 
-	componentWillMount() {
+	UNSAFE_componentWillMount() {
 		this.props.setupInstance( this.props );
 	}
 
-	componentWillReceiveProps( nextProps ) {
+	UNSAFE_componentWillReceiveProps( nextProps ) {
 		this.props.updateInstance( nextProps );
 	}
 
@@ -56,6 +56,7 @@ Selectrix.defaultProps = {
 	defaultValue: false,
 	multiple: false,
 	disabled: false,
+	searchIndex: true,
 	onChange: () => {},
 	onOpen: () => {},
 	onClose: () => {},
@@ -97,6 +98,7 @@ Selectrix.propTypes = {
 	] ),
 	multiple: PropTypes.bool,
 	disabled: PropTypes.bool,
+	searchIndex: PropTypes.bool,
 	onChange: PropTypes.func,
 	customScrollbar: PropTypes.bool,
 	searchable: PropTypes.bool,

src/components/Selectrix.js

@@ -8,6 +8,7 @@ const initialState = {
 		arrow: true,
 		multiple: false,
 		disabled: false,
+		searchIndex: true,
 		customScrollbar: false,
 		searchable: true,
 		commaSeperated: false,
@@ -138,6 +139,7 @@ const reducer = ( state = initialState, action ) => {
 					arrow: action.props.arrow,
 					multiple: action.props.multiple,
 					disabled: action.props.disabled,
+					searchIndex: action.props.searchIndex,
 					customScrollbar: action.props.customScrollbar,
 					searchable: action.props.searchable,
 					stayOpen: action.props.hasOwnProperty( 'stayOpen' )
@@ -197,7 +199,7 @@ const reducer = ( state = initialState, action ) => {
 					active: true,
 					queryString: action.queryString,
 					resultSet: state.ajax.active && state.ajax.fetchOnSearch ? action.queryString.length < state.ajax.minLength ? [] : state.options : state.options.filter( o =>
-						o.label.toLowerCase().includes( queryString ) || o.key.toString().toLowerCase().includes( queryString )
+						o.label.toLowerCase().includes( queryString ) || ( state.settings.searchIndex && o.key.toString().toLowerCase().includes( queryString ) )
 					)
 				} ),
 				focusedItem: null,