react-select-search - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

index.js

@@ -16,13 +16,13 @@ /**
 		displayName: 'SelectSearch',
-		
+
 		hideTimer: null,
-		
+
 		focus: false,
-		
+
 		selected: null,
-		
+
 		classes: {},
-		
+
 		itemHeight: null,
-		
+
 		selectHeight: null,
@@ -42,2 +42,3 @@
 				className:      'select-search-box',
+				search:         true,
 				value:          null,
@@ -62,3 +63,3 @@ placeholder:    null,
 		},
-		
+
 		componentWillMount: function () {
@@ -71,12 +72,17 @@ this.classes = {
 				option:    this.e('option'),
-				out:       this.e('out')
+				out:       this.e('out'),
+				label:     this.e('label')
 			};
 		},
-		
+
 		componentDidMount: function () {
 			this.props.onMount.call(this);
+
+			if (!this.props.search) {
+				document.addEventListener('click', this.documentClick);
+			}
 		},
-		
+
 		componentDidUpdate: function (prevProps, prevState) {
-			if (this.state.value !== prevState.value) {
+			if (this.refs.hasOwnProperty('search') && this.state.value !== prevState.value) {
 				this.refs.search.getDOMNode().blur();
@@ -86,2 +92,8 @@ }
 
+		documentClick: function (e) {
+			if (e.target.className.indexOf(this.props.className) < 0) {
+				this.onBlur();
+			}
+		},
+
 		filterOptions: function (options, value) {
@@ -94,3 +106,3 @@ if (options && options.length > 0 && value && value.length > 0) {
 			}
-			
+
 			return options;
@@ -101,14 +113,14 @@ },
 			base || (base = this.props.className);
-			
+
 			return base + '__' + element;
 		},
-		
+
 		m: function (modifier, base) {
 			modifier = modifier.split(' ');
 			var finalClass = [];
-			
+
 			modifier.forEach(function (className) {
 				finalClass.push(base + '--' + className);
 			});
-			
+
 			return finalClass.join(' ');
@@ -138,3 +150,3 @@ },
 				element.className = className + ' ' + this.m('prehide', this.classes.select);
-				
+
 				setTimeout(function () {
@@ -144,9 +156,9 @@ viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 					this.selectHeight  = viewportHeight - elementPos.top - 20;
-					
+
 					element.style.maxHeight = this.selectHeight + 'px';
-					
+
 					if (!this.itemHeight) {
 						this.itemHeight = element.querySelector('.' + this.classes.option).offsetHeight;
 					}
-					
+
 					element.className = className;
@@ -156,3 +168,3 @@ element.scrollTop = 0;
 			}
-			
+
 			this.props.onFocus.call(this);
@@ -166,9 +178,9 @@ },
 			this.selected = null;
-			
+
 			option = this.findByValue(this.props.options, this.state.value);
-			
+
 			if (option) {
 				this.setState({search: option.name});
 			}
-			
+
 			this.props.onBlur.call(this);
@@ -194,5 +206,5 @@
 				e.preventDefault();
-				
+
 				var selectedOption = (this.selected) ? this.optionByIndex(this.selected) : this.optionByIndex(0);
-				
+
 				if (selectedOption) {
@@ -226,6 +238,6 @@ this.chooseOption(selectedOption.value);
 			}
-			
+
 			this.scrollToSelected();
 		},
-		
+
 		scrollToSelected: function () {
@@ -255,3 +267,3 @@ var select = this.refs.select.getDOMNode();
 			}
-			
+
 			return source.filter(function (object) {
@@ -282,3 +294,3 @@ return object.value === value;
 					}
-					
+
 					selectedNodeName = node.textContent;
@@ -305,5 +317,3 @@ selected = i;
 			var currentValue = this.state.value,
-			    foundOption,
 			    search,
-			    options,
 			    option;
@@ -316,3 +326,3 @@
 			}
-			
+
 			if (this.props.multiple) {
@@ -322,5 +332,5 @@ if (!currentValue) {
 				}
-				
+
 				currentValue.push(option.value);
-				
+
 				search = null;
@@ -334,2 +344,6 @@ } else {
 			this.props.valueChanged.call(this, option, this.state, this.props);
+
+			if (!this.props.search) {
+				this.onBlur();
+			}
 		},
@@ -341,12 +355,12 @@
 			}
-			
+
 			var option = this.findByValue(this.props.options, value),
 			    value  = this.state.value;
-			
+
 			if (!option || value.indexOf(option.value) < 0) {
 				return false;
 			}
-			
+
 			value.splice(value.indexOf(option.value), 1);
-			
+
 			this.props.valueChanged(null, this.state, this.props);
@@ -356,3 +370,3 @@ this.setState({value: value, search: null});
 
-		render: function () {
+		renderOptions: function () {
 			var foundOptions,
@@ -362,19 +376,15 @@ select = null,
 			    options = [],
-			    selectStyle = {},
-			    finalValue,
-			    finalValueOptions;
-			
+			    selectStyle = {};
+
 			foundOptions = this.state.options;
-			
+
 			if (foundOptions && foundOptions.length > 0) {
-				if (this.state.value) {
-					if (!this.props.multiple) {
-						option = this.findByValue(this.props.options, this.state.value);
-						
-						if (option) {
-							options.push(<li className={this.classes.option + ' ' + this.m('selected', this.classes.option)} onClick={this.chooseOption.bind(this, option.value)} key={option.value + '-option'} data-value={option.value} dangerouslySetInnerHTML={{__html: this.props.renderOption(option)}} />);
-						}
+				if (this.state.value && !this.props.multiple) {
+					option = this.findByValue(this.props.options, this.state.value);
+
+					if (option) {
+						options.push(<li className={this.classes.option + ' ' + this.m('selected', this.classes.option)} onClick={this.chooseOption.bind(this, option.value)} key={option.value + '-option'} data-value={option.value} dangerouslySetInnerHTML={{__html: this.props.renderOption(option)}} />);
 					}
 				}
-				
+
 				foundOptions.forEach(function (element) {
@@ -393,3 +403,3 @@ if (this.props.multiple) {
 				}.bind(this));
-				
+
 				if (options.length > 0) {
@@ -403,9 +413,23 @@ select = (
 			}
-			
+
 			if (this.props.multiple) {
 				selectStyle.height = this.props.height;
-				
+			}
+
+			return (
+				<div ref="select" className={this.classes.select} style={selectStyle}>
+					{select}
+				</div>
+			);
+		},
+
+		renderOutElement: function () {
+			var option = null,
+			    finalValue,
+			    finalValueOptions;
+
+			if (this.props.multiple) {
 				if (this.state.value) {
 					finalValueOptions = [];
-					
+
 					this.state.value.forEach(function (value, i) {
@@ -415,3 +439,3 @@ option = this.findByValue(this.props.options, value);
 					}.bind(this));
-					
+
 					finalValue = (
@@ -432,10 +456,36 @@ <select value={this.state.value} className={this.classes.out} name={this.props.name} multiple>
 			}
-			
+
+			return finalValue;
+		},
+
+		renderSearchField: function () {
+			var option,
+			    searchField,
+				labelValue,
+				labelClassName;
+
+			if (this.props.search) {
+				searchField = <input ref="search" onFocus={this.onFocus} onKeyDown={this.onKeyDown} onKeyPress={this.onKeyPress} onBlur={this.onBlur} className={this.classes.search} type="search" value={this.state.search} onChange={this.onChange} placeholder={this.props.placeholder} />;
+			} else {
+				if (!this.state.value) {
+					labelValue     = this.props.placeholder;
+					labelClassName = this.classes.search + ' ' + this.m('placeholder', this.classes.search);
+				} else {
+					option         = this.findByValue(this.props.options, this.state.value);
+					labelValue     = option.name;
+					labelClassName = this.classes.search;
+				}
+
+				searchField = <strong onClick={this.onFocus} className={labelClassName}>{labelValue}</strong>;
+			}
+
+			return searchField;
+		},
+
+		render: function () {
 			return (
 				<div className={this.classes.container}>
-					{finalValue}
-					<input ref="search" onFocus={this.onFocus} onKeyDown={this.onKeyDown} onKeyPress={this.onKeyPress} onBlur={this.onBlur} className={this.classes.search} type="search" value={this.state.search} onChange={this.onChange} placeholder={this.props.placeholder} />
-					<div ref="select" className={this.classes.select} style={selectStyle}>
-						{select}	
-					</div>
+					{this.renderOutElement()}
+					{this.renderSearchField()}
+					{this.renderOptions()}
 				</div>
@@ -449,2 +499,2 @@ );
 
-}).call(this);
+}).call(this);

package.json

 {
   "name": "react-select-search",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "React powered selectbox with filter",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -1,4 +0,4 @@
-# React Select Search (WIP)
+# React Select Search
 React powered selectbox with filter using [fuse.js](https://github.com/krisk/Fuse) (Javascript fuzzy-search).
-  
+
 _This is a work in progress and it may be a little buggy at this time. But feel free to test it and report any found bugs._  
@@ -22,2 +22,3 @@ _Example design comes from the [beautiful work](https://dribbble.com/shots/1079035-Select-Album?list=searches&tag=select&offset=20) by [Rovane Durso](https://dribbble.com/RovaneDurso)._
 	        placeholder="Choose country"
+            search={true}
 	        multiple={false}
@@ -36,3 +37,3 @@ height={height in pixels, used if multiple select}
     );
-    
+
 These are all available options. The React component renders a hidden field with the __name__ property and the current __value__ to use in forms.

No alert changes

Improved metrics

Total package byte prevSize

1753471

increased by0.27%

Lines of code

21832

increased by0.42%

Number of lines in readme file

38

increased by2.7%

No dependency changes