From 7a5b1c744ca9990baa3d612ec9ba74c8a68612c6 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Thu, 3 Aug 2023 21:25:45 +0200 Subject: [PATCH] Fix a bunch of react18 type errors --- packages/playground/src/shared/image/index.tsx | 6 ++++-- packages/playground/src/shared/theatric/index.tsx | 4 ++-- packages/playground/src/shared/turtle/index.tsx | 4 ++-- .../src/extension/components/OrbitControls/index.tsx | 2 +- theatre/studio/src/UIRoot/PointerCapturing.tsx | 6 +++--- theatre/studio/src/UIRoot/ProvideTheme.tsx | 2 +- theatre/studio/src/css.tsx | 11 +++++++---- theatre/studio/src/panels/BasePanel/BasePanel.tsx | 1 + .../src/panels/BasePanel/ExtensionPaneWrapper.tsx | 2 -- theatre/studio/src/panels/OutlinePanel/BaseItem.tsx | 1 + .../DopeSheet/Left/AnyCompositeRow.tsx | 1 + .../DopeSheet/Right/DopeSheetSelectionView.tsx | 1 + .../DopeSheet/Right/HorizontallyScrollableArea.tsx | 1 + .../SequenceEditorPanel/DopeSheet/Right/Row.tsx | 1 + .../FrameStampPositionProvider.tsx | 1 + .../SequenceEditorPanel/VerticalScrollContainer.tsx | 4 +++- .../src/propEditors/simpleEditors/ImagePropEditor.tsx | 3 ++- theatre/studio/src/toolbars/GlobalToolbar.tsx | 4 +++- .../studio/src/uiComponents/PointerEventsHandler.tsx | 1 + .../studio/src/uiComponents/Popover/BasicPopover.tsx | 1 + .../src/uiComponents/Popover/TooltipContext.tsx | 4 ++-- .../colorPicker/components/EditingProvider.tsx | 4 +++- .../studio/src/uiComponents/selects/BasicSelect.tsx | 4 +++- .../simpleContextMenu/ContextMenu/Item.tsx | 4 +++- 24 files changed, 48 insertions(+), 25 deletions(-) diff --git a/packages/playground/src/shared/image/index.tsx b/packages/playground/src/shared/image/index.tsx index 9cca1eb..d2a3b1d 100644 --- a/packages/playground/src/shared/image/index.tsx +++ b/packages/playground/src/shared/image/index.tsx @@ -5,7 +5,7 @@ import {getProject, types} from '@theatre/core' import studio from '@theatre/studio' import React, {useEffect, useState} from 'react' -import {render} from 'react-dom/client' +import ReactDom from 'react-dom/client' import styled from 'styled-components' const project = getProject('Image type playground', { @@ -66,7 +66,9 @@ const ImageTypeExample: React.FC<{}> = (props) => { project.ready .then(() => { - render(, document.getElementById('root')) + ReactDom.createRoot(document.getElementById('root')!).render( + , + ) }) .catch((err) => { console.error(err) diff --git a/packages/playground/src/shared/theatric/index.tsx b/packages/playground/src/shared/theatric/index.tsx index 210a652..0628178 100644 --- a/packages/playground/src/shared/theatric/index.tsx +++ b/packages/playground/src/shared/theatric/index.tsx @@ -1,5 +1,5 @@ import {button, initialize, types, useControls} from 'theatric' -import {render} from 'react-dom/client' +import ReactDom from 'react-dom/client' import React, {useState} from 'react' import state from './state.json' @@ -79,4 +79,4 @@ function App() { ) } -render(, document.getElementById('root')) +ReactDom.createRoot(document.getElementById('root')!).render() diff --git a/packages/playground/src/shared/turtle/index.tsx b/packages/playground/src/shared/turtle/index.tsx index a0f3fc1..80de28c 100644 --- a/packages/playground/src/shared/turtle/index.tsx +++ b/packages/playground/src/shared/turtle/index.tsx @@ -3,7 +3,7 @@ * can be tweaked and animated. */ import React, {useMemo, useState} from 'react' -import {render} from 'react-dom/client' +import ReactDom from 'react-dom/client' import {getProject} from '@theatre/core' import type {ITurtle} from './turtle' import TurtleRenderer from './TurtleRenderer' @@ -52,4 +52,4 @@ const TurtleExample: React.FC<{}> = (props) => { ) } -render(, document.getElementById('root')) +ReactDom.createRoot(document.getElementById('root')!).render() diff --git a/packages/r3f/src/extension/components/OrbitControls/index.tsx b/packages/r3f/src/extension/components/OrbitControls/index.tsx index fdc8eb1..f0590cf 100644 --- a/packages/r3f/src/extension/components/OrbitControls/index.tsx +++ b/packages/r3f/src/extension/components/OrbitControls/index.tsx @@ -65,7 +65,7 @@ export const OrbitControls = forwardRef( if (onChange) onChange(e) } - controls.connect(explDomElement) + controls.connect(explDomElement!) controls.addEventListener('change', callback) if (onStart) controls.addEventListener('start', onStart) diff --git a/theatre/studio/src/UIRoot/PointerCapturing.tsx b/theatre/studio/src/UIRoot/PointerCapturing.tsx index 07bdbd5..f5d7510 100644 --- a/theatre/studio/src/UIRoot/PointerCapturing.tsx +++ b/theatre/studio/src/UIRoot/PointerCapturing.tsx @@ -100,9 +100,9 @@ const PointerCapturingContext = React.createContext( null as $IntentionalAny, ) -const ProviderChildrenMemo: React.FC<{}> = React.memo(({children}) => ( - <>{children} -)) +const ProviderChildrenMemo: React.FC<{children?: React.ReactNode}> = React.memo( + ({children}) => <>{children}, +) /** * See {@link PointerCapturing}. diff --git a/theatre/studio/src/UIRoot/ProvideTheme.tsx b/theatre/studio/src/UIRoot/ProvideTheme.tsx index a0b37ff..89148ce 100644 --- a/theatre/studio/src/UIRoot/ProvideTheme.tsx +++ b/theatre/studio/src/UIRoot/ProvideTheme.tsx @@ -5,7 +5,7 @@ const Container = styled.div` --colors-panel-1: red; ` -const ProvideTheme: React.FC<{}> = (props) => { +const ProvideTheme: React.FC<{children?: React.ReactNode}> = (props) => { return {props.children} } diff --git a/theatre/studio/src/css.tsx b/theatre/studio/src/css.tsx index 671650b..de8680c 100644 --- a/theatre/studio/src/css.tsx +++ b/theatre/studio/src/css.tsx @@ -81,9 +81,10 @@ export const PortalLayer = styled.div` pointer-events: none; ` -export const ProvideStyles: React.FC<{target: undefined | HTMLElement}> = ( - props, -) => { +export const ProvideStyles: React.FC<{ + target: undefined | HTMLElement + children: React.ReactNode +}> = (props) => { return ( <> @@ -104,7 +105,9 @@ export function withStyledShadow( ) } -const ProvideStyledShadow: React.FC<{}> = (props) => { +const ProvideStyledShadow: React.FC<{ + children: React.ReactNode +}> = (props) => { const [template, ref] = useState(null) const [shadowRoot, setShadowRoot] = useState(null) diff --git a/theatre/studio/src/panels/BasePanel/BasePanel.tsx b/theatre/studio/src/panels/BasePanel/BasePanel.tsx index cd6852a..d9dcd42 100644 --- a/theatre/studio/src/panels/BasePanel/BasePanel.tsx +++ b/theatre/studio/src/panels/BasePanel/BasePanel.tsx @@ -68,6 +68,7 @@ const BasePanel: React.FC<{ panelId: UIPanelId defaultPosition: PanelPosition minDims: {width: number; height: number} + children: React.ReactNode }> = ({panelId, children, defaultPosition, minDims}) => { const windowSize = useWindowSize(800, 200) const [boundsHighlighted, addBoundsHighlightLock] = useLockSet() diff --git a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx index 813cd84..c10ab12 100644 --- a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx @@ -27,8 +27,6 @@ const minDims = {width: 300, height: 300} const ExtensionPaneWrapper: React.FC<{ paneInstance: PaneInstance<$FixMe> }> = ({paneInstance}) => { - console.log(paneInstance) - return ( void }> = ({ diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx index 7f9db6f..fc8508e 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Left/AnyCompositeRow.tsx @@ -87,6 +87,7 @@ const AnyCompositeRow: React.FC<{ isSelected?: boolean isSelectable?: boolean isCollapsed: boolean + children?: React.ReactNode }> = ({ leaf, label, diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx index ca101a1..81cc716 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx @@ -35,6 +35,7 @@ const Container = styled.div<{isShiftDown: boolean}>` const DopeSheetSelectionView: React.FC<{ layoutP: Pointer height: number + children: React.ReactNode }> = ({layoutP, children, height}) => { const [containerRef, containerNode] = useRefAndState( null, diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx index c770bb8..a1941a6 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx @@ -34,6 +34,7 @@ const Container = styled.div` const HorizontallyScrollableArea: React.FC<{ layoutP: Pointer height: number + children: React.ReactNode }> = React.memo(({layoutP, children, height}) => { const {width, unitSpaceToScaledSpaceMultiplier} = usePrism( () => ({ diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx index 3c911b6..12d5989 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/Row.tsx @@ -51,6 +51,7 @@ const RightRow: React.FC<{ leaf: SequenceEditorTree_Row node: React.ReactElement isCollapsed: boolean + children?: React.ReactNode | undefined }> = ({leaf, children, node, isCollapsed}) => { const hasChildren = Array.isArray(children) && children.length > 0 diff --git a/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx b/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx index ca91a9e..56ce56a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/FrameStampPositionProvider.tsx @@ -48,6 +48,7 @@ let lastLockId = 0 */ const FrameStampPositionProvider: React.FC<{ layoutP: Pointer + children: React.ReactNode }> = ({children, layoutP}) => { const locksAtom = useMemo(() => new Atom([]), []) const currentD = useMemo( diff --git a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx index 771303a..1b5326a 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx @@ -38,7 +38,9 @@ export const useReceiveVerticalWheelEvent = (): ReceiveVerticalWheelEventFn => * the code that traps the wheel events to pass them to the vertical scroller root, which * we then use to manually dispatch scroll events. */ -const VerticalScrollContainer: React.FC<{}> = (props) => { +const VerticalScrollContainer: React.FC<{ + children: React.ReactNode +}> = (props) => { const ref = useRef(null) const receiveVerticalWheelEvent = useCallback( (event) => { diff --git a/theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx b/theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx index 7724d11..81d0b54 100644 --- a/theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx +++ b/theatre/studio/src/propEditors/simpleEditors/ImagePropEditor.tsx @@ -1,4 +1,5 @@ import type {PropTypeConfig_Image} from '@theatre/core/propTypes' +import type {$FixMe} from '@theatre/shared/utils/types' import {Trash} from '@theatre/studio/uiComponents/icons' import React, {useCallback, useEffect} from 'react' import styled, {css} from 'styled-components' @@ -114,7 +115,7 @@ function ImagePropEditor({ }, [value]) const onChange = useCallback( - async (event) => { + async (event: React.ChangeEvent<$FixMe>) => { const file = event.target.files[0] editingTools.permanentlySetValue({type: 'image', id: undefined}) const imageId = await editingTools.createAsset(file) diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx index 7ba777e..936cd95 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar.tsx @@ -98,7 +98,9 @@ const GlobalToolbar: React.FC = () => { : `There are ${conflicts.length} projects that have state conflicts. They are highlighted in the outline below. `} ) : ( - Outline + + <>Outline + ), ) diff --git a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx index bcc1673..e937144 100644 --- a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx +++ b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx @@ -48,6 +48,7 @@ const context = createContext({} as $IntentionalAny) const PointerEventsHandler: React.FC<{ className?: string + children?: React.ReactNode }> = (props) => { const [locks, setLocks] = useState([]) const contextValue = useMemo(() => { diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index f3f8c25..5dcf576 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -34,6 +34,7 @@ const Container = styled.div` const BasicPopover: React.FC<{ className?: string showPopoverEdgeTriangle?: boolean + children: React.ReactNode }> = React.forwardRef( ( { diff --git a/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx b/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx index 9cd917d..4777437 100644 --- a/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx +++ b/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx @@ -1,4 +1,4 @@ -import type { Prism} from '@theatre/dataverse'; +import type {Prism} from '@theatre/dataverse' import {Atom} from '@theatre/dataverse' import useRefAndState from '@theatre/studio/utils/useRefAndState' import React, { @@ -39,7 +39,7 @@ export const useTooltipOpenState = (): [ return [isOpen, setIsOpen] } -const TooltipContext: React.FC<{}> = ({children}) => { +const TooltipContext: React.FC<{children: React.ReactNode}> = ({children}) => { const currentTooltipId = useMemo(() => new Atom(-1), []) const cur = currentTooltipId.prism diff --git a/theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx b/theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx index dc08bf9..dc6408f 100644 --- a/theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx +++ b/theatre/studio/src/uiComponents/colorPicker/components/EditingProvider.tsx @@ -11,7 +11,9 @@ const editingContext = createContext<{ * stateful and disregard controlling props, while not editing, it should behave * in a controlled manner. */ -export const EditingProvider: FC = ({children}) => { +export const EditingProvider: FC<{children: React.ReactNode}> = ({ + children, +}) => { const [editing, setEditing] = useState(false) return ( diff --git a/theatre/studio/src/uiComponents/selects/BasicSelect.tsx b/theatre/studio/src/uiComponents/selects/BasicSelect.tsx index f4fed80..3477756 100644 --- a/theatre/studio/src/uiComponents/selects/BasicSelect.tsx +++ b/theatre/studio/src/uiComponents/selects/BasicSelect.tsx @@ -38,7 +38,9 @@ const BasicSelect: React.FC<{ return ( - + {selectedLabel} {/*