7ece89a357
This PR: - replaces the `shareZone` prop with `SharePanel` component - replaces the `topZone` prop with `TopPanel` components - replaces the `Button` component with `TldrawUiButton` and subcomponents - adds `TldrawUi` prefix to our primitives - fixes a couple of bugs with the components ### Change Type - [x] `major` — Breaking change
88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
import {
|
|
TLUiDialogsContextType,
|
|
TldrawUiButton,
|
|
TldrawUiButtonCheck,
|
|
TldrawUiButtonLabel,
|
|
TldrawUiDialogBody,
|
|
TldrawUiDialogCloseButton,
|
|
TldrawUiDialogFooter,
|
|
TldrawUiDialogHeader,
|
|
TldrawUiDialogTitle,
|
|
useLocalStorageState,
|
|
useTranslation,
|
|
} from '@tldraw/tldraw'
|
|
import { userPreferences } from './userPreferences'
|
|
|
|
export async function shouldLeaveSharedProject(addDialog: TLUiDialogsContextType['addDialog']) {
|
|
if (userPreferences.showFileOpenWarning.get()) {
|
|
const shouldContinue = await new Promise<boolean>((resolve) => {
|
|
addDialog({
|
|
component: ({ onClose }) => (
|
|
<ConfirmLeaveDialog
|
|
onCancel={() => {
|
|
resolve(false)
|
|
onClose()
|
|
}}
|
|
onContinue={() => {
|
|
resolve(true)
|
|
onClose()
|
|
}}
|
|
/>
|
|
),
|
|
onClose: () => {
|
|
resolve(false)
|
|
},
|
|
})
|
|
})
|
|
|
|
return shouldContinue
|
|
}
|
|
return true
|
|
}
|
|
|
|
function ConfirmLeaveDialog({
|
|
onCancel,
|
|
onContinue,
|
|
}: {
|
|
onCancel: () => void
|
|
onContinue: () => void
|
|
}) {
|
|
const msg = useTranslation()
|
|
const [dontShowAgain, setDontShowAgain] = useLocalStorageState('confirm-leave', false)
|
|
|
|
return (
|
|
<>
|
|
<TldrawUiDialogHeader>
|
|
<TldrawUiDialogTitle>{msg('sharing.confirm-leave.title')}</TldrawUiDialogTitle>
|
|
<TldrawUiDialogCloseButton />
|
|
</TldrawUiDialogHeader>
|
|
<TldrawUiDialogBody style={{ maxWidth: 350 }}>
|
|
{msg('sharing.confirm-leave.description')}
|
|
</TldrawUiDialogBody>
|
|
<TldrawUiDialogFooter className="tlui-dialog__footer__actions">
|
|
<TldrawUiButton
|
|
type="normal"
|
|
style={{ marginRight: 'auto' }}
|
|
onClick={() => setDontShowAgain(!dontShowAgain)}
|
|
>
|
|
<TldrawUiButtonCheck checked={dontShowAgain} />
|
|
<TldrawUiButtonLabel>{msg('sharing.confirm-leave.dont-show-again')}</TldrawUiButtonLabel>
|
|
</TldrawUiButton>
|
|
<TldrawUiButton type="normal" onClick={onCancel}>
|
|
<TldrawUiButtonLabel>{msg('sharing.confirm-leave.cancel')}</TldrawUiButtonLabel>
|
|
</TldrawUiButton>
|
|
<TldrawUiButton
|
|
type="primary"
|
|
onClick={async () => {
|
|
if (dontShowAgain) {
|
|
userPreferences.showFileOpenWarning.set(false)
|
|
}
|
|
onContinue()
|
|
}}
|
|
>
|
|
<TldrawUiButtonLabel>{msg('sharing.confirm-leave.leave')}</TldrawUiButtonLabel>
|
|
</TldrawUiButton>
|
|
</TldrawUiDialogFooter>
|
|
</>
|
|
)
|
|
}
|