2015-09-27 16:30:35 +08:00
|
|
|
import React from 'react';
|
2015-11-24 20:03:57 +08:00
|
|
|
import classNames from 'classnames';
|
2015-10-27 16:26:56 +08:00
|
|
|
import { findDOMNode } from 'react-dom';
|
2015-09-27 16:30:35 +08:00
|
|
|
|
|
|
|
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
|
|
|
|
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
|
|
|
|
function isString(str) {
|
|
|
|
return typeof str === 'string';
|
|
|
|
}
|
|
|
|
|
|
|
|
const prefix = 'ant-btn-';
|
|
|
|
|
|
|
|
// 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 {
|
2015-10-27 16:26:56 +08:00
|
|
|
componentDidMount() {
|
|
|
|
if (window && window.PIE) {
|
|
|
|
window.PIE.attach(findDOMNode(this));
|
|
|
|
}
|
|
|
|
}
|
2015-09-27 16:30:35 +08:00
|
|
|
render() {
|
|
|
|
const props = this.props;
|
2015-10-09 16:55:07 +08:00
|
|
|
const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
|
2015-09-27 16:30:35 +08:00
|
|
|
|
2015-10-22 21:01:52 +08:00
|
|
|
// large => lg
|
|
|
|
// small => sm
|
|
|
|
const sizeCls = ({
|
|
|
|
'large': 'lg',
|
|
|
|
'small': 'sm'
|
|
|
|
})[size] || '';
|
|
|
|
|
2015-11-24 20:03:57 +08:00
|
|
|
const classes = classNames({
|
2015-10-09 16:42:08 +08:00
|
|
|
'ant-btn': true,
|
|
|
|
[prefix + type]: type,
|
|
|
|
[prefix + shape]: shape,
|
2015-10-22 21:01:52 +08:00
|
|
|
[prefix + sizeCls]: sizeCls,
|
2015-10-09 16:42:08 +08:00
|
|
|
[prefix + 'loading']: ('loading' in props && props.loading !== false),
|
|
|
|
[className]: className
|
|
|
|
});
|
2015-09-27 16:30:35 +08:00
|
|
|
|
|
|
|
const kids = React.Children.map(children, insertSpace);
|
|
|
|
|
2015-10-09 16:55:07 +08:00
|
|
|
return <button {...others} type={htmlType || 'button'} className={classes} onClick={onClick}>
|
2015-09-27 16:30:35 +08:00
|
|
|
{kids}
|
|
|
|
</button>;
|
|
|
|
}
|
|
|
|
}
|
2015-10-28 15:45:31 +08:00
|
|
|
|
|
|
|
Button.propTypes = {
|
|
|
|
type: React.PropTypes.string,
|
|
|
|
shape: React.PropTypes.string,
|
|
|
|
size: React.PropTypes.string,
|
|
|
|
htmlType: React.PropTypes.string,
|
|
|
|
onClick: React.PropTypes.func,
|
|
|
|
loading: React.PropTypes.bool,
|
|
|
|
className: React.PropTypes.string,
|
|
|
|
};
|
|
|
|
|
2015-09-27 16:30:35 +08:00
|
|
|
Button.defaultProps = {
|
|
|
|
onClick() {},
|
|
|
|
};
|