wip tabs

Author: lazarusA

demo/main.tsx

@@ -9,10 +9,13 @@ import {
   useSliderBlade,
   useButtonBlade,
   useTextBlade,
+  useTabBlade,
   useTweakpane,
+  asFolderInstance
 } from '../src'
 import './index.css'
 
+
 export function App() {
   const meshRef = useRef<Mesh>(null!)
   const [fruitCount, setFruitCount] = useState(0)
@@ -30,6 +33,27 @@ export function App() {
     }
   )
 
+  const { tabs } = useTabBlade(pane, {
+    pages: [
+      { title: 'Parameters' },
+      { title: 'Advanced' }
+    ]
+  })
+
+  // const mainTab = tabs[0]
+
+  // if (!mainTab?.current) return null
+  
+  // usePaneInput(
+  //   asFolderInstance(mainTab),
+  //   'color',
+  //   {
+  //     label: 'Color',
+  //     value: '#ffa500',
+  //     view: 'color',
+  //   },
+  // )
+
   const [time] = useSliderBlade(pane, {
     label: 'Sky',
     value: 0.6,
@@ -96,6 +120,37 @@ export function App() {
     title: 'Box Settings',
   })
 
+  const mytabs = useTabBlade(folder, {
+    pages: [
+      { title: 'Parameters' },
+      { title: 'Advanced' }
+    ]
+  })
+  
+
+// Get the specific tab page instance
+// const tabPage = mytabs.tabs[0].current.instance;
+
+// // If you're trying to add a binding to this tab page
+// if (tabPage) {
+//   // The correct way to add bindings to a tab page
+//   tabPage.addBinding(pane.current.params, 'position', {
+//     label: 'Position',
+//     x: {
+//       min: -6,
+//       max: 6,
+//     },
+//     y: {
+//       min: -6,
+//       max: 6,
+//     },
+//     z: {
+//       min: -6,
+//       max: 6,
+//     },
+//   });
+// }
+
   usePaneInput(
     folder,
     'position',

src/hooks/useTabBlade.ts

@@ -0,0 +1,61 @@
+import { TabApi, TabPageApi, TabBladeParams, FolderApi } from '@tweakpane/core'
+import { RefObject, useLayoutEffect, useRef } from 'react'
+import { FolderInstance } from './usePaneFolder'
+
+interface UseTabBladeParams {
+  pages: {
+    title: string;
+  }[];
+}
+
+export function asFolderInstance<T extends object>(
+  tab: RefObject<TabPageInstance<T>>
+): RefObject<FolderInstance<T>> {
+  return tab as unknown as RefObject<FolderInstance<T>>
+}
+
+// Create a wrapper that makes TabPageApi behave like FolderApi
+export interface TabPageInstance<T extends {}> {
+  instance: TabPageApi | FolderApi
+  params: T
+}
+
+export function useTabBlade<T extends Object>(
+  paneRef: RefObject<FolderInstance<T>>,
+  params: UseTabBladeParams
+): {
+  tabRef: RefObject<TabApi>,
+  tabs: RefObject<TabPageInstance<T>>[]
+} {
+  const tabRef = useRef<TabApi>(null!)
+  const tabsRef = useRef<RefObject<TabPageInstance<T>>[]>([])
+
+  useLayoutEffect(() => {
+    const pane = paneRef.current?.instance
+    if (pane == null) return
+
+    const tab = pane.addTab({
+      ...params,
+      view: 'tab'
+    } as TabBladeParams) as TabApi
+
+    tabRef.current = tab
+
+    // Since TabPageApi implements ContainerApi, we can use it directly
+    tabsRef.current = tab.pages.map(page => ({
+      current: {
+        instance: page,
+        params: paneRef.current?.params || ({} as T)
+      }
+    }))
+
+    return () => {
+      if (tab.element) tab.dispose()
+    }
+  }, [])
+
+  return {
+    tabRef,
+    tabs: tabsRef.current
+  }
+}

src/index.ts

@@ -4,4 +4,5 @@ export * from './hooks/useSliderBlade'
 export * from './hooks/useButtonBlade'
 export * from './hooks/usePaneFolder'
 export * from './hooks/usePaneInput'
+export * from './hooks/useTabBlade'
 export * from './hooks/useTweakpane'