From 060c0cdc3695591d7873453c26ab2b1e66d81d6c Mon Sep 17 00:00:00 2001 From: xiejay97 Date: Thu, 10 Nov 2022 17:01:33 +0800 Subject: [PATCH] feat(ui): support destroy node after element hided --- .../src/components/_transition/Transition.tsx | 17 ++++++++++++++++- packages/ui/src/components/alert/Alert.tsx | 1 + packages/ui/src/components/button/Button.tsx | 1 + packages/ui/src/components/drawer/Drawer.tsx | 3 +++ .../ui/src/components/image/ImagePreview.tsx | 1 + packages/ui/src/components/modal/Modal.tsx | 3 +++ packages/ui/src/components/popover/Popover.tsx | 3 +++ packages/ui/src/components/spinner/Spinner.tsx | 1 + 8 files changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/_transition/Transition.tsx b/packages/ui/src/components/_transition/Transition.tsx index 864a3b4d..99c1cadd 100644 --- a/packages/ui/src/components/_transition/Transition.tsx +++ b/packages/ui/src/components/_transition/Transition.tsx @@ -11,13 +11,24 @@ export interface DTransitionProps { dDuring: number | { enter: number; leave: number }; dMountBeforeFirstEnter?: boolean; dSkipFirstTransition?: boolean | [boolean, boolean]; + dDestroyWhenLeaved?: boolean; onEnter?: () => void; afterEnter?: () => void; afterLeave?: () => void; } export function DTransition(props: DTransitionProps): JSX.Element | null { - const { children, dIn, dDuring, dMountBeforeFirstEnter = true, dSkipFirstTransition = true, onEnter, afterEnter, afterLeave } = props; + const { + children, + dIn, + dDuring, + dMountBeforeFirstEnter = true, + dSkipFirstTransition = true, + dDestroyWhenLeaved = false, + onEnter, + afterEnter, + afterLeave, + } = props; const initState = useMemo(() => { const [skipEnter, skipLeave] = isArray(dSkipFirstTransition) ? dSkipFirstTransition : [dSkipFirstTransition, dSkipFirstTransition]; @@ -101,6 +112,10 @@ export function DTransition(props: DTransitionProps): JSX.Element | null { }, [stateChange]); const shouldRender = (() => { + if (state === 'leaved' && dDestroyWhenLeaved) { + return false; + } + if (dataRef.current.isFirstEnter && !dMountBeforeFirstEnter) { return false; } diff --git a/packages/ui/src/components/alert/Alert.tsx b/packages/ui/src/components/alert/Alert.tsx index 2be6825e..7efc6586 100644 --- a/packages/ui/src/components/alert/Alert.tsx +++ b/packages/ui/src/components/alert/Alert.tsx @@ -60,6 +60,7 @@ export function DAlert(props: DAlertProps): JSX.Element | null { }, leaved: { display: 'none' }, }} + dDestroyWhenLeaved afterEnter={() => { afterVisibleChange?.(true); }} diff --git a/packages/ui/src/components/button/Button.tsx b/packages/ui/src/components/button/Button.tsx index d2f6f43c..40693dc7 100644 --- a/packages/ui/src/components/button/Button.tsx +++ b/packages/ui/src/components/button/Button.tsx @@ -106,6 +106,7 @@ function Button(props: DButtonProps, ref: React.ForwardedRef) }, leaved: { display: 'none' }, }} + dDestroyWhenLeaved > {(collapseRef, collapseStyle) => buttonIcon(true, collapseRef, collapseStyle)} diff --git a/packages/ui/src/components/drawer/Drawer.tsx b/packages/ui/src/components/drawer/Drawer.tsx index 4219d840..f2a72e42 100644 --- a/packages/ui/src/components/drawer/Drawer.tsx +++ b/packages/ui/src/components/drawer/Drawer.tsx @@ -29,6 +29,7 @@ export interface DDrawerProps extends React.HTMLAttributes { dMaskClosable?: boolean; dEscClosable?: boolean; dSkipFirstTransition?: boolean; + dDestroyAfterClose?: boolean; dHeader?: React.ReactElement | string; dFooter?: React.ReactElement; dChildDrawer?: React.ReactElement; @@ -59,6 +60,7 @@ export const DDrawer: { dMaskClosable = true, dEscClosable = true, dSkipFirstTransition = true, + dDestroyAfterClose = true, dHeader, dFooter, dChildDrawer, @@ -232,6 +234,7 @@ export const DDrawer: { dIn={visible} dDuring={TTANSITION_DURING_BASE} dSkipFirstTransition={dSkipFirstTransition} + dDestroyWhenLeaved={dDestroyAfterClose} afterEnter={() => { afterVisibleChange?.(true); }} diff --git a/packages/ui/src/components/image/ImagePreview.tsx b/packages/ui/src/components/image/ImagePreview.tsx index 6d5a959c..1f6c14cd 100644 --- a/packages/ui/src/components/image/ImagePreview.tsx +++ b/packages/ui/src/components/image/ImagePreview.tsx @@ -238,6 +238,7 @@ export function DImagePreview(props: DImagePreviewProps): JSX.Element | null { { afterVisibleChange?.(true); }} diff --git a/packages/ui/src/components/modal/Modal.tsx b/packages/ui/src/components/modal/Modal.tsx index 5a6c1df0..3fe36ed9 100644 --- a/packages/ui/src/components/modal/Modal.tsx +++ b/packages/ui/src/components/modal/Modal.tsx @@ -26,6 +26,7 @@ export interface DModalProps extends React.HTMLAttributes { dMaskClosable?: boolean; dEscClosable?: boolean; dSkipFirstTransition?: boolean; + dDestroyAfterClose?: boolean; dType?: { type: 'success' | 'warning' | 'error' | 'info'; title?: React.ReactNode; @@ -54,6 +55,7 @@ export const DModal: { dMaskClosable = true, dEscClosable = true, dSkipFirstTransition = true, + dDestroyAfterClose = true, dType, dHeader, dFooter, @@ -137,6 +139,7 @@ export const DModal: { dIn={visible} dDuring={TTANSITION_DURING_BASE} dSkipFirstTransition={dSkipFirstTransition} + dDestroyWhenLeaved={dDestroyAfterClose} onEnter={() => { if (isUndefined(ROOT_DATA.clickEvent) || performance.now() - ROOT_DATA.clickEvent.time > 100) { dataRef.current.transformOrigin = undefined; diff --git a/packages/ui/src/components/popover/Popover.tsx b/packages/ui/src/components/popover/Popover.tsx index f69587c8..4bc42aa9 100644 --- a/packages/ui/src/components/popover/Popover.tsx +++ b/packages/ui/src/components/popover/Popover.tsx @@ -29,6 +29,7 @@ export interface DPopoverProps extends Omit dContainer?: DRefExtra | false; dPlacement?: DPopupPlacement; dEscClosable?: boolean; + dDestroyAfterClose?: boolean; dArrow?: boolean; dModal?: boolean; dDistance?: number; @@ -53,6 +54,7 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef): JS dContainer, dPlacement = 'top', dEscClosable = true, + dDestroyAfterClose = false, dArrow = true, dModal = false, dDistance = 10, @@ -292,6 +294,7 @@ function Popover(props: DPopoverProps, ref: React.ForwardedRef): JS { afterVisibleChange?.(true); diff --git a/packages/ui/src/components/spinner/Spinner.tsx b/packages/ui/src/components/spinner/Spinner.tsx index ca537335..9e2fdaee 100644 --- a/packages/ui/src/components/spinner/Spinner.tsx +++ b/packages/ui/src/components/spinner/Spinner.tsx @@ -93,6 +93,7 @@ export function DSpinner(props: DSpinnerProps): JSX.Element | null { containerRef.current.style.height = `${spinnerRef.current.clientHeight}px`; } }} + dDestroyWhenLeaved afterEnter={() => { afterVisibleChange?.(true); }}