Disable rendering of search modal in read-only mode

This commit is contained in:
Justin Edmund 2022-02-26 19:03:46 -08:00
parent f66063b273
commit d76c7fa03a
3 changed files with 67 additions and 47 deletions

View file

@ -6,6 +6,7 @@ import UncapIndicator from '~components/UncapIndicator'
import PlusIcon from '~public/icons/Add.svg'
import './index.scss'
import { omit } from 'lodash'
interface Props {
gridCharacter: GridCharacter | undefined
@ -47,20 +48,27 @@ const CharacterUnit = (props: Props) => {
props.updateUncap(props.gridCharacter.id, props.position, uncap)
}
const image = (
<div className="CharacterImage">
<img alt={character?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div>
)
const editableImage = (
<SearchModal
placeholderText="Search for a character..."
fromPosition={props.position}
object="characters"
send={props.updateObject}>
{image}
</SearchModal>
)
return (
<div>
<div className={classes}>
<SearchModal
placeholderText="Search for a character..."
fromPosition={props.position}
object="characters"
send={props.updateObject}>
<div className="CharacterImage">
<img alt={character?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div>
</SearchModal>
{ (props.editable) ? editableImage : image }
{ (gridCharacter && character) ?
<UncapIndicator
type="character"

View file

@ -55,32 +55,37 @@ const SummonUnit = (props: Props) => {
props.updateUncap(props.gridSummon.id, props.position, uncap)
}
return (
<div>
<div className={classes}>
<SearchModal
placeholderText="Search for a summon..."
fromPosition={props.position}
object="summons"
send={props.updateObject}>
<div className="SummonImage">
<img alt={summon?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div>
</SearchModal>
const image = (
<div className="SummonImage">
<img alt={summon?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div>
)
{ (gridSummon) ?
<UncapIndicator
type="summon"
ulb={gridSummon.object.uncap.ulb || false}
flb={gridSummon.object.uncap.flb || false}
uncapLevel={gridSummon.uncap_level}
updateUncap={passUncapData}
special={false}
/> : ''
}
<h3 className="SummonName">{summon?.name.en}</h3>
</div>
const editableImage = (
<SearchModal
placeholderText="Search for a summon..."
fromPosition={props.position}
object="summons"
send={props.updateObject}>
{image}
</SearchModal>
)
return (
<div className={classes}>
{ (props.editable) ? editableImage : image }
{ (gridSummon) ?
<UncapIndicator
type="summon"
ulb={gridSummon.object.uncap.ulb || false}
flb={gridSummon.object.uncap.flb || false}
uncapLevel={gridSummon.uncap_level}
updateUncap={passUncapData}
special={false}
/> : ''
}
<h3 className="SummonName">{summon?.name.en}</h3>
</div>
)
}

View file

@ -53,20 +53,27 @@ const WeaponUnit = (props: Props) => {
props.updateUncap(props.gridWeapon.id, props.position, uncap)
}
const image = (
<div className="WeaponImage">
<img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div>
)
const editableImage = (
<SearchModal
placeholderText="Search for a weapon..."
fromPosition={props.position}
object="weapons"
send={props.updateObject}>
{image}
</SearchModal>
)
return (
<div>
<div className={classes}>
<SearchModal
placeholderText="Search for a weapon..."
fromPosition={props.position}
object="weapons"
send={props.updateObject}>
<div className="WeaponImage">
<img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div>
</SearchModal>
{ (props.editable) ? editableImage : image }
{ (gridWeapon) ?
<UncapIndicator
type="weapon"