fix: React deprecation warnings (jquense#970)

* upgrades uncontrollable to ^7.1.0
* fixes uncontrollable imports
* fixes DateTimePicker test cases

packages/react-widgets/package.json

@@ -67,7 +67,7 @@
     "react-component-managers": "^3.1.0",
     "react-lifecycles-compat": "^3.0.4",
     "react-transition-group": "^2.4.0",
-    "uncontrollable": "^5.0.0",
+    "uncontrollable": "^7.1.1",
     "warning": "^3.0.0"
   },
   "devDependencies": {

packages/react-widgets/src/Autocomplete.js

@@ -2,7 +2,7 @@ import cn from 'classnames'
 import * as PropTypes from 'prop-types'
 import React from 'react'
 import { polyfill as polyfillLifecycles } from 'react-lifecycles-compat'
-import uncontrollable from 'uncontrollable'
+import { uncontrollable } from 'uncontrollable'
 
 import List from './List'
 import Popup from './Popup'

packages/react-widgets/src/Calendar.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { findDOMNode } from 'react-dom'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
-import uncontrollable from 'uncontrollable'
+import { uncontrollable } from 'uncontrollable'
 import { polyfill as polyfillLifecycles } from 'react-lifecycles-compat'
 import { autoFocus } from 'react-component-managers'
 

packages/react-widgets/src/Combobox.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import { polyfill as polyfillLifecycles } from 'react-lifecycles-compat'
-import createUncontrolledWidget from 'uncontrollable'
+import { uncontrollable as createUncontrolledWidget } from 'uncontrollable'
 
 import Widget from './Widget'
 import WidgetPicker from './WidgetPicker'

packages/react-widgets/src/DateTimePicker.js

@@ -6,7 +6,7 @@ import { polyfill as polyfillLifecycles } from 'react-lifecycles-compat'
 import activeElement from 'dom-helpers/activeElement'
 import cn from 'classnames'
 import deprecated from 'prop-types-extra/lib/deprecated'
-import uncontrollable from 'uncontrollable'
+import { uncontrollable } from 'uncontrollable'
 
 import Widget from './Widget'
 import WidgetPicker from './WidgetPicker'

packages/react-widgets/src/DropdownList.js

@@ -9,7 +9,7 @@ import {
   timeoutManager,
 } from 'react-component-managers'
 import { polyfill as polyfillLifecycles } from 'react-lifecycles-compat'
-import uncontrollable from 'uncontrollable'
+import { uncontrollable } from 'uncontrollable'
 
 import Widget from './Widget'
 import WidgetPicker from './WidgetPicker'

packages/react-widgets/src/Multiselect.js

@@ -5,7 +5,7 @@ import closest from 'dom-helpers/query/closest'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { polyfill as polyfillLifecycles } from 'react-lifecycles-compat'
-import uncontrollable from 'uncontrollable'
+import { uncontrollable } from 'uncontrollable'
 
 import Widget from './Widget'
 import WidgetPicker from './WidgetPicker'

packages/react-widgets/src/NumberPicker.js

@@ -2,7 +2,7 @@ import cn from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { polyfill as polyfillLifecycles } from 'react-lifecycles-compat'
-import uncontrollable from 'uncontrollable'
+import { uncontrollable } from 'uncontrollable'
 
 import Widget from './Widget'
 import WidgetPicker from './WidgetPicker'

packages/react-widgets/src/SelectList.js

@@ -4,7 +4,7 @@ import { polyfill as polyfillLifecycles } from 'react-lifecycles-compat'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import { autoFocus, timeoutManager } from 'react-component-managers'
-import createUncontrolledWidget from 'uncontrollable'
+import { uncontrollable as createUncontrolledWidget } from 'uncontrollable'
 
 import List from './List'
 import Widget from './Widget'

packages/react-widgets/test/DateTimePicker-test.js

@@ -191,7 +191,8 @@ describe('DateTimePicker', () => {
   })
 
   it('should do nothing when disabled', done => {
-    let wrapper = mount(<DateTimePicker defaultValue={new Date()} disabled />)
+    let instanceRef = React.createRef()
+    let wrapper = mount(<DateTimePicker defaultValue={new Date()} disabled ref={instanceRef} />)
 
     let input = wrapper.find('.rw-input').getDOMNode()
 
@@ -201,13 +202,14 @@ describe('DateTimePicker', () => {
     wrapper.find('.rw-i-calendar').simulate('click')
 
     setTimeout(() => {
-      expect(wrapper.instance()._values.open).to.not.equal(true)
+      expect(instanceRef.current.props.open).to.not.equal(true)
       done()
     }, 0)
   })
 
   it('should do nothing when readonly', done => {
-    let wrapper = mount(<DateTimePicker defaultValue={new Date()} readOnly />)
+    let instanceRef = React.createRef()
+    let wrapper = mount(<DateTimePicker defaultValue={new Date()} readOnly ref={instanceRef} />)
 
     let input = wrapper.find('.rw-input').getDOMNode()
 
@@ -217,25 +219,27 @@ describe('DateTimePicker', () => {
     wrapper.find('.rw-i-calendar').simulate('click')
 
     setTimeout(() => {
-      expect(wrapper.instance()._values.open).to.not.equal(true)
+      expect(instanceRef.current.props.open).to.not.equal(true)
       done()
     })
   })
 
   it('should change values on key down', () => {
+    let instanceRef = React.createRef()
+
     let change = sinon.spy()
 
-    let wrapper = mount(<DateTimePicker onChange={change} />)
+    let wrapper = mount(<DateTimePicker onChange={change} ref={instanceRef} />)
 
     let options = wrapper.find('li').map(n => n.getDOMNode())
 
     wrapper.simulate('keyDown', { key: 'ArrowDown', altKey: true })
 
-    expect(wrapper.instance()._values.open).to.equal('date')
+    expect(instanceRef.current.props.open).to.equal('date')
 
     wrapper.simulate('keyDown', { key: 'ArrowDown', altKey: true })
 
-    expect(wrapper.instance()._values.open).to.equal('time')
+    expect(instanceRef.current.props.open).to.equal('time')
 
     wrapper.simulate('keyDown', { key: 'Home' })