2019-08-05 18:38:10 +08:00
|
|
|
/* eslint-disable react/button-has-type */
|
2017-11-17 14:38:54 +08:00
|
|
|
import * as React from 'react';
|
2018-08-07 21:07:52 +08:00
|
|
|
import * as PropTypes from 'prop-types';
|
2015-11-24 20:03:57 +08:00
|
|
|
import classNames from 'classnames';
|
2019-11-28 12:34:33 +08:00
|
|
|
import { LoadingOutlined } from '@ant-design/icons';
|
2018-10-25 04:43:21 +08:00
|
|
|
import { polyfill } from 'react-lifecycles-compat';
|
2018-12-24 14:00:51 +08:00
|
|
|
import omit from 'omit.js';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
import Group from './button-group';
|
2018-12-05 19:12:18 +08:00
|
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
|
|
import Wave from '../_util/wave';
|
2019-03-28 05:28:59 +08:00
|
|
|
import { Omit, tuple } from '../_util/type';
|
2019-12-13 10:18:12 +08:00
|
|
|
import warning from '../_util/warning';
|
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.
|
2018-12-07 20:02:01 +08:00
|
|
|
if (
|
|
|
|
typeof child !== 'string' &&
|
|
|
|
typeof child !== 'number' &&
|
|
|
|
isString(child.type) &&
|
|
|
|
isTwoCNChar(child.props.children)
|
|
|
|
) {
|
|
|
|
return React.cloneElement(child, {}, 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;
|
|
|
|
}
|
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
function spaceChildren(children: React.ReactNode, needInserted: boolean) {
|
|
|
|
let isPrevChildPure: boolean = false;
|
|
|
|
const childList: React.ReactNode[] = [];
|
|
|
|
React.Children.forEach(children, child => {
|
|
|
|
const type = typeof child;
|
|
|
|
const isCurrentChildPure = type === 'string' || type === 'number';
|
|
|
|
if (isPrevChildPure && isCurrentChildPure) {
|
|
|
|
const lastIndex = childList.length - 1;
|
|
|
|
const lastChild = childList[lastIndex];
|
|
|
|
childList[lastIndex] = `${lastChild}${child}`;
|
|
|
|
} else {
|
|
|
|
childList.push(child);
|
|
|
|
}
|
|
|
|
|
|
|
|
isPrevChildPure = isCurrentChildPure;
|
|
|
|
});
|
|
|
|
|
|
|
|
// Pass to React.Children.map to auto fill key
|
|
|
|
return React.Children.map(childList, child =>
|
|
|
|
insertSpace(child as React.ReactChild, needInserted),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-11-22 15:32:11 +08:00
|
|
|
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');
|
2019-11-22 12:02:35 +08:00
|
|
|
export type ButtonType = typeof ButtonTypes[number];
|
2019-01-10 11:15:43 +08:00
|
|
|
const ButtonShapes = tuple('circle', 'circle-outline', 'round');
|
2019-11-22 12:02:35 +08:00
|
|
|
export type ButtonShape = typeof ButtonShapes[number];
|
2018-12-22 21:21:42 +08:00
|
|
|
const ButtonSizes = tuple('large', 'default', 'small');
|
2019-11-22 12:02:35 +08:00
|
|
|
export type ButtonSize = typeof ButtonSizes[number];
|
2018-12-22 21:21:42 +08:00
|
|
|
const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
|
2019-11-22 12:02:35 +08:00
|
|
|
export type ButtonHTMLType = typeof ButtonHTMLTypes[number];
|
2016-07-14 13:29:50 +08:00
|
|
|
|
2018-05-18 18:22:33 +08:00
|
|
|
export interface BaseButtonProps {
|
2016-07-14 13:29:50 +08:00
|
|
|
type?: ButtonType;
|
2019-08-13 14:07:17 +08:00
|
|
|
icon?: React.ReactNode;
|
2016-07-14 13:29:50 +08:00
|
|
|
shape?: ButtonShape;
|
|
|
|
size?: ButtonSize;
|
2017-03-28 15:50:46 +08:00
|
|
|
loading?: boolean | { delay?: number };
|
2016-07-14 13:29:50 +08:00
|
|
|
prefixCls?: string;
|
2016-09-19 10:17:07 +08:00
|
|
|
className?: string;
|
2017-01-23 22:24:36 +08:00
|
|
|
ghost?: boolean;
|
2019-11-22 15:32:11 +08:00
|
|
|
danger?: boolean;
|
2018-07-29 16:33:26 +08:00
|
|
|
block?: boolean;
|
2018-08-30 17:59:09 +08:00
|
|
|
children?: React.ReactNode;
|
2016-07-14 13:29:50 +08:00
|
|
|
}
|
|
|
|
|
2019-04-08 18:04:46 +08:00
|
|
|
// Typescript will make optional not optional if use Pick with union.
|
|
|
|
// Should change to `AnchorButtonProps | NativeButtonProps` and `any` to `HTMLAnchorElement | HTMLButtonElement` if it fixed.
|
|
|
|
// ref: https://github.com/ant-design/ant-design/issues/15930
|
2018-06-14 10:53:14 +08:00
|
|
|
export type AnchorButtonProps = {
|
|
|
|
href: string;
|
|
|
|
target?: string;
|
2019-06-16 20:51:47 +08:00
|
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
2018-12-07 20:02:01 +08:00
|
|
|
} & BaseButtonProps &
|
2019-06-24 11:29:58 +08:00
|
|
|
Omit<React.AnchorHTMLAttributes<any>, 'type' | 'onClick'>;
|
2018-05-04 14:48:41 +08:00
|
|
|
|
2018-06-14 10:53:14 +08:00
|
|
|
export type NativeButtonProps = {
|
|
|
|
htmlType?: ButtonHTMLType;
|
2019-06-16 20:51:47 +08:00
|
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
2018-12-07 20:02:01 +08:00
|
|
|
} & BaseButtonProps &
|
2019-06-24 11:29:58 +08:00
|
|
|
Omit<React.ButtonHTMLAttributes<any>, 'type' | 'onClick'>;
|
2018-05-04 14:48:41 +08:00
|
|
|
|
2019-04-08 18:04:46 +08:00
|
|
|
export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;
|
2018-05-04 14:48:41 +08:00
|
|
|
|
2018-10-25 04:43:21 +08:00
|
|
|
interface ButtonState {
|
2018-10-25 12:59:20 +08:00
|
|
|
loading?: boolean | { delay?: number };
|
2018-10-25 04:43:21 +08:00
|
|
|
hasTwoCNChar: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
class Button extends React.Component<ButtonProps, ButtonState> {
|
2017-05-16 11:55:17 +08:00
|
|
|
static Group: typeof Group;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
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-12 12:17:03 +08:00
|
|
|
loading: false,
|
2017-01-23 22:24:36 +08:00
|
|
|
ghost: false,
|
2018-07-29 16:33:26 +08:00
|
|
|
block: false,
|
2019-03-28 16:58:37 +08:00
|
|
|
htmlType: 'button',
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
|
|
|
static propTypes = {
|
2018-12-26 18:13:35 +08:00
|
|
|
type: PropTypes.string,
|
2018-12-22 21:21:42 +08:00
|
|
|
shape: PropTypes.oneOf(ButtonShapes),
|
|
|
|
size: PropTypes.oneOf(ButtonSizes),
|
|
|
|
htmlType: PropTypes.oneOf(ButtonHTMLTypes),
|
2017-04-12 04:49:08 +08:00
|
|
|
onClick: PropTypes.func,
|
|
|
|
loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
|
|
|
className: PropTypes.string,
|
2019-08-13 14:07:17 +08:00
|
|
|
icon: PropTypes.node,
|
2018-07-29 16:33:26 +08:00
|
|
|
block: PropTypes.bool,
|
2019-08-08 11:11:46 +08:00
|
|
|
title: PropTypes.string,
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2018-08-11 14:57:41 +08:00
|
|
|
private delayTimeout: number;
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2018-10-30 16:08:55 +08:00
|
|
|
private buttonNode: HTMLElement | null;
|
2017-02-21 14:44:08 +08:00
|
|
|
|
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,
|
2018-01-02 16:27:59 +08:00
|
|
|
hasTwoCNChar: false,
|
2017-02-21 14:44:08 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-01-02 16:27:59 +08:00
|
|
|
componentDidMount() {
|
2018-03-23 22:23:03 +08:00
|
|
|
this.fixTwoCNChar();
|
2018-01-02 16:27:59 +08:00
|
|
|
}
|
|
|
|
|
2018-12-26 23:57:33 +08:00
|
|
|
componentDidUpdate(prevProps: ButtonProps) {
|
2018-10-25 04:43:21 +08:00
|
|
|
this.fixTwoCNChar();
|
2017-02-21 14:44:08 +08:00
|
|
|
|
2018-10-25 04:43:21 +08:00
|
|
|
if (prevProps.loading && typeof prevProps.loading !== 'boolean') {
|
2017-02-21 14:44:08 +08:00
|
|
|
clearTimeout(this.delayTimeout);
|
|
|
|
}
|
|
|
|
|
2018-10-25 04:43:21 +08:00
|
|
|
const { loading } = this.props;
|
|
|
|
if (loading && typeof loading !== 'boolean' && loading.delay) {
|
2019-09-16 11:23:26 +08:00
|
|
|
this.delayTimeout = window.setTimeout(() => {
|
|
|
|
this.setState({ loading });
|
|
|
|
}, loading.delay);
|
|
|
|
} else if (prevProps.loading !== loading) {
|
2019-08-06 15:09:07 +08:00
|
|
|
// eslint-disable-next-line react/no-did-update-set-state
|
2017-02-21 14:44:08 +08:00
|
|
|
this.setState({ loading });
|
|
|
|
}
|
|
|
|
}
|
2016-07-14 13:29:50 +08:00
|
|
|
|
2016-05-28 15:31:39 +08:00
|
|
|
componentWillUnmount() {
|
2017-02-21 14:44:08 +08:00
|
|
|
if (this.delayTimeout) {
|
|
|
|
clearTimeout(this.delayTimeout);
|
|
|
|
}
|
2016-05-28 15:31:39 +08:00
|
|
|
}
|
|
|
|
|
2018-10-30 16:08:55 +08:00
|
|
|
saveButtonRef = (node: HTMLElement | null) => {
|
|
|
|
this.buttonNode = node;
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-10-30 16:08:55 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
handleClick: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement> = e => {
|
|
|
|
const { loading } = this.state;
|
|
|
|
const { onClick } = this.props;
|
|
|
|
if (loading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (onClick) {
|
|
|
|
(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)(e);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2018-03-23 22:23:03 +08:00
|
|
|
fixTwoCNChar() {
|
|
|
|
// Fix for HOC usage like <FormatMessage />
|
2018-10-30 16:08:55 +08:00
|
|
|
if (!this.buttonNode) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const buttonText = this.buttonNode.textContent || this.buttonNode.innerText;
|
2018-03-23 22:23:03 +08:00
|
|
|
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
|
|
|
|
if (!this.state.hasTwoCNChar) {
|
|
|
|
this.setState({
|
|
|
|
hasTwoCNChar: true,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
} else if (this.state.hasTwoCNChar) {
|
|
|
|
this.setState({
|
|
|
|
hasTwoCNChar: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-01-02 16:27:59 +08:00
|
|
|
isNeedInserted() {
|
2019-09-16 11:23:26 +08:00
|
|
|
const { icon, children, type } = this.props;
|
|
|
|
return React.Children.count(children) === 1 && !icon && type !== 'link';
|
2018-01-02 16:27:59 +08:00
|
|
|
}
|
|
|
|
|
2019-01-10 11:47:11 +08:00
|
|
|
renderButton = ({ getPrefixCls, autoInsertSpaceInButton }: ConfigConsumerProps) => {
|
2017-01-23 22:24:36 +08:00
|
|
|
const {
|
2018-12-05 19:12:18 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
2018-12-07 20:02:01 +08:00
|
|
|
type,
|
2019-11-22 15:32:11 +08:00
|
|
|
danger,
|
2018-12-07 20:02:01 +08:00
|
|
|
shape,
|
|
|
|
size,
|
|
|
|
className,
|
|
|
|
children,
|
|
|
|
icon,
|
|
|
|
ghost,
|
|
|
|
block,
|
2018-12-05 19:12:18 +08:00
|
|
|
...rest
|
2017-01-23 22:24:36 +08:00
|
|
|
} = this.props;
|
2018-08-08 16:01:07 +08:00
|
|
|
const { loading, hasTwoCNChar } = this.state;
|
2017-04-27 00:30:51 +08:00
|
|
|
|
2019-12-13 10:18:12 +08:00
|
|
|
warning(
|
|
|
|
!(typeof icon === 'string' && icon.length > 2),
|
|
|
|
'Button',
|
|
|
|
`\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
|
|
|
|
);
|
|
|
|
|
2018-12-05 19:12:18 +08:00
|
|
|
const prefixCls = getPrefixCls('btn', customizePrefixCls);
|
2019-01-10 11:47:11 +08:00
|
|
|
const autoInsertSpace = autoInsertSpaceInButton !== false;
|
2018-12-05 19:12:18 +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';
|
2019-03-28 16:58:37 +08:00
|
|
|
break;
|
2017-04-27 00:30:51 +08:00
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
2015-10-22 21:01:52 +08:00
|
|
|
|
2019-08-25 21:04:10 +08:00
|
|
|
const iconType = loading ? 'loading' : icon;
|
|
|
|
|
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,
|
2019-08-25 21:04:10 +08:00
|
|
|
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
|
2019-09-16 11:23:26 +08:00
|
|
|
[`${prefixCls}-loading`]: !!loading,
|
2017-01-23 22:24:36 +08:00
|
|
|
[`${prefixCls}-background-ghost`]: ghost,
|
2019-01-10 11:47:11 +08:00
|
|
|
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
|
2018-07-29 16:33:26 +08:00
|
|
|
[`${prefixCls}-block`]: block,
|
2019-11-22 15:32:11 +08:00
|
|
|
[`${prefixCls}-dangerous`]: !!danger,
|
2017-07-14 15:26:55 +08:00
|
|
|
});
|
2015-09-27 16:30:35 +08:00
|
|
|
|
2019-11-28 12:34:33 +08:00
|
|
|
const iconNode = loading ? <LoadingOutlined /> : icon || null;
|
2018-12-07 20:02:01 +08:00
|
|
|
const kids =
|
|
|
|
children || children === 0
|
2019-05-17 12:04:47 +08:00
|
|
|
? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)
|
2018-12-07 20:02:01 +08:00
|
|
|
: null;
|
2015-09-27 16:30:35 +08:00
|
|
|
|
2019-08-11 16:32:55 +08:00
|
|
|
const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType', 'loading']);
|
2018-12-03 10:39:00 +08:00
|
|
|
if (linkButtonRestProps.href !== undefined) {
|
2018-06-14 10:53:14 +08:00
|
|
|
return (
|
|
|
|
<a
|
2018-12-03 10:39:00 +08:00
|
|
|
{...linkButtonRestProps}
|
2018-06-14 10:53:14 +08:00
|
|
|
className={classes}
|
|
|
|
onClick={this.handleClick}
|
2018-10-30 16:08:55 +08:00
|
|
|
ref={this.saveButtonRef}
|
2018-06-14 10:53:14 +08:00
|
|
|
>
|
2018-12-07 20:02:01 +08:00
|
|
|
{iconNode}
|
|
|
|
{kids}
|
2018-06-14 10:53:14 +08:00
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
2018-12-03 10:39:00 +08:00
|
|
|
|
|
|
|
// React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
|
|
|
|
const { htmlType, ...otherProps } = rest as NativeButtonProps;
|
|
|
|
|
2019-05-06 12:04:39 +08:00
|
|
|
const buttonNode = (
|
|
|
|
<button
|
2019-08-11 16:32:55 +08:00
|
|
|
{...(omit(otherProps, ['loading']) as NativeButtonProps)}
|
2019-05-06 12:04:39 +08:00
|
|
|
type={htmlType}
|
|
|
|
className={classes}
|
|
|
|
onClick={this.handleClick}
|
|
|
|
ref={this.saveButtonRef}
|
|
|
|
>
|
|
|
|
{iconNode}
|
|
|
|
{kids}
|
|
|
|
</button>
|
2018-12-03 10:39:00 +08:00
|
|
|
);
|
2019-05-06 12:04:39 +08:00
|
|
|
|
2019-11-22 15:32:11 +08:00
|
|
|
if (type === 'link') {
|
2019-05-06 12:04:39 +08:00
|
|
|
return buttonNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <Wave>{buttonNode}</Wave>;
|
2018-12-07 20:02:01 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
|
|
|
render() {
|
2018-12-07 20:02:01 +08:00
|
|
|
return <ConfigConsumer>{this.renderButton}</ConfigConsumer>;
|
2018-12-05 19:12:18 +08:00
|
|
|
}
|
2015-09-27 16:30:35 +08:00
|
|
|
}
|
2018-10-25 04:43:21 +08:00
|
|
|
|
|
|
|
polyfill(Button);
|
|
|
|
|
|
|
|
export default Button;
|