diff --git a/package.json b/package.json index 7e4eb0268..bccc99537 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,9 @@ "babel-runtime": "6.x", "classnames": "2.x", "component-classes": "1.x", + "create-react-class": "^15.5.2", "dom-scroll-into-view": "1.x", + "prop-types": "^15.5.8", "rc-animate": "2.x", "rc-menu": "5.x || 4.x", "rc-trigger": "1.x", diff --git a/src/DropdownMenu.jsx b/src/DropdownMenu.jsx index d320e71ac..b4704c71b 100644 --- a/src/DropdownMenu.jsx +++ b/src/DropdownMenu.jsx @@ -1,11 +1,13 @@ -import React, { cloneElement, PropTypes } from 'react'; +import React, { cloneElement } from 'react'; import { findDOMNode } from 'react-dom'; +import PropTypes from 'prop-types'; +import createClass from 'create-react-class'; import toArray from 'rc-util/lib/Children/toArray'; import Menu from 'rc-menu'; import scrollIntoView from 'dom-scroll-into-view'; import { getSelectKeys, preventDefaultEvent } from './util'; -const DropdownMenu = React.createClass({ +const DropdownMenu = createClass({ propTypes: { defaultActiveFirstOption: PropTypes.bool, value: PropTypes.any, @@ -141,4 +143,5 @@ const DropdownMenu = React.createClass({ }, }); +DropdownMenu.displayName = 'DropdownMenu'; export default DropdownMenu; diff --git a/src/Option.jsx b/src/Option.jsx index 7ddb6cce9..7b7151323 100644 --- a/src/Option.jsx +++ b/src/Option.jsx @@ -1,8 +1,9 @@ import React from 'react'; +import PropTypes from 'prop-types'; export default class Option extends React.Component { static propTypes = { - value: React.PropTypes.string, + value: PropTypes.string, }; static isSelectOption = true; diff --git a/src/PropTypes.js b/src/PropTypes.js index 9317e2c81..601c8cd6b 100644 --- a/src/PropTypes.js +++ b/src/PropTypes.js @@ -1,4 +1,4 @@ -import { PropTypes } from 'react'; +import PropTypes from 'prop-types'; function valueType(props, propName, componentName) { const labelInValueShape = PropTypes.shape({ diff --git a/src/Select.jsx b/src/Select.jsx index b3035cf7e..1c85dd63d 100644 --- a/src/Select.jsx +++ b/src/Select.jsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import createClass from 'create-react-class'; import KeyCode from 'rc-util/lib/KeyCode'; import classnames from 'classnames'; import Animate from 'rc-animate'; @@ -38,7 +39,7 @@ function chaining(...fns) { }; } -const Select = React.createClass({ +const Select = createClass({ propTypes: SelectPropTypes, mixins: [FilterMixin], @@ -928,4 +929,5 @@ const Select = React.createClass({ }, }); +Select.displayName = 'Select'; export default Select; diff --git a/src/SelectTrigger.jsx b/src/SelectTrigger.jsx index 868f83945..46581c235 100644 --- a/src/SelectTrigger.jsx +++ b/src/SelectTrigger.jsx @@ -1,10 +1,14 @@ import Trigger from 'rc-trigger'; -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; +import createClass from 'create-react-class'; import classnames from 'classnames'; import DropdownMenu from './DropdownMenu'; import ReactDOM from 'react-dom'; import { isSingleMode } from './util'; +Trigger.displayName = 'Trigger'; + const BUILT_IN_PLACEMENTS = { bottomLeft: { points: ['tl', 'bl'], @@ -24,7 +28,7 @@ const BUILT_IN_PLACEMENTS = { }, }; -const SelectTrigger = React.createClass({ +const SelectTrigger = createClass({ propTypes: { onPopupFocus: PropTypes.func, dropdownMatchSelectWidth: PropTypes.bool, @@ -134,4 +138,6 @@ const SelectTrigger = React.createClass({ }, }); +SelectTrigger.displayName = 'SelectTrigger'; + export default SelectTrigger; diff --git a/tests/FilterMixin.spec.js b/tests/FilterMixin.spec.js index 4629d17f3..6a3aa1229 100644 --- a/tests/FilterMixin.spec.js +++ b/tests/FilterMixin.spec.js @@ -1,5 +1,7 @@ /* eslint-disable no-undef */ -import React, { PropTypes } from 'react'; +import React from 'react'; +import PropTypes from 'prop-types'; +import createClass from 'create-react-class'; import FilterMixin from '../src/FilterMixin'; import Menu from 'rc-menu'; import OptGroup from '../src/OptGroup'; @@ -7,7 +9,7 @@ import Option from '../src/Option'; import { render, mount } from 'enzyme'; describe('FilterMixin', () => { - const Select = React.createClass({ + const Select = createClass({ propTypes: { value: PropTypes.any, inputValue: PropTypes.string, diff --git a/tests/Select.spec.js b/tests/Select.spec.js index af3c7866a..9a0cb757d 100644 --- a/tests/Select.spec.js +++ b/tests/Select.spec.js @@ -448,8 +448,9 @@ describe('Select', () => { ); }).toThrow(); expect(spy.mock.calls[0][0]).toMatch( - 'Invalid prop `value` supplied to `Select`, when you set `labelInValue` ' + - 'to `true`, `value` should in shape of `{ key: string, label?: string }`' + 'Warning: Failed prop type: Invalid prop `value` supplied to `Select`, ' + + 'when you set `labelInValue` to `true`,' + + ' `value` should in shape of `{ key: string, label?: string }`' ); }); @@ -458,7 +459,7 @@ describe('Select', () => {