ant-design/components/_util/ActionButton.tsx
二货爱吃白萝卜 f3618aaeb3
Some checks failed
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Issue Check Inactive / issue-check-inactive (push) Has been cancelled
enhance: not trigger scroll on ActionButton (#51647)
2024-11-15 14:51:43 +08:00

139 lines
3.3 KiB
TypeScript

import * as React from 'react';
import useState from 'rc-util/lib/hooks/useState';
import Button from '../button';
import type { ButtonProps, LegacyButtonType } from '../button/button';
import { convertLegacyProps } from '../button/buttonHelpers';
export interface ActionButtonProps {
type?: LegacyButtonType;
actionFn?: (...args: any[]) => any | PromiseLike<any>;
close?: (...args: any[]) => void;
autoFocus?: boolean;
prefixCls: string;
buttonProps?: ButtonProps;
emitEvent?: boolean;
quitOnNullishReturnValue?: boolean;
children?: React.ReactNode;
/**
* Do not throw if is await mode
*/
isSilent?: () => boolean;
}
function isThenable<T>(thing?: PromiseLike<T>): boolean {
return !!thing?.then;
}
const ActionButton: React.FC<ActionButtonProps> = (props) => {
const {
type,
children,
prefixCls,
buttonProps,
close,
autoFocus,
emitEvent,
isSilent,
quitOnNullishReturnValue,
actionFn,
} = props;
const clickedRef = React.useRef<boolean>(false);
const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);
const [loading, setLoading] = useState<ButtonProps['loading']>(false);
const onInternalClose = (...args: any[]) => {
close?.(...args);
};
React.useEffect(() => {
let timeoutId: ReturnType<typeof setTimeout> | null = null;
if (autoFocus) {
timeoutId = setTimeout(() => {
buttonRef.current?.focus({
preventScroll: true,
});
});
}
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
};
}, []);
const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
if (!isThenable(returnValueOfOnOk)) {
return;
}
setLoading(true);
returnValueOfOnOk!.then(
(...args: any[]) => {
setLoading(false, true);
onInternalClose(...args);
clickedRef.current = false;
},
(e: Error) => {
// See: https://github.com/ant-design/ant-design/issues/6183
setLoading(false, true);
clickedRef.current = false;
// Do not throw if is `await` mode
if (isSilent?.()) {
return;
}
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 (!isThenable(returnValueOfOnOk)) {
onInternalClose();
return;
}
}
handlePromiseOnOk(returnValueOfOnOk);
};
return (
<Button
{...convertLegacyProps(type)}
onClick={onClick}
loading={loading}
prefixCls={prefixCls}
{...buttonProps}
ref={buttonRef}
>
{children}
</Button>
);
};
export default ActionButton;