Tldraw/packages/tldraw/src/components/ToolsPanel/LockButton.tsx

23 wiersze
767 B
TypeScript

import * as React from 'react'
import { LockClosedIcon, LockOpen1Icon } from '@radix-ui/react-icons'
import { Tooltip } from '~components/Tooltip'
import { useTLDrawContext } from '~hooks'
import { ToolButton } from '~components/ToolButton'
import type { TLDrawSnapshot } from '~types'
const isToolLockedSelector = (s: TLDrawSnapshot) => s.appState.isToolLocked
export function LockButton(): JSX.Element {
const { state, useSelector } = useTLDrawContext()
const isToolLocked = useSelector(isToolLockedSelector)
return (
<Tooltip label="Lock Tool" kbd="7">
<ToolButton variant="circle" isActive={isToolLocked} onSelect={state.toggleToolLock}>
{isToolLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
</ToolButton>
</Tooltip>
)
}