Remove onOpenChange and open states
We don't need it right now
This commit is contained in:
parent
3ade12f9e5
commit
db7a008c6f
3 changed files with 8 additions and 219 deletions
|
|
@ -16,114 +16,25 @@ import './index.scss'
|
|||
// Types
|
||||
import { CharacterOverMastery } from '~types'
|
||||
|
||||
type SelectOpenStates = {
|
||||
[key: string]: boolean
|
||||
modifier1: boolean
|
||||
modifier2: boolean
|
||||
modifier3: boolean
|
||||
modifier4: boolean
|
||||
strength1: boolean
|
||||
strength2: boolean
|
||||
strength3: boolean
|
||||
strength4: boolean
|
||||
}
|
||||
|
||||
interface Ring {
|
||||
open: boolean
|
||||
modifier: number
|
||||
strength: number
|
||||
error: string
|
||||
}
|
||||
|
||||
interface RingMap {
|
||||
[index: number]: Ring
|
||||
1: Ring
|
||||
2: Ring
|
||||
3: Ring
|
||||
4: Ring
|
||||
}
|
||||
|
||||
const emptyRing: Ring = {
|
||||
open: false,
|
||||
const emptyRing: ExtendedMastery = {
|
||||
modifier: 0,
|
||||
strength: 0,
|
||||
error: '',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
gridCharacter: GridCharacter
|
||||
onOpenChange: (index: 1 | 2 | 3 | 4, open: boolean) => void
|
||||
sendValidity: (isValid: boolean) => void
|
||||
sendValues: (overMastery: CharacterOverMastery) => void
|
||||
}
|
||||
|
||||
const RingSelect = (props: Props) => {
|
||||
const router = useRouter()
|
||||
const locale =
|
||||
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
// Ring value states
|
||||
const [ringModifier1, setRingModifier1] = useState(0)
|
||||
const [ringModifier2, setRingModifier2] = useState(0)
|
||||
const [ringModifier3, setRingModifier3] = useState(0)
|
||||
const [ringModifier4, setRingModifier4] = useState(0)
|
||||
|
||||
const [ringStrength1, setRingStrength1] = useState(0)
|
||||
const [ringStrength2, setRingStrength2] = useState(0)
|
||||
const [ringStrength3, setRingStrength3] = useState(0)
|
||||
const [ringStrength4, setRingStrength4] = useState(0)
|
||||
|
||||
// UI states
|
||||
const [openStates, setOpenStates] = useState<SelectOpenStates>({
|
||||
modifier1: false,
|
||||
modifier2: false,
|
||||
modifier3: false,
|
||||
modifier4: false,
|
||||
strength1: false,
|
||||
strength2: false,
|
||||
strength3: false,
|
||||
strength4: false,
|
||||
})
|
||||
|
||||
// Rings
|
||||
let rings: RingMap = {
|
||||
const [rings, setRings] = useState<CharacterOverMastery>({
|
||||
1: { ...emptyRing, modifier: 1 },
|
||||
2: { ...emptyRing, modifier: 2 },
|
||||
3: emptyRing,
|
||||
4: emptyRing,
|
||||
}
|
||||
})
|
||||
|
||||
function setOpen(
|
||||
index: number,
|
||||
side: 'modifier' | 'strength',
|
||||
value: boolean
|
||||
) {
|
||||
const key = `${side}${index}`
|
||||
setOpenStates({
|
||||
...openStates,
|
||||
[key]: value,
|
||||
})
|
||||
}
|
||||
|
||||
const errorClasses = {
|
||||
1: classNames({
|
||||
errors: true,
|
||||
visible: rings[1].error.length > 0,
|
||||
}),
|
||||
2: classNames({
|
||||
errors: true,
|
||||
visible: rings[2].error.length > 0,
|
||||
}),
|
||||
3: classNames({
|
||||
errors: true,
|
||||
visible: rings[3].error.length > 0,
|
||||
}),
|
||||
4: classNames({
|
||||
errors: true,
|
||||
visible: rings[4].error.length > 0,
|
||||
}),
|
||||
}
|
||||
|
||||
function dataSet(index: number) {
|
||||
const noValue = {
|
||||
|
|
@ -154,126 +65,8 @@ const RingSelect = (props: Props) => {
|
|||
}
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
// props.sendValues(
|
||||
// primaryAxModifier,
|
||||
// primaryAxValue,
|
||||
// secondaryAxModifier,
|
||||
// secondaryAxValue
|
||||
// )
|
||||
// }, [
|
||||
// props,
|
||||
// primaryAxModifier,
|
||||
// primaryAxValue,
|
||||
// secondaryAxModifier,
|
||||
// secondaryAxValue,
|
||||
// ])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (
|
||||
// props.currentSkills &&
|
||||
// props.currentSkills[0].modifier != null &&
|
||||
// props.currentSkills[0].modifier >= 0
|
||||
// ) {
|
||||
// setPrimaryAxModifier(props.currentSkills[0].modifier)
|
||||
// setPrimaryAxValue(props.currentSkills[0].strength)
|
||||
// } else setPrimaryAxModifier(-1)
|
||||
// }, [props.currentSkills, setPrimaryAxModifier])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (props.currentSkills && props.currentSkills[1].modifier) {
|
||||
// setSecondaryAxModifier(props.currentSkills[1].modifier)
|
||||
// setSecondaryAxValue(props.currentSkills[1].strength)
|
||||
// } else {
|
||||
// setSecondaryAxModifier(-1)
|
||||
// }
|
||||
// }, [props.currentSkills, setSecondaryAxModifier])
|
||||
|
||||
// useEffect(() => {
|
||||
// let noErrors = false
|
||||
|
||||
// // if (errors.axValue1 === '' && errors.axValue2 === '') {
|
||||
|
||||
// // noErrors = true
|
||||
// // }
|
||||
|
||||
// props.sendValidity(noErrors)
|
||||
// }, [errors])
|
||||
|
||||
function openChange(index: 1 | 2 | 3 | 4, side: 'modifier' | 'strength') {
|
||||
switch (index) {
|
||||
case 1:
|
||||
props.onOpenChange(1, !ring1Open)
|
||||
setRing1Open(!ring1Open)
|
||||
break
|
||||
case 2:
|
||||
props.onOpenChange(2, !ring2Open)
|
||||
setRing2Open(!ring2Open)
|
||||
break
|
||||
case 3:
|
||||
props.onOpenChange(3, !ring3Open)
|
||||
setRing3Open(!ring3Open)
|
||||
break
|
||||
case 4:
|
||||
props.onOpenChange(4, !ring4Open)
|
||||
setRing4Open(!ring4Open)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
function onClose(index: 1 | 2 | 3 | 4) {
|
||||
props.onOpenChange(index, false)
|
||||
}
|
||||
|
||||
// function generateOptions(modifierSet: number) {
|
||||
// const axOptions = ax[props.axType - 1]
|
||||
|
||||
// let axOptionElements: React.ReactNode[] = []
|
||||
// if (modifierSet == 0) {
|
||||
// axOptionElements = axOptions.map((ax, i) => {
|
||||
// return (
|
||||
// <SelectItem key={i} value={ax.id}>
|
||||
// {ax.name[locale]}
|
||||
// </SelectItem>
|
||||
// )
|
||||
// })
|
||||
// } else {
|
||||
// // If we are loading data from the server, state doesn't set before render,
|
||||
// // so our defaultValue is undefined.
|
||||
// let modifier = -1
|
||||
// if (primaryAxModifier >= 0) modifier = primaryAxModifier
|
||||
// else if (props.currentSkills) modifier = props.currentSkills[0].modifier
|
||||
|
||||
// if (modifier >= 0 && axOptions[modifier]) {
|
||||
// const primarySkill = axOptions[modifier]
|
||||
|
||||
// if (primarySkill.secondary) {
|
||||
// const secondaryAxOptions = primarySkill.secondary
|
||||
// axOptionElements = secondaryAxOptions.map((ax, i) => {
|
||||
// return (
|
||||
// <SelectItem key={i} value={ax.id}>
|
||||
// {ax.name[locale]}
|
||||
// </SelectItem>
|
||||
// )
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// axOptionElements?.unshift(
|
||||
// <SelectItem key={-1} value={-1}>
|
||||
// {t('ax.no_skill')}
|
||||
// </SelectItem>
|
||||
// )
|
||||
// return axOptionElements
|
||||
// }
|
||||
|
||||
function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {}
|
||||
|
||||
function handleErrors(number: number) {}
|
||||
|
||||
function receiveRingValues(left: number, right: number) {}
|
||||
|
||||
return (
|
||||
<div className="Rings">
|
||||
{[...Array(4)].map((element, i) => {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ interface Props {
|
|||
selectDisabled: boolean
|
||||
inputValue: number
|
||||
awakeningLevel?: number
|
||||
onOpenChange: (open: boolean) => void
|
||||
onOpenChange?: (open: boolean) => void
|
||||
sendValidity: (isValid: boolean) => void
|
||||
sendValues: (type: number, level: number) => void
|
||||
}
|
||||
|
|
@ -80,12 +80,12 @@ const SelectWithInput = ({
|
|||
function changeOpen() {
|
||||
if (!selectDisabled) {
|
||||
setOpen(!open)
|
||||
onOpenChange(!open)
|
||||
if (onOpenChange) onOpenChange(!open)
|
||||
}
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
onOpenChange(false)
|
||||
if (onOpenChange) onOpenChange(false)
|
||||
}
|
||||
|
||||
// Methods: Rendering
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ interface Props {
|
|||
leftSelectValue: number
|
||||
leftSelectDisabled: boolean
|
||||
rightSelectValue: number
|
||||
onOpenChange: (index: 'left' | 'right', open: boolean) => void
|
||||
sendValues: (left: number, right: number) => void
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +33,6 @@ const SelectWithInput = ({
|
|||
leftSelectDisabled,
|
||||
leftSelectValue,
|
||||
rightSelectValue,
|
||||
onOpenChange,
|
||||
sendValues,
|
||||
}: Props) => {
|
||||
const router = useRouter()
|
||||
|
|
@ -63,16 +61,14 @@ const SelectWithInput = ({
|
|||
function changeOpen(side: 'left' | 'right') {
|
||||
if (side === 'left' && !leftSelectDisabled) {
|
||||
setLeftSelectOpen(!leftSelectOpen)
|
||||
onOpenChange('left', !open)
|
||||
} else if (side === 'right') {
|
||||
setRightSelectOpen(!rightSelectOpen)
|
||||
onOpenChange('right', !open)
|
||||
}
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
onOpenChange('left', false)
|
||||
onOpenChange('right', false)
|
||||
setLeftSelectOpen(false)
|
||||
setRightSelectOpen(false)
|
||||
}
|
||||
|
||||
// Methods: Rendering
|
||||
|
|
|
|||
Loading…
Reference in a new issue