2021-11-11 13:03:13 +00:00
|
|
|
import * as React from 'react'
|
2021-11-19 10:19:06 +00:00
|
|
|
import { Tooltip } from '~components/Primitives/Tooltip'
|
2021-11-16 16:01:29 +00:00
|
|
|
import { useTldrawApp } from '~hooks'
|
2021-11-19 10:19:06 +00:00
|
|
|
import { ToolButton } from '~components/Primitives/ToolButton'
|
|
|
|
import { TrashIcon } from '~components/Primitives/icons'
|
2022-06-09 14:33:35 +00:00
|
|
|
import { useIntl } from 'react-intl'
|
2021-11-11 13:03:13 +00:00
|
|
|
|
2022-05-14 13:15:55 +00:00
|
|
|
export function DeleteButton() {
|
2021-11-16 16:01:29 +00:00
|
|
|
const app = useTldrawApp()
|
2022-06-09 14:33:35 +00:00
|
|
|
const intl = useIntl()
|
2021-11-11 13:03:13 +00:00
|
|
|
|
|
|
|
const handleDelete = React.useCallback(() => {
|
2021-11-16 16:01:29 +00:00
|
|
|
app.delete()
|
|
|
|
}, [app])
|
2021-11-11 13:03:13 +00:00
|
|
|
|
2021-11-16 17:05:17 +00:00
|
|
|
const hasSelection = app.useStore(
|
2021-11-17 11:06:56 +00:00
|
|
|
(s) =>
|
|
|
|
s.appState.status === 'idle' &&
|
|
|
|
s.document.pageStates[s.appState.currentPageId].selectedIds.length > 0
|
2021-11-16 17:05:17 +00:00
|
|
|
)
|
|
|
|
|
2021-11-11 13:03:13 +00:00
|
|
|
return (
|
2022-06-09 14:33:35 +00:00
|
|
|
<Tooltip label={intl.formatMessage({ id: 'delete' })} kbd="⌫" id="TD-Delete">
|
2021-11-16 17:05:17 +00:00
|
|
|
<ToolButton variant="circle" disabled={!hasSelection} onSelect={handleDelete}>
|
2021-11-17 11:06:56 +00:00
|
|
|
<TrashIcon />
|
2021-11-11 13:03:13 +00:00
|
|
|
</ToolButton>
|
|
|
|
</Tooltip>
|
|
|
|
)
|
|
|
|
}
|