From ba965dc7469f053c2b4590febb01e1bcc958d4d4 Mon Sep 17 00:00:00 2001 From: Bruce Mitchener Date: Mon, 28 Mar 2016 22:21:47 +0700 Subject: [PATCH] Convert several React.createClass usages to classes. --- components/alert/index.jsx | 33 ++++++++++---------- components/checkbox/Group.jsx | 38 +++++++++++------------ components/checkbox/index.jsx | 12 +++----- components/layout/col.jsx | 12 +++----- components/layout/row.jsx | 20 +++++------- components/menu/index.jsx | 52 +++++++++++++++----------------- components/radio/group.jsx | 34 ++++++++++----------- components/radio/radio.jsx | 14 +++------ components/radio/radioButton.jsx | 14 +++------ components/tooltip/index.jsx | 35 +++++++++++---------- 10 files changed, 119 insertions(+), 145 deletions(-) diff --git a/components/alert/index.jsx b/components/alert/index.jsx index 3fb860010a..b937402a84 100644 --- a/components/alert/index.jsx +++ b/components/alert/index.jsx @@ -4,22 +4,21 @@ import Animate from 'rc-animate'; import Icon from '../icon'; import classNames from 'classnames'; -export default React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-alert', - showIcon: false, - onClose() {}, - type: 'info', - }; - }, - getInitialState() { - return { +export default class Alert extends React.Component { + static defaultProps = { + prefixCls: 'ant-alert', + showIcon: false, + onClose() {}, + type: 'info', + } + constructor(props) { + super(props); + this.state = { closing: true, closed: false }; - }, - handleClose(e) { + } + handleClose = (e) => { e.preventDefault(); let dom = ReactDOM.findDOMNode(this); dom.style.height = `${dom.offsetHeight}px`; @@ -31,13 +30,13 @@ export default React.createClass({ closing: false }); this.props.onClose.call(this, e); - }, - animationEnd() { + } + animationEnd = () => { this.setState({ closed: true, closing: true }); - }, + } render() { let { closable, description, type, prefixCls, message, closeText, showIcon @@ -95,4 +94,4 @@ export default React.createClass({ ); } -}); +} diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx index abfff666c9..63dacebdd2 100644 --- a/components/checkbox/Group.jsx +++ b/components/checkbox/Group.jsx @@ -1,37 +1,35 @@ import React from 'react'; import Checkbox from './index'; -export default React.createClass({ - getDefaultProps() { - return { - options: [], - defaultValue: [], - onChange() {}, - }; - }, - propTypes: { +export default class CheckboxGroup extends React.Component { + static defaultProps = { + options: [], + defaultValue: [], + onChange() {}, + } + static propTypes = { defaultValue: React.PropTypes.array, value: React.PropTypes.array, options: React.PropTypes.array.isRequired, onChange: React.PropTypes.func, - }, - getInitialState() { - const props = this.props; + } + constructor(props) { + super(props); let value; if ('value' in props) { value = props.value; } else if ('defaultValue' in props) { value = props.defaultValue; } - return { value }; - }, + this.state = { value }; + } componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ value: nextProps.value || [], }); } - }, + } getOptions() { const { options } = this.props; return options.map(option => { @@ -43,8 +41,8 @@ export default React.createClass({ } return option; }); - }, - toggleOption(option) { + } + toggleOption = (option) => { const optionIndex = this.state.value.indexOf(option.value); const value = [...this.state.value]; if (optionIndex === - 1) { @@ -56,7 +54,7 @@ export default React.createClass({ this.setState({ value }); } this.props.onChange(value); - }, + } render() { const options = this.getOptions(); return ( @@ -73,5 +71,5 @@ export default React.createClass({ } ); - }, -}); + } +} diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx index 1c58d55d0e..cf387e59d8 100644 --- a/components/checkbox/index.jsx +++ b/components/checkbox/index.jsx @@ -1,9 +1,13 @@ import RcCheckbox from 'rc-checkbox'; import React from 'react'; -import Group from './Group'; +import CheckboxGroup from './Group'; import classNames from 'classnames'; export default class Checkbox extends React.Component { + static Group = CheckboxGroup; + static defaultProps = { + prefixCls: 'ant-checkbox' + } render() { const { prefixCls, style, children, className, ...restProps } = this.props; const classString = classNames({ @@ -18,9 +22,3 @@ export default class Checkbox extends React.Component { ); } } - -Checkbox.defaultProps = { - prefixCls: 'ant-checkbox' -}; - -Checkbox.Group = Group; diff --git a/components/layout/col.jsx b/components/layout/col.jsx index da55c66fd3..53353ef749 100644 --- a/components/layout/col.jsx +++ b/components/layout/col.jsx @@ -4,8 +4,8 @@ import classNames from 'classnames'; const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]); -const Col = React.createClass({ - propTypes: { +export default class Col extends React.Component { + static propTypes = { span: stringOrNumber, order: stringOrNumber, offset: stringOrNumber, @@ -17,7 +17,7 @@ const Col = React.createClass({ sm: objectOrNumber, md: objectOrNumber, lg: objectOrNumber, - }, + } render() { const props = this.props; const { span, order, offset, push, pull, className, children, ...others } = props; @@ -49,7 +49,5 @@ const Col = React.createClass({ }); return
{children}
; - }, -}); - -export default Col; + } +} diff --git a/components/layout/row.jsx b/components/layout/row.jsx index 1c8b86f905..b0cb69b101 100644 --- a/components/layout/row.jsx +++ b/components/layout/row.jsx @@ -1,20 +1,18 @@ import React, { Children, cloneElement } from 'react'; import classNames from 'classnames'; -const Row = React.createClass({ - propTypes: { +export default class Row extends React.Component { + static defaultProps = { + gutter: 0, + } + static propTypes = { type: React.PropTypes.string, align: React.PropTypes.string, justify: React.PropTypes.string, className: React.PropTypes.string, children: React.PropTypes.node, gutter: React.PropTypes.number, - }, - getDefaultProps() { - return { - gutter: 0, - }; - }, + } render() { const { type, justify, align, className, gutter, style, children, ...others } = this.props; const classes = classNames({ @@ -41,7 +39,5 @@ const Row = React.createClass({ }); }); return
{cols}
; - }, -}); - -export default Row; + } +} diff --git a/components/menu/index.jsx b/components/menu/index.jsx index 8b9e63419c..e90926b208 100644 --- a/components/menu/index.jsx +++ b/components/menu/index.jsx @@ -5,40 +5,43 @@ import animation from '../common/openAnimation'; function noop() { } -const Menu = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-menu', - onClick: noop, - onOpen: noop, - onClose: noop, - className: '', - theme: 'light', // or dark - }; - }, - getInitialState() { - return { +export default class Menu extends React.Component { + static Divider = Divider; + static Item = Item; + static SubMenu = SubMenu; + static ItemGroup = ItemGroup; + static defaultProps = { + prefixCls: 'ant-menu', + onClick: noop, + onOpen: noop, + onClose: noop, + className: '', + theme: 'light', // or dark + } + constructor(props) { + super(props); + this.state = { openKeys: [] }; - }, - handleClick(e) { + } + handleClick = (e) => { this.setState({ openKeys: [] }); this.props.onClick(e); - }, - handleOpenKeys(e) { + } + handleOpenKeys = (e) => { this.setState({ openKeys: e.openKeys }); this.props.onOpen(e); - }, - handleCloseKeys(e) { + } + handleCloseKeys = (e) => { this.setState({ openKeys: e.openKeys }); this.props.onClose(e); - }, + } render() { let openAnimation = this.props.openAnimation || this.props.openTransitionName; if (!openAnimation) { @@ -78,11 +81,4 @@ const Menu = React.createClass({ } return ; } -}); - -Menu.Divider = Divider; -Menu.Item = Item; -Menu.SubMenu = SubMenu; -Menu.ItemGroup = ItemGroup; - -export default Menu; +} diff --git a/components/radio/group.jsx b/components/radio/group.jsx index 71a8ace2ca..48ae8f9a57 100644 --- a/components/radio/group.jsx +++ b/components/radio/group.jsx @@ -15,17 +15,15 @@ function getCheckedValue(children) { return matched ? { value } : undefined; } -export default React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-radio-group', - disabled: false, - onChange() { - }, - }; - }, - getInitialState() { - let props = this.props; +export default class RadioGroup extends React.Component { + static defaultProps = { + prefixCls: 'ant-radio-group', + disabled: false, + onChange() { + }, + } + constructor(props) { + super(props); let value; if ('value' in props) { value = props.value; @@ -35,10 +33,10 @@ export default React.createClass({ const checkedValue = getCheckedValue(props.children); value = checkedValue && checkedValue.value; } - return { + this.state = { value, }; - }, + } componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ @@ -52,15 +50,15 @@ export default React.createClass({ }); } } - }, - onRadioChange(ev) { + } + onRadioChange = (ev) => { if (!('value' in this.props)) { this.setState({ value: ev.target.value, }); } this.props.onChange(ev); - }, + } render() { const props = this.props; const children = React.Children.map(props.children, (radio) => { @@ -84,5 +82,5 @@ export default React.createClass({ [`${props.prefixCls}-${props.size}`]: props.size, }); return
{children}
; - }, -}); + } +} diff --git a/components/radio/radio.jsx b/components/radio/radio.jsx index e9807b8f0c..fe210b4a01 100644 --- a/components/radio/radio.jsx +++ b/components/radio/radio.jsx @@ -2,12 +2,10 @@ import RcRadio from 'rc-radio'; import React from 'react'; import classNames from 'classnames'; -const Radio = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-radio' - }; - }, +export default class Radio extends React.Component { + static defaultProps = { + prefixCls: 'ant-radio' + } render() { const { prefixCls, children, checked, disabled, className, style } = this.props; const classString = classNames({ @@ -23,6 +21,4 @@ const Radio = React.createClass({ ); } -}); - -export default Radio; +} diff --git a/components/radio/radioButton.jsx b/components/radio/radioButton.jsx index d99433b57c..4063ba61d9 100644 --- a/components/radio/radioButton.jsx +++ b/components/radio/radioButton.jsx @@ -1,17 +1,13 @@ import React from 'react'; import Radio from './radio'; -const RadioButton = React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-radio-button', - }; - }, +export default class RadioButton extends React.Component { + static defaultProps = { + prefixCls: 'ant-radio-button', + } render() { return ( ); } -}); - -export default RadioButton; +} diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx index cb0dfb02da..249dfd4082 100644 --- a/components/tooltip/index.jsx +++ b/components/tooltip/index.jsx @@ -1,28 +1,27 @@ import React from 'react'; -import Tooltip from 'rc-tooltip'; +import RcTooltip from 'rc-tooltip'; import getPlacements from '../popover/placements'; const placements = getPlacements({ verticalArrowShift: 8, }); -export default React.createClass({ - getDefaultProps() { - return { - prefixCls: 'ant-tooltip', - placement: 'top', - mouseEnterDelay: 0.1, - mouseLeaveDelay: 0.1 - }; - }, - getInitialState() { - return { +export default class Tooltip extends React.Component { + static defaultProps = { + prefixCls: 'ant-tooltip', + placement: 'top', + mouseEnterDelay: 0.1, + mouseLeaveDelay: 0.1 + } + constructor(props) { + super(props); + this.state = { visible: false }; - }, - onVisibleChange(visible) { + } + onVisibleChange = (visible) => { this.setState({ visible }); - }, + } render() { let transitionName = ({ top: 'zoom-down', @@ -46,14 +45,14 @@ export default React.createClass({ } return ( - {this.props.children} - + ); } -}); +}