72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { useTranslation } from 'next-i18next'
|
|
import classNames from 'classnames'
|
|
|
|
import TranscendenceStar from '~components/TranscendenceStar'
|
|
import './index.scss'
|
|
|
|
interface Props {
|
|
className?: string
|
|
open: boolean
|
|
stage: number
|
|
sendValue?: (stage: number) => void
|
|
}
|
|
|
|
const TranscendencePopover = ({
|
|
className,
|
|
open: popoverOpen,
|
|
stage,
|
|
sendValue,
|
|
}: Props) => {
|
|
const { t } = useTranslation('common')
|
|
|
|
const [open, setOpen] = useState(false)
|
|
|
|
const [currentStage, setCurrentStage] = useState(0)
|
|
|
|
const classes = classNames({
|
|
Transcendence: true,
|
|
Popover: true,
|
|
open: true, // This is hardcoded for now
|
|
})
|
|
|
|
const levelClasses = classNames({
|
|
Pending: stage != currentStage,
|
|
})
|
|
|
|
useEffect(() => {
|
|
setCurrentStage(stage)
|
|
}, [stage])
|
|
|
|
useEffect(() => {
|
|
setOpen(popoverOpen)
|
|
}, [popoverOpen])
|
|
|
|
function handleFragmentClicked(newStage: number) {
|
|
setCurrentStage(newStage)
|
|
if (sendValue) sendValue(newStage)
|
|
}
|
|
|
|
function handleFragmentHovered(newStage: number) {
|
|
setCurrentStage(newStage)
|
|
}
|
|
|
|
return (
|
|
<div className={classes}>
|
|
<TranscendenceStar
|
|
className="Interactive Base"
|
|
editable={true}
|
|
interactive={true}
|
|
stage={stage}
|
|
onFragmentClick={handleFragmentClicked}
|
|
onFragmentHover={handleFragmentHovered}
|
|
/>
|
|
<h4>
|
|
<span>{t('level')} </span>
|
|
<span className={levelClasses}>{100 + 10 * currentStage}</span>
|
|
</h4>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TranscendencePopover
|