Implement ToolbarSwitchSelect

packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx

@@ -2,13 +2,16 @@ import type {VFC} from 'react'
 import React from 'react'
 import {useEditorStore} from '../../store'
 import shallow from 'zustand/shallow'
-import {GiPocketBow, IoCameraOutline} from 'react-icons/all'
+import {GiPocketBow, IoCameraOutline, RiFocus3Line} from 'react-icons/all'
 import {Vector3} from 'three'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import studio, {ToolbarIconButton} from '@theatre/studio'
 import {getSelected} from '../useSelected'
 import {usePrism, useVal} from '@theatre/dataverse-react'
 import styled from 'styled-components'
+import TransformControlsModeSelect from './TransformControlsModeSelect'
+import ViewportShadingSelect from './ViewportShadingSelect'
+import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
 
 const ToolGroup = styled.div`
   pointer-events: auto;
@@ -44,7 +47,7 @@ const Toolbar: VFC = () => {
           label="Create snapshot"
         />
       </ToolGroup>
-      {/* <ToolGroup>
+      <ToolGroup>
         <TransformControlsModeSelect
           value={transformControlsMode}
           onChange={(value) =>
@@ -75,7 +78,7 @@ const Toolbar: VFC = () => {
         />
       </ToolGroup>
       <ToolGroup>
-        <IconButton
+        <ToolbarIconButton
           label="Focus on selected"
           icon={<RiFocus3Line />}
           onClick={() => {
@@ -99,7 +102,7 @@ const Toolbar: VFC = () => {
             }
           }}
         />
-      </ToolGroup> */}
+      </ToolGroup>
       <ToolGroup>
         <ToolbarIconButton
           label="Align object to view"

packages/plugin-r3f/src/components/Toolbar/TransformControlsModeSelect.tsx

@@ -1,39 +1,41 @@
+import {ToolbarSwitchSelect} from '@theatre/studio'
 import type {VFC} from 'react'
 import React from 'react'
 import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/all'
 import type {TransformControlsMode} from '../../store'
-import CompactModeSelect from './utils/CompactModeSelect'
 
 export interface TransformControlsModeSelectProps {
   value: TransformControlsMode
-  onChange: (value: TransformControlsMode) => void
+  onChange: (value: string) => void
 }
 
 const TransformControlsModeSelect: VFC<TransformControlsModeSelectProps> = ({
   value,
   onChange,
-}) => (
-  <CompactModeSelect
-    value={value}
-    onChange={onChange}
-    options={[
-      {
-        option: 'translate',
-        label: 'Tool: Translate',
-        icon: <GiMove />,
-      },
-      {
-        option: 'rotate',
-        label: 'Tool: Rotate',
-        icon: <GiClockwiseRotation />,
-      },
-      {
-        option: 'scale',
-        label: 'Tool: Scale',
-        icon: <GiResize />,
-      },
-    ]}
-  />
-)
+}) => {
+  return (
+    <ToolbarSwitchSelect
+      value={value}
+      onChange={onChange}
+      options={[
+        {
+          value: 'translate',
+          label: 'Tool: Translate',
+          icon: <GiMove />,
+        },
+        {
+          value: 'rotate',
+          label: 'Tool: Rotate',
+          icon: <GiClockwiseRotation />,
+        },
+        {
+          value: 'scale',
+          label: 'Tool: Scale',
+          icon: <GiResize />,
+        },
+      ]}
+    />
+  )
+}
 
 export default TransformControlsModeSelect

packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx

@@ -55,6 +55,8 @@ function OptionButton<Option>({
   icon,
   onClick,
 }: OptionButtonProps<Option>) {
+  console.log('deprecate CompactModeSelect')
+
   const tooltip = useTooltipState()
   return (
     <>