mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

refactor: refactor useMounted to useDestroyed

Browse Source
This commit is contained in:
MadCcc 2021-12-29 17:10:16 +08:00
parent 285e2bd9ea
commit 3effa51572
4 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/_util/ActionButton.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import Button from '../button';
import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
import useMounted from './hooks/useMounted';
import useDestroyed from './hooks/useDestroyed';
export interface ActionButtonProps {
type?: LegacyButtonType;
@ -21,7 +21,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
const ActionButton: React.FC<ActionButtonProps> = props => {
const clickedRef = React.useRef<boolean>(false);
const ref = React.useRef<any>();
const isMounted = useMounted();
const isDestroyed = useDestroyed();
const [loading, setLoading] = React.useState<ButtonProps['loading']>(false);
React.useEffect(() => {
@ -45,7 +45,7 @@ const ActionButton: React.FC<ActionButtonProps> = props => {
setLoading(true);
returnValueOfOnOk!.then(
(...args: any[]) => {
if (isMounted()) {
if (!isDestroyed()) {
setLoading(false);
}
close(...args);
@ -56,7 +56,7 @@ const ActionButton: React.FC<ActionButtonProps> = props => {
// eslint-disable-next-line no-console
console.error(e);
// See: https://github.com/ant-design/ant-design/issues/6183
if (isMounted()) {
if (!isDestroyed()) {
setLoading(false);
}
clickedRef.current = false;

10
components/_util/__tests__/useMounted.test.js → components/_util/__tests__/useDestroyed.test.js
View File

@ -1,20 +1,20 @@
import { mount } from 'enzyme';
import React from 'react';
import useMounted from '../hooks/useMounted';
import useDestroyed from '../hooks/useDestroyed';
describe('useMounted', () => {
it('should work properly', () => {
let isMounted = null;
let isDestroyed = null;
const AutoUnmounted = () => {
isMounted = useMounted();
isDestroyed = useDestroyed();
return <div>Mounted</div>;
};
const wrapper = mount(<AutoUnmounted />);
expect(isMounted()).toBeTruthy();
expect(isDestroyed()).toBeFalsy();
wrapper.unmount();
expect(isMounted()).toBeFalsy();
expect(isDestroyed()).toBeTruthy();
});
});

4
components/_util/hooks/useMounted.ts → components/_util/hooks/useDestroyed.ts
View File

@ -1,6 +1,6 @@
import * as React from 'react';
export default function useMounted() {
export default function useDestroyed() {
const mountedRef = React.useRef<boolean>(true);
React.useEffect(
@ -10,5 +10,5 @@ export default function useMounted() {
[],
);
return () => mountedRef.current;
return () => !mountedRef.current;
}

6
components/popconfirm/index.tsx
View File

@ -13,7 +13,7 @@ import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue'
import { cloneElement } from '../_util/reactNode';
import { getTransitionName } from '../_util/motion';
import ActionButton from '../_util/ActionButton';
import useMounted from '../_util/hooks/useMounted';
import useDestroyed from '../_util/hooks/useDestroyed';
export interface PopconfirmProps extends AbstractTooltipProps {
title: React.ReactNode | RenderFunction;
@ -49,13 +49,13 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
defaultValue: props.defaultVisible,
});
const isMounted = useMounted();
const isDestroyed = useDestroyed();
const settingVisible = (
value: boolean,
e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
) => {
if (isMounted()) {
if (!isDestroyed()) {
setVisible(value);
}
props.onVisibleChange?.(value, e);