From ee89858fc362f299a9273929369fde4cf5c9666b Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Wed, 30 Oct 2024 17:42:22 +0800
Subject: [PATCH] release(toolbar): v0.6.2

---
 index.json               |  2 +-
 src/share/hooks.ts       |  8 ++++++++
 src/toolbar/package.json |  2 +-
 src/toolbar/react.tsx    | 20 ++++++++++++++++----
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/index.json b/index.json
index ed3192a..fb0ab4f 100644
--- a/index.json
+++ b/index.json
@@ -380,7 +380,7 @@
   },
   "toolbar": {
     "react": true,
-    "version": "0.6.1",
+    "version": "0.6.2",
     "style": true,
     "icon": false,
     "test": true,
diff --git a/src/share/hooks.ts b/src/share/hooks.ts
index 586c5e6..31ffbec 100644
--- a/src/share/hooks.ts
+++ b/src/share/hooks.ts
@@ -11,6 +11,14 @@ export function useForceUpdate() {
   return () => setForceUpdateValue((value) => value + 1)
 }
 
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>()
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}
+
 export function useNonInitialEffect(
   effect: EffectCallback,
   deps?: DependencyList
diff --git a/src/toolbar/package.json b/src/toolbar/package.json
index 01d55fb..264fd62 100644
--- a/src/toolbar/package.json
+++ b/src/toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "toolbar",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Application toolbar",
   "luna": {
     "react": true
diff --git a/src/toolbar/react.tsx b/src/toolbar/react.tsx
index 0ef357f..f35a896 100644
--- a/src/toolbar/react.tsx
+++ b/src/toolbar/react.tsx
@@ -20,7 +20,7 @@ import Toolbar, {
 } from './index'
 import $ from 'licia/$'
 import isUndef from 'licia/isUndef'
-import { useForceUpdate } from '../share/hooks'
+import { useForceUpdate, usePrevious } from '../share/hooks'
 import { IComponentOptions } from '../share/Component'
 import { createPortal } from 'react-dom'
 
@@ -33,17 +33,29 @@ const LunaToolbar: FC<PropsWithChildren<IToolbarProps>> = (props) => {
   const toolbarRef = useRef<HTMLDivElement>(null)
   const toolbar = useRef<Toolbar>()
   const forceUpdate = useForceUpdate()
+  const prevProps = usePrevious(props)
 
   useEffect(() => {
     toolbar.current = new Toolbar(toolbarRef.current!)
-    toolbar.current.on('change', (key, val, oldVal) => {
-      props.onChange && props.onChange(key, val, oldVal)
-    })
+    if (props.onChange) {
+      toolbar.current.on('change', props.onChange)
+    }
     forceUpdate()
 
     return () => toolbar.current?.destroy()
   }, [])
 
+  useEffect(() => {
+    if (toolbar.current) {
+      if (prevProps?.onChange) {
+        toolbar.current.off('change', prevProps.onChange)
+      }
+      if (props.onChange) {
+        toolbar.current.on('change', props.onChange)
+      }
+    }
+  }, [props.onChange])
+
   useEffect(() => {
     if (toolbar.current) {
       toolbar.current.setOption('theme', props.theme)