Added renderMenuContainer prop.

README.md

@@ -97,6 +97,7 @@ You can override the built-in option renderer by specifying your own `optionRend
 | labelKey | `string` | Attribute of option that contains the display text. |
 | option | `Object` | The option to be rendered. |
 | options | `Array<Object>` | Array of options (objects) contained in the select menu. |
+| renderMenuContainer | `Function(menu)` | Allows you to add additional content around menu. Receives menu as argument. Use `{menu}` render menu. |
 | selectValue | `Function` | Callback to update the selected values; for example, you may want to call this function on click. |
 | style | `Object` | Styles that must be passed to the rendered option. These styles are specifying the position of each option (required for correct option displaying in the dropdown).
 | valueArray | `Array<Object>` | Array of the currently-selected options. Use this property to determine if your rendered option should be highlighted or styled differently. |

source/VirtualizedSelect/VirtualizedSelect.example.css

@@ -72,3 +72,36 @@
   text-decoration: underline;
   cursor: pointer;
 }
+
+.btnGroup {
+  display: flex;
+  flex-direction: row;
+
+}
+
+.btnGroup button {
+  flex: 1 1 0;
+  height: 30px;
+
+  background: #e0e0e0e0;
+
+  appearance: none;
+  border-radius: 0;
+  border-top: none;
+  border-right: none;
+  border-bottom: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+
+}
+
+.btnGroup button:hover {
+  background: #dcdcdc;
+}
+
+.btnGroup button:active {
+  background: #cdcdcdcd;
+}
+
+.btnGroup button:first-child {
+  border-left: none;
+}

source/VirtualizedSelect/VirtualizedSelect.example.js

@@ -9,8 +9,9 @@ export default class VirtualizedSelectExample extends Component {
   static propTypes = {
     cityData: PropTypes.array.isRequired,
     countryData: PropTypes.array.isRequired,
-    nameData: PropTypes.array.isRequired
-  };
+    nameData: PropTypes.array.isRequired,
+    animalData: PropTypes.array.isRequired
+  }
 
   constructor (props) {
     super(props)
@@ -29,16 +30,28 @@ export default class VirtualizedSelectExample extends Component {
       multi: false,
       searchable: true,
       selectedCreatable: null,
-      selectedCity: null
+      selectedCity: null,
+      selectedAnimal: null
     }
 
     this._loadGithubUsers = this._loadGithubUsers.bind(this)
   }
 
   render () {
-    const { cityData, countryData, nameData } = this.props
-    const { clearable, creatableOptions, disabled, githubUsers, multi, searchable, selectedCity, selectedCountry, selectedCreatable, selectedGithubUser, selectedName } = this.state
-
+    const { cityData, countryData, nameData, animalData } = this.props
+    const { clearable, creatableOptions, disabled, githubUsers, multi, searchable, selectedCity, selectedCountry, selectedCreatable, selectedGithubUser, selectedName, selectedAnimal } = this.state
+    const menuContainer = (menu) => {
+      const selectAll = () => this.setState({ selectedAnimal: animalData })
+      const clearAll = () => this.setState({ selectedAnimal: [] })
+      return (
+        <div>
+          <div className={styles.btnGroup}>
+            <button onClick={selectAll}>Select all</button><button onClick={clearAll}>Clear all</button>
+          </div>
+          {menu}
+        </div>
+      )
+    }
     return (
       <div>
         <h4 className={styles.header}>
@@ -196,6 +209,28 @@ export default class VirtualizedSelectExample extends Component {
           value={selectedCreatable}
           valueKey='value'
         />
+
+        <h4 className={styles.header}>
+          Decorated menu
+        </h4>
+
+        <div className={styles.description}>
+          Decorates menu with select and deselect all options
+        </div>
+
+        <VirtualizedSelect
+          labelKey='name'
+          multi
+          onChange={(selectedAnimal) => {
+            console.log(selectedAnimal)
+            this.setState({ selectedAnimal })
+          }}
+          options={animalData}
+          renderMenuContainer={menuContainer}
+          searchable
+          value={selectedAnimal}
+          valueKey='name'
+        />
       </div>
     )
   }

source/VirtualizedSelect/VirtualizedSelect.js

@@ -15,6 +15,7 @@ export default class VirtualizedSelect extends Component {
     maxHeight: PropTypes.number,
     optionHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
     optionRenderer: PropTypes.func,
+    renderMenuContainer: PropTypes.func,
     selectComponent: PropTypes.func
   };
 
@@ -62,7 +63,7 @@ export default class VirtualizedSelect extends Component {
 
   // See https://github.com/JedWatson/react-select/#effeciently-rendering-large-lists-with-windowing
   _renderMenu ({ focusedOption, focusOption, labelKey, onSelect, options, selectValue, valueArray, valueKey }) {
-    const { listProps, optionRenderer } = this.props
+    const { listProps, optionRenderer, renderMenuContainer } = this.props
     const focusedOptionIndex = options.indexOf(focusedOption)
     const height = this._calculateListHeight({ options })
     const innerRowRenderer = optionRenderer || this._optionRenderer
@@ -93,7 +94,7 @@ export default class VirtualizedSelect extends Component {
       })
     }
 
-    return (
+    const menu = (
       <AutoSizer disableHeight>
         {({ width }) => (
           <List
@@ -112,6 +113,7 @@ export default class VirtualizedSelect extends Component {
         )}
       </AutoSizer>
     )
+    return renderMenuContainer ? renderMenuContainer(menu) : menu
   }
 
   _calculateListHeight ({ options }) {

source/demo/Application.js

@@ -7,6 +7,7 @@ import VirtualizedSelectExample from '../VirtualizedSelect/VirtualizedSelect.exa
 import cityData from './data/cities.js'
 import countryData from './data/countries.js'
 import nameData from './data/names.js'
+import animalData from './data/animals'
 import styles from './Application.css'
 import '../../styles.css'
 
@@ -34,6 +35,7 @@ class Application extends Component {
             cityData={cityData}
             countryData={countryData}
             nameData={nameData}
+            animalData={animalData}
           />
         </section>
       </div>