hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-07 01:46:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: toggling AppDetailNav causes unnecessary component rerenders (#3718)

Browse Source
This commit is contained in:
legao
2024-04-24 04:07:28 +00:00
committed by GitHub
parent 9eebe9d54e
commit 40e36e9b52
18 changed files with 314 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/app/components/app-sidebar/index.tsx
View File

@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react'
import React, { useEffect } from 'react'
import { useShallow } from 'zustand/react/shallow'
import NavLink from './navLink'
import type { NavIcon } from './navLink'
import AppBasic from './basic'
@@ -26,11 +27,13 @@ export type IAppDetailNavProps = {
}
const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
const { appSidebarExpand, setAppSiderbarExpand } = useAppStore()
const { appSidebarExpand, setAppSiderbarExpand } = useAppStore(useShallow(state => ({
appSidebarExpand: state.appSidebarExpand,
setAppSiderbarExpand: state.setAppSiderbarExpand,
})))
const media = useBreakpoints()
const isMobile = media === MediaType.mobile
const [modeState, setModeState] = useState(appSidebarExpand)
const expand = modeState === 'expand'
const expand = appSidebarExpand === 'expand'
const handleToggle = (state: string) => {
setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
@@ -39,9 +42,9 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
useEffect(() => {
if (appSidebarExpand) {
localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
setModeState(appSidebarExpand)
setAppSiderbarExpand(appSidebarExpand)
}
}, [appSidebarExpand])
}, [appSidebarExpand, setAppSiderbarExpand])
return (
<div
@@ -61,7 +64,7 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
)}
{iconType !== 'app' && (
<AppBasic
mode={modeState}
mode={appSidebarExpand}
iconType={iconType}
icon={icon}
icon_background={icon_background}
@@ -81,10 +84,10 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
>
{navigation.map((item, index) => {
return (
<NavLink key={index} mode={modeState} iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
<NavLink key={index} mode={appSidebarExpand} iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
)
})}
{extraInfo && extraInfo(modeState)}
{extraInfo && extraInfo(appSidebarExpand)}
</nav>
{
!isMobile && (
@@ -96,7 +99,7 @@ const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInf
>
<div
className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer'
onClick={() => handleToggle(modeState)}
onClick={() => handleToggle(appSidebarExpand)}
>
{
expand