73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { IItemPrice } from '../../model';
|
|
import { FrameType } from '../../model/frame-type';
|
|
import { IItem } from '../../model/item';
|
|
import { RarityColor } from '../../model/rarity-color';
|
|
import { ItemTextService, PoeService } from '../../services';
|
|
import './price-list-item.scss';
|
|
|
|
interface IProps {
|
|
item: IItem;
|
|
league: string;
|
|
onPriceUpdate: (id: string, price: IItemPrice) => void;
|
|
}
|
|
|
|
interface IState {
|
|
price?: String;
|
|
}
|
|
|
|
export class PriceListItem extends React.Component<IProps, IState> {
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
this.state = {};
|
|
}
|
|
|
|
componentDidMount() {
|
|
PoeService.priceCheck(this.props.item, this.props.league).then((data: any) => {
|
|
this.props.onPriceUpdate(this.props.item.id, data);
|
|
});
|
|
}
|
|
|
|
getItemPriceText = (p: IItemPrice) => {
|
|
let s = '';
|
|
s += p.recommendedPrice ? `Recommended Price: ${p.median_price}\n` : '';
|
|
s += p.max_price ? `Max Price: ${p.max_price}\n` : '';
|
|
s += p.median_price ? `Median Price: ${p.median_price}\n` : '';
|
|
|
|
return s;
|
|
};
|
|
|
|
render() {
|
|
const { icon, itemPrice, stackSize, typeLine, frameType } = this.props.item;
|
|
const name = ItemTextService.filterName(typeLine);
|
|
const fullText = ItemTextService.parseItem(this.props.item);
|
|
|
|
const rarityColor = RarityColor[(FrameType[frameType] || '').toLowerCase()];
|
|
|
|
const itemPriceElement = itemPrice ? (
|
|
<small title={this.getItemPriceText(itemPrice)}>
|
|
{itemPrice.recommendedPrice} {itemPrice.currency_rec}
|
|
</small>
|
|
) : null;
|
|
|
|
return (
|
|
<div className="pli" onClick={() => console.log(this.props.item)}>
|
|
<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>{itemPriceElement}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|