134 lines
4 KiB
TypeScript
134 lines
4 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
||
|
||
import api from '~utils/api'
|
||
|
||
import './index.scss'
|
||
|
||
// Props
|
||
interface Props {
|
||
currentValue?: WeaponKey
|
||
series: number
|
||
slot: number
|
||
onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
|
||
onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
|
||
}
|
||
|
||
const WeaponKeyDropdown = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(props, ref) {
|
||
const [keys, setKeys] = useState<WeaponKey[][]>([])
|
||
const [currentKey, setCurrentKey] = useState('')
|
||
|
||
const pendulumNames = [
|
||
{ en: 'Pendulum', jp: '' },
|
||
{ en: 'Chain', jp: '' }
|
||
]
|
||
|
||
const telumaNames = [ { en: 'Teluma', jp: '' } ]
|
||
const emblemNames = [ { en: 'Emblem', jp: '' } ]
|
||
const gauphNames = [
|
||
{ en: 'Gauph Key', jp: '' },
|
||
{ en: 'Ultima Key', jp: '' },
|
||
{ en: 'Gate of Omnipotence', jp: '' }
|
||
]
|
||
|
||
useEffect(() => {
|
||
if (props.currentValue)
|
||
setCurrentKey(props.currentValue.id)
|
||
}, [props.currentValue])
|
||
|
||
useEffect(() => {
|
||
const filterParams = {
|
||
params: {
|
||
series: props.series,
|
||
slot: props.slot
|
||
}
|
||
}
|
||
|
||
function organizeWeaponKeys(weaponKeys: WeaponKey[]) {
|
||
const numGroups = Math.max.apply(Math, weaponKeys.map(key => key.group))
|
||
let groupedKeys = []
|
||
for (let i = 0; i <= numGroups; i++) {
|
||
groupedKeys[i] = weaponKeys.filter(key => key.group == i)
|
||
}
|
||
|
||
setKeys(groupedKeys)
|
||
}
|
||
|
||
function fetchWeaponKeys() {
|
||
api.endpoints.weapon_keys.getAll(filterParams)
|
||
.then((response) => {
|
||
const keys = response.data.map((k: any) => k.weapon_key)
|
||
organizeWeaponKeys(keys)
|
||
})
|
||
}
|
||
|
||
fetchWeaponKeys()
|
||
}, [props.series, props.slot])
|
||
|
||
function weaponKeyGroup(index: number) {
|
||
['α','β','γ','Δ'].sort((a, b) => a.localeCompare(b, 'el'))
|
||
|
||
const sortByOrder = (a: WeaponKey, b: WeaponKey) => a.order > b.order ? 1 : -1
|
||
|
||
const options = keys && keys.length > 0 && keys[index].length > 0 &&
|
||
keys[index].sort(sortByOrder).map((item, i) => {
|
||
return (
|
||
<option key={i} value={item.id}>{item.name.en}</option>
|
||
)
|
||
})
|
||
|
||
let name: { [key: string]: string } = {}
|
||
if (props.series == 2 && index == 0)
|
||
name = pendulumNames[0]
|
||
else if (props.series == 2 && props.slot == 1 && index == 1)
|
||
name = pendulumNames[1]
|
||
else if (props.series == 3)
|
||
name = telumaNames[index]
|
||
else if (props.series == 17)
|
||
name = gauphNames[props.slot]
|
||
else if (props.series == 22)
|
||
name = emblemNames[index]
|
||
|
||
return (
|
||
<optgroup key={index} label={ (props.series == 17 && props.slot == 2) ? name.en : `${name.en}s`}>
|
||
{options}
|
||
</optgroup>
|
||
)
|
||
}
|
||
|
||
function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
|
||
if (props.onChange)
|
||
props.onChange(event)
|
||
|
||
setCurrentKey(event.currentTarget.value)
|
||
}
|
||
|
||
const emptyOption = () => {
|
||
let name = ''
|
||
if (props.series == 2)
|
||
name = pendulumNames[0].en
|
||
else if (props.series == 3)
|
||
name = telumaNames[0].en
|
||
else if (props.series == 17)
|
||
name = gauphNames[props.slot].en
|
||
else if (props.series == 22)
|
||
name = emblemNames[0].en
|
||
|
||
return `No ${name}`
|
||
}
|
||
|
||
return (
|
||
<select
|
||
key={`weapon-key-${props.slot}`}
|
||
value={currentKey}
|
||
onBlur={props.onBlur}
|
||
onChange={handleChange}
|
||
ref={ref}>
|
||
<option key="-1" value="-1">{ emptyOption() }</option>
|
||
{ Array.from(Array(keys?.length)).map((x, i) => {
|
||
return weaponKeyGroup(i)
|
||
})}
|
||
</select>
|
||
)
|
||
})
|
||
|
||
export default WeaponKeyDropdown
|