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

Disable some menu buttons when no item selected (#393)

Browse source 
* feat(menu): disable buttons when items not selected

* cut and copy options not shown when item isn't selected
* added cut option on ContextMenu

* Show buttons but disabled

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Siddhartha Varma 2021-11-27 21:56:15 +05:30 committed by GitHub
parent 9f04e33ecd
commit 8c06a2866f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/tldraw/src/components/ContextMenu/ContextMenu.tsx
View file

@ -93,6 +93,10 @@ export const ContextMenu = ({ onBlur, children }: ContextMenuProps): JSX.Element
app.copyJson()
}, [app])
const handleCut = React.useCallback(() => {
app.cut()
}, [app])
const handleCopy = React.useCallback(() => {
app.copy()
}, [app])
@ -177,6 +181,9 @@ export const ContextMenu = ({ onBlur, children }: ContextMenuProps): JSX.Element
/>
)}
<Divider />
<CMRowButton onClick={handleCut} kbd="#X">
Cut
</CMRowButton>
<CMRowButton onClick={handleCopy} kbd="#C">
Copy
</CMRowButton>

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

@ -15,14 +15,20 @@ import { useFileSystemHandlers } from '~hooks'
import { HeartIcon } from '~components/Primitives/icons/HeartIcon'
import { preventEvent } from '~components/preventEvent'
import { DiscordIcon } from '~components/Primitives/icons'
import type { TDSnapshot } from '~types'
interface MenuProps {
showSponsorLink: boolean
readOnly: boolean
}
const numberOfSelectedIdsSelector = (s: TDSnapshot) => {
return s.document.pageStates[s.appState.currentPageId].selectedIds.length
}
export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: MenuProps) {
const app = useTldrawApp()
const numberOfSelectedIds = app.useStore(numberOfSelectedIdsSelector)
const { onNewProject, onOpenProject, onSaveProject, onSaveProjectAs } = useFileSystemHandlers()
@ -70,6 +76,8 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu
const showSignInOutMenu = app.callbacks.onSignIn || app.callbacks.onSignOut || showSponsorLink
const hasSelection = numberOfSelectedIds > 0
return (
<DropdownMenu.Root dir="ltr">
<DMTriggerIcon isSponsor={showSponsorLink}>
@ -110,20 +118,30 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu
Redo
</DMItem>
<DMDivider dir="ltr" />
<DMItem onSelect={preventEvent} onClick={handleCut} kbd="#X">
<DMItem onSelect={preventEvent} disabled={!hasSelection} onClick={handleCut} kbd="#X">
Cut
</DMItem>
<DMItem onSelect={preventEvent} onClick={handleCopy} kbd="#C">
<DMItem
onSelect={preventEvent}
disabled={!hasSelection}
onClick={handleCopy}
kbd="#C"
>
Copy
</DMItem>
<DMItem onSelect={preventEvent} onClick={handlePaste} kbd="#V">
Paste
</DMItem>
<DMDivider dir="ltr" />
<DMItem onSelect={preventEvent} onClick={handleCopySvg} kbd="#⇧C">
<DMItem
onSelect={preventEvent}
disabled={!hasSelection}
onClick={handleCopySvg}
kbd="#⇧C"
>
Copy as SVG
</DMItem>
<DMItem onSelect={preventEvent} onClick={handleCopyJson}>
<DMItem onSelect={preventEvent} disabled={!hasSelection} onClick={handleCopyJson}>
Copy as JSON
</DMItem>
<DMDivider dir="ltr" />