Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite6c3def

Browse files
committed
perf(CDropdown): improve performance with useMemo for context and cleanup on unmount
1 parentb06b99d commite6c3def

File tree

5 files changed

+44
-14
lines changed

5 files changed

+44
-14
lines changed

‎packages/coreui-react/src/components/dropdown/CDropdown.tsx‎

Lines changed: 37 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,14 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
276276
}
277277
},[visible])
278278

279+
useEffect(()=>{
280+
return()=>{
281+
if(_visible){
282+
handleHide()
283+
}
284+
}
285+
},[])
286+
279287
useEffect(()=>{
280288
constreferenceElement=getReferenceElement(reference,dropdownToggleElement,dropdownRef)
281289
constmenuElement=dropdownMenuRef.current
@@ -371,7 +379,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
371379
(autoClose==='inside'&&isOnMenu)||
372380
(autoClose==='outside'&&!isOnMenu)
373381
){
374-
setTimeout(()=>handleHide(),1)
382+
handleHide()
375383
}
376384
},
377385
[autoClose,dropdownToggleElement,handleHide]
@@ -417,19 +425,34 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
417425
]
418426
)
419427

420-
constcontextValues={
421-
alignment,
422-
container,
423-
dark,
424-
dropdownMenuRef,
425-
dropdownToggleRef,
426-
handleHide,
427-
handleShow,
428-
popper:allowPopperUse,
429-
portal,
430-
variant,
431-
visible:_visible,
432-
}
428+
constcontextValues=useMemo(
429+
()=>({
430+
alignment,
431+
container,
432+
dark,
433+
dropdownMenuRef,
434+
dropdownToggleRef,
435+
handleHide,
436+
handleShow,
437+
popper:allowPopperUse,
438+
portal,
439+
variant,
440+
visible:_visible,
441+
}),
442+
[
443+
alignment,
444+
container,
445+
dark,
446+
dropdownMenuRef,
447+
dropdownToggleRef,
448+
handleHide,
449+
handleShow,
450+
allowPopperUse,
451+
portal,
452+
variant,
453+
_visible,
454+
]
455+
)
433456

434457
return(
435458
<CDropdownContext.Providervalue={contextValues}>

‎packages/coreui-react/src/components/dropdown/CDropdownHeader.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface CDropdownHeaderProps extends HTMLAttributes<HTMLHeadingElement>
99
* Component used for the root node. Either a string to use a HTML element or a component.
1010
*/
1111
as?:ElementType
12+
1213
/**
1314
* A string of all className you want applied to the component.
1415
*/

‎packages/coreui-react/src/components/dropdown/CDropdownItemPlain.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement>
99
* Component used for the root node. Either a string to use a HTML element or a component.
1010
*/
1111
as?:ElementType
12+
1213
/**
1314
* A string of all className you want applied to the component.
1415
*/

‎packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTML
1515
* Component used for the root node. Either a string to use a HTML element or a component.
1616
*/
1717
as?:ElementType
18+
1819
/**
1920
* A string of all className you want applied to the base component.
2021
*/

‎packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,27 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
1313
* Enables pseudo element caret on toggler.
1414
*/
1515
caret?:boolean
16+
1617
/**
1718
* Create a custom toggler which accepts any content.
1819
*/
1920
custom?:boolean
21+
2022
/**
2123
* If a dropdown `variant` is set to `nav-item` then render the toggler as a
2224
* link instead of a button.
2325
*
2426
*@since 5.0.0
2527
*/
2628
navLink?:boolean
29+
2730
/**
2831
* Similarly, create split button dropdowns with virtually the same markup as
2932
* single button dropdowns, but with the addition of `.dropdown-toggle-split`
3033
* className for proper spacing around the dropdown caret.
3134
*/
3235
split?:boolean
36+
3337
/**
3438
* Sets which event handlers you'd like provided to your toggle prop. You can
3539
* specify one trigger or an array of them.

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp