added sort prop, results are sortable now.

rewritten #3182 and resolves #3137
mui · Mar 11, 2016 · 2918f20 · 2918f20
1 parent d768a13
commit 2918f20
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 49 deletions.
diff --git a/docs/src/app/components/pages/components/AutoComplete/ExampleDataSources.jsx b/docs/src/app/components/pages/components/AutoComplete/ExampleDataSources.jsx
@@ -25,6 +25,11 @@ const dataSource1 = [
 
 const dataSource2 = ['12345', '23456', '34567'];
 
+const dataSource3 = [
+  {text: 'Some Text', value: 'someFirstValue'},
+  {text: 'Some Text', value: 'someSecondValue'},
+];
+
 const AutoCompleteExampleNoFilter = () => (
   <div>
     <AutoComplete
@@ -37,6 +42,12 @@ const AutoCompleteExampleNoFilter = () => (
       filter={AutoComplete.noFilter}
       openOnFocus={true}
       dataSource={dataSource2}
+    /><br />
+    <AutoComplete
+      floatingLabelText="Same text, different values"
+      filter={AutoComplete.noFilter}
+      triggerUpdateOnFocus={true}
+      dataSource={dataSource3}
     />
   </div>
 );

diff --git a/docs/src/app/components/pages/components/AutoComplete/ExampleFilters.jsx b/docs/src/app/components/pages/components/AutoComplete/ExampleFilters.jsx
@@ -53,6 +53,14 @@ const AutoCompleteExampleFilters = () => (
       dataSource={fruit}
       maxSearchResults={5}
     />
+    <br />
+    <AutoComplete
+      floatingLabelText="Sorted results"
+      sort={String.localeCompare}
+      filter={AutoComplete.noFilter}
+      openOnFocus={true}
+      dataSource={fruit}
+    />
   </div>
 );
 

diff --git a/src/auto-complete.jsx b/src/auto-complete.jsx
@@ -177,6 +177,10 @@ const AutoComplete = React.createClass({
      */
     searchText: React.PropTypes.string,
 
+    /**
+     * Compare callback used to sort the items.
+     */
+    sort: React.PropTypes.func,
     /**
      * Override the inline-styles of the root element.
      */
@@ -287,20 +291,10 @@ const AutoComplete = React.createClass({
 
   handleItemTouchTap(event, child) {
     const dataSource = this.props.dataSource;
-    let chosenRequest;
-    let index;
-    let searchText;
-
-    if (typeof dataSource[0] === 'string') {
-      chosenRequest = this.requestsList[parseInt(child.key, 10)];
-      index = dataSource.indexOf(chosenRequest);
-      searchText = dataSource[index];
-    } else {
-      chosenRequest = child.key;
-      index = dataSource.indexOf(
-        dataSource.filter((item) => chosenRequest === item.text)[0]);
-      searchText = chosenRequest;
-    }
+
+    const index = parseInt(child.key, 10);
+    const chosenRequest = dataSource[index];
+    const searchText = typeof chosenRequest === 'string' ? chosenRequest : chosenRequest.text;
 
     this.props.onNewRequest(chosenRequest, index);
 
@@ -416,6 +410,7 @@ const AutoComplete = React.createClass({
       openOnFocus,
       maxSearchResults,
       dataSource,
+      sort,
       ...other,
     } = this.props;
 
@@ -433,18 +428,48 @@ const AutoComplete = React.createClass({
 
     const requestsList = [];
 
-    dataSource.every((item) => {
+    dataSource.every((item, index) => {
       switch (typeof item) {
         case 'string':
-          if (this.props.filter(searchText, item, item)) {
-            requestsList.push(item);
+          if (this.props.filter(this.state.searchText, item, item)) {
+            requestsList.push({
+              text: item,
+              value: (
+                <MenuItem
+                  innerDivStyle={{overflow: 'hidden'}}
+                  value={item}
+                  primaryText={item}
+                  disableFocusRipple={disableFocusRipple}
+                  key={index}
+                />),
+            });
           }
           break;
 
         case 'object':
           if (item && typeof item.text === 'string') {
             if (this.props.filter(searchText, item.text, item)) {
-              requestsList.push(item);
+              if (item.value.type && (item.value.type.displayName === MenuItem.displayName ||
+                 item.value.type.displayName === Divider.displayName)) {
+                requestsList.push({
+                  text: item.text,
+                  value: React.cloneElement(item.value, {
+                    key: index,
+                    disableFocusRipple: this.props.disableFocusRipple,
+                  }),
+                });
+              } else {
+                requestsList.push({
+                  text: item.text,
+                  value: (
+                    <MenuItem
+                      innerDivStyle={{overflow: 'hidden'}}
+                      primaryText={item.value}
+                      disableFocusRipple={disableFocusRipple}
+                      key={index}
+                    />),
+                });
+              }
             }
           }
           break;
@@ -453,6 +478,10 @@ const AutoComplete = React.createClass({
       return !(maxSearchResults && maxSearchResults > 0 && requestsList.length === maxSearchResults);
     });
 
+    if (sort) {
+      requestsList.sort(sort);
+    }
+
     this.requestsList = requestsList;
 
     const menu = open && requestsList.length > 0 && (
@@ -467,37 +496,7 @@ const AutoComplete = React.createClass({
         listStyle={Object.assign(styles.list, listStyle)}
         style={Object.assign(styles.menu, menuStyle)}
       >
-        {
-          requestsList.map((request, index) => {
-            switch (typeof request) {
-              case 'string':
-                return (
-                  <MenuItem
-                    disableFocusRipple={disableFocusRipple}
-                    innerDivStyle={styles.innerDiv}
-                    key={index}
-                    value={request}
-                    primaryText={request}
-                  />
-                );
-
-              case 'object':
-                if (typeof request.text === 'string') {
-                  return React.cloneElement(request.value, {
-                    key: request.text,
-                    disableFocusRipple: disableFocusRipple,
-                  });
-                }
-
-                return React.cloneElement(request, {
-                  disableFocusRipple: disableFocusRipple,
-                });
-
-              default:
-                return null;
-            }
-          })
-        }
+        {requestsList.map((i) => i.value)}
       </Menu>
     );