Melvin Valster
77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
import './Talent.scss'
|
|
import React from 'react'
|
|
import { Icon } from './Icon'
|
|
import classNames from 'classnames'
|
|
import { Controller, Trigger } from './Tooltip'
|
|
import { TalentTooltip } from './TalentTooltip'
|
|
|
|
interface Props {
|
|
talent: TalentData
|
|
specId?: number
|
|
points?: number
|
|
disabled?: boolean
|
|
errors?: string
|
|
onClick?: (talentId: number) => void
|
|
onRightClick?: (talentId: number) => void
|
|
}
|
|
|
|
export class Talent extends React.PureComponent<Props> {
|
|
static whyDidYouRender = true
|
|
|
|
static defaultProps = {
|
|
points: 0,
|
|
disabled: false,
|
|
onClick: () => undefined,
|
|
onRightClick: () => undefined
|
|
}
|
|
|
|
render() {
|
|
const { talent, points, errors, disabled } = this.props
|
|
const showPoints = !disabled || points > 0
|
|
|
|
const containerClassNames = classNames('talent', {
|
|
'talent--disabled': disabled && points === 0,
|
|
'talent--available': !disabled && points < talent.ranks.length,
|
|
'talent--disabled-with-points': points >= talent.ranks.length || (points > 0 && disabled)
|
|
})
|
|
|
|
const pointsClassNames = classNames('point-label', {
|
|
'point-label--enabled': !disabled
|
|
})
|
|
|
|
const handleContextMenu = (e) => {
|
|
if (this.props.onRightClick) this.props.onRightClick(talent.id)
|
|
e.preventDefault()
|
|
return false
|
|
}
|
|
|
|
return (
|
|
<Controller>
|
|
<Trigger>
|
|
<div
|
|
className={containerClassNames}
|
|
data-row={talent.row}
|
|
data-col={talent.col}
|
|
onClick={!disabled ? () => this.props.onClick(talent.id) : () => {}}
|
|
onContextMenu={handleContextMenu}
|
|
>
|
|
<div className="talent__status" />
|
|
<Icon name={talent.icon} size="medium" />
|
|
|
|
{showPoints &&
|
|
<div className={pointsClassNames}>
|
|
{points}/{talent.ranks.length}
|
|
</div>
|
|
}
|
|
</div>
|
|
</Trigger>
|
|
<TalentTooltip talent={talent} points={points} errors={errors}>
|
|
{!disabled && points < talent.ranks.length && <p className="green tight">Click to learn</p>}
|
|
{points > 0 && <p className="green">Right-click to unlearn</p>}
|
|
</TalentTooltip>
|
|
</Controller>
|
|
)
|
|
}
|
|
}
|
|
|
|
// ;(Talent as any).whyDidYouRender = true
|