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
+}) => {
+  return (
+    <ToolbarSwitchSelect
       value={value}
       onChange={onChange}
       options={[
         {
-        option: 'translate',
+          value: 'translate',
           label: 'Tool: Translate',
           icon: <GiMove />,
         },
         {
-        option: 'rotate',
+          value: 'rotate',
           label: 'Tool: Rotate',
           icon: <GiClockwiseRotation />,
         },
         {
-        option: 'scale',
+          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 (
     <>

theatre/studio/src/index.ts

@@ -6,7 +6,9 @@ import * as globalVariableNames from '@theatre/shared/globalVariableNames'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import StudioBundle from './StudioBundle'
 import type CoreBundle from '@theatre/core/CoreBundle'
+export {default as ToolbarSwitchSelect} from './uiComponents/toolbar/ToolbarSwitchSelect'
 export {default as ToolbarIconButton} from './uiComponents/toolbar/ToolbarIconButton'
+export {default as ToolbarDropdownSelect} from './uiComponents/toolbar/ToolbarDropdownSelect'
 
 const studioPrivateAPI = new Studio()
 setStudio(studioPrivateAPI)

theatre/studio/src/uiComponents/toolbar/ToolbarDropdownSelect.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div``
+
+const ToolbarDropdownSelect: React.FC<{
+  value: string
+  options: Array<{label: string; value: string; icon: React.ReactElement}>
+  onChange: (value: string) => void
+  label: (cur: {label: string; value: string}) => string
+}> = (props) => {
+  return <Container></Container>
+}
+
+export default ToolbarDropdownSelect

theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx

@@ -2,12 +2,12 @@ import type {ReactElement} from 'react'
 import React from 'react'
 import styled from 'styled-components'
 import {Tooltip, TooltipReference} from '@theatre/studio/uiComponents/Tooltip'
-import {lighten} from 'polished'
+import {lighten, darken} from 'polished'
 import type {ButtonProps} from 'reakit'
 import {useTooltipState} from 'reakit'
 import {Button} from 'reakit'
 
-const TheButton = styled(TooltipReference)`
+export const TheButton = styled(TooltipReference)`
   pointer-events: auto;
   position: relative;
   display: flex;
@@ -24,6 +24,11 @@ const TheButton = styled(TooltipReference)`
     color: white;
   }
 
+  &.selected {
+    background-color: ${darken(0.1, '#313131')};
+    color: white;
+  }
+
   color: #c0c0c0;
   background-color: #313131;
   border: 1px solid #272727;

theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelect.tsx

@@ -0,0 +1,77 @@
+import type {ReactElement} from 'react'
+import React from 'react'
+import type {IconType} from 'react-icons'
+import {Group, Button} from 'reakit'
+import styled from 'styled-components'
+import {Tooltip, useTooltipState} from '@theatre/studio/uiComponents/Tooltip'
+import {TheButton as ButtonImpl} from './ToolbarIconButton'
+
+const Opt = styled(ButtonImpl)``
+
+function OptionButton<T>({
+  value,
+  label,
+  icon,
+  onClick,
+  isSelected,
+}: {
+  value: T
+  label: string
+  icon: ReactElement<IconType>
+  onClick: () => void
+  isSelected: boolean
+}) {
+  const tooltip = useTooltipState()
+  return (
+    <>
+      <Opt
+        {...tooltip}
+        forwardedAs={Button}
+        className={isSelected ? 'selected' : undefined}
+        aria-label={label}
+        onClick={onClick}
+      >
+        {icon}
+      </Opt>
+      <Tooltip {...tooltip}>{label}</Tooltip>
+    </>
+  )
+}
+
+interface Props<Option> {
+  value: Option
+  onChange: (value: Option) => void
+  options: {
+    value: Option
+    label: string
+    icon: ReactElement<IconType>
+  }[]
+}
+
+const Container = styled(Group)`
+  display: flex;
+  gap: 2px;
+`
+
+const ToolbarSwitchSelect = <Option extends string | number>({
+  value: valueOfSwitch,
+  onChange,
+  options,
+}: Props<Option>) => {
+  return (
+    <Container>
+      {options.map(({label, icon, value: optionValue}) => (
+        <OptionButton
+          key={optionValue}
+          value={optionValue}
+          isSelected={valueOfSwitch === optionValue}
+          label={label}
+          icon={icon}
+          onClick={() => onChange(optionValue)}
+        />
+      ))}
+    </Container>
+  )
+}
+
+export default ToolbarSwitchSelect