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 { 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 Button from '~components/Button'
import './index.scss'
interface Props {
@ -68,11 +68,11 @@ const CharacterConflictModal = (props: Props) => {
}
return (
<Dialog.Root open={open} onOpenChange={openChange}>
<Dialog.Portal>
<Dialog.Content
<Dialog open={open} onOpenChange={openChange}>
<DialogContent
className="Conflict Dialog"
onOpenAutoFocus={(event) => event.preventDefault()}
onEscapeKeyDown={close}
>
<p>
<Trans i18nKey="modals.conflict.character"></Trans>
@ -107,10 +107,9 @@ const CharacterConflictModal = (props: Props) => {
text={t('modals.conflict.buttons.confirm')}
/>
</footer>
</Dialog.Content>
<Dialog.Overlay className="Overlay" />
</Dialog.Portal>
</Dialog.Root>
</DialogContent>
<Overlay open={open} visible={true} />
</Dialog>
)
}

16
components/WeaponConflictModal/index.tsx
View file

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