variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Removed more unused code from r3f

Browse source
This commit is contained in:
Aria Minaei 2021-07-04 18:23:27 +02:00
parent 532e24e691
commit 16434644dc
7 changed files with 7 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/plugin-r3f/src/components/Editor.tsx
View file

@ -11,8 +11,6 @@ import UI from './UI'
import ProxyManager from './ProxyManager'
import studio from '@theatre/studio'
import {useVal} from '@theatre/dataverse-react'
import {IdProvider} from './elements/IdProvider'
import PortalManager from './elements/PortalManager'
const EditorScene = () => {
const orbitControlsRef = useRef<typeof OrbitControls>()
@ -69,8 +67,8 @@ const Editor: VFC = () => {
return (
<root.div>
<div id="react-three-editable-editor-root">
<PortalManager>
<IdProvider>
<>
<>
<div className="relative z-50">
<div
className={`fixed ${editorOpen ? 'block' : 'hidden'} inset-0`}
@ -102,8 +100,8 @@ const Editor: VFC = () => {
</div>
<style type="text/css">{styles}</style>
</IdProvider>
</PortalManager>
</>
</>
</div>
</root.div>
)

45
packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx
View file

@ -1,10 +1,8 @@
import type {ReactElement, ReactNode, VFC} from 'react'
import type {ReactElement, ReactNode} from 'react'
import React from 'react'
import type {IconType} from 'react-icons'
import {Group, Button} from 'reakit'
import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
import {usePopoverState, PopoverDisclosure, Popover} from './Popover'
import {FiChevronDown} from 'react-icons/all'
interface OptionButtonProps<Option> {
value: Option
@ -42,44 +40,7 @@ function OptionButton<Option>({
)
}
interface SettingsProps {
children: ReactNode
}
const Settings: VFC<SettingsProps> = ({children}) => {
const tooltip = useTooltipState()
const popover = usePopoverState()
return (
<>
<TooltipReference
{...tooltip}
as={'div'}
tabIndex={-1}
className="focus:outline-none"
>
<PopoverDisclosure
// @ts-ignore
{...popover}
className={`flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-1 rounded-r bg-gray-800 text-white hover:bg-gray-900 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
>
<FiChevronDown />
</PopoverDisclosure>
</TooltipReference>
<Tooltip {...tooltip}>Settings</Tooltip>
<Popover
{...popover}
// this seems to be necessary to prevent the popup from forever being closed after the first opening
hideOnClickOutside={false}
aria-label="More options"
>
{children}
</Popover>
</>
)
}
export interface CompactModeSelectProps<Option> {
interface CompactModeSelectProps<Option> {
value: Option
onChange: (value: Option) => void
options: {
@ -94,7 +55,6 @@ const CompactModeSelect = <Option extends string | number>({
value,
onChange,
options,
settingsPanel,
}: CompactModeSelectProps<Option>) => {
return (
<Group
@ -111,7 +71,6 @@ const CompactModeSelect = <Option extends string | number>({
onClick={() => onChange(option)}
/>
))}
{settingsPanel && <Settings>{settingsPanel}</Settings>}
</Group>
)
}

22
packages/plugin-r3f/src/components/elements/FormControl.tsx
View file

@ -1,22 +0,0 @@
import type {ReactNode, VFC} from 'react'
import React, {createContext, useContext} from 'react'
import {useId} from './IdProvider'
const FormControlContext = createContext<string | undefined>(undefined)
interface FormControlProps {
id?: string
children: ReactNode
}
export const FormControl: VFC<FormControlProps> = ({children, ...props}) => {
const {id} = useId(props)
return (
<FormControlContext.Provider value={id}>
{children}
</FormControlContext.Provider>
)
}
export const useFormControlContext = () => useContext(FormControlContext)

6
packages/plugin-r3f/src/components/elements/IdProvider.ts
View file

@ -1,6 +0,0 @@
export {
unstable_IdProvider as IdProvider,
unstable_useId as useId,
} from 'reakit'
export type {unstable_IdProviderProps as IdProviderProps} from 'reakit'

29
packages/plugin-r3f/src/components/elements/Popover.tsx
View file

@ -1,29 +0,0 @@
import type {VFC} from 'react'
import React from 'react'
import {
usePopoverState,
Popover as PopoverImpl,
PopoverDisclosure,
} from 'reakit'
import type {PopoverProps} from 'reakit'
export type {PopoverProps}
export {PopoverDisclosure, usePopoverState}
export const Popover: VFC<PopoverProps> = ({className, children, ...props}) => {
return (
<>
<PopoverImpl
// @ts-ignore
{...props}
className="flex p-4 w-80 rounded overflow-hidden shadow-2xl focus:outline-none bg-white"
>
{/* it seems that rendering Canvas in a display: none element permanently breaks its sizing, so we don't */}
{props.visible && children}
</PopoverImpl>
</>
)
}

26
packages/plugin-r3f/src/components/elements/PortalManager.tsx
View file

@ -1,26 +0,0 @@
import type {ReactNode} from 'react'
import React, {useLayoutEffect, useState} from 'react'
import {PortalContext} from 'reakit'
export interface PortalManagerProps {
children: ReactNode
}
const PortalManager: React.VFC<PortalManagerProps> = ({children}) => {
const wrapperRef = React.useRef<HTMLDivElement>(null)
// force update on initial render
const [, forceUpdate] = useState(false)
useLayoutEffect(() => {
forceUpdate((i) => !i)
}, [])
return (
<PortalContext.Provider value={wrapperRef.current}>
{children}
<div ref={wrapperRef} className="relative z-50" />
</PortalContext.Provider>
)
}
export default PortalManager

4
packages/plugin-r3f/src/components/elements/Tooltip.tsx
View file

@ -2,9 +2,7 @@ import type {VFC} from 'react'
import React from 'react'
import {Tooltip as TooltipImpl, TooltipReference, useTooltipState} from 'reakit'
import type {TooltipProps, TooltipReferenceProps} from 'reakit'
export type {TooltipProps, TooltipReferenceProps}
import type {TooltipProps} from 'reakit'
export {TooltipReference, useTooltipState}