90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import { FC, HTMLProps, memo, useMemo } from 'react'
|
|
import { EnrichedEntity } from '../../../src/types'
|
|
import { useFactories } from '../../../src/hooks/useFactories'
|
|
import styles from './EntitySpan.module.css'
|
|
import { RecipeSpan } from '../Recipe/Recipe'
|
|
import { LeftClickIcon } from '../LeftClickIcon/LeftClickIcon'
|
|
import cx from 'classnames'
|
|
import { EntityIcon } from '../EntityIcon/EntityIcon'
|
|
|
|
interface Props extends Omit<HTMLProps<HTMLSpanElement>, 'value'> {
|
|
value: EnrichedEntity | string
|
|
state?: 'base' | 'produced' | 'unknown'
|
|
leftClickText?: string
|
|
rightClickText?: string
|
|
simpleStyle?: boolean
|
|
className?: string
|
|
}
|
|
|
|
const EntitySpanUnmemo: FC<Props> = ({
|
|
className,
|
|
value,
|
|
state,
|
|
leftClickText,
|
|
rightClickText,
|
|
simpleStyle,
|
|
...rest
|
|
}) => {
|
|
const { findFactory } = useFactories()
|
|
const entity = useMemo<EnrichedEntity>(() => {
|
|
return typeof value === 'object'
|
|
? value
|
|
: findFactory(value) ?? {
|
|
usedBy: [],
|
|
href: value,
|
|
name: value,
|
|
image: value,
|
|
recipe: undefined
|
|
}
|
|
}, [findFactory, value])
|
|
|
|
return (
|
|
<span className={cx(className, simpleStyle ? styles.spanSimple : styles.span)} {...rest}>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
className={styles.img}
|
|
src={`https://wiki.factorio.com${entity.image}`}
|
|
alt={entity.name}
|
|
/>
|
|
<span className={styles[state ?? 'unknown']}>{entity.name}</span>
|
|
<div className={styles.tooltip}>
|
|
{entity.recipe && (
|
|
<>
|
|
<div className={styles.strong}>Recipe</div>
|
|
<RecipeSpan recipe={entity.recipe} />
|
|
</>
|
|
)}
|
|
{entity.usedBy?.length ? (
|
|
<>
|
|
<div className={styles.strong}>Used By</div>
|
|
<div className={styles.usedBy}>
|
|
{entity.usedBy.map(used => (
|
|
<EntityIcon value={used} key={used.name} />
|
|
))}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
{(leftClickText || rightClickText) && (
|
|
<>
|
|
<div className={styles.strong}>Actions</div>
|
|
{leftClickText && (
|
|
<div>
|
|
<LeftClickIcon className={styles.leftClick} classClick={styles.clickBtn} />{' '}
|
|
{leftClickText}
|
|
</div>
|
|
)}
|
|
{rightClickText && (
|
|
<div>
|
|
<LeftClickIcon className={styles.rightClick} classClick={styles.clickBtn} />{' '}
|
|
{rightClickText}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export const EntitySpan = memo(EntitySpanUnmemo)
|