ant-design/components/_util/ActionButton.tsx

123 lines
3.0 KiB
TypeScript
Raw Normal View History

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';
import { convertLegacyProps } from '../button/button';
2016-12-19 14:01:52 +08:00
export interface ActionButtonProps {
type?: LegacyButtonType;
actionFn?: (...args: any[]) => any | PromiseLike<any>;
close?: Function;
autoFocus?: boolean;
prefixCls: string;
buttonProps?: ButtonProps;
emitEvent?: boolean;
quitOnNullishReturnValue?: boolean;
children?: React.ReactNode;
}
function isThenable<T extends any>(thing?: PromiseLike<T>): boolean {
return !!(thing && thing.then);
2016-12-19 14:01:52 +08:00
}
const ActionButton: React.FC<ActionButtonProps> = (props) => {
const {
type,
children,
prefixCls,
buttonProps,
close,
autoFocus,
emitEvent,
quitOnNullishReturnValue,
actionFn,
} = props;
const clickedRef = React.useRef<boolean>(false);
const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);
2022-03-10 18:54:32 +08:00
const [loading, setLoading] = useState<ButtonProps['loading']>(false);
const onInternalClose = (...args: any[]) => {
close?.(...args);
};
React.useEffect(() => {
let timeoutId: NodeJS.Timer | null = null;
if (autoFocus) {
timeoutId = setTimeout(() => {
buttonRef.current?.focus();
});
2016-12-19 14:01:52 +08:00
}
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
};
}, []);
2019-02-24 15:49:12 +08:00
const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
if (!isThenable(returnValueOfOnOk)) {
return;
}
setLoading(true);
returnValueOfOnOk!.then(
(...args: any[]) => {
onInternalClose(...args);
clickedRef.current = false;
},
(e: Error) => {
// See: https://github.com/ant-design/ant-design/issues/6183
2022-03-10 18:54:32 +08:00
setLoading(false, true);
clickedRef.current = false;
return Promise.reject(e);
},
);
};
const onClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
if (clickedRef.current) {
return;
}
clickedRef.current = true;
if (!actionFn) {
onInternalClose();
return;
}
let returnValueOfOnOk: PromiseLike<any>;
if (emitEvent) {
returnValueOfOnOk = actionFn(e);
if (quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
clickedRef.current = false;
onInternalClose(e);
return;
}
} else if (actionFn.length) {
returnValueOfOnOk = actionFn(close);
// https://github.com/ant-design/ant-design/issues/23358
clickedRef.current = false;
} else {
returnValueOfOnOk = actionFn();
if (!returnValueOfOnOk) {
onInternalClose();
return;
}
2016-12-19 14:01:52 +08:00
}
handlePromiseOnOk(returnValueOfOnOk);
2018-12-07 16:17:45 +08:00
};
2016-12-19 14:01:52 +08:00
return (
<Button
{...convertLegacyProps(type)}
onClick={onClick}
loading={loading}
prefixCls={prefixCls}
{...buttonProps}
ref={buttonRef}
>
{children}
</Button>
);
};
export default ActionButton;