release(toolbar): v0.6.2

index.json

@@ -380,7 +380,7 @@
   },
   "toolbar": {
     "react": true,
-    "version": "0.6.1",
+    "version": "0.6.2",
     "style": true,
     "icon": false,
     "test": true,

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

src/toolbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toolbar",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Application toolbar",
   "luna": {
     "react": true

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)