Replace deprecated React.createClass with class syntax

Author: CMTegner

examples/async-data/app.js

@@ -3,15 +3,13 @@ import DOM from 'react-dom'
 import Autocomplete from '../../lib/index'
 import { getStates, styles, fakeRequest } from '../../lib/utils'
 
-let App = React.createClass({
+class App extends React.Component {
 
-  getInitialState() {
-    return {
+  state = {
       value: '',
       unitedStates: getStates(),
       loading: false
     }
-  },
 
   render() {
     return (
@@ -53,7 +51,7 @@ let App = React.createClass({
       </div>
     )
   }
-})
+}
 
 DOM.render(<App/>, document.getElementById('container'))
 

examples/custom-menu/app.js

@@ -3,15 +3,17 @@ import DOM from 'react-dom'
 import Autocomplete from '../../lib/index'
 import { getStates, styles, fakeRequest } from '../../lib/utils'
 
-let App = React.createClass({
+class App extends React.Component {
 
-  getInitialState() {
-    return {
+  constructor(props) {
+    super(props)
+    this.state = {
       value: '',
       unitedStates: getStates(),
       loading: false
     }
-  },
+    this.renderItems = this.renderItems.bind(this)
+  }
 
   render() {
     return (
@@ -56,7 +58,7 @@ let App = React.createClass({
         />
       </div>
     )
-  },
+  }
 
   renderItems(items) {
     return items.map((item, index) => {
@@ -75,7 +77,7 @@ let App = React.createClass({
       }
     })
   }
-})
+}
 
 DOM.render(<App/>, document.getElementById('container'))
 

examples/static-data/app.js

@@ -3,10 +3,8 @@ import DOM from 'react-dom'
 import { getStates, matchStateToTerm, sortStates, styles } from '../../lib/utils'
 import Autocomplete from '../../lib/index'
 
-let App = React.createClass({
-  getInitialState() {
-    return { value: 'Ma' }
-  },
+class App extends React.Component {
+  state = { value: 'Ma' }
   render() {
     return (
       <div>
@@ -35,7 +33,7 @@ let App = React.createClass({
       </div>
     )
   }
-})
+}
 
 DOM.render(<App/>, document.getElementById('container'))
 

lib/Autocomplete.js

@@ -15,9 +15,9 @@ const IMPERATIVE_API = [
   'setRangeText',
 ]
 
-let Autocomplete = React.createClass({
+class Autocomplete extends React.Component {
 
-  propTypes: {
+  static propTypes = {
     /**
      * The items to display in the dropdown menu
      */
@@ -120,10 +120,9 @@ let Autocomplete = React.createClass({
      */
     open: PropTypes.bool,
     debug: PropTypes.bool,
-  },
+  }
 
-  getDefaultProps() {
-    return {
+  static defaultProps = {
       value: '',
       wrapperProps: {},
       wrapperStyle: {
@@ -148,22 +147,29 @@ let Autocomplete = React.createClass({
       autoHighlight: true,
       onMenuVisibilityChange() {},
     }
-  },
 
-  getInitialState() {
-    return {
+  constructor(props) {
+    super(props)
+    this.state = {
       isOpen: false,
       highlightedIndex: null,
     }
-  },
+    this.exposeAPI = this.exposeAPI.bind(this)
+    this.handleInputFocus = this.handleInputFocus.bind(this)
+    this.handleInputBlur = this.handleInputBlur.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.handleKeyUp = this.handleKeyUp.bind(this)
+    this.handleInputClick = this.handleInputClick.bind(this)
+  }
 
   componentWillMount() {
     // this.refs is frozen, so we need to assign a new object to it
     this.refs = {}
     this._ignoreBlur = false
     this._performAutoCompleteOnUpdate = false
     this._performAutoCompleteOnKeyUp = false
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     this._performAutoCompleteOnUpdate = true
@@ -176,13 +182,13 @@ let Autocomplete = React.createClass({
       this.state.highlightedIndex >= nextProps.items.length) {
       this.setState({ highlightedIndex: null })
     }
-  },
+  }
 
   componentDidMount() {
     if (this.isOpen()) {
       this.setMenuPositions()
     }
-  },
+  }
 
   componentDidUpdate(prevProps, prevState) {
     if ((this.state.isOpen && !prevState.isOpen) || ('open' in this.props && this.props.open && !prevProps.open))
@@ -201,12 +207,12 @@ let Autocomplete = React.createClass({
     if (this._ignoreBlur) {
       this.refs.input.focus()
     }
-  },
+  }
 
   exposeAPI(el) {
     this.refs.input = el
     IMPERATIVE_API.forEach(ev => this[ev] = (el && el[ev] && el[ev].bind(el)))
-  },
+  }
 
   maybeScrollItemIntoView() {
     if (this.isOpen() && this.state.highlightedIndex !== null) {
@@ -220,32 +226,32 @@ let Autocomplete = React.createClass({
         )
       }
     }
-  },
+  }
 
   handleKeyDown(event) {
-    if (this.keyDownHandlers[event.key])
-      this.keyDownHandlers[event.key].call(this, event)
+    if (Autocomplete.keyDownHandlers[event.key])
+      Autocomplete.keyDownHandlers[event.key].call(this, event)
     else if (!this.isOpen()) {
       this.setState({
         isOpen: true
       })
     }
-  },
+  }
 
   handleChange(event) {
     this._performAutoCompleteOnKeyUp = true
     this.setState({ highlightedIndex: null })
     this.props.onChange(event, event.target.value)
-  },
+  }
 
   handleKeyUp() {
     if (this._performAutoCompleteOnKeyUp) {
       this._performAutoCompleteOnKeyUp = false
       this.maybeAutoCompleteText()
     }
-  },
+  }
 
-  keyDownHandlers: {
+  static keyDownHandlers = {
     ArrowDown(event) {
       event.preventDefault()
       const itemsLength = this.getFilteredItems().length
@@ -323,7 +329,7 @@ let Autocomplete = React.createClass({
       // In case the user is currently hovering over the menu
       this.setIgnoreBlur(false)
     },
-  },
+  }
 
   getFilteredItems() {
     let items = this.props.items
@@ -341,7 +347,7 @@ let Autocomplete = React.createClass({
     }
 
     return items
-  },
+  }
 
   maybeAutoCompleteText() {
     if (!this.props.autoHighlight || this.props.value === '')
@@ -358,7 +364,7 @@ let Autocomplete = React.createClass({
     ) === 0)
     if (itemValueDoesMatch && highlightedIndex === null)
       this.setState({ highlightedIndex: 0 })
-  },
+  }
 
   setMenuPositions() {
     const node = this.refs.input
@@ -372,11 +378,11 @@ let Autocomplete = React.createClass({
       menuLeft: rect.left + marginLeft,
       menuWidth: rect.width + marginLeft + marginRight
     })
-  },
+  }
 
   highlightItemFromMouse(index) {
     this.setState({ highlightedIndex: index })
-  },
+  }
 
   selectItemFromMouse(item) {
     const value = this.props.getItemValue(item)
@@ -389,11 +395,11 @@ let Autocomplete = React.createClass({
       this.setIgnoreBlur(false)
       this.props.onSelect(value, item)
     })
-  },
+  }
 
   setIgnoreBlur(ignore) {
     this._ignoreBlur = ignore
-  },
+  }
 
   renderMenu() {
     const items = this.getFilteredItems().map((item, index) => {
@@ -420,7 +426,7 @@ let Autocomplete = React.createClass({
       onMouseEnter: () => this.setIgnoreBlur(true),
       onMouseLeave: () => this.setIgnoreBlur(false),
     })
-  },
+  }
 
   handleInputBlur(event) {
     if (this._ignoreBlur) {
@@ -434,7 +440,7 @@ let Autocomplete = React.createClass({
     if (onBlur) {
       onBlur(event)
     }
-  },
+  }
 
   handleInputFocus(event) {
     if (this._ignoreBlur) {
@@ -445,28 +451,28 @@ let Autocomplete = React.createClass({
     if (onFocus) {
       onFocus(event)
     }
-  },
+  }
 
   isInputFocused() {
     const el = this.refs.input
     return el.ownerDocument && (el === el.ownerDocument.activeElement)
-  },
+  }
 
   handleInputClick() {
     // Input will not be focused if it's disabled
     if (this.isInputFocused() && !this.isOpen())
       this.setState({ isOpen: true })
-  },
+  }
 
   composeEventHandlers(internal, external) {
     return external
       ? e => { internal(e); external(e) }
       : internal
-  },
+  }
 
   isOpen() {
     return 'open' in this.props ? this.props.open : this.state.isOpen
-  },
+  }
 
   render() {
     if (this.props.debug) { // you don't like it, you love it
@@ -504,7 +510,7 @@ let Autocomplete = React.createClass({
       </div>
     )
   }
-})
+}
 
 module.exports = Autocomplete