51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { FrameType } from '../../model/frame-type';
|
|
import { IItem } from '../../model/item';
|
|
import { RarityColor } from '../../model/rarity-color';
|
|
import { ItemTextService } from '../../services';
|
|
import './price-list-item.scss';
|
|
|
|
interface IProps {
|
|
data: IItem;
|
|
}
|
|
|
|
interface IState {
|
|
price?: String;
|
|
}
|
|
|
|
export class PriceListItem extends React.Component<IProps, IState> {
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
this.state = {};
|
|
}
|
|
|
|
componentDidMount() {}
|
|
|
|
render() {
|
|
const { icon, priceInfo, stackSize, typeLine, frameType } = this.props.data;
|
|
const name = ItemTextService.filterName(typeLine);
|
|
const fullText = ItemTextService.parseItem(this.props.data);
|
|
|
|
const rarityColor = RarityColor[(FrameType[frameType] || '').toLowerCase()];
|
|
|
|
return (
|
|
<div className="pli" onClick={() => console.log(this.props.data)}>
|
|
<div style={{ width: '60px' }}>
|
|
<img title={fullText} src={icon} className="pli__img" />
|
|
</div>
|
|
<div style={{ flex: 1 }} className="ellipsis">
|
|
<div style={{ marginBottom: '10px' }}>
|
|
<div className="ellipsis" title={name} style={{ color: rarityColor }}>
|
|
{name}
|
|
</div>
|
|
<div className="text-secondary">{stackSize && <small>Stack Size: {stackSize}</small>}</div>
|
|
</div>
|
|
<div>
|
|
{priceInfo ? `${priceInfo.min || priceInfo.min_price} ${priceInfo.currency || priceInfo.currency_rec}` : ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|