PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

name memoized components

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/tldraw/src/TLDraw.tsx
View file

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

2
packages/tldraw/src/components/ToolsPanel/BackToContent.tsx
View file

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

2
packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx
View file

@ -15,7 +15,7 @@ import { Panel } from '~components/Panel'
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 activeTool = useSelector(activeToolSelector)

2
packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx
View file

@ -10,7 +10,7 @@ import { LockButton } from './LockButton'
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 isDebugMode = useSelector(isDebugModeSelector)

2
packages/tldraw/src/components/TopPanel/ColorMenu.tsx
View file

@ -11,7 +11,7 @@ const selectColor = (s: Data) => s.appState.selectedStyle.color
const preventEvent = (e: Event) => e.preventDefault()
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 theme = useSelector(themeSelector)

2
packages/tldraw/src/components/TopPanel/DashMenu.tsx
View file

@ -17,7 +17,7 @@ const selectDash = (s: Data) => s.appState.selectedStyle.dash
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 dash = useSelector(selectDash)

2
packages/tldraw/src/components/TopPanel/FillCheckbox.tsx
View file

@ -7,7 +7,7 @@ import { ToolButton } from '~components/ToolButton'
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 isFilled = useSelector(isFilledSelector)

2
packages/tldraw/src/components/TopPanel/Menu.tsx
View file

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

2
packages/tldraw/src/components/TopPanel/SizeMenu.tsx
View file

@ -16,7 +16,7 @@ const selectSize = (s: Data) => s.appState.selectedStyle.size
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 size = useSelector(selectSize)