2016-09-20 14:51:43 +08:00
|
|
|
import React from 'react';
|
2017-04-12 04:49:08 +08:00
|
|
|
import PropTypes from 'prop-types';
|
2015-11-24 20:03:57 +08:00
|
|
|
import classNames from 'classnames';
|
2017-02-21 14:44:08 +08:00
|
|
|
import omit from 'omit.js';
|
2017-05-16 11:55:17 +08:00
|
|
|
import Icon from '../icon';
|
|
|
|
import Group from './button-group';
|
2016-12-19 15:19:15 +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);
|
2017-04-27 00:30:51 +08:00
|
|
|
function isString(str: any) {
|
2015-09-27 16:30:35 +08:00
|
|
|
return typeof str === 'string';
|
|
|
|
}
|
|
|
|
|
|
|
|
// Insert one space between two chinese characters automatically.
|
2017-05-02 20:16:18 +08:00
|
|
|
function insertSpace(child: React.ReactChild, needInserted: boolean) {
|
2017-03-24 13:10:27 +08:00
|
|
|
// Check the child if is undefined or null.
|
|
|
|
if (child == null) {
|
|
|
|
return;
|
|
|
|
}
|
2017-05-02 20:16:18 +08:00
|
|
|
const SPACE = needInserted ? ' ' : '';
|
2017-04-27 00:30:51 +08:00
|
|
|
// strictNullChecks oops.
|
|
|
|
if (typeof child !== 'string' && typeof child !== 'number' &&
|
|
|
|
isString(child.type) && isTwoCNChar(child.props.children)) {
|
2015-09-27 16:30:35 +08:00
|
|
|
return React.cloneElement(child, {},
|
2017-05-02 20:16:18 +08:00
|
|
|
child.props.children.split('').join(SPACE));
|
2015-09-27 16:30:35 +08:00
|
|
|
}
|
2017-04-27 00:30:51 +08:00
|
|
|
if (typeof child === 'string') {
|
2016-04-12 11:56:14 +08:00
|
|
|
if (isTwoCNChar(child)) {
|
2017-05-02 20:16:18 +08:00
|
|
|
child = child.split('').join(SPACE);
|
2016-04-12 11:56:14 +08:00
|
|
|
}
|
|
|
|
return <span>{child}</span>;
|
|
|
|
}
|
2015-09-27 16:30:35 +08:00
|
|
|
return child;
|
|
|
|
}
|
|
|
|
|
2017-03-23 21:15:49 +08:00
|
|
|
export type ButtonType = 'primary' | 'ghost' | 'dashed' | 'danger';
|
|
|
|
export type ButtonShape = 'circle' | 'circle-outline';
|
2017-09-15 17:03:43 +08:00
|
|
|
export type ButtonSize = 'small' | 'default' | 'large';
|
2016-07-14 13:29:50 +08:00
|
|
|
|
2016-09-13 15:31:29 +08:00
|
|
|
export interface ButtonProps {
|
2016-07-14 13:29:50 +08:00
|
|
|
type?: ButtonType;
|
|
|
|
htmlType?: string;
|
|
|
|
icon?: string;
|
|
|
|
shape?: ButtonShape;
|
|
|
|
size?: ButtonSize;
|
2016-10-19 17:51:33 +08:00
|
|
|
onClick?: React.FormEventHandler<any>;
|
|
|
|
onMouseUp?: React.FormEventHandler<any>;
|
2017-05-16 11:55:17 +08:00
|
|
|
onMouseDown?: React.FormEventHandler<any>;
|
2017-03-28 15:50:46 +08:00
|
|
|
loading?: boolean | { delay?: number };
|
2016-07-14 13:29:50 +08:00
|
|
|
disabled?: boolean;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
prefixCls?: string;
|
2016-09-19 10:17:07 +08:00
|
|
|
className?: string;
|
2017-01-23 22:24:36 +08:00
|
|
|
ghost?: boolean;
|
2016-07-14 13:29:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class Button extends React.Component<ButtonProps, any> {
|
2017-05-16 11:55:17 +08:00
|
|
|
static Group: typeof Group;
|
2017-02-16 14:03:05 +08:00
|
|
|
static __ANT_BUTTON = true;
|
2016-07-14 13:29:50 +08:00
|
|
|
|
2016-03-29 14:01:10 +08:00
|
|
|
static defaultProps = {
|
2016-04-06 15:50:58 +08:00
|
|
|
prefixCls: 'ant-btn',
|
2016-04-12 12:17:03 +08:00
|
|
|
loading: false,
|
2017-02-26 19:21:22 +08:00
|
|
|
clicked: false,
|
2017-01-23 22:24:36 +08:00
|
|
|
ghost: false,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
|
|
|
static propTypes = {
|
2017-04-12 04:49:08 +08:00
|
|
|
type: PropTypes.string,
|
|
|
|
shape: PropTypes.oneOf(['circle', 'circle-outline']),
|
|
|
|
size: PropTypes.oneOf(['large', 'default', 'small']),
|
|
|
|
htmlType: PropTypes.oneOf(['submit', 'button', 'reset']),
|
|
|
|
onClick: PropTypes.func,
|
|
|
|
loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
|
|
|
className: PropTypes.string,
|
|
|
|
icon: PropTypes.string,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2017-02-26 19:21:22 +08:00
|
|
|
timeout: number;
|
2017-02-21 14:44:08 +08:00
|
|
|
delayTimeout: number;
|
|
|
|
|
2017-04-27 00:30:51 +08:00
|
|
|
constructor(props: ButtonProps) {
|
2017-02-21 14:44:08 +08:00
|
|
|
super(props);
|
|
|
|
this.state = {
|
|
|
|
loading: props.loading,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2017-04-27 00:30:51 +08:00
|
|
|
componentWillReceiveProps(nextProps: ButtonProps) {
|
2017-02-21 14:44:08 +08:00
|
|
|
const currentLoading = this.props.loading;
|
|
|
|
const loading = nextProps.loading;
|
|
|
|
|
|
|
|
if (currentLoading) {
|
|
|
|
clearTimeout(this.delayTimeout);
|
|
|
|
}
|
|
|
|
|
2017-04-27 00:30:51 +08:00
|
|
|
if (typeof loading !== 'boolean' && loading && loading.delay) {
|
2017-03-28 15:50:46 +08:00
|
|
|
this.delayTimeout = setTimeout(() => this.setState({ loading }), loading.delay);
|
2017-02-21 14:44:08 +08:00
|
|
|
} else {
|
|
|
|
this.setState({ loading });
|
|
|
|
}
|
|
|
|
}
|
2016-07-14 13:29:50 +08:00
|
|
|
|
2016-05-28 15:31:39 +08:00
|
|
|
componentWillUnmount() {
|
|
|
|
if (this.timeout) {
|
|
|
|
clearTimeout(this.timeout);
|
|
|
|
}
|
2017-02-21 14:44:08 +08:00
|
|
|
if (this.delayTimeout) {
|
|
|
|
clearTimeout(this.delayTimeout);
|
|
|
|
}
|
2016-05-28 15:31:39 +08:00
|
|
|
}
|
|
|
|
|
2017-04-27 00:30:51 +08:00
|
|
|
handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
2016-03-03 21:33:02 +08:00
|
|
|
// Add click effect
|
2017-02-26 19:21:22 +08:00
|
|
|
this.setState({ clicked: true });
|
2016-03-03 21:33:02 +08:00
|
|
|
clearTimeout(this.timeout);
|
2017-02-26 19:21:22 +08:00
|
|
|
this.timeout = setTimeout(() => this.setState({ clicked: false }), 500);
|
2016-03-03 21:33:02 +08:00
|
|
|
|
2016-10-24 12:04:26 +08:00
|
|
|
const onClick = this.props.onClick;
|
|
|
|
if (onClick) {
|
|
|
|
onClick(e);
|
|
|
|
}
|
2016-02-18 16:08:48 +08:00
|
|
|
}
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2015-09-27 16:30:35 +08:00
|
|
|
render() {
|
2017-01-23 22:24:36 +08:00
|
|
|
const {
|
2017-02-21 14:44:08 +08:00
|
|
|
type, shape, size = '', className, htmlType, children, icon, prefixCls, ghost, ...others,
|
2017-01-23 22:24:36 +08:00
|
|
|
} = this.props;
|
2015-09-27 16:30:35 +08:00
|
|
|
|
2017-02-26 19:21:22 +08:00
|
|
|
const { loading, clicked } = this.state;
|
2017-04-27 00:30:51 +08:00
|
|
|
|
2015-10-22 21:01:52 +08:00
|
|
|
// large => lg
|
|
|
|
// small => sm
|
2017-04-27 00:30:51 +08:00
|
|
|
let sizeCls = '';
|
|
|
|
switch (size) {
|
|
|
|
case 'large':
|
|
|
|
sizeCls = 'lg';
|
|
|
|
break;
|
|
|
|
case 'small':
|
|
|
|
sizeCls = 'sm';
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
2015-10-22 21:01:52 +08:00
|
|
|
|
2017-07-14 15:26:55 +08:00
|
|
|
const classes = classNames(prefixCls, className, {
|
2016-04-06 15:50:58 +08:00
|
|
|
[`${prefixCls}-${type}`]: type,
|
|
|
|
[`${prefixCls}-${shape}`]: shape,
|
|
|
|
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
2017-09-23 16:08:30 +08:00
|
|
|
[`${prefixCls}-icon-only`]: !children && icon,
|
2016-04-12 12:17:03 +08:00
|
|
|
[`${prefixCls}-loading`]: loading,
|
2017-02-26 19:21:22 +08:00
|
|
|
[`${prefixCls}-clicked`]: clicked,
|
2017-01-23 22:24:36 +08:00
|
|
|
[`${prefixCls}-background-ghost`]: ghost,
|
2017-07-14 15:26:55 +08:00
|
|
|
});
|
2015-09-27 16:30:35 +08:00
|
|
|
|
2016-04-12 12:17:03 +08:00
|
|
|
const iconType = loading ? 'loading' : icon;
|
2016-12-26 19:46:01 +08:00
|
|
|
const iconNode = iconType ? <Icon type={iconType} /> : null;
|
2017-08-15 20:08:00 +08:00
|
|
|
const needInserted = React.Children.count(children) === 1 && (!iconType || iconType === 'loading');
|
2017-05-02 20:16:18 +08:00
|
|
|
const kids = React.Children.map(children, child => insertSpace(child, needInserted));
|
2015-09-27 16:30:35 +08:00
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
return (
|
2016-11-23 17:53:10 +08:00
|
|
|
<button
|
2017-02-27 11:18:48 +08:00
|
|
|
{...omit(others, ['loading', 'clicked'])}
|
2016-03-03 21:33:02 +08:00
|
|
|
type={htmlType || 'button'}
|
|
|
|
className={classes}
|
2016-06-06 13:54:10 +08:00
|
|
|
onClick={this.handleClick}
|
|
|
|
>
|
2016-12-26 19:46:01 +08:00
|
|
|
{iconNode}{kids}
|
2016-01-07 14:21:29 +08:00
|
|
|
</button>
|
|
|
|
);
|
2015-09-27 16:30:35 +08:00
|
|
|
}
|
|
|
|
}
|