mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-18 11:18:14 +08:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

Convert several React.createClass usages to classes.

Browse Source
This commit is contained in:
Bruce Mitchener 2016-03-28 22:21:47 +07:00
parent 7d4e01c84f
commit ba965dc746
10 changed files with 119 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/alert/index.jsx
View File

@ -4,22 +4,21 @@ import Animate from 'rc-animate';
import Icon from '../icon'; import Icon from '../icon';
import classNames from 'classnames'; import classNames from 'classnames';
export default React.createClass({ export default class Alert extends React.Component {
getDefaultProps() { static defaultProps = {
return {
prefixCls: 'ant-alert', prefixCls: 'ant-alert',
showIcon: false, showIcon: false,
onClose() {}, onClose() {},
type: 'info', type: 'info',
}; }
}, constructor(props) {
getInitialState() { super(props);
return { this.state = {
closing: true, closing: true,
closed: false closed: false
}; };
}, }
handleClose(e) { handleClose = (e) => {
e.preventDefault(); e.preventDefault();
let dom = ReactDOM.findDOMNode(this); let dom = ReactDOM.findDOMNode(this);
dom.style.height = `${dom.offsetHeight}px`; dom.style.height = `${dom.offsetHeight}px`;
@ -31,13 +30,13 @@ export default React.createClass({
closing: false closing: false
}); });
this.props.onClose.call(this, e); this.props.onClose.call(this, e);
}, }
animationEnd() { animationEnd = () => {
this.setState({ this.setState({
closed: true, closed: true,
closing: true closing: true
}); });
}, }
render() { render() {
let { let {
closable, description, type, prefixCls, message, closeText, showIcon closable, description, type, prefixCls, message, closeText, showIcon
@ -95,4 +94,4 @@ export default React.createClass({
</Animate> </Animate>
); );
} }
}); }

32
components/checkbox/Group.jsx
View File

@ -1,37 +1,35 @@
import React from 'react'; import React from 'react';
import Checkbox from './index'; import Checkbox from './index';
export default React.createClass({ export default class CheckboxGroup extends React.Component {
getDefaultProps() { static defaultProps = {
return {
options: [], options: [],
defaultValue: [], defaultValue: [],
onChange() {}, onChange() {},
}; }
}, static propTypes = {
propTypes: {
defaultValue: React.PropTypes.array, defaultValue: React.PropTypes.array,
value: React.PropTypes.array, value: React.PropTypes.array,
options: React.PropTypes.array.isRequired, options: React.PropTypes.array.isRequired,
onChange: React.PropTypes.func, onChange: React.PropTypes.func,
}, }
getInitialState() { constructor(props) {
const props = this.props; super(props);
let value; let value;
if ('value' in props) { if ('value' in props) {
value = props.value; value = props.value;
} else if ('defaultValue' in props) { } else if ('defaultValue' in props) {
value = props.defaultValue; value = props.defaultValue;
} }
return { value }; this.state = { value };
}, }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if ('value' in nextProps) { if ('value' in nextProps) {
this.setState({ this.setState({
value: nextProps.value || [], value: nextProps.value || [],
}); });
} }
}, }
getOptions() { getOptions() {
const { options } = this.props; const { options } = this.props;
return options.map(option => { return options.map(option => {
@ -43,8 +41,8 @@ export default React.createClass({
} }
return option; return option;
}); });
}, }
toggleOption(option) { toggleOption = (option) => {
const optionIndex = this.state.value.indexOf(option.value); const optionIndex = this.state.value.indexOf(option.value);
const value = [...this.state.value]; const value = [...this.state.value];
if (optionIndex === - 1) { if (optionIndex === - 1) {
@ -56,7 +54,7 @@ export default React.createClass({
this.setState({ value }); this.setState({ value });
} }
this.props.onChange(value); this.props.onChange(value);
}, }
render() { render() {
const options = this.getOptions(); const options = this.getOptions();
return ( return (
@ -73,5 +71,5 @@ export default React.createClass({
} }
</div> </div>
); );
}, }
}); }

12
components/checkbox/index.jsx
View File

@ -1,9 +1,13 @@
import RcCheckbox from 'rc-checkbox'; import RcCheckbox from 'rc-checkbox';
import React from 'react'; import React from 'react';
import Group from './Group'; import CheckboxGroup from './Group';
import classNames from 'classnames'; import classNames from 'classnames';
export default class Checkbox extends React.Component { export default class Checkbox extends React.Component {
static Group = CheckboxGroup;
static defaultProps = {
prefixCls: 'ant-checkbox'
}
render() { render() {
const { prefixCls, style, children, className, ...restProps } = this.props; const { prefixCls, style, children, className, ...restProps } = this.props;
const classString = classNames({ const classString = classNames({
@ -18,9 +22,3 @@ export default class Checkbox extends React.Component {
); );
} }
} }
Checkbox.defaultProps = {
prefixCls: 'ant-checkbox'
};
Checkbox.Group = Group;

12
components/layout/col.jsx
View File

@ -4,8 +4,8 @@ import classNames from 'classnames';
const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]); const objectOrNumber = PropTypes.oneOfType([PropTypes.object, PropTypes.number]);
const Col = React.createClass({ export default class Col extends React.Component {
propTypes: { static propTypes = {
span: stringOrNumber, span: stringOrNumber,
order: stringOrNumber, order: stringOrNumber,
offset: stringOrNumber, offset: stringOrNumber,
@ -17,7 +17,7 @@ const Col = React.createClass({
sm: objectOrNumber, sm: objectOrNumber,
md: objectOrNumber, md: objectOrNumber,
lg: objectOrNumber, lg: objectOrNumber,
}, }
render() { render() {
const props = this.props; const props = this.props;
const { span, order, offset, push, pull, className, children, ...others } = props; const { span, order, offset, push, pull, className, children, ...others } = props;
@ -49,7 +49,5 @@ const Col = React.createClass({
}); });
return <div {...others} className={classes}>{children}</div>; return <div {...others} className={classes}>{children}</div>;
}, }
}); }
export default Col;

20
components/layout/row.jsx
View File

@ -1,20 +1,18 @@
import React, { Children, cloneElement } from 'react'; import React, { Children, cloneElement } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
const Row = React.createClass({ export default class Row extends React.Component {
propTypes: { static defaultProps = {
gutter: 0,
}
static propTypes = {
type: React.PropTypes.string, type: React.PropTypes.string,
align: React.PropTypes.string, align: React.PropTypes.string,
justify: React.PropTypes.string, justify: React.PropTypes.string,
className: React.PropTypes.string, className: React.PropTypes.string,
children: React.PropTypes.node, children: React.PropTypes.node,
gutter: React.PropTypes.number, gutter: React.PropTypes.number,
}, }
getDefaultProps() {
return {
gutter: 0,
};
},
render() { render() {
const { type, justify, align, className, gutter, style, children, ...others } = this.props; const { type, justify, align, className, gutter, style, children, ...others } = this.props;
const classes = classNames({ const classes = classNames({
@ -41,7 +39,5 @@ const Row = React.createClass({
}); });
}); });
return <div {...others} className={classes} style={rowStyle}>{cols}</div>; return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
}, }
}); }
export default Row;

40
components/menu/index.jsx
View File

@ -5,40 +5,43 @@ import animation from '../common/openAnimation';
function noop() { function noop() {
} }
const Menu = React.createClass({ export default class Menu extends React.Component {
getDefaultProps() { static Divider = Divider;
return { static Item = Item;
static SubMenu = SubMenu;
static ItemGroup = ItemGroup;
static defaultProps = {
prefixCls: 'ant-menu', prefixCls: 'ant-menu',
onClick: noop, onClick: noop,
onOpen: noop, onOpen: noop,
onClose: noop, onClose: noop,
className: '', className: '',
theme: 'light', // or dark theme: 'light', // or dark
}; }
}, constructor(props) {
getInitialState() { super(props);
return { this.state = {
openKeys: [] openKeys: []
}; };
}, }
handleClick(e) { handleClick = (e) => {
this.setState({ this.setState({
openKeys: [] openKeys: []
}); });
this.props.onClick(e); this.props.onClick(e);
}, }
handleOpenKeys(e) { handleOpenKeys = (e) => {
this.setState({ this.setState({
openKeys: e.openKeys openKeys: e.openKeys
}); });
this.props.onOpen(e); this.props.onOpen(e);
}, }
handleCloseKeys(e) { handleCloseKeys = (e) => {
this.setState({ this.setState({
openKeys: e.openKeys openKeys: e.openKeys
}); });
this.props.onClose(e); this.props.onClose(e);
}, }
render() { render() {
let openAnimation = this.props.openAnimation || this.props.openTransitionName; let openAnimation = this.props.openAnimation || this.props.openTransitionName;
if (!openAnimation) { if (!openAnimation) {
@ -78,11 +81,4 @@ const Menu = React.createClass({
} }
return <RcMenu {...this.props} {...props} />; return <RcMenu {...this.props} {...props} />;
} }
}); }
Menu.Divider = Divider;
Menu.Item = Item;
Menu.SubMenu = SubMenu;
Menu.ItemGroup = ItemGroup;
export default Menu;

26
components/radio/group.jsx
View File

@ -15,17 +15,15 @@ function getCheckedValue(children) {
return matched ? { value } : undefined; return matched ? { value } : undefined;
} }
export default React.createClass({ export default class RadioGroup extends React.Component {
getDefaultProps() { static defaultProps = {
return {
prefixCls: 'ant-radio-group', prefixCls: 'ant-radio-group',
disabled: false, disabled: false,
onChange() { onChange() {
}, },
}; }
}, constructor(props) {
getInitialState() { super(props);
let props = this.props;
let value; let value;
if ('value' in props) { if ('value' in props) {
value = props.value; value = props.value;
@ -35,10 +33,10 @@ export default React.createClass({
const checkedValue = getCheckedValue(props.children); const checkedValue = getCheckedValue(props.children);
value = checkedValue && checkedValue.value; value = checkedValue && checkedValue.value;
} }
return { this.state = {
value, value,
}; };
}, }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if ('value' in nextProps) { if ('value' in nextProps) {
this.setState({ this.setState({
@ -52,15 +50,15 @@ export default React.createClass({
}); });
} }
} }
}, }
onRadioChange(ev) { onRadioChange = (ev) => {
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({ this.setState({
value: ev.target.value, value: ev.target.value,
}); });
} }
this.props.onChange(ev); this.props.onChange(ev);
}, }
render() { render() {
const props = this.props; const props = this.props;
const children = React.Children.map(props.children, (radio) => { const children = React.Children.map(props.children, (radio) => {
@ -84,5 +82,5 @@ export default React.createClass({
[`${props.prefixCls}-${props.size}`]: props.size, [`${props.prefixCls}-${props.size}`]: props.size,
}); });
return <div className={classString} style={props.style}>{children}</div>; return <div className={classString} style={props.style}>{children}</div>;
}, }
}); }

12
components/radio/radio.jsx
View File

@ -2,12 +2,10 @@ import RcRadio from 'rc-radio';
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
const Radio = React.createClass({ export default class Radio extends React.Component {
getDefaultProps() { static defaultProps = {
return {
prefixCls: 'ant-radio' prefixCls: 'ant-radio'
}; }
},
render() { render() {
const { prefixCls, children, checked, disabled, className, style } = this.props; const { prefixCls, children, checked, disabled, className, style } = this.props;
const classString = classNames({ const classString = classNames({
@ -23,6 +21,4 @@ const Radio = React.createClass({
</label> </label>
); );
} }
}); }
export default Radio;

12
components/radio/radioButton.jsx
View File

@ -1,17 +1,13 @@
import React from 'react'; import React from 'react';
import Radio from './radio'; import Radio from './radio';
const RadioButton = React.createClass({ export default class RadioButton extends React.Component {
getDefaultProps() { static defaultProps = {
return {
prefixCls: 'ant-radio-button', prefixCls: 'ant-radio-button',
}; }
},
render() { render() {
return ( return (
<Radio {...this.props} /> <Radio {...this.props} />
); );
} }
}); }
export default RadioButton;

27
components/tooltip/index.jsx
View File

@ -1,28 +1,27 @@
import React from 'react'; import React from 'react';
import Tooltip from 'rc-tooltip'; import RcTooltip from 'rc-tooltip';
import getPlacements from '../popover/placements'; import getPlacements from '../popover/placements';
const placements = getPlacements({ const placements = getPlacements({
verticalArrowShift: 8, verticalArrowShift: 8,
}); });
export default React.createClass({ export default class Tooltip extends React.Component {
getDefaultProps() { static defaultProps = {
return {
prefixCls: 'ant-tooltip', prefixCls: 'ant-tooltip',
placement: 'top', placement: 'top',
mouseEnterDelay: 0.1, mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1 mouseLeaveDelay: 0.1
}; }
}, constructor(props) {
getInitialState() { super(props);
return { this.state = {
visible: false visible: false
}; };
}, }
onVisibleChange(visible) { onVisibleChange = (visible) => {
this.setState({ visible }); this.setState({ visible });
}, }
render() { render() {
let transitionName = ({ let transitionName = ({
top: 'zoom-down', top: 'zoom-down',
@ -46,14 +45,14 @@ export default React.createClass({
} }
return ( return (
<Tooltip transitionName={transitionName} <RcTooltip transitionName={transitionName}
builtinPlacements={placements} builtinPlacements={placements}
overlay={this.props.title} overlay={this.props.title}
visible={visible} visible={visible}
onVisibleChange={this.onVisibleChange} onVisibleChange={this.onVisibleChange}
{...this.props}> {...this.props}>
{this.props.children} {this.props.children}
</Tooltip> </RcTooltip>
); );
} }
}); }