From 3ab3a128deaf10300b31102b79458528227baa54 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 14 Apr 2017 17:13:04 +0800 Subject: [PATCH] fix react createClass and PropTypes warning --- examples/format.js | 29 +++----- examples/open.js | 22 +++--- examples/value-and-defaultValue.js | 22 +++--- package.json | 2 +- src/Combobox.jsx | 31 +++++---- src/Header.jsx | 42 ++++++------ src/Panel.jsx | 68 ++++++++---------- src/Select.jsx | 41 ++++++----- src/TimePicker.jsx | 106 ++++++++++++++--------------- tests/Header.spec.jsx | 2 +- tests/Select.spec.jsx | 2 +- tests/TimePicker.spec.jsx | 2 +- 12 files changed, 175 insertions(+), 194 deletions(-) diff --git a/examples/format.js b/examples/format.js index c9a9539..e9a2614 100644 --- a/examples/format.js +++ b/examples/format.js @@ -4,23 +4,14 @@ import ReactDom from 'react-dom'; import moment from 'moment'; import TimePicker from 'rc-time-picker'; -const App = React.createClass({ - render() { - return ( -
- - - - - - - -
- ); - }, -}); - ReactDom.render( - , - document.getElementById('__react-content') -); +
+ + + + + + + +
+, document.getElementById('__react-content')); diff --git a/examples/open.js b/examples/open.js index 100bf35..8e4f5de 100644 --- a/examples/open.js +++ b/examples/open.js @@ -6,20 +6,18 @@ import React from 'react'; import ReactDom from 'react-dom'; import TimePicker from 'rc-time-picker'; -const App = React.createClass({ - getInitialState() { - return { - open: false, - }; - }, - setOpen({ open }) { +class App extends React.Component { + state = { + open: false, + }; + setOpen = ({ open }) => { this.setState({ open }); - }, - toggleOpen() { + } + toggleOpen = () => { this.setState({ open: !this.state.open, }); - }, + } render() { return (
@@ -27,8 +25,8 @@ const App = React.createClass({
); - }, -}); + } +} ReactDom.render( , diff --git a/examples/value-and-defaultValue.js b/examples/value-and-defaultValue.js index 0e1aa14..1e1baf8 100644 --- a/examples/value-and-defaultValue.js +++ b/examples/value-and-defaultValue.js @@ -7,21 +7,19 @@ import ReactDom from 'react-dom'; import moment from 'moment'; import TimePicker from 'rc-time-picker'; -const App = React.createClass({ - getInitialState() { - return { - value: moment(), - }; - }, - handleValueChange(value) { +class App extends React.Component { + state = { + value: moment(), + }; + handleValueChange = (value) => { console.log(value && value.format('HH:mm:ss')); this.setState({ value }); - }, - clear() { + } + clear = () => { this.setState({ value: undefined, }); - }, + } render() { return (
@@ -36,8 +34,8 @@ const App = React.createClass({
); - }, -}); + } +} ReactDom.render( , diff --git a/package.json b/package.json index 10b1df2..da78772 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,6 @@ "rc-tools": "5.x", "rc-util": "^4.0.2", "react": "15.x", - "react-addons-test-utils": "15.x", "react-dom": "15.x" }, "pre-commit": [ @@ -61,6 +60,7 @@ "babel-runtime": "6.x", "classnames": "2.x", "moment": "2.x", + "prop-types": "^15.5.8", "rc-trigger": "1.x" } } diff --git a/src/Combobox.jsx b/src/Combobox.jsx index 477c5ee..1eed4d2 100644 --- a/src/Combobox.jsx +++ b/src/Combobox.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import Select from './Select'; const formatOption = (option, disabledOptions) => { @@ -18,8 +19,8 @@ const formatOption = (option, disabledOptions) => { }; }; -const Combobox = React.createClass({ - propTypes: { +class Combobox extends Component { + static propTypes = { format: PropTypes.string, defaultOpenValue: PropTypes.object, prefixCls: PropTypes.string, @@ -36,9 +37,9 @@ const Combobox = React.createClass({ disabledSeconds: PropTypes.func, onCurrentSelectPanelChange: PropTypes.func, use12Hours: PropTypes.bool, - }, + }; - onItemChange(type, itemValue) { + onItemChange = (type, itemValue) => { const { onChange, defaultOpenValue, use12Hours } = this.props; const value = (this.props.value || defaultOpenValue).clone(); @@ -71,11 +72,11 @@ const Combobox = React.createClass({ value.second(+itemValue); } onChange(value); - }, + } - onEnterSelectPanel(range) { + onEnterSelectPanel = (range) => { this.props.onCurrentSelectPanelChange(range); - }, + } getHourSelect(hour) { const { prefixCls, hourOptions, disabledHours, showHour, use12Hours } = this.props; @@ -103,7 +104,7 @@ const Combobox = React.createClass({ onMouseEnter={this.onEnterSelectPanel.bind(this, 'hour')} /> ); - }, + } getMinuteSelect(minute) { const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props; @@ -123,7 +124,7 @@ const Combobox = React.createClass({ onMouseEnter={this.onEnterSelectPanel.bind(this, 'minute')} /> ); - }, + } getSecondSelect(second) { const { prefixCls, secondOptions, disabledSeconds, showSecond, defaultOpenValue } = this.props; @@ -143,7 +144,7 @@ const Combobox = React.createClass({ onMouseEnter={this.onEnterSelectPanel.bind(this, 'second')} /> ); - }, + } getAMPMSelect() { const { prefixCls, use12Hours, format } = this.props; @@ -167,12 +168,12 @@ const Combobox = React.createClass({ onMouseEnter={this.onEnterSelectPanel.bind(this, 'ampm')} /> ); - }, + } isAM() { const value = (this.props.value || this.props.defaultOpenValue); return value.hour() >= 0 && value.hour() < 12; - }, + } render() { const { prefixCls, defaultOpenValue } = this.props; @@ -185,7 +186,7 @@ const Combobox = React.createClass({ {this.getAMPMSelect(value.hour())} ); - }, -}); + } +} export default Combobox; diff --git a/src/Header.jsx b/src/Header.jsx index 2ef9827..91e8549 100644 --- a/src/Header.jsx +++ b/src/Header.jsx @@ -1,8 +1,9 @@ -import React, { PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import moment from 'moment'; -const Header = React.createClass({ - propTypes: { +class Header extends Component { + static propTypes = { format: PropTypes.string, prefixCls: PropTypes.string, disabledDate: PropTypes.func, @@ -21,15 +22,16 @@ const Header = React.createClass({ allowEmpty: PropTypes.bool, defaultOpenValue: PropTypes.object, currentSelectPanel: PropTypes.string, - }, + }; - getInitialState() { - const { value, format } = this.props; - return { + constructor(props) { + super(props); + const { value, format } = props; + this.state = { str: value && value.format(format) || '', invalid: false, }; - }, + } componentWillReceiveProps(nextProps) { const { value, format } = nextProps; @@ -37,9 +39,9 @@ const Header = React.createClass({ str: value && value.format(format) || '', invalid: false, }); - }, + } - onInputChange(event) { + onInputChange = (event) => { const str = event.target.value; this.setState({ str, @@ -117,18 +119,18 @@ const Header = React.createClass({ this.setState({ invalid: false, }); - }, + } - onKeyDown(e) { + onKeyDown = (e) => { if (e.keyCode === 27) { this.props.onEsc(); } - }, + } - onClear() { + onClear = () => { this.setState({ str: '' }); this.props.onClear(); - }, + } getClearButton() { const { prefixCls, allowEmpty } = this.props; @@ -141,11 +143,11 @@ const Header = React.createClass({ title={this.props.clearText} onMouseDown={this.onClear} />); - }, + } getProtoValue() { return this.props.value || this.props.defaultOpenValue; - }, + } getInput() { const { prefixCls, placeholder } = this.props; @@ -161,7 +163,7 @@ const Header = React.createClass({ onChange={this.onInputChange} /> ); - }, + } render() { const { prefixCls } = this.props; @@ -171,7 +173,7 @@ const Header = React.createClass({ {this.getClearButton()} ); - }, -}); + } +} export default Header; diff --git a/src/Panel.jsx b/src/Panel.jsx index df128ff..65832ea 100644 --- a/src/Panel.jsx +++ b/src/Panel.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import Header from './Header'; import Combobox from './Combobox'; import moment from 'moment'; @@ -17,8 +18,8 @@ function generateOptions(length, disabledOptions, hideDisabledOptions) { return arr; } -const Panel = React.createClass({ - propTypes: { +class Panel extends Component { + static propTypes = { clearText: PropTypes.string, prefixCls: PropTypes.string, className: PropTypes.string, @@ -39,28 +40,27 @@ const Panel = React.createClass({ onClear: PropTypes.func, use12Hours: PropTypes.bool, addon: PropTypes.func, - }, + }; - getDefaultProps() { - return { - prefixCls: 'rc-time-picker-panel', - onChange: noop, - onClear: noop, - disabledHours: noop, - disabledMinutes: noop, - disabledSeconds: noop, - defaultOpenValue: moment(), - use12Hours: false, - addon: noop, - }; - }, + static defaultProps = { + prefixCls: 'rc-time-picker-panel', + onChange: noop, + onClear: noop, + disabledHours: noop, + disabledMinutes: noop, + disabledSeconds: noop, + defaultOpenValue: moment(), + use12Hours: false, + addon: noop, + }; - getInitialState() { - return { - value: this.props.value, + constructor(props) { + super(props); + this.state = { + value: props.value, selectionRange: [], }; - }, + } componentWillReceiveProps(nextProps) { const value = nextProps.value; @@ -69,30 +69,22 @@ const Panel = React.createClass({ value, }); } - }, + } - onChange(newValue) { + onChange = (newValue) => { this.setState({ value: newValue }); this.props.onChange(newValue); - }, - - onClear() { - this.props.onClear(); - }, + } - onCurrentSelectPanelChange(currentSelectPanel) { + onCurrentSelectPanelChange = (currentSelectPanel) => { this.setState({ currentSelectPanel }); - }, - - close() { - this.props.onEsc(); - }, + } render() { const { prefixCls, className, placeholder, disabledHours, disabledMinutes, disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond, - format, defaultOpenValue, clearText, onEsc, addon, use12Hours, + format, defaultOpenValue, clearText, onEsc, addon, use12Hours, onClear, } = this.props; const { value, currentSelectPanel, @@ -123,7 +115,7 @@ const Panel = React.createClass({ disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} onChange={this.onChange} - onClear={this.onClear} + onClear={onClear} allowEmpty={allowEmpty} /> ); - }, -}); + } +} export default Panel; diff --git a/src/Select.jsx b/src/Select.jsx index deb155d..49fed5b 100644 --- a/src/Select.jsx +++ b/src/Select.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import ReactDom from 'react-dom'; import classnames from 'classnames'; @@ -22,38 +23,36 @@ const scrollTo = (element, to, duration) => { }); }; -const Select = React.createClass({ - propTypes: { +class Select extends Component { + static propTypes = { prefixCls: PropTypes.string, options: PropTypes.array, selectedIndex: PropTypes.number, type: PropTypes.string, onSelect: PropTypes.func, onMouseEnter: PropTypes.func, - }, + }; - getInitialState() { - return { - active: false, - }; - }, + state = { + active: false, + }; componentDidMount() { // jump to selected option this.scrollToSelected(0); - }, + } componentDidUpdate(prevProps) { // smooth scroll to selected option if (prevProps.selectedIndex !== this.props.selectedIndex) { this.scrollToSelected(120); } - }, + } - onSelect(value) { + onSelect = (value) => { const { onSelect, type } = this.props; onSelect(type, value); - }, + } getOptions() { const { options, selectedIndex, prefixCls } = this.props; @@ -75,7 +74,7 @@ const Select = React.createClass({ {item.value} ); }); - }, + } scrollToSelected(duration) { // move to selected item @@ -91,16 +90,16 @@ const Select = React.createClass({ const topOption = list.children[index]; const to = topOption.offsetTop; scrollTo(select, to, duration); - }, + } - handleMouseEnter(e) { + handleMouseEnter = (e) => { this.setState({ active: true }); this.props.onMouseEnter(e); - }, + } - handleMouseLeave() { + handleMouseLeave = () => { this.setState({ active: false }); - }, + } render() { if (this.props.options.length === 0) { @@ -122,7 +121,7 @@ const Select = React.createClass({
    {this.getOptions()}
); - }, -}); + } +} export default Select; diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx index d94ed94..1a3516e 100644 --- a/src/TimePicker.jsx +++ b/src/TimePicker.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import Trigger from 'rc-trigger'; import Panel from './Panel'; import placements from './placements'; @@ -11,8 +12,8 @@ function refFn(field, component) { this[field] = component; } -const Picker = React.createClass({ - propTypes: { +class Picker extends Component { + static propTypes = { prefixCls: PropTypes.string, clearText: PropTypes.string, value: PropTypes.object, @@ -44,43 +45,42 @@ const Picker = React.createClass({ name: PropTypes.string, autoComplete: PropTypes.string, use12Hours: PropTypes.bool, - }, - - getDefaultProps() { - return { - clearText: 'clear', - prefixCls: 'rc-time-picker', - defaultOpen: false, - style: {}, - className: '', - align: {}, - defaultOpenValue: moment(), - allowEmpty: true, - showHour: true, - showMinute: true, - showSecond: true, - disabledHours: noop, - disabledMinutes: noop, - disabledSeconds: noop, - hideDisabledOptions: false, - placement: 'bottomLeft', - onChange: noop, - onOpen: noop, - onClose: noop, - addon: noop, - use12Hours: false, - }; - }, - - getInitialState() { + }; + + static defaultProps = { + clearText: 'clear', + prefixCls: 'rc-time-picker', + defaultOpen: false, + style: {}, + className: '', + align: {}, + defaultOpenValue: moment(), + allowEmpty: true, + showHour: true, + showMinute: true, + showSecond: true, + disabledHours: noop, + disabledMinutes: noop, + disabledSeconds: noop, + hideDisabledOptions: false, + placement: 'bottomLeft', + onChange: noop, + onOpen: noop, + onClose: noop, + addon: noop, + use12Hours: false, + }; + + constructor(props) { + super(props); this.saveInputRef = refFn.bind(this, 'picker'); this.savePanelRef = refFn.bind(this, 'panelInstance'); - const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props; - return { + const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = props; + this.state = { open, value, }; - }, + } componentWillReceiveProps(nextProps) { const { value, open } = nextProps; @@ -92,31 +92,31 @@ const Picker = React.createClass({ if (open !== undefined) { this.setState({ open }); } - }, + } - onPanelChange(value) { + onPanelChange = (value) => { this.setValue(value); - }, + } - onPanelClear() { + onPanelClear = () => { this.setValue(null); this.setOpen(false); - }, + } - onVisibleChange(open) { + onVisibleChange = (open) => { this.setOpen(open); - }, + } - onEsc() { + onEsc = () => { this.setOpen(false); this.focus(); - }, + } - onKeyDown(e) { + onKeyDown = (e) => { if (e.keyCode === 40) { this.setOpen(true); } - }, + } setValue(value) { if (!('value' in this.props)) { @@ -125,7 +125,7 @@ const Picker = React.createClass({ }); } this.props.onChange(value); - }, + } getFormat() { const { format, showHour, showMinute, showSecond, use12Hours } = this.props; @@ -148,7 +148,7 @@ const Picker = React.createClass({ showMinute ? 'mm' : '', showSecond ? 'ss' : '', ].filter(item => !!item).join(':'); - }, + } getPanelElement() { const { @@ -181,7 +181,7 @@ const Picker = React.createClass({ addon={addon} /> ); - }, + } setOpen(open) { const { onOpen, onClose } = this.props; @@ -195,11 +195,11 @@ const Picker = React.createClass({ onClose({ open }); } } - }, + } focus() { this.picker.focus(); - }, + } render() { const { @@ -244,7 +244,7 @@ const Picker = React.createClass({ ); - }, -}); + } +} export default Picker; diff --git a/tests/Header.spec.jsx b/tests/Header.spec.jsx index 682852d..5ab0ba0 100644 --- a/tests/Header.spec.jsx +++ b/tests/Header.spec.jsx @@ -2,7 +2,7 @@ import ReactDOM from 'react-dom'; import React from 'react'; import TimePicker from '../src/TimePicker'; -import TestUtils from 'react-addons-test-utils'; +import TestUtils from 'react-dom/test-utils'; const Simulate = TestUtils.Simulate; import expect from 'expect.js'; import async from 'async'; diff --git a/tests/Select.spec.jsx b/tests/Select.spec.jsx index 2d30098..b2c111d 100644 --- a/tests/Select.spec.jsx +++ b/tests/Select.spec.jsx @@ -1,7 +1,7 @@ import ReactDOM from 'react-dom'; import React from 'react'; import TimePicker from '../src/TimePicker'; -import TestUtils from 'react-addons-test-utils'; +import TestUtils from 'react-dom/test-utils'; const Simulate = TestUtils.Simulate; import expect from 'expect.js'; import async from 'async'; diff --git a/tests/TimePicker.spec.jsx b/tests/TimePicker.spec.jsx index 6f9ac2d..0dd6c10 100644 --- a/tests/TimePicker.spec.jsx +++ b/tests/TimePicker.spec.jsx @@ -2,7 +2,7 @@ import ReactDOM from 'react-dom'; import React from 'react'; import TimePicker from '../src/TimePicker'; -import TestUtils from 'react-addons-test-utils'; +import TestUtils from 'react-dom/test-utils'; const Simulate = TestUtils.Simulate; import expect from 'expect.js'; import async from 'async'; -- 2.41.0