name memoized components
This commit is contained in:
parent
e11f05028f
commit
3c1de1f169
9 changed files with 24 additions and 26 deletions
|
@ -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',
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue