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

83
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,49 +68,48 @@ 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>
</p> </p>
<div className="CharacterDiagram Diagram"> <div className="CharacterDiagram Diagram">
<ul> <ul>
{props.conflictingCharacters?.map((character, i) => ( {props.conflictingCharacters?.map((character, i) => (
<li className="character" key={`conflict-${i}`}> <li className="character" key={`conflict-${i}`}>
<img
alt={character.object.name[locale]}
src={imageUrl(character.object, character.uncap_level)}
/>
<span>{character.object.name[locale]}</span>
</li>
))}
</ul>
<span className="arrow">&rarr;</span>
<div className="wrapper">
<div className="character">
<img <img
alt={props.incomingCharacter?.name[locale]} alt={character.object.name[locale]}
src={imageUrl(props.incomingCharacter)} src={imageUrl(character.object, character.uncap_level)}
/> />
<span>{props.incomingCharacter?.name[locale]}</span> <span>{character.object.name[locale]}</span>
</div> </li>
))}
</ul>
<span className="arrow">&rarr;</span>
<div className="wrapper">
<div className="character">
<img
alt={props.incomingCharacter?.name[locale]}
src={imageUrl(props.incomingCharacter)}
/>
<span>{props.incomingCharacter?.name[locale]}</span>
</div> </div>
</div> </div>
<footer> </div>
<Button onClick={close} text={t('buttons.cancel')} /> <footer>
<Button <Button onClick={close} text={t('buttons.cancel')} />
onClick={props.resolveConflict} <Button
text={t('modals.conflict.buttons.confirm')} onClick={props.resolveConflict}
/> text={t('modals.conflict.buttons.confirm')}
</footer> />
</Dialog.Content> </footer>
<Dialog.Overlay className="Overlay" /> </DialogContent>
</Dialog.Portal> <Overlay open={open} visible={true} />
</Dialog.Root> </Dialog>
) )
} }

76
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,47 +63,46 @@ 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">
<ul> <ul>
{props.conflictingWeapons?.map((weapon, i) => ( {props.conflictingWeapons?.map((weapon, i) => (
<li className="weapon" key={`conflict-${i}`}> <li className="weapon" key={`conflict-${i}`}>
<img
alt={weapon.object.name[locale]}
src={imageUrl(weapon.object)}
/>
<span>{weapon.object.name[locale]}</span>
</li>
))}
</ul>
<span className="arrow">&rarr;</span>
<div className="wrapper">
<div className="weapon">
<img <img
alt={props.incomingWeapon?.name[locale]} alt={weapon.object.name[locale]}
src={imageUrl(props.incomingWeapon)} src={imageUrl(weapon.object)}
/> />
{props.incomingWeapon?.name[locale]} <span>{weapon.object.name[locale]}</span>
</div> </li>
))}
</ul>
<span className="arrow">&rarr;</span>
<div className="wrapper">
<div className="weapon">
<img
alt={props.incomingWeapon?.name[locale]}
src={imageUrl(props.incomingWeapon)}
/>
{props.incomingWeapon?.name[locale]}
</div> </div>
</div> </div>
<footer> </div>
<Button onClick={close} text={t('buttons.cancel')} /> <footer>
<Button <Button onClick={close} text={t('buttons.cancel')} />
onClick={props.resolveConflict} <Button
text={t('modals.conflict.buttons.confirm')} onClick={props.resolveConflict}
/> text={t('modals.conflict.buttons.confirm')}
</footer> />
</Dialog.Content> </footer>
<Dialog.Overlay className="Overlay" /> </DialogContent>
</Dialog.Portal> <Overlay open={open} visible={true} />
</Dialog.Root> </Dialog>
) )
} }