migrate react 16.4

components/Carousel/Carousel.jsx

@@ -8,27 +8,30 @@ import IconArrowMinimalLeft from '../Icons/IconArrowMinimalLeft'
 import IconArrowMinimalRight from '../Icons/IconArrowMinimalRight'
 
 export default class Carousel extends Component {
-  componentWillMount() {
-    this.handleResize = this.handleResize.bind(this)
-    window.addEventListener('resize', this.handleResize)
+  constructor(props) {
+    super(props)
     this.handlePageUp = this.handlePageUp.bind(this)
     this.handlePageDown = this.handlePageDown.bind(this)
-    this.setState({firstVisibleItem: this.props.firstVisibleItem || 0})
+    this.handleResize = this.handleResize.bind(this)
+    this.state = {
+      firstVisibleItem: this.props.firstVisibleItem || 0
+    }
   }
 
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.handleResize)
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize)
+    this.validatePagers()
   }
 
-  handleResize() {
+  componentDidUpdate() {
     this.validatePagers()
   }
 
-  componentDidMount() {
-    this.validatePagers()    
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize)
   }
 
-  componentDidUpdate() {
+  handleResize() {
     this.validatePagers()
   }
 
@@ -118,4 +121,4 @@ export default class Carousel extends Component {
       </div>
     )
   }
-}
+}

components/Drawer/Drawer.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import MuiDrawer from 'material-ui/Drawer'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 
@@ -110,4 +111,4 @@ Drawer.propTypes = {
   zDepth: PropTypes.number
 }
 
-export default Drawer
+export default Drawer

components/ExampleNav/ExampleNavContainer.js

@@ -78,9 +78,9 @@ class ExampleNavContainer extends Component {
     const { onClick, onBack } = this
 
     if (root) {
-      return React.createElement(ExampleNav, { links, onClick })
+      return <ExampleNav links={links} onClick={onClick} />
     } else {
-      return React.createElement(ExampleNav, { links, onBack })
+      return <ExampleNav links={links} onBack={onBack} />
     }
   }
 }

components/FilePicker/FilePicker.jsx

@@ -15,12 +15,25 @@ class FilePicker extends React.Component {
     this.onChange = this.onChange.bind(this)
   }
 
-  onChange(event) {
-    this.props.onSuccess(this.props.options.multiple ? event.fpfiles : event.fpfile)
+  static getDerivedStateFromProps(nextProps, prevState){
+    const dragText =  nextProps.options.dragText
+    // every setState will invoke this, so cache dragText
+    if(prevState.preDragText === undefined) {
+      return {
+        preDragText: nextProps.options.dragText
+      }
+    }
+
+    // if props change
+    if (nextProps.options.dragText !== prevState.preDragText) {
+      prevState.preDragText = dragText
+      prevState.dragText = dragText
+    }
+    return  prevState
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({dragText: nextProps.options.dragText})
+  onChange(event) {
+    this.props.onSuccess(this.props.options.multiple ? event.fpfiles : event.fpfile)
   }
 
   componentDidMount() {

components/FilePicker/FilePickerExample.jsx

@@ -3,7 +3,7 @@ import FilePicker from './FilePicker'
 
 const FilePickerExample = () => {
   const onFileUpload = (files) => {
-    alert(JSON.strinigify(files, null, 2))
+    alert(JSON.stringify(files, null, 2))
   }
 
   const FILE_PICKER_API_KEY = process.env.FILE_PICKER_API_KEY_DEV
@@ -36,4 +36,4 @@ const FilePickerExample = () => {
 
 }
 
-module.exports = FilePickerExample
+module.exports = FilePickerExample

components/Formsy/CheckboxGroup.jsx

@@ -73,7 +73,7 @@ class CheckboxGroup extends Component {
   }
 }
 
-CheckboxGroup.PropTypes = {
+CheckboxGroup.propTypes = {
   options: PropTypes.arrayOf(PropTypes.object).isRequired
 }
 

components/Formsy/FormsySelect.jsx

@@ -9,6 +9,7 @@ import './FormsySelect.scss'
  * This component is a formsy wrapper for the React Select component
  * @param {Object} props Component props
  */
+
 const FormsySelect = props => {
   const { onChange, wrapperClass, label } = props
   const selectedOption = props.getValue()
@@ -22,12 +23,19 @@ const FormsySelect = props => {
   return (
     <div className={cn(wrapperClass, 'formsySelectComponent')}>
       <label className="tc-label">{label}</label>
-      <Select {...props} value={value} onChange={onSelectionChange} />
+      <Select
+        {...props}
+        value={value}
+        className="basic-single-select"
+        classNamePrefix="select"
+        isClearable
+        onChange={onSelectionChange}
+      />
     </div>
   )
 }
 
-FormsySelect.PropTypes = {
+FormsySelect.propTypes = {
   onChange: PropTypes.func,
   setValueOnly: PropTypes.bool,
   options: PropTypes.array.isRequired

components/Formsy/FormsySelect.scss

@@ -1,6 +1,14 @@
 @import "~tc-ui/src/styles/tc-includes";
 
 :global {
+  .basic-single-select{
+    .select__input {
+      input {
+        height: 10px;
+      }
+    }
+
+  }
   .formsySelectComponent {
     .Select-control > .Select-input > input,
     .Select-control > .Select-input > input:focus {

components/Formsy/PasswordInput.jsx

@@ -12,7 +12,7 @@ class PasswordInput extends Component {
 
   constructor(props) {
     super(props)
-    
+
     this.changeValue = this.changeValue.bind(this)
     this.toggleShowHide = this.toggleShowHide.bind(this)
     this.isValidInput= this.isValidInput.bind(this)
@@ -76,7 +76,7 @@ class PasswordInput extends Component {
           className={classes}
           type={this.state.type}
           placeholder={placeholder}
-          value={this.props.getValue()}
+          value={this.props.getValue() || ''}
           disabled={disabled}
           onChange={this.changeValue}
           maxLength={maxLength}

components/Formsy/RadioGroup.jsx

@@ -37,7 +37,7 @@ class RadioGroup extends Component {
         const price = (radio.quoteUp || 0) - (selectedOption.quoteUp || 0)
         return (price < 0 ? '-' : '+') + ' $' + numberWithCommas(Math.abs(price))
       }
-      const checked = (selectedOption && selectedOption.value === radio.value)
+      const checked = (selectedOption && selectedOption.value === radio.value) || false
       const disabled = this.props.isFormDisabled() || radio.disabled || this.props.disabled
       const rClass = cn('radio', { disabled, selected: checked })
       const id = name+'-opt-'+key
@@ -81,7 +81,7 @@ class RadioGroup extends Component {
 }
 
 
-RadioGroup.PropTypes = {
+RadioGroup.propTypes = {
   options: PropTypes.arrayOf(PropTypes.object).isRequired
 }
 

components/Formsy/TextInput.jsx

@@ -67,7 +67,7 @@ class TextInput extends Component {
           className={classes}
           type={type}
           placeholder={placeholder}
-          value={value}
+          value={value || ''}
           disabled={disabled}
           onChange={this.changeValue}
           maxLength={maxLength}

components/Formsy/TimezoneInput.jsx

@@ -54,7 +54,7 @@ class TimezoneInput extends React.Component {
   }
 }
 
-TimezoneInput.PropTypes = {
+TimezoneInput.propTypes = {
   render: PropTypes.func.isRequired
 }
 

components/ImageViewer/ImageViewerContainer.coffee

@@ -26,7 +26,7 @@ class ImageViewer extends React.Component
     this.updateArrowsState = this.updateArrowsState.bind this
     this.toggleZoom = this.toggleZoom.bind this
 
-  componentWillMount: ->
+  componentDidMount: ->
     this.props.onFileChange({file: this.state.file}) if this.props.onFileChange
 
   componentWillUpdate: ->
@@ -76,4 +76,4 @@ class ImageViewer extends React.Component
       selectFile:        this.selectFile
       toggleZoom:        this.toggleZoom
 
-module.exports = ImageViewer
+module.exports = ImageViewer

components/ImageViewer/ImageViewerExamples.cjsx

@@ -20,8 +20,8 @@ ImageViewerExamples = ->
   <div className="ImageViewerExamples">
     <h1>With Files (Required)</h1>
     <div className="imageViewer">
-      <ImageViewerContainer files={files}, initialFile={files[1]}/>
+      <ImageViewerContainer files={files} initialFile={files[1]}/>
     </div>
   </div>
 
-module.exports = ImageViewerExamples
+module.exports = ImageViewerExamples

components/LoginScreen/LoginScreenExamples.jsx

@@ -3,7 +3,7 @@ import LoginScreen from './index.jsx'
 
 const LoginScreenExamples = () => (
   <div className="flex column middle">
-    <LoginScreen />
+    <LoginScreen vm={{submit: () => {}}}/>
   </div>
 )
 

components/MenuBar/MenuBar.jsx

@@ -7,9 +7,17 @@ import NavLink from '../NavLink/NavLink'
 require('./MenuBar.scss')
 
 export default class MenuBar extends Component {
-  componentWillMount() {
+  constructor(props) {
+    super(props)
+
     this.handleResize = this.handleResize.bind(this)
-    this.handleResize()
+
+    this.state = {
+      mobile : window.innerWidth <= this.props.mobileBreakPoint
+    }
+  }
+
+  componentDidMount() {
     window.addEventListener('resize', this.handleResize)
   }
 
@@ -21,7 +29,6 @@ export default class MenuBar extends Component {
     this.setState({ mobile: window.innerWidth <= this.props.mobileBreakPoint })
   }
 
-
   renderLinkDom(item, linkContent, itemClass, linkTarget) {
     // _.self forces a full page refresh using underlying Link
     linkTarget = item.target || null

components/RegistrationScreen/index.jsx

@@ -243,7 +243,7 @@ class RegistrationScreen extends Component {
               label={renderRequired('Country')}
               name="country"
               value=""
-              options={countryList}
+              options={countryList || []}
               onChange={this.onCountryChange}
               required
               placeholder="- Select country -"

components/RichDataTable/RichDataTableExample.jsx

@@ -3,7 +3,15 @@ require('./RichDataTableExample.scss')
 import React from'react'
 import RichDataTableHeader from './RichDataTableHeader'
 
-const columns = ['Type', 'Projects', 'Status', 'Status Date', 'Customer', 'Copilot']
+const columns = [
+  {key: 'Type'},
+  {key: 'Projects'},
+  {key: 'Status'},
+  {key: 'Status Date'},
+  {key: 'Customer'},
+  {key: 'Copilot'}
+]
+
 const sortColumns = {
   Projects: [
     {

components/SearchBar/SearchBar.jsx

@@ -9,10 +9,16 @@ import classNames from 'classnames'
 
 //states: empty, filled, focused
 
+
+
+const getQueryStringValue = (key) => {
+  return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1'))
+}
+
 class SearchBar extends Component {
   constructor(props) {
     super(props)
-    const initialTerm = this.getQueryStringValue(props.searchTermKey)
+    const initialTerm = getQueryStringValue(props.searchTermKey)
     this.state = {
       searchState: initialTerm.length > 0 ? 'filled' : 'empty',
       suggestions: [],
@@ -30,8 +36,28 @@ class SearchBar extends Component {
     this.handleSuggestionsUpdate = this.handleSuggestionsUpdate.bind(this)
   }
 
-  getQueryStringValue (key) {
-    return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1'))
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const searchVal = getQueryStringValue(nextProps.searchTermKey)
+    // every setState will invoke this, so cache preSearchVal
+    if(prevState.preSearchVal === undefined) {
+      return {
+        preSearchVal: searchVal
+      }
+    }
+    // if props change
+    if (searchVal !== prevState.preSearchVal) {
+      if(searchVal !== prevState.searchVal) {
+        return {
+          searchState: 'filled',
+          searchValue: searchVal,
+          preSearchVal: searchVal
+        }
+      }
+      //cache preSearchVal
+      prevState.preSearchVal = searchVal
+    }
+    return  prevState
   }
 
   componentDidMount() {
@@ -42,12 +68,6 @@ class SearchBar extends Component {
     window.removeEventListener('click', this.handleOutsideClick)
   }
 
-  componentWillReceiveProps(nextProps) {
-    const searchVal = this.getQueryStringValue(nextProps.searchTermKey)
-    if (searchVal !== this.state.searchValue) {
-      this.setState({ searchState: 'filled', searchValue: searchVal })
-    }
-  }
 
   handleOutsideClick(evt) {
     let t = evt.target
@@ -121,7 +141,7 @@ class SearchBar extends Component {
     this.refs.searchValue.value = ''
     this.setState({ searchValue: this.refs.searchValue.value, finalTerm: '' })
     this.setState({ searchState: 'empty' })
-    this.setState({ suggestions: false })
+    this.setState({ suggestions: [] })
     this.props.onClearSearch()
   }