name memoized components

This commit is contained in:
Steve Ruiz 2021-11-06 11:19:15 +00:00
parent e11f05028f
commit 3c1de1f169
9 changed files with 24 additions and 26 deletions

View file

@ -421,14 +421,13 @@ function InnerTldraw({
) )
} }
const OneOff = React.memo( const OneOff = React.memo(function OneOff({
({
focusableRef, focusableRef,
autofocus, autofocus,
}: { }: {
autofocus?: boolean autofocus?: boolean
focusableRef: React.RefObject<HTMLDivElement> focusableRef: React.RefObject<HTMLDivElement>
}) => { }) {
useKeyboardShortcuts(focusableRef) useKeyboardShortcuts(focusableRef)
useStylesheet() useStylesheet()
@ -439,8 +438,7 @@ const OneOff = React.memo(
}, [autofocus]) }, [autofocus])
return null return null
} })
)
const StyledLayout = styled('div', { const StyledLayout = styled('div', {
position: 'absolute', position: 'absolute',

View file

@ -9,7 +9,7 @@ const isEmptyCanvasSelector = (s: Data) =>
Object.keys(s.document.pages[s.appState.currentPageId].shapes).length > 0 && Object.keys(s.document.pages[s.appState.currentPageId].shapes).length > 0 &&
s.appState.isEmptyCanvas s.appState.isEmptyCanvas
export const BackToContent = React.memo(() => { export const BackToContent = React.memo(function BackToContent() {
const { tlstate, useSelector } = useTLDrawContext() const { tlstate, useSelector } = useTLDrawContext()
const isEmptyCanvas = useSelector(isEmptyCanvasSelector) const isEmptyCanvas = useSelector(isEmptyCanvasSelector)

View file

@ -15,7 +15,7 @@ import { Panel } from '~components/Panel'
const activeToolSelector = (s: Data) => s.appState.activeTool const activeToolSelector = (s: Data) => s.appState.activeTool
export const PrimaryTools = React.memo((): JSX.Element => { export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element {
const { tlstate, useSelector } = useTLDrawContext() const { tlstate, useSelector } = useTLDrawContext()
const activeTool = useSelector(activeToolSelector) const activeTool = useSelector(activeToolSelector)

View file

@ -10,7 +10,7 @@ import { LockButton } from './LockButton'
const isDebugModeSelector = (s: Data) => s.settings.isDebugMode const isDebugModeSelector = (s: Data) => s.settings.isDebugMode
export const ToolsPanel = React.memo((): JSX.Element => { export const ToolsPanel = React.memo(function ToolsPanel(): JSX.Element {
const { useSelector } = useTLDrawContext() const { useSelector } = useTLDrawContext()
const isDebugMode = useSelector(isDebugModeSelector) const isDebugMode = useSelector(isDebugModeSelector)

View file

@ -11,7 +11,7 @@ const selectColor = (s: Data) => s.appState.selectedStyle.color
const preventEvent = (e: Event) => e.preventDefault() const preventEvent = (e: Event) => e.preventDefault()
const themeSelector = (data: Data) => (data.settings.isDarkMode ? 'dark' : 'light') const themeSelector = (data: Data) => (data.settings.isDarkMode ? 'dark' : 'light')
export const ColorMenu = React.memo((): JSX.Element => { export const ColorMenu = React.memo(function ColorMenu(): JSX.Element {
const { tlstate, useSelector } = useTLDrawContext() const { tlstate, useSelector } = useTLDrawContext()
const theme = useSelector(themeSelector) const theme = useSelector(themeSelector)

View file

@ -17,7 +17,7 @@ const selectDash = (s: Data) => s.appState.selectedStyle.dash
const preventEvent = (e: Event) => e.preventDefault() const preventEvent = (e: Event) => e.preventDefault()
export const DashMenu = React.memo((): JSX.Element => { export const DashMenu = React.memo(function DashMenu(): JSX.Element {
const { tlstate, useSelector } = useTLDrawContext() const { tlstate, useSelector } = useTLDrawContext()
const dash = useSelector(selectDash) const dash = useSelector(selectDash)

View file

@ -7,7 +7,7 @@ import { ToolButton } from '~components/ToolButton'
const isFilledSelector = (s: Data) => s.appState.selectedStyle.isFilled const isFilledSelector = (s: Data) => s.appState.selectedStyle.isFilled
export const FillCheckbox = React.memo((): JSX.Element => { export const FillCheckbox = React.memo(function FillCheckbox(): JSX.Element {
const { tlstate, useSelector } = useTLDrawContext() const { tlstate, useSelector } = useTLDrawContext()
const isFilled = useSelector(isFilledSelector) const isFilled = useSelector(isFilledSelector)

View file

@ -11,7 +11,7 @@ interface MenuProps {
readOnly: boolean readOnly: boolean
} }
export const Menu = React.memo(({ readOnly }: MenuProps) => { export const Menu = React.memo(function Menu({ readOnly }: MenuProps) {
const { tlstate, callbacks } = useTLDrawContext() const { tlstate, callbacks } = useTLDrawContext()
const { onNewProject, onOpenProject, onSaveProject, onSaveProjectAs } = useFileSystemHandlers() const { onNewProject, onOpenProject, onSaveProject, onSaveProjectAs } = useFileSystemHandlers()

View file

@ -16,7 +16,7 @@ const selectSize = (s: Data) => s.appState.selectedStyle.size
const preventEvent = (e: Event) => e.preventDefault() const preventEvent = (e: Event) => e.preventDefault()
export const SizeMenu = React.memo((): JSX.Element => { export const SizeMenu = React.memo(function SizeMenu(): JSX.Element {
const { tlstate, useSelector } = useTLDrawContext() const { tlstate, useSelector } = useTLDrawContext()
const size = useSelector(selectSize) const size = useSelector(selectSize)