Merge branch 'master' into github-releases

Author: fczuardi

packages/search-field/package.json

@@ -5,10 +5,7 @@
   "author": "Crave Food Systems and AUTHORS",
   "license": "MIT",
   "main": "lib/index.js",
-  "files": [
-    "AUTHORS",
-    "lib"
-  ],
+  "files": ["AUTHORS", "lib"],
   "publishConfig": {
     "access": "public"
   },
@@ -24,12 +21,7 @@
     "url": "https://github.com/CraveFood/farmblocks/issues"
   },
   "homepage": "https://github.com/CraveFood/farmblocks#readme",
-  "keywords": [
-    "farmblocks",
-    "react",
-    "search",
-    "input"
-  ],
+  "keywords": ["farmblocks", "react", "search", "input"],
   "peerDependencies": {
     "prop-types": "^15.6.0",
     "react": "^16.0.0",
@@ -43,6 +35,7 @@
     "@crave/farmblocks-input-select": "^0.8.2",
     "@crave/farmblocks-theme": "^1.6.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.isequal": "^4.5.0",
     "react-lifecycles-compat": "^3.0.4",
     "recompose": "^0.27.1"
   }

packages/search-field/src/SearchField.js

@@ -3,6 +3,7 @@ import { polyfill } from "react-lifecycles-compat";
 import PropTypes from "prop-types";
 import { compose } from "recompose";
 import debounce from "lodash.debounce";
+import isEqual from "lodash.isequal";
 import disabledTooltip, {
   disabledTooltipProps
 } from "@crave/farmblocks-hoc-disabled-tooltip";
@@ -28,6 +29,7 @@ class SearchField extends React.Component {
     focused: false,
     inputValue: "",
     lastValue: "",
+    lastItems: [],
     selectedItem: null
   };
 
@@ -64,13 +66,17 @@ class SearchField extends React.Component {
   };
 
   static getDerivedStateFromProps = (props, state) => {
-    if (props.value !== state.lastValue) {
+    if (
+      props.value !== state.lastValue ||
+      !isEqual(props.items, state.lastItems)
+    ) {
       const selectedItem =
         props.items && props.items.find(item => item.value === props.value);
       return {
         inputValue: selectedItem ? selectedItem.label : "",
         selectedItem,
-        lastValue: props.value
+        lastValue: props.value,
+        lastItems: props.items
       };
     }
     return null;

packages/search-field/src/SearchField.story.js

@@ -194,4 +194,45 @@ storiesOf("Search Field", module)
         </div>
       </div>
     ))
+  )
+  .add(
+    "update items",
+    withInfo()(() => {
+      class Test extends React.Component {
+        state = {
+          items,
+          value: "2"
+        };
+
+        render() {
+          return (
+            <div>
+              <button
+                onClick={() => {
+                  this.setState({
+                    value: "444"
+                  });
+
+                  setTimeout(() => {
+                    this.setState({
+                      items: [{ value: "444", label: "Avocado", image }]
+                    });
+                  }, 1000);
+                }}
+              >
+                Update items
+              </button>
+
+              <SearchField
+                value={this.state.value}
+                items={this.state.items}
+                label="Fruits"
+              />
+            </div>
+          );
+        }
+      }
+
+      return <Test />;
+    })
   );

packages/search-field/src/SearchField.test.js

@@ -140,13 +140,28 @@ describe("SearchField", () => {
     test("should return new state if value changes", () => {
       const item = { value: "ab", label: "AB" };
       const props = { value: "ab", items: [item] };
-      const state = { lastValue: "a" };
+      const state = { lastValue: "a", lastItems: [item] };
+      const result = SearchField.getDerivedStateFromProps(props, state);
+
+      expect(result).toEqual({
+        selectedItem: item,
+        inputValue: item.label,
+        lastValue: props.value,
+        lastItems: props.items
+      });
+    });
+
+    test("should return new state if items changes", () => {
+      const item = { value: "ab", label: "AB" };
+      const props = { value: "ab", items: [item] };
+      const state = { lastValue: "ab", lastItems: [] };
       const result = SearchField.getDerivedStateFromProps(props, state);
 
       expect(result).toEqual({
         selectedItem: item,
         inputValue: item.label,
-        lastValue: props.value
+        lastValue: props.value,
+        lastItems: props.items
       });
     });