Implement ToolbarSwitchSelect

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