From da4394dee6decdec7659f768e52589c8f81b17d3 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 19 Dec 2024 19:25:46 +0800 Subject: [PATCH] fix: memory leak --- src/back-top/src/BackTop.tsx | 4 +- src/back-top/src/BackTopIcon.tsx | 2 +- src/carousel/src/CarouselArrow.tsx | 52 +++++++++++++----------- src/cascader/src/CascaderMenu.tsx | 3 +- src/checkbox/src/Checkbox.tsx | 13 +++--- src/image/src/ImagePreview.tsx | 8 ++-- src/image/src/icons.tsx | 54 ++++++++++++++----------- src/rate/src/Rate.tsx | 4 +- src/rate/src/StarIcon.tsx | 2 +- src/result/src/403.tsx | 26 ++++++------ src/result/src/404.tsx | 40 ++++++++++--------- src/result/src/418.tsx | 37 +++++++++-------- src/result/src/500.tsx | 28 +++++++------ src/result/src/Result.tsx | 16 ++++---- src/theme-editor/src/ThemeEditor.tsx | 60 ++++++++++++++-------------- src/upload/src/UploadFile.tsx | 6 +-- src/upload/src/icons.tsx | 4 +- 17 files changed, 190 insertions(+), 169 deletions(-) diff --git a/src/back-top/src/BackTop.tsx b/src/back-top/src/BackTop.tsx index ff4de8cf9ab..225d28bbeda 100644 --- a/src/back-top/src/BackTop.tsx +++ b/src/back-top/src/BackTop.tsx @@ -30,7 +30,7 @@ import { warnOnce } from '../../_utils' import { backTopLight } from '../styles' -import BackTopIcon from './BackTopIcon' +import renderBackTopIcon from './BackTopIcon' import style from './styles/index.cssr' export const backTopProps = { @@ -301,7 +301,7 @@ export default defineComponent({ }), resolveSlot(this.$slots.default, () => [ - {{ default: () => BackTopIcon }} + {{ default: renderBackTopIcon }} ]) ) diff --git a/src/back-top/src/BackTopIcon.tsx b/src/back-top/src/BackTopIcon.tsx index e3af0570746..5935d350cb6 100644 --- a/src/back-top/src/BackTopIcon.tsx +++ b/src/back-top/src/BackTopIcon.tsx @@ -1,6 +1,6 @@ import { h } from 'vue' -export default ( +export default () => ( - - - - - -) +function renderBackwardIcon() { + return ( + + + + + + + ) +} -const forwardIcon = ( - - - - - - -) +function renderForwardIcon() { + return ( + + + + + + + ) +} export default defineComponent({ name: 'CarouselArrow', @@ -54,7 +58,7 @@ export default defineComponent({ role="button" onClick={this.prev} > - {backwardIcon} + {renderBackwardIcon()}
- {forwardIcon} + {renderForwardIcon()}
) diff --git a/src/cascader/src/CascaderMenu.tsx b/src/cascader/src/CascaderMenu.tsx index e32c06df7f8..6252395aba2 100644 --- a/src/cascader/src/CascaderMenu.tsx +++ b/src/cascader/src/CascaderMenu.tsx @@ -13,7 +13,6 @@ import { inject, type PropType, ref, - toRef, Transition, withDirectives } from 'vue' @@ -75,7 +74,7 @@ export default defineComponent({ function handleResize(): void { syncCascaderMenuPosition() } - useOnResize(selfElRef, handleResize, { show: toRef(props, 'show') }) + useOnResize(selfElRef, handleResize) function showErrorMessage(label: string): void { const { value: { loadingRequiredMessage } diff --git a/src/checkbox/src/Checkbox.tsx b/src/checkbox/src/Checkbox.tsx index 558fd2a4905..a92581efc51 100644 --- a/src/checkbox/src/Checkbox.tsx +++ b/src/checkbox/src/Checkbox.tsx @@ -246,8 +246,8 @@ export default defineComponent({ colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, - renderCheckMarkColor, - renderCheckMarkColorDisabled, + checkMarkColor, + checkMarkColorDisabled, border, borderFocus, borderDisabled, @@ -255,7 +255,7 @@ export default defineComponent({ boxShadowFocus, textColor, textColorDisabled, - renderCheckMarkColorDisabledChecked, + checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, @@ -286,10 +286,9 @@ export default defineComponent({ '--n-color-disabled-checked': colorDisabledChecked, '--n-text-color': textColor, '--n-text-color-disabled': textColorDisabled, - '--n-check-mark-color': renderCheckMarkColor, - '--n-check-mark-color-disabled': renderCheckMarkColorDisabled, - '--n-check-mark-color-disabled-checked': - renderCheckMarkColorDisabledChecked, + '--n-check-mark-color': checkMarkColor, + '--n-check-mark-color-disabled': checkMarkColorDisabled, + '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked, '--n-font-size': fontSize, '--n-label-padding': labelPadding } diff --git a/src/image/src/ImagePreview.tsx b/src/image/src/ImagePreview.tsx index 311b5a0f621..ad0dbfb6133 100644 --- a/src/image/src/ImagePreview.tsx +++ b/src/image/src/ImagePreview.tsx @@ -35,7 +35,7 @@ import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins' import { download } from '../../_utils' import { NTooltip } from '../../tooltip' import { imageLight } from '../styles' -import { closeIcon, nextIcon, prevIcon } from './icons' +import { renderCloseIcon, renderNextIcon, renderPrevIcon } from './icons' import { imageContextKey, imagePreviewSharedProps, @@ -507,13 +507,13 @@ export default defineComponent({ const prevNode = withTooltip( - {{ default: () => prevIcon }} + {{ default: renderPrevIcon }} , 'tipPrevious' ) const nextNode = withTooltip( - {{ default: () => nextIcon }} + {{ default: renderNextIcon }} , 'tipNext' ) @@ -560,7 +560,7 @@ export default defineComponent({ const closeNode = withTooltip( - {{ default: () => closeIcon }} + {{ default: renderCloseIcon }} , 'tipClose' ) diff --git a/src/image/src/icons.tsx b/src/image/src/icons.tsx index cb697ca9814..965dbeef6d0 100644 --- a/src/image/src/icons.tsx +++ b/src/image/src/icons.tsx @@ -1,28 +1,34 @@ import { h } from 'vue' -export const prevIcon = ( - - - -) +export function renderPrevIcon() { + return ( + + + + ) +} -export const nextIcon = ( - - - -) +export function renderNextIcon() { + return ( + + + + ) +} -export const closeIcon = ( - - - -) +export function renderCloseIcon() { + return ( + + + + ) +} diff --git a/src/rate/src/Rate.tsx b/src/rate/src/Rate.tsx index fc8872cd05d..42a66c88f0e 100644 --- a/src/rate/src/Rate.tsx +++ b/src/rate/src/Rate.tsx @@ -17,7 +17,7 @@ import { NBaseIcon } from '../../_internal' import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins' import { call, color2Class, createKey } from '../../_utils' import { rateLight } from '../styles' -import StarIcon from './StarIcon' +import renderStarIcon from './StarIcon' import style from './styles/index.cssr' export const rateProps = { @@ -204,7 +204,7 @@ export default defineComponent({ defaultSlot({ index }) ) : ( - {{ default: () => StarIcon }} + {{ default: renderStarIcon }} ) const entireStarActive diff --git a/src/rate/src/StarIcon.tsx b/src/rate/src/StarIcon.tsx index e3ca549e792..8856ed66c40 100644 --- a/src/rate/src/StarIcon.tsx +++ b/src/rate/src/StarIcon.tsx @@ -1,6 +1,6 @@ import { h } from 'vue' -export default ( +export default () => ( diff --git a/src/result/src/403.tsx b/src/result/src/403.tsx index dd61dc3d359..37da30535bc 100644 --- a/src/result/src/403.tsx +++ b/src/result/src/403.tsx @@ -1,14 +1,16 @@ import { h } from 'vue' -export default ( - - - - -) +export function render403() { + return ( + + + + + ) +} diff --git a/src/result/src/404.tsx b/src/result/src/404.tsx index bee000d467b..ba622acd8cd 100644 --- a/src/result/src/404.tsx +++ b/src/result/src/404.tsx @@ -1,21 +1,23 @@ import { h } from 'vue' -export default ( - - - - - - - - -) +export function render404() { + return ( + + + + + + + + + ) +} diff --git a/src/result/src/418.tsx b/src/result/src/418.tsx index 029587cf902..1fa82e48f6c 100644 --- a/src/result/src/418.tsx +++ b/src/result/src/418.tsx @@ -1,18 +1,23 @@ import { h } from 'vue' -export default ( - - - - - - - - -) +export function render418() { + return ( + + + + + + + + + ) +} diff --git a/src/result/src/500.tsx b/src/result/src/500.tsx index 130d1846140..4825e0200b3 100644 --- a/src/result/src/500.tsx +++ b/src/result/src/500.tsx @@ -1,15 +1,17 @@ import { h } from 'vue' -export default ( - - - - - -) +export function render500() { + return ( + + + + + + ) +} diff --git a/src/result/src/Result.tsx b/src/result/src/Result.tsx index 93ea66ba790..c5fac6a7e94 100644 --- a/src/result/src/Result.tsx +++ b/src/result/src/Result.tsx @@ -18,17 +18,17 @@ import { import { useConfig, useTheme, useThemeClass } from '../../_mixins' import { createKey } from '../../_utils' import { resultLight } from '../styles' -import image403 from './403' -import image404 from './404' -import image418 from './418' -import image500 from './500' +import { render403 } from './403' +import { render404 } from './404' +import { render418 } from './418' +import { render500 } from './500' import style from './styles/index.cssr' const iconRenderMap = { - 403: () => image403, - 404: () => image404, - 418: () => image418, - 500: () => image500, + 403: render403, + 404: render404, + 418: render418, + 500: render500, info: () => , success: () => , warning: () => , diff --git a/src/theme-editor/src/ThemeEditor.tsx b/src/theme-editor/src/ThemeEditor.tsx index 8cf9a89e52a..5c31881d88a 100644 --- a/src/theme-editor/src/ThemeEditor.tsx +++ b/src/theme-editor/src/ThemeEditor.tsx @@ -32,35 +32,37 @@ import { lightTheme } from '../../themes/light' import { MaximizeIcon } from './MaximizeIcon' import { MinimizeIcon } from './MinimizeIcon' -const ColorWandIcon = ( - - - - - - - - - - -) + + + + + + + + + + ) +} // button colorOpacitySecondary var is not color function showColorPicker(key: string): boolean { @@ -258,7 +260,7 @@ export default defineComponent({ this.showPanel = !this.showPanel }} > - {{ default: () => ColorWandIcon }} + {{ default: renderColorWandIcon }} ), default: () => ( diff --git a/src/upload/src/UploadFile.tsx b/src/upload/src/UploadFile.tsx index 8b39734ed40..ec355af91a1 100644 --- a/src/upload/src/UploadFile.tsx +++ b/src/upload/src/UploadFile.tsx @@ -26,7 +26,7 @@ import { import { download, warn } from '../../_utils' import { NButton } from '../../button' import { NImage } from '../../image' -import { documentIcon, imageIcon } from './icons' +import { renderDocumentIcon, renderImageIcon } from './icons' import { uploadInjectionKey } from './interface' import NUploadProgress from './UploadProgress' import { isImageFile } from './utils' @@ -265,11 +265,11 @@ export default defineComponent({ renderIcon(file) ) : isImageFile(file) ? ( - {{ default: () => imageIcon }} + {{ default: renderImageIcon }} ) : ( - {{ default: () => documentIcon }} + {{ default: renderDocumentIcon }} )} diff --git a/src/upload/src/icons.tsx b/src/upload/src/icons.tsx index 4b4903dd7cb..a948febe8ca 100644 --- a/src/upload/src/icons.tsx +++ b/src/upload/src/icons.tsx @@ -5,7 +5,7 @@ import { h } from 'vue' * now. */ -export const imageIcon = ( +export const renderImageIcon = ( ) -export const documentIcon = ( +export const renderDocumentIcon = (