ant-design/components/button/button.tsx

303 lines
8.7 KiB
TypeScript
Raw Normal View History

2019-08-05 18:38:10 +08:00
/* eslint-disable react/button-has-type */
import * as React from 'react';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
2019-08-05 18:38:10 +08:00
import Group from './button-group';
import { ConfigContext } from '../config-provider';
import Wave from '../_util/wave';
import { Omit, tuple } from '../_util/type';
import devWarning from '../_util/devWarning';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import LoadingIcon from './LoadingIcon';
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);
function isString(str: any) {
2015-09-27 16:30:35 +08:00
return typeof str === 'string';
}
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.
function insertSpace(child: React.ReactChild, needInserted: boolean) {
// Check the child if is undefined or null.
if (child == null) {
return;
}
const SPACE = needInserted ? ' ' : '';
// 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 cloneElement(child, {
children: child.props.children.split('').join(SPACE),
});
2015-09-27 16:30:35 +08:00
}
if (typeof child === 'string') {
2016-04-12 11:56:14 +08:00
if (isTwoCNChar(child)) {
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),
);
}
const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
2019-11-22 12:02:35 +08:00
export type ButtonType = typeof ButtonTypes[number];
const ButtonShapes = tuple('circle', 'round');
2019-11-22 12:02:35 +08:00
export type ButtonShape = typeof ButtonShapes[number];
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
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;
use ant design icons 4.0 (#18217) * feat: use @ant-design/icons@4.0 * feat: use createFromIconfontCN to make site works * feat: update doc for Icon * feat: use icon in component Alert * feat: use icon in component Avatar * feat: use icon in component Breadcrumb * feat: use icon in component Button * feat: use icon in component Cascader * feat: use icon in component Collapse * feat: use icon in component Datepicker * feat: use icon in component Dropdown * feat: use icon in component Form * feat: use icon in component Input * feat: use icon in component InputNumber * feat: use icon in component Layout * feat: use icon in component Mention * feat: use icon in component Message * feat: use icon in component Modal * feat: use icon in component Notification * feat: use icon in component PageHeader * feat: use icon in component Pagination * feat: use icon in component Popconfirm * feat: use icon in component Progress * feat: use icon in component Rate * feat: use icon in component Result * feat: use icon in component Select * feat: use icon in component Step * feat: use icon in component Switch * feat: use icon in component Table * feat: use icon in component Tab * feat: use icon in component Tag * feat: handle rest component which using Icon * fix: remove unused vars * feat: use latest alpha ant design icons * fix: failed test in uploadlist.test.js * test: update snapshot for icons * doc: add Icon for site * doc: use @ant-design/icons in site * chore: use latest icons * fix: tslint issue * fix: test cases * fix: types for react * fix: lint rules for import orders * fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render * fix: eslint error in demo/**.md * inject antd icons * update snapshot * fix site * doc: update docs * fix: code snippets icon in site * feat: use latest @ant-design/icons * fix: icon props in message
2019-08-13 14:07:17 +08:00
icon?: React.ReactNode;
2016-07-14 13:29:50 +08:00
shape?: ButtonShape;
size?: SizeType;
loading?: boolean | { delay?: number };
2016-07-14 13:29:50 +08:00
prefixCls?: string;
className?: string;
ghost?: boolean;
2019-11-22 15:32:11 +08:00
danger?: boolean;
block?: boolean;
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;
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-06-14 10:53:14 +08:00
export type NativeButtonProps = {
htmlType?: ButtonHTMLType;
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'>;
2019-04-08 18:04:46 +08:00
export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;
interface CompoundedComponent
extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>> {
Group: typeof Group;
__ANT_BUTTON: boolean;
}
2020-06-03 21:59:54 +08:00
type Loading = number | boolean;
const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
2020-06-02 12:54:22 +08:00
const {
loading = false,
2020-06-02 12:54:22 +08:00
prefixCls: customizePrefixCls,
type,
danger,
shape,
size: customizeSize,
className,
children,
icon,
ghost = false,
block = false,
/** If we extract items here, we don't need use omit.js */
// 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;
const size = React.useContext(SizeContext);
2020-06-03 21:59:54 +08:00
const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
const buttonRef = (ref as any) || React.createRef<HTMLElement>();
2020-06-02 12:54:22 +08:00
const delayTimeoutRef = React.useRef<number>();
const isNeedInserted = () =>
React.Children.count(children) === 1 && !icon && !isUnborderedButtonType(type);
const fixTwoCNChar = () => {
// Fix for HOC usage like <FormatMessage />
if (!buttonRef || !buttonRef.current || autoInsertSpaceInButton === false) {
return;
}
const buttonText = buttonRef.current.textContent;
if (isNeedInserted() && isTwoCNChar(buttonText)) {
if (!hasTwoCNChar) {
setHasTwoCNChar(true);
}
} else if (hasTwoCNChar) {
setHasTwoCNChar(false);
}
};
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;
}
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-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
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);
}
};
devWarning(
!(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`,
);
devWarning(
!(ghost && isUnborderedButtonType(type)),
'Button',
"`link` or `text` button can't be a `ghost` button.",
);
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;
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,
);
const iconNode =
2020-06-02 12:54:22 +08:00
icon && !innerLoading ? (
icon
) : (
2020-06-03 21:59:54 +08:00
<LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={!!innerLoading} />
);
const kids =
children || children === 0
? spaceChildren(children, isNeedInserted() && autoInsertSpace)
: null;
const linkButtonRestProps = omit(rest as AnchorButtonProps & { navigate: any }, ['navigate']);
if (linkButtonRestProps.href !== undefined) {
return (
<a {...linkButtonRestProps} className={classes} onClick={handleClick} ref={buttonRef}>
{iconNode}
{kids}
</a>
);
}
2019-08-05 18:38:10 +08:00
const buttonNode = (
<button
{...(rest as NativeButtonProps)}
type={htmlType}
className={classes}
onClick={handleClick}
ref={buttonRef}
>
{iconNode}
{kids}
</button>
);
if (isUnborderedButtonType(type)) {
return buttonNode;
}
return <Wave>{buttonNode}</Wave>;
};
const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
Button.displayName = 'Button';
Button.Group = Group;
Button.__ANT_BUTTON = true;
export default Button;