96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import cloneDeep from 'lodash.clonedeep'
|
|
|
|
import SelectWithInput from '~components/SelectWithInput'
|
|
import { weaponAwakening, characterAwakening } from '~data/awakening'
|
|
|
|
import './index.scss'
|
|
|
|
interface Props {
|
|
object: 'character' | 'weapon'
|
|
type?: number
|
|
level?: number
|
|
onOpenChange?: (open: boolean) => void
|
|
sendValidity: (isValid: boolean) => void
|
|
sendValues: (type: number, level: number) => void
|
|
}
|
|
|
|
const AwakeningSelect = (props: Props) => {
|
|
// Data states
|
|
const [awakeningType, setAwakeningType] = useState(
|
|
props.object === 'weapon' ? 0 : 1
|
|
)
|
|
const [awakeningLevel, setAwakeningLevel] = useState(1)
|
|
|
|
// Data
|
|
const chooseDataset = () => {
|
|
let list: ItemSkill[] = []
|
|
|
|
switch (props.object) {
|
|
case 'character':
|
|
list = characterAwakening
|
|
break
|
|
case 'weapon':
|
|
// WARNING: Clonedeep is masking a deeper error
|
|
// which is running this method every time this component is rerendered
|
|
// causing multiple "No awakening" items to be added
|
|
const awakening = cloneDeep(weaponAwakening)
|
|
awakening.unshift({
|
|
id: 0,
|
|
name: {
|
|
en: 'No awakening',
|
|
ja: '覚醒なし',
|
|
},
|
|
slug: 'no-awakening',
|
|
minValue: 0,
|
|
maxValue: 0,
|
|
fractional: false,
|
|
})
|
|
list = awakening
|
|
break
|
|
}
|
|
|
|
return list
|
|
}
|
|
|
|
// Set default awakening and level based on object type
|
|
useEffect(() => {
|
|
const defaultAwakening = props.object === 'weapon' ? 0 : 1
|
|
const type = props.type != undefined ? props.type : defaultAwakening
|
|
|
|
setAwakeningType(type)
|
|
setAwakeningLevel(props.level ? props.level : 1)
|
|
}, [props.object, props.type, props.level])
|
|
|
|
// Send validity of form when awakening level changes
|
|
useEffect(() => {
|
|
props.sendValidity(awakeningLevel > 0)
|
|
}, [props.sendValidity, awakeningLevel])
|
|
|
|
// Classes
|
|
function changeOpen(open: boolean) {
|
|
if (props.onOpenChange) props.onOpenChange(open)
|
|
}
|
|
|
|
function handleValueChange(type: number, level: number) {
|
|
setAwakeningType(type)
|
|
setAwakeningLevel(level)
|
|
props.sendValues(type, level)
|
|
}
|
|
|
|
return (
|
|
<div className="Awakening">
|
|
<SelectWithInput
|
|
object={`${props.object}_awakening`}
|
|
dataSet={chooseDataset()}
|
|
selectValue={awakeningType}
|
|
inputValue={awakeningLevel}
|
|
onOpenChange={changeOpen}
|
|
sendValidity={props.sendValidity}
|
|
sendValues={handleValueChange}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AwakeningSelect
|