ant-design/components/button/button.jsx

91 lines
2.5 KiB
React
Raw Normal View History

2015-09-27 16:30:35 +08:00
import React from 'react';
import classNames from 'classnames';
import { findDOMNode } from 'react-dom';
2016-03-25 18:13:51 +08:00
import Icon from '../icon';
2015-09-27 16:30:35 +08:00
2016-03-15 14:10:25 +08:00
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
2015-09-27 16:30:35 +08:00
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
function isString(str) {
return typeof str === 'string';
}
// Insert one space between two chinese characters automatically.
function insertSpace(child) {
if (isString(child) && isTwoCNChar(child)) {
return child.split('').join(' ');
}
if (isString(child.type) && isTwoCNChar(child.props.children)) {
return React.cloneElement(child, {},
child.props.children.split('').join(' '));
}
return child;
}
export default class Button extends React.Component {
static defaultProps = {
2016-04-06 15:50:58 +08:00
prefixCls: 'ant-btn',
onClick() {},
}
static propTypes = {
type: React.PropTypes.string,
shape: React.PropTypes.oneOf(['circle', 'circle-outline']),
2016-04-06 15:52:38 +08:00
size: React.PropTypes.oneOf(['large', 'default', 'small']),
htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']),
onClick: React.PropTypes.func,
loading: React.PropTypes.bool,
className: React.PropTypes.string,
icon: React.PropTypes.string,
}
2016-04-06 15:50:58 +08:00
clearButton = (button) => {
button.className = button.className.replace(`${this.props.prefixCls}-clicked`, '');
}
handleClick = (...args) => {
2016-03-03 21:33:02 +08:00
// Add click effect
const buttonNode = findDOMNode(this);
2016-04-06 15:50:58 +08:00
this.clearButton(buttonNode);
setTimeout(() => buttonNode.className += ` ${this.props.prefixCls}-clicked`, 10);
2016-03-03 21:33:02 +08:00
clearTimeout(this.timeout);
2016-04-06 15:50:58 +08:00
this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);
2016-03-03 21:33:02 +08:00
2016-02-23 00:05:26 +08:00
this.props.onClick(...args);
}
2015-09-27 16:30:35 +08:00
render() {
const props = this.props;
2016-04-06 15:50:58 +08:00
const { type, shape, size, className, htmlType, children, icon, prefixCls, ...others } = props;
2015-09-27 16:30:35 +08:00
// large => lg
// small => sm
const sizeCls = ({
2016-01-05 14:42:06 +08:00
large: 'lg',
small: 'sm',
})[size] || '';
const classes = classNames({
2016-04-06 15:50:58 +08:00
[prefixCls]: true,
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && icon,
[`${prefixCls}-loading`]: ('loading' in props && props.loading !== false),
2016-03-03 21:33:02 +08:00
[className]: className,
});
2015-09-27 16:30:35 +08:00
const kids = React.Children.map(children, insertSpace);
return (
2016-03-03 21:33:02 +08:00
<button {...others}
type={htmlType || 'button'}
className={classes}
onClick={this.handleClick}>
2016-03-25 18:13:51 +08:00
{icon ? <Icon type={icon} /> : null}{kids}
</button>
);
2015-09-27 16:30:35 +08:00
}
}