Update build config and use class methods for event handlers

Author: insin

.gitignore

@@ -1,6 +1,7 @@
-coverage
-demo/dist
-lib
-node_modules
-npm-debug.log
-umd
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*

.travis.yml

@@ -2,14 +2,7 @@ sudo: false
 
 language: node_js
 node_js:
-  - 4.2
-
-cache:
-  directories:
-    - node_modules
-
-after_success:
-  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
+  - 6
 
 branches:
   only:

CHANGES.md

@@ -1,4 +1,10 @@
-# 1.2.4 / 2015-11-12
+**Breaking:** Now requires React >= 0.14.9.
+
+Changed: use `React.Component` and the prop-types module to avoid deprecation warnings.
+
+Changed: link to [unpkg](https://npmcdn.com/) for UMD build distribution.
+
+# 0.4.2 / 2015-11-12
 
 Changed UMD build directory.
 

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2015 Jonny Buchanan
+Copyright (c) 2017 Jonny Buchanan
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,7 +1,6 @@
 # react-filtered-multiselect
 
 [![Travis][build-badge]][build]
-[![Codecov][coverage-badge]][coverage]
 [![npm package][npm-badge]][npm]
 
 A `<FilteredMultiSelect/>` React component, for making and adding to selections using a filtered multi-select.
@@ -34,31 +33,31 @@ Double-clicking will add the selected option to the selection.
 
 **Node**
 
-````
+```
 npm install react-filtered-multiselect
 ```
 
 ```javascript
-var FilteredMultiSelect = require('react-filtered-multiselect')
-// or
 import FilteredMultiSelect from 'react-filtered-multiselect'
+// or
+const FilteredMultiSelect = require('react-filtered-multiselect')
 ```
 
 **Browser**
 
 Browser bundles export a global ``FilteredMultiSelect`` variable and expect to find a global ``React`` variable to work with.
 
-* [react-filtered-multiselect.js](https://npmcdn.com/react-filtered-multiselect/umd/react-filtered-multiselect.js) (development version)
-* [react-filtered-multiselect.min.js](https://npmcdn.com/react-filtered-multiselect/umd/react-filtered-multiselect.min.js) (compressed production version)
+* [react-filtered-multiselect.js](https://unpkg.com/react-filtered-multiselect/umd/react-filtered-multiselect.js) (development version)
+* [react-filtered-multiselect.min.js](https://unpkg.com/react-filtered-multiselect/umd/react-filtered-multiselect.min.js) (compressed production version)
 
 ## API
 
 ### Required props
 
 Minimal usage:
 
-```javascript
-var options = [
+```js
+let options = [
   {value: 1, text: 'Item One'},
   {value: 2, text: 'Item Two'}
 ]
@@ -71,7 +70,7 @@ var options = [
 
 `options` - list of objects providing `<option>` data for the multi-select. By default, these should have ``text`` and ``value`` properties, but this is configurable via props.
 
-The component will update its display if its `options` list changes length or is replaced with a different list, but it will *not* be able to detect changes which don't affect length or object equality, such as replacement of one option with another. Consider using `react-addons-update` or other immutability helpers if you need to do this.
+The component will update its display if its `options` list changes length or is replaced with a different list, but it will *not* be able to detect changes which don't affect length or object equality, such as replacement of one option with another. Consider using [immutability-helper](https://github.com/kolodny/immutability-helper) or other immutability libraries if you need to do this.
 
 `onChange(selectedOptions)` - callback which will be called with selected option objects each time the selection is added to.
 
@@ -102,7 +101,7 @@ the `value` for its `<option>`.
 
 ### Default props
 
-```javascript
+```js
 {
   buttonText: 'Select',
   className: 'FilteredMultiSelect',
@@ -127,28 +126,27 @@ the `value` for its `<option>`.
 
 Example which implements display of selected items and de-selection.
 
-```javascript
-var CULTURE_SHIPS = [
+```js
+const CULTURE_SHIPS = [
   {id: 1, name: '5*Gelish-Oplule'},
   {id: 2, name: '7*Uagren'},
 // ...
   {id: 249, name: 'Zero Gravitas'},
   {id: 250, name: 'Zoologist'}
 ]
 
-var Example = React.createClass({
-  getInitialState() {
-    return {selectedShips: []}
-  },
+class Example extends React.Component {
+  state = {selectedShips: []}
 
   handleDeselect(index) {
     var selectedShips = this.state.selectedShips.slice()
     selectedShips.splice(index, 1)
     this.setState({selectedShips})
-  },
-  handleSelectionChange(selectedShips) {
+  }
+
+  handleSelectionChange = (selectedShips) => {
     this.setState({selectedShips})
-  },
+  }
 
   render() {
     var {selectedShips} = this.state
@@ -164,22 +162,19 @@ var Example = React.createClass({
       {selectedShips.length > 0 && <ul>
         {selectedShips.map((ship, i) => <li key={ship.id}>
           {`${ship.name} `}
-          <button type="button" onClick={this.handleDeselect.bind(null, i)}>
+          <button type="button" onClick={() => this.handleDeselect(i)}>
             &times;
           </button>
         </li>)}
       </ul>}
     </div>
   }
-})
+}
 ```
 ## MIT Licensed
 
-[build-badge]: https://img.shields.io/travis/insin/react-filtered-multiselect/master.svg
+[build-badge]: https://img.shields.io/travis/insin/react-filtered-multiselect/master.png?style=flat-square
 [build]: https://travis-ci.org/insin/react-filtered-multiselect
 
-[coverage-badge]: https://img.shields.io/codecov/c/github/insin/react-filtered-multiselect.svg
-[coverage]: https://codecov.io/github/insin/react-filtered-multiselect
-
-[npm-badge]: https://img.shields.io/npm/v/react-filtered-multiselect.svg
+[npm-badge]: https://img.shields.io/npm/v/react-filtered-multiselect.png?style=flat-square
 [npm]: https://www.npmjs.org/package/react-filtered-multiselect

demo/src/index.js

@@ -11,28 +11,27 @@ const BOOTSTRAP_CLASSES = {
   filter: 'form-control',
   select: 'form-control',
   button: 'btn btn btn-block btn-default',
-  buttonActive: 'btn btn btn-block btn-primary'
+  buttonActive: 'btn btn btn-block btn-primary',
 }
 
-var BasicSelection = React.createClass({
-  getInitialState() {
-    return {
-      selectedOptions: []
-    }
-  },
+class BasicSelection extends React.Component {
+  state = {
+    selectedOptions: []
+  }
 
-  handleClearSelection() {
-    this.setState({selectedOptions: []})
-  },
   handleDeselect(index) {
     var selectedOptions = this.state.selectedOptions.slice()
     selectedOptions.splice(index, 1)
     this.setState({selectedOptions})
-  },
-  handleSelectionChange(selectedOptions) {
+  }
+
+  handleClearSelection = (e) => {
+    this.setState({selectedOptions: []})
+  }
+  handleSelectionChange = (selectedOptions) => {
     selectedOptions.sort((a, b) => a.id - b.id)
     this.setState({selectedOptions})
-  },
+  }
 
   render() {
     var {selectedOptions} = this.state
@@ -53,7 +52,7 @@ var BasicSelection = React.createClass({
         {selectedOptions.length > 0 && <ol>
           {selectedOptions.map((ship, i) => <li key={ship.id}>
             {`${ship.name} `}
-            <span style={{cursor: 'pointer'}} onClick={this.handleDeselect.bind(null, i)}>
+            <span style={{cursor: 'pointer'}} onClick={() => this.handleDeselect(i)}>
               &times;
             </span>
           </li>)}
@@ -64,26 +63,24 @@ var BasicSelection = React.createClass({
       </div>
     </div>
   }
-})
+}
 
-var AddRemoveSelection = React.createClass({
-  getInitialState() {
-    return {
-      selectedOptions: []
-    }
-  },
+class AddRemoveSelection extends React.Component {
+  state = {
+    selectedOptions: []
+  }
 
-  handleDeselect(deselectedOptions) {
+  handleDeselect = (deselectedOptions) => {
     var selectedOptions = this.state.selectedOptions.slice()
     deselectedOptions.forEach(option => {
       selectedOptions.splice(selectedOptions.indexOf(option), 1)
     })
     this.setState({selectedOptions})
-  },
-  handleSelect(selectedOptions) {
+  }
+  handleSelect = (selectedOptions) => {
     selectedOptions.sort((a, b) => a.id - b.id)
     this.setState({selectedOptions})
-  },
+  }
 
   render() {
     var {selectedOptions} = this.state
@@ -116,9 +113,9 @@ var AddRemoveSelection = React.createClass({
       </div>
     </div>
   }
-})
+}
 
-var App = React.createClass({
+class App extends React.Component {
   render() {
     return <div className="container">
       <div className="row header">
@@ -137,12 +134,6 @@ var App = React.createClass({
       <AddRemoveSelection/>
     </div>
   }
-})
-
-var app = document.querySelector('#app')
-if (!app) {
-  app = document.createElement('div')
-  app.id = 'app'
-  document.body.appendChild(app)
 }
-render(<App/>, app)
+
+render(<App/>, document.querySelector('#demo'))

nwb.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  type: 'react-component',
+  npm: {
+    umd: {
+      global: 'FilteredMultiSelect',
+      externals: {
+        react: 'React'
+      }
+    }
+  }
+}

package.json

@@ -1,36 +1,37 @@
 {
   "name": "react-filtered-multiselect",
-  "description": "Filtered multi-select React component",
   "version": "0.4.2",
+  "description": "Filtered multi-select React component",
   "main": "lib/index.js",
-  "jsnext:main": "src/index.js",
-  "global": "FilteredMultiSelect",
-  "externals": {
-    "react": "React"
-  },
-  "homepage": "https://github.com/insin/react-filtered-multiselect",
-  "license": "MIT",
-  "author": "Jonny Buchanan <[email protected]>",
-  "scripts": {
-    "test": "nwb lint"
-  },
+  "module": "es/index.js",
   "files": [
+    "es",
     "lib",
-    "src",
     "umd"
   ],
+  "scripts": {
+    "build": "nwb build-react-component",
+    "clean": "nwb clean-module && nwb clean-demo",
+    "lint": "eslint src demo",
+    "start": "nwb serve-react-demo",
+    "test": "npm run lint"
+  },
   "dependencies": {
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
-    "react": ">=0.14.0"
+    "react": ">=0.14.9"
   },
   "devDependencies": {
-    "bootstrap": "3.3.5",
-    "nwb": "*",
-    "react": "0.14.2",
-    "react-dom": "0.14.2"
+    "bootstrap": "3.3.x",
+    "eslint-config-jonnybuchanan": "5.0.x",
+    "nwb": "0.16.x",
+    "react": "15.x",
+    "react-dom": "15.x"
   },
+  "author": "Jonny Buchanan <[email protected]>",
+  "homepage": "https://github.com/insin/react-filtered-multiselect",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/insin/react-filtered-multiselect.git"