granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Dialog in ConflictModals

Browse source
This commit is contained in:
Justin Edmund 2023-01-02 21:31:18 -08:00
parent 56524d847a
commit 9d5d67601c
2 changed files with 79 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
components/CharacterConflictModal/index.tsx
View file

@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { Trans, useTranslation } from 'next-i18next' import { Trans, useTranslation } from 'next-i18next'
import * as Dialog from '@radix-ui/react-dialog' import { Dialog, DialogContent } from '~components/Dialog'
import Button from '~components/Button'
import Overlay from '~components/Overlay'
import { appState } from '~utils/appState' import { appState } from '~utils/appState'
import Button from '~components/Button'
import './index.scss' import './index.scss'
interface Props { interface Props {
@ -68,11 +68,11 @@ const CharacterConflictModal = (props: Props) => {
} }
return ( return (
<Dialog.Root open={open} onOpenChange={openChange}> <Dialog open={open} onOpenChange={openChange}>
<Dialog.Portal> <DialogContent
<Dialog.Content
className="Conflict Dialog" className="Conflict Dialog"
onOpenAutoFocus={(event) => event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={close}
> >
<p> <p>
<Trans i18nKey="modals.conflict.character"></Trans> <Trans i18nKey="modals.conflict.character"></Trans>
@ -107,10 +107,9 @@ const CharacterConflictModal = (props: Props) => {
text={t('modals.conflict.buttons.confirm')} text={t('modals.conflict.buttons.confirm')}
/> />
</footer> </footer>
</Dialog.Content> </DialogContent>
<Dialog.Overlay className="Overlay" /> <Overlay open={open} visible={true} />
</Dialog.Portal> </Dialog>
</Dialog.Root>
) )
} }

16
components/WeaponConflictModal/index.tsx
View file

@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { Trans, useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
import * as Dialog from '@radix-ui/react-dialog' import { Dialog, DialogContent } from '~components/Dialog'
import Button from '~components/Button' import Button from '~components/Button'
import Overlay from '~components/Overlay'
import mapWeaponSeries from '~utils/mapWeaponSeries' import mapWeaponSeries from '~utils/mapWeaponSeries'
@ -62,11 +63,11 @@ const WeaponConflictModal = (props: Props) => {
} }
return ( return (
<Dialog.Root open={open} onOpenChange={openChange}> <Dialog open={open} onOpenChange={openChange}>
<Dialog.Portal> <DialogContent
<Dialog.Content
className="Conflict Dialog" className="Conflict Dialog"
onOpenAutoFocus={(event) => event.preventDefault()} onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={close}
> >
<p>{infoString()}</p> <p>{infoString()}</p>
<div className="WeaponDiagram Diagram"> <div className="WeaponDiagram Diagram">
@ -99,10 +100,9 @@ const WeaponConflictModal = (props: Props) => {
text={t('modals.conflict.buttons.confirm')} text={t('modals.conflict.buttons.confirm')}
/> />
</footer> </footer>
</Dialog.Content> </DialogContent>
<Dialog.Overlay className="Overlay" /> <Overlay open={open} visible={true} />
</Dialog.Portal> </Dialog>
</Dialog.Root>
) )
} }