Disable some menu buttons when no item selected (#393)
* 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:
parent
9f04e33ecd
commit
8c06a2866f
2 changed files with 29 additions and 4 deletions
|
@ -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>
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Reference in a new issue