2022-03-10 18:54:32 +08:00
|
|
|
import useState from 'rc-util/lib/hooks/useState';
|
2022-06-22 14:57:09 +08:00
|
|
|
import * as React from 'react';
|
2017-07-17 09:40:55 +08:00
|
|
|
import Button from '../button';
|
2022-06-22 14:57:09 +08:00
|
|
|
import type { ButtonProps, LegacyButtonType } from '../button/button';
|
2022-05-07 14:31:54 +08:00
|
|
|
import { convertLegacyProps } from '../button/button';
|
2016-12-19 14:01:52 +08:00
|
|
|
|
|
|
|
export interface ActionButtonProps {
|
2020-05-05 12:03:16 +08:00
|
|
|
type?: LegacyButtonType;
|
2017-11-21 17:16:48 +08:00
|
|
|
actionFn?: (...args: any[]) => any | PromiseLike<any>;
|
2022-07-15 11:11:50 +08:00
|
|
|
close?: Function;
|
2017-11-21 17:16:48 +08:00
|
|
|
autoFocus?: boolean;
|
2020-07-14 18:43:55 +08:00
|
|
|
prefixCls: string;
|
2020-04-06 13:00:41 +08:00
|
|
|
buttonProps?: ButtonProps;
|
2021-06-09 12:18:52 +08:00
|
|
|
emitEvent?: boolean;
|
|
|
|
quitOnNullishReturnValue?: boolean;
|
2022-04-08 22:55:42 +08:00
|
|
|
children?: React.ReactNode;
|
2021-06-09 12:18:52 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
function isThenable(thing?: PromiseLike<any>): boolean {
|
|
|
|
return !!(thing && !!thing.then);
|
2016-12-19 14:01:52 +08:00
|
|
|
}
|
2017-11-21 17:16:48 +08:00
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const ActionButton: React.FC<ActionButtonProps> = (props) => {
|
2020-05-19 20:15:51 +08:00
|
|
|
const clickedRef = React.useRef<boolean>(false);
|
2022-11-04 18:36:54 +08:00
|
|
|
const ref = React.useRef<HTMLInputElement>(null);
|
2022-03-10 18:54:32 +08:00
|
|
|
const [loading, setLoading] = useState<ButtonProps['loading']>(false);
|
2022-07-15 11:11:50 +08:00
|
|
|
const { close } = props;
|
|
|
|
const onInternalClose = (...args: any[]) => {
|
|
|
|
close?.(...args);
|
|
|
|
};
|
2020-04-06 21:57:51 +08:00
|
|
|
|
2020-05-19 20:15:51 +08:00
|
|
|
React.useEffect(() => {
|
2022-11-04 18:36:54 +08:00
|
|
|
let timeoutId: NodeJS.Timer | null = null;
|
2020-05-19 20:15:51 +08:00
|
|
|
if (props.autoFocus) {
|
2022-11-04 18:36:54 +08:00
|
|
|
timeoutId = setTimeout(() => {
|
|
|
|
ref.current?.focus();
|
|
|
|
});
|
2016-12-19 14:01:52 +08:00
|
|
|
}
|
2020-05-19 20:15:51 +08:00
|
|
|
return () => {
|
|
|
|
if (timeoutId) {
|
|
|
|
clearTimeout(timeoutId);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}, []);
|
2019-02-24 15:49:12 +08:00
|
|
|
|
2020-05-19 20:15:51 +08:00
|
|
|
const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
|
2021-06-09 12:18:52 +08:00
|
|
|
if (!isThenable(returnValueOfOnOk)) {
|
2020-04-18 01:09:14 +08:00
|
|
|
return;
|
|
|
|
}
|
2020-05-19 20:15:51 +08:00
|
|
|
setLoading(true);
|
2021-06-09 12:18:52 +08:00
|
|
|
returnValueOfOnOk!.then(
|
2020-04-18 01:09:14 +08:00
|
|
|
(...args: any[]) => {
|
2022-03-10 18:54:32 +08:00
|
|
|
setLoading(false, true);
|
2022-07-15 11:11:50 +08:00
|
|
|
onInternalClose(...args);
|
2021-06-09 12:18:52 +08:00
|
|
|
clickedRef.current = false;
|
2020-04-18 01:09:14 +08:00
|
|
|
},
|
|
|
|
(e: Error) => {
|
|
|
|
// Emit error when catch promise reject
|
|
|
|
// eslint-disable-next-line no-console
|
|
|
|
console.error(e);
|
|
|
|
// See: https://github.com/ant-design/ant-design/issues/6183
|
2022-03-10 18:54:32 +08:00
|
|
|
setLoading(false, true);
|
2020-05-19 20:15:51 +08:00
|
|
|
clickedRef.current = false;
|
2020-04-18 01:09:14 +08:00
|
|
|
},
|
|
|
|
);
|
2020-05-19 20:15:51 +08:00
|
|
|
};
|
2020-04-18 01:09:14 +08:00
|
|
|
|
2021-06-09 12:18:52 +08:00
|
|
|
const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
2022-07-15 11:11:50 +08:00
|
|
|
const { actionFn } = props;
|
2020-05-19 20:15:51 +08:00
|
|
|
if (clickedRef.current) {
|
2020-04-06 21:57:51 +08:00
|
|
|
return;
|
|
|
|
}
|
2020-05-19 20:15:51 +08:00
|
|
|
clickedRef.current = true;
|
2020-04-18 01:09:14 +08:00
|
|
|
if (!actionFn) {
|
2022-07-15 11:11:50 +08:00
|
|
|
onInternalClose();
|
2020-04-18 01:09:14 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
let returnValueOfOnOk;
|
2021-06-09 12:18:52 +08:00
|
|
|
if (props.emitEvent) {
|
|
|
|
returnValueOfOnOk = actionFn(e);
|
|
|
|
if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
|
|
|
|
clickedRef.current = false;
|
2022-07-15 11:11:50 +08:00
|
|
|
onInternalClose(e);
|
2021-06-09 12:18:52 +08:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
} else if (actionFn.length) {
|
|
|
|
returnValueOfOnOk = actionFn(close);
|
2020-04-18 01:09:14 +08:00
|
|
|
// https://github.com/ant-design/ant-design/issues/23358
|
2020-05-19 20:15:51 +08:00
|
|
|
clickedRef.current = false;
|
2020-04-18 01:09:14 +08:00
|
|
|
} else {
|
|
|
|
returnValueOfOnOk = actionFn();
|
|
|
|
if (!returnValueOfOnOk) {
|
2022-07-15 11:11:50 +08:00
|
|
|
onInternalClose();
|
2020-04-18 01:09:14 +08:00
|
|
|
return;
|
|
|
|
}
|
2016-12-19 14:01:52 +08:00
|
|
|
}
|
2020-05-19 20:15:51 +08:00
|
|
|
handlePromiseOnOk(returnValueOfOnOk);
|
2018-12-07 16:17:45 +08:00
|
|
|
};
|
2016-12-19 14:01:52 +08:00
|
|
|
|
2020-07-14 18:43:55 +08:00
|
|
|
const { type, children, prefixCls, buttonProps } = props;
|
2020-05-19 20:15:51 +08:00
|
|
|
return (
|
|
|
|
<Button
|
|
|
|
{...convertLegacyProps(type)}
|
|
|
|
onClick={onClick}
|
|
|
|
loading={loading}
|
2020-07-14 18:43:55 +08:00
|
|
|
prefixCls={prefixCls}
|
2020-05-19 20:15:51 +08:00
|
|
|
{...buttonProps}
|
|
|
|
ref={ref}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ActionButton;
|