From b51c90084792cfe4c093094861fc2fdd7d0e3b18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 10 Mar 2022 18:54:32 +0800 Subject: [PATCH] refactor: rm useDestroy hook (#34418) --- components/_util/ActionButton.tsx | 13 ++++-------- .../_util/__tests__/useDestroyed.test.js | 20 ------------------- components/_util/hooks/useDestroyed.ts | 14 ------------- components/page-header/index.tsx | 9 +++------ components/popconfirm/index.tsx | 7 ++----- package.json | 2 +- 6 files changed, 10 insertions(+), 55 deletions(-) delete mode 100644 components/_util/__tests__/useDestroyed.test.js delete mode 100644 components/_util/hooks/useDestroyed.ts diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx index 50540b3c55..45f209602c 100644 --- a/components/_util/ActionButton.tsx +++ b/components/_util/ActionButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; +import useState from 'rc-util/lib/hooks/useState'; import Button from '../button'; import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button'; -import useDestroyed from './hooks/useDestroyed'; export interface ActionButtonProps { type?: LegacyButtonType; @@ -21,8 +21,7 @@ function isThenable(thing?: PromiseLike): boolean { const ActionButton: React.FC = props => { const clickedRef = React.useRef(false); const ref = React.useRef(); - const isDestroyed = useDestroyed(); - const [loading, setLoading] = React.useState(false); + const [loading, setLoading] = useState(false); React.useEffect(() => { let timeoutId: any; @@ -45,9 +44,7 @@ const ActionButton: React.FC = props => { setLoading(true); returnValueOfOnOk!.then( (...args: any[]) => { - if (!isDestroyed()) { - setLoading(false); - } + setLoading(false, true); close(...args); clickedRef.current = false; }, @@ -56,9 +53,7 @@ const ActionButton: React.FC = props => { // eslint-disable-next-line no-console console.error(e); // See: https://github.com/ant-design/ant-design/issues/6183 - if (!isDestroyed()) { - setLoading(false); - } + setLoading(false, true); clickedRef.current = false; }, ); diff --git a/components/_util/__tests__/useDestroyed.test.js b/components/_util/__tests__/useDestroyed.test.js deleted file mode 100644 index d98979e49f..0000000000 --- a/components/_util/__tests__/useDestroyed.test.js +++ /dev/null @@ -1,20 +0,0 @@ -import { mount } from 'enzyme'; -import React from 'react'; -import useDestroyed from '../hooks/useDestroyed'; - -describe('useMounted', () => { - it('should work properly', () => { - let isDestroyed = null; - - const AutoUnmounted = () => { - isDestroyed = useDestroyed(); - - return
Mounted
; - }; - - const wrapper = mount(); - expect(isDestroyed()).toBeFalsy(); - wrapper.unmount(); - expect(isDestroyed()).toBeTruthy(); - }); -}); diff --git a/components/_util/hooks/useDestroyed.ts b/components/_util/hooks/useDestroyed.ts deleted file mode 100644 index 4b361a78ae..0000000000 --- a/components/_util/hooks/useDestroyed.ts +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; - -export default function useDestroyed() { - const mountedRef = React.useRef(true); - - React.useEffect( - () => () => { - mountedRef.current = false; - }, - [], - ); - - return () => !mountedRef.current; -} diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index b6d7cc2be6..e68799d979 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; +import useState from 'rc-util/lib/hooks/useState'; import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined'; import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined'; import ResizeObserver from 'rc-resize-observer'; @@ -9,7 +10,6 @@ import Breadcrumb, { BreadcrumbProps } from '../breadcrumb'; import Avatar, { AvatarProps } from '../avatar'; import TransButton from '../_util/transButton'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import useDestroyed from '../_util/hooks/useDestroyed'; export interface PageHeaderProps { backIcon?: React.ReactNode; @@ -121,12 +121,9 @@ const renderChildren = (prefixCls: string, children: React.ReactNode) => ( ); const PageHeader: React.FC = props => { - const [compact, updateCompact] = React.useState(false); - const isDestroyed = useDestroyed(); + const [compact, updateCompact] = useState(false); const onResize = ({ width }: { width: number }) => { - if (!isDestroyed()) { - updateCompact(width < 768); - } + updateCompact(width < 768, true); }; return ( diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index 24cffb7940..afc2ecc050 100644 --- a/components/popconfirm/index.tsx +++ b/components/popconfirm/index.tsx @@ -13,7 +13,6 @@ import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue' import { cloneElement } from '../_util/reactNode'; import { getTransitionName } from '../_util/motion'; import ActionButton from '../_util/ActionButton'; -import useDestroyed from '../_util/hooks/useDestroyed'; export interface PopconfirmProps extends AbstractTooltipProps { title: React.ReactNode | RenderFunction; @@ -49,15 +48,13 @@ const Popconfirm = React.forwardRef((props, ref) => { defaultValue: props.defaultVisible, }); - const isDestroyed = useDestroyed(); + // const isDestroyed = useDestroyed(); const settingVisible = ( value: boolean, e?: React.MouseEvent | React.KeyboardEvent, ) => { - if (!isDestroyed()) { - setVisible(value); - } + setVisible(value, true); props.onVisibleChange?.(value, e); }; diff --git a/package.json b/package.json index 8837001187..ff5dc24e55 100644 --- a/package.json +++ b/package.json @@ -152,7 +152,7 @@ "rc-tree-select": "~5.1.1", "rc-trigger": "^5.2.10", "rc-upload": "~4.3.0", - "rc-util": "^5.19.2", + "rc-util": "^5.19.3", "scroll-into-view-if-needed": "^2.2.25" }, "devDependencies": {