react-select-search - npm Package Compare versions

Comparing version 0.9.3 to 0.9.4

dist/index.js

@@ -67,3 +67,5 @@ "use strict";
 
-        search = option.name;
+        if (option) {
+          search = option.name;
+        }
       }
@@ -207,4 +209,7 @@
       var nextState = {};
+      var _this$state = this.state,
+          defaultOptions = _this$state.defaultOptions,
+          value = _this$state.value;
 
-      if (nextProps.options !== this.state.defaultOptions) {
+      if (nextProps.options !== defaultOptions) {
         var flattenedOptions = (0, _FlattenOptions.default)(nextProps.options);
@@ -215,4 +220,12 @@ nextState.options = flattenedOptions;
 
-      if (nextProps.value !== this.state.value) {
-        nextState.value = nextProps.value;
+      if (nextProps.value !== value) {
+        var option = this.findByValue(defaultOptions, nextProps.value);
+
+        if (option) {
+          nextState.value = nextProps.value;
+          nextState.search = option.name;
+        } else {
+          nextState.value = '';
+          nextState.search = '';
+        }
       }
@@ -587,5 +600,5 @@
       var multiple = this.props.multiple;
-      var _this$state = this.state,
-          stateValue = _this$state.value,
-          foundOptions = _this$state.options;
+      var _this$state2 = this.state,
+          stateValue = _this$state2.value,
+          foundOptions = _this$state2.options;
 
@@ -592,0 +605,0 @@ if (foundOptions && foundOptions.length > 0) {

example/index.jsx

@@ -6,5 +6,2 @@ import React from 'react';
 
-const countryElement  = document.getElementById('countrySelect');
-const fontElement = document.getElementById('fontSelect');
-const friendsElement   = document.getElementById('friendsSelect');
 const fontStacks = [
@@ -43,7 +40,7 @@ {
 const friends = [
-    {name: 'Annie Cruz', value: 'annie.cruz', photo: 'https://randomuser.me/api/portraits/women/60.jpg'},
-    {name: 'Eli Shelton', value: 'eli.shelton', photo: 'https://randomuser.me/api/portraits/men/7.jpg'},
-    {name: 'Loretta Rogers', value: 'loretta.rogers', photo: 'https://randomuser.me/api/portraits/women/51.jpg'},
-    {name: 'Lloyd Fisher', value: 'lloyd.fisher', photo: 'https://randomuser.me/api/portraits/men/34.jpg'},
-    {name: 'Tiffany Gonzales', value: 'tiffany.gonzales', photo: 'https://randomuser.me/api/portraits/women/71.jpg'},
+    { name: 'Annie Cruz', value: 'annie.cruz', photo: 'https://randomuser.me/api/portraits/women/60.jpg' },
+    { name: 'Eli Shelton', value: 'eli.shelton', photo: 'https://randomuser.me/api/portraits/men/7.jpg' },
+    { name: 'Loretta Rogers', value: 'loretta.rogers', photo: 'https://randomuser.me/api/portraits/women/51.jpg' },
+    { name: 'Lloyd Fisher', value: 'lloyd.fisher', photo: 'https://randomuser.me/api/portraits/men/34.jpg' },
+    { name: 'Tiffany Gonzales', value: 'tiffany.gonzales', photo: 'https://randomuser.me/api/portraits/women/71.jpg' },
 ];
@@ -53,11 +50,7 @@ /** https://gist.github.com/Keeguon/2310008 */
 
-let fontStack;
+function renderFontValue(label, option) {
+    if (!option) {
+        return label;
+    }
 
-/** Render selectbox */
-render(
-    <SelectSearch name="font" value="Playfair Display" renderOption={renderFontOption} search={false} renderValue={renderFontValue} options={fontStacks} placeholder="Choose font" />,
-    fontElement,
-);
-
-function renderFontValue(label, option) {
     return <span style={{ fontFamily: option['data-stack'] }}>{label}</span>;
@@ -67,4 +60,8 @@ }
 function renderFontOption(option) {
-    let style = {
-        fontFamily: option['data-stack']
+    if (!('data-stack' in option)) {
+        return option.name;
+    }
+
+    const style = {
+        fontFamily: option['data-stack'],
     };
@@ -75,12 +72,2 @@
 
-render(
-    <SelectSearch
-        name="country"
-        mode="input"
-        value="SE"
-        options={countryOptions}
-        placeholder="Your country" />,
-    countryElement
-);
-
 function renderFriend(option) {
@@ -90,11 +77,60 @@ const imgStyle = {
         verticalAlign: 'middle',
-        marginRight: 10
+        marginRight: 10,
     };
 
-    return (<span><img style={imgStyle} width="40" height="40" src={option.photo} /><span>{option.name}</span></span>);
+    return (<span><img alt="" style={imgStyle} width="40" height="40" src={option.photo} /><span>{option.name}</span></span>);
 }
 
+class App extends React.Component {
+    state = {
+        font: 'Playfair Display',
+        country: 'SE',
+        friends: '',
+    };
+
+    clear = () => {
+        this.setState({
+            font: '',
+            country: '',
+            friends: '',
+        });
+    };
+
+    render() {
+        return (
+            <div>
+                <button type="button" className="clear" onClick={this.clear}>Clear values</button>
+                <SelectSearch
+                    name="font"
+                    value={this.state.font}
+                    renderOption={renderFontOption}
+                    search={false}
+                    renderValue={renderFontValue}
+                    options={fontStacks}
+                    placeholder="Choose font"
+                />
+                <SelectSearch
+                    name="country"
+                    mode="input"
+                    value={this.state.country}
+                    options={countryOptions}
+                    placeholder="Your country"
+                />
+                <SelectSearch
+                    name="friends"
+                    multiple
+                    value={this.state.friends}
+                    height={172}
+                    options={friends}
+                    placeholder="Search friends"
+                    renderOption={renderFriend}
+                />
+            </div>
+        );
+    }
+}
+
 render(
-    <SelectSearch name="friends" multiple={true} height={172} options={friends} placeholder="Search friends" renderOption={renderFriend} />,
-    friendsElement
+    <App />,
+    document.getElementById('app'),
 );

package.json

 {
   "name": "react-select-search",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "React powered selectbox with filter",
@@ -41,3 +41,3 @@ "main": "dist/index.js",
     "@babel/register": "^7.0.0-beta.40",
-    "ava": "next",
+    "ava": "^1.0.1",
     "babel-eslint": "^8.2.1",
@@ -44,0 +44,0 @@ "babel-loader": "^8.0.0-beta.0",

src/index.js

@@ -100,4 +100,5 @@ import React from 'react';
         const nextState = {};
+        const { defaultOptions, value } = this.state;
 
-        if (nextProps.options !== this.state.defaultOptions) {
+        if (nextProps.options !== defaultOptions) {
             const flattenedOptions = FlattenOptions(nextProps.options);
@@ -109,4 +110,12 @@
 
-        if (nextProps.value !== this.state.value) {
-            nextState.value = nextProps.value;
+        if (nextProps.value !== value) {
+            const option = this.findByValue(defaultOptions, nextProps.value);
+
+            if (option) {
+                nextState.value = nextProps.value;
+                nextState.search = option.name;
+            } else {
+                nextState.value = '';
+                nextState.search = '';
+            }
         }
@@ -152,3 +161,3 @@
         this.onBlur();
-    }
+    };
 
@@ -164,11 +173,14 @@ onBlur = () => {
             const option = this.findByValue(null, this.state.value);
-            search = option.name;
+
+            if (option) {
+                search = option.name;
+            }
         }
 
         this.setState({ focus: false, highlighted: null, search });
-    }
+    };
 
     onFocus = () => {
         this.setState({ focus: true, options: this.state.defaultOptions, search: '' });
-    }
+    };
 
@@ -186,3 +198,3 @@ onChange = (e) => {
         this.setState({ search: value, options });
-    }
+    };
 
@@ -198,3 +210,3 @@ onKeyPress = (e) => {
         }
-    }
+    };
 
@@ -221,3 +233,3 @@ onKeyDown = (e) => {
         }
-    }
+    };
 
@@ -229,3 +241,3 @@ onKeyUp = (e) => {
         }
-    }
+    };
 
@@ -375,3 +387,3 @@ /**
         }
-    }
+    };
 
@@ -378,0 +390,0 @@ chooseOption(value) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

408356

increased by9.15%

Number of package files

34

increased by30.77%

Lines of code

2026

increased by2.84%

No dependency changes