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';
|
2015-11-24 20:03:57 +08:00
|
|
|
import classNames from 'classnames';
|
2021-01-13 21:00:30 +08:00
|
|
|
import omit from 'rc-util/lib/omit';
|
2019-08-13 14:07:17 +08:00
|
|
|
|
2019-08-05 18:38:10 +08:00
|
|
|
import Group from './button-group';
|
2020-04-18 13:06:04 +08:00
|
|
|
import { ConfigContext } from '../config-provider';
|
2018-12-05 19:12:18 +08:00
|
|
|
import Wave from '../_util/wave';
|
2019-03-28 05:28:59 +08:00
|
|
|
import { Omit, tuple } from '../_util/type';
|
2020-05-14 15:57:04 +08:00
|
|
|
import devWarning from '../_util/devWarning';
|
2020-01-03 13:38:16 +08:00
|
|
|
import SizeContext, { SizeType } from '../config-provider/SizeContext';
|
2020-04-10 15:39:07 +08:00
|
|
|
import LoadingIcon from './LoadingIcon';
|
2020-05-14 20:54:49 +08:00
|
|
|
import { cloneElement } from '../_util/reactNode';
|
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';
|
|
|
|
}
|
|
|
|
|
2020-06-19 17:46:15 +08:00
|
|
|
function isUnborderedButtonType(type: ButtonType | undefined) {
|
|
|
|
return type === 'text' || type === 'link';
|
|
|
|
}
|
|
|
|
|
2015-09-27 16:30:35 +08:00
|
|
|
// 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)
|
|
|
|
) {
|
2020-05-14 20:54:49 +08:00
|
|
|
return cloneElement(child, {
|
|
|
|
children: 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),
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-05-06 10:15:33 +08:00
|
|
|
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
|
2019-11-22 12:02:35 +08:00
|
|
|
export type ButtonType = typeof ButtonTypes[number];
|
2020-10-16 15:50:19 +08:00
|
|
|
const ButtonShapes = tuple('circle', 'round');
|
2019-11-22 12:02:35 +08:00
|
|
|
export type ButtonShape = typeof ButtonShapes[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
|
|
|
|
2020-05-05 12:03:16 +08:00
|
|
|
export type LegacyButtonType = ButtonType | 'danger';
|
|
|
|
export function convertLegacyProps(type?: LegacyButtonType): ButtonProps {
|
|
|
|
if (type === 'danger') {
|
|
|
|
return { danger: true };
|
|
|
|
}
|
|
|
|
return { type };
|
|
|
|
}
|
|
|
|
|
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;
|
2020-01-03 13:38:16 +08:00
|
|
|
size?: SizeType;
|
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
|
|
|
|
2020-04-25 20:45:28 +08:00
|
|
|
interface CompoundedComponent
|
|
|
|
extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>> {
|
2020-04-18 13:06:04 +08:00
|
|
|
Group: typeof Group;
|
|
|
|
__ANT_BUTTON: boolean;
|
2018-10-25 04:43:21 +08:00
|
|
|
}
|
|
|
|
|
2020-06-03 21:59:54 +08:00
|
|
|
type Loading = number | boolean;
|
|
|
|
|
2020-04-25 20:45:28 +08:00
|
|
|
const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
|
2020-06-02 12:54:22 +08:00
|
|
|
const {
|
2020-12-05 23:08:30 +08:00
|
|
|
loading = false,
|
2020-06-02 12:54:22 +08:00
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
type,
|
|
|
|
danger,
|
|
|
|
shape,
|
|
|
|
size: customizeSize,
|
|
|
|
className,
|
|
|
|
children,
|
|
|
|
icon,
|
2020-12-05 23:08:30 +08:00
|
|
|
ghost = false,
|
|
|
|
block = false,
|
2020-12-28 15:30:18 +08:00
|
|
|
/** If we extract items here, we don't need use omit.js */
|
2020-12-05 23:08:30 +08:00
|
|
|
// React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
|
|
|
|
htmlType = 'button' as ButtonProps['htmlType'],
|
2020-06-02 12:54:22 +08:00
|
|
|
...rest
|
|
|
|
} = props;
|
|
|
|
|
2020-04-25 20:45:28 +08:00
|
|
|
const size = React.useContext(SizeContext);
|
2020-06-03 21:59:54 +08:00
|
|
|
const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
|
2020-04-18 13:06:04 +08:00
|
|
|
const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
|
|
|
|
const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
|
2020-04-25 20:45:28 +08:00
|
|
|
const buttonRef = (ref as any) || React.createRef<HTMLElement>();
|
2020-06-02 12:54:22 +08:00
|
|
|
const delayTimeoutRef = React.useRef<number>();
|
2020-02-02 18:03:38 +08:00
|
|
|
|
2020-12-09 17:12:32 +08:00
|
|
|
const isNeedInserted = () =>
|
|
|
|
React.Children.count(children) === 1 && !icon && !isUnborderedButtonType(type);
|
2016-03-29 14:01:10 +08:00
|
|
|
|
2020-04-18 13:06:04 +08:00
|
|
|
const fixTwoCNChar = () => {
|
|
|
|
// Fix for HOC usage like <FormatMessage />
|
|
|
|
if (!buttonRef || !buttonRef.current || autoInsertSpaceInButton === false) {
|
|
|
|
return;
|
2017-02-21 14:44:08 +08:00
|
|
|
}
|
2020-04-18 13:06:04 +08:00
|
|
|
const buttonText = buttonRef.current.textContent;
|
|
|
|
if (isNeedInserted() && isTwoCNChar(buttonText)) {
|
|
|
|
if (!hasTwoCNChar) {
|
|
|
|
setHasTwoCNChar(true);
|
|
|
|
}
|
|
|
|
} else if (hasTwoCNChar) {
|
|
|
|
setHasTwoCNChar(false);
|
2017-02-21 14:44:08 +08:00
|
|
|
}
|
2020-04-18 13:06:04 +08:00
|
|
|
};
|
2016-07-14 13:29:50 +08:00
|
|
|
|
2020-06-03 21:59:54 +08:00
|
|
|
// =============== Update Loading ===============
|
|
|
|
let loadingOrDelay: Loading;
|
|
|
|
if (typeof loading === 'object' && loading.delay) {
|
|
|
|
loadingOrDelay = loading.delay || true;
|
|
|
|
} else {
|
|
|
|
loadingOrDelay = !!loading;
|
|
|
|
}
|
|
|
|
|
2020-04-18 13:06:04 +08:00
|
|
|
React.useEffect(() => {
|
2020-06-03 21:59:54 +08:00
|
|
|
clearTimeout(delayTimeoutRef.current);
|
|
|
|
if (typeof loadingOrDelay === 'number') {
|
2020-06-02 12:54:22 +08:00
|
|
|
delayTimeoutRef.current = window.setTimeout(() => {
|
2020-06-03 21:59:54 +08:00
|
|
|
setLoading(loadingOrDelay);
|
|
|
|
}, loadingOrDelay);
|
2020-06-02 12:54:22 +08:00
|
|
|
} else {
|
2020-06-03 21:59:54 +08:00
|
|
|
setLoading(loadingOrDelay);
|
2020-04-18 13:06:04 +08:00
|
|
|
}
|
2020-06-03 21:59:54 +08:00
|
|
|
}, [loadingOrDelay]);
|
2016-05-28 15:31:39 +08:00
|
|
|
|
2020-11-13 19:26:48 +08:00
|
|
|
React.useEffect(fixTwoCNChar, [buttonRef]);
|
2018-10-30 16:08:55 +08:00
|
|
|
|
2020-04-18 13:06:04 +08:00
|
|
|
const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
|
|
|
|
const { onClick } = props;
|
2020-06-02 12:54:22 +08:00
|
|
|
if (innerLoading) {
|
2019-08-05 18:38:10 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (onClick) {
|
|
|
|
(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)(e);
|
|
|
|
}
|
|
|
|
};
|
2020-04-25 20:45:28 +08:00
|
|
|
|
2020-05-14 15:57:04 +08:00
|
|
|
devWarning(
|
2020-04-25 20:45:28 +08:00
|
|
|
!(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`,
|
|
|
|
);
|
|
|
|
|
2020-06-19 17:46:15 +08:00
|
|
|
devWarning(
|
|
|
|
!(ghost && isUnborderedButtonType(type)),
|
|
|
|
'Button',
|
|
|
|
"`link` or `text` button can't be a `ghost` button.",
|
|
|
|
);
|
|
|
|
|
2020-04-25 20:45:28 +08:00
|
|
|
const prefixCls = getPrefixCls('btn', customizePrefixCls);
|
|
|
|
const autoInsertSpace = autoInsertSpaceInButton !== false;
|
|
|
|
|
|
|
|
// large => lg
|
|
|
|
// small => sm
|
|
|
|
let sizeCls = '';
|
|
|
|
switch (customizeSize || size) {
|
|
|
|
case 'large':
|
|
|
|
sizeCls = 'lg';
|
|
|
|
break;
|
|
|
|
case 'small':
|
|
|
|
sizeCls = 'sm';
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
2020-06-02 12:54:22 +08:00
|
|
|
const iconType = innerLoading ? 'loading' : icon;
|
2020-04-25 20:45:28 +08:00
|
|
|
|
2020-09-06 13:07:39 +08:00
|
|
|
const classes = classNames(
|
|
|
|
prefixCls,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-${type}`]: type,
|
|
|
|
[`${prefixCls}-${shape}`]: shape,
|
|
|
|
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
|
|
|
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
|
|
|
|
[`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
|
|
|
|
[`${prefixCls}-loading`]: innerLoading,
|
|
|
|
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
|
|
|
|
[`${prefixCls}-block`]: block,
|
|
|
|
[`${prefixCls}-dangerous`]: !!danger,
|
|
|
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
|
|
|
},
|
|
|
|
className,
|
|
|
|
);
|
2020-04-25 20:45:28 +08:00
|
|
|
|
|
|
|
const iconNode =
|
2020-06-02 12:54:22 +08:00
|
|
|
icon && !innerLoading ? (
|
2020-04-25 20:45:28 +08:00
|
|
|
icon
|
|
|
|
) : (
|
2020-06-03 21:59:54 +08:00
|
|
|
<LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={!!innerLoading} />
|
2020-04-25 20:45:28 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
const kids =
|
|
|
|
children || children === 0
|
|
|
|
? spaceChildren(children, isNeedInserted() && autoInsertSpace)
|
|
|
|
: null;
|
|
|
|
|
2021-01-13 21:00:30 +08:00
|
|
|
const linkButtonRestProps = omit(rest as AnchorButtonProps & { navigate: any }, ['navigate']);
|
2020-04-25 20:45:28 +08:00
|
|
|
if (linkButtonRestProps.href !== undefined) {
|
|
|
|
return (
|
|
|
|
<a {...linkButtonRestProps} className={classes} onClick={handleClick} ref={buttonRef}>
|
|
|
|
{iconNode}
|
|
|
|
{kids}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
2019-08-05 18:38:10 +08:00
|
|
|
|
2020-04-25 20:45:28 +08:00
|
|
|
const buttonNode = (
|
|
|
|
<button
|
2020-12-09 17:12:32 +08:00
|
|
|
{...(rest as NativeButtonProps)}
|
2020-04-25 20:45:28 +08:00
|
|
|
type={htmlType}
|
|
|
|
className={classes}
|
|
|
|
onClick={handleClick}
|
|
|
|
ref={buttonRef}
|
|
|
|
>
|
|
|
|
{iconNode}
|
|
|
|
{kids}
|
|
|
|
</button>
|
2020-04-18 13:06:04 +08:00
|
|
|
);
|
2020-04-25 20:45:28 +08:00
|
|
|
|
2020-06-19 17:46:15 +08:00
|
|
|
if (isUnborderedButtonType(type)) {
|
2020-04-25 20:45:28 +08:00
|
|
|
return buttonNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <Wave>{buttonNode}</Wave>;
|
2020-04-18 13:06:04 +08:00
|
|
|
};
|
2018-12-05 19:12:18 +08:00
|
|
|
|
2020-04-25 20:45:28 +08:00
|
|
|
const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
|
|
|
|
|
|
|
|
Button.displayName = 'Button';
|
|
|
|
|
2020-04-18 13:06:04 +08:00
|
|
|
Button.Group = Group;
|
|
|
|
Button.__ANT_BUTTON = true;
|
2018-10-25 04:43:21 +08:00
|
|
|
|
|
|
|
export default Button;
|