shrub/pkg/interface/chat/tile/tile.js

110 lines
2.6 KiB
JavaScript
Raw Normal View History

2019-06-05 01:46:36 +03:00
import React, { Component } from 'react';
import classnames from 'classnames';
import _ from 'lodash';
2019-06-05 01:46:36 +03:00
export default class ChatTile extends Component {
render() {
const { props } = this;
let inviteNum = 0;
let msgNum = 0;
let inviteCircle = `~${window.ship}/i`;
let propNumbers = _.get(props, 'data.numbers.chat.numbers', false);
let propConfigs = _.get(props, 'data.config.chat.configs', false);
if (propNumbers && propConfigs) {
let numbers = {};
for (let i = 0; i < propNumbers.length; i++) {
let num = propNumbers[i];
numbers[num.circle] = num.length;
}
let configs = Object.keys(propConfigs);
for (let i = 0; i < configs.length; i++) {
let key = configs[i];
2019-06-22 02:09:04 +03:00
let host = key.split('/')[0];
if (!propConfigs[key]) { break; }
2019-06-27 23:31:00 +03:00
if (!(key in numbers)) { break; }
let red = propConfigs[key].red;
2019-06-22 02:09:04 +03:00
if (key === inviteCircle) {
inviteNum = inviteNum - red + numbers[key];
} else if (host === `~${window.ship}`) {
msgNum = msgNum - red + numbers[key];
2019-06-22 02:09:04 +03:00
} else {
msgNum = msgNum + numbers[key];
}
}
2019-06-22 02:09:04 +03:00
}
let invSuffix = (inviteNum === 1) ? (
<span>Invite</span>
) : (
<span>Invites</span>
);
let numInvElem = (inviteNum > 0) ? (
<p className="absolute white"
style={{
top: 180,
fontWeight: 600,
fontSize: 16,
lineHeight: '20px'
}}>
<span style={{
color: '#2AA779'
}}>{inviteNum} </span>
{invSuffix}
</p>
) : (
<div />
);
let msgSuffix = (msgNum === 1) ? (
<span>New Message</span>
) : (
<span>New Messages</span>
);
let numMsgElem = (msgNum > 0) ? (
<p className="absolute white"
style={{
top: 207,
fontWeight: 600,
fontSize: 16,
lineHeight: '20px'
}}>
<span style={{
color: '#2AA779'
}}>{msgNum} </span>
{msgSuffix}
</p>
) : (
<div />
);
2019-06-05 01:46:36 +03:00
return (
<div className="w-100 h-100 relative" style={{ background: '#1a1a1a' }}>
<a className="w-100 h-100 db pa2 no-underline" href="/~chat">
<p className="gray label-regular b absolute" style={{left: 8, top: 4}}>Chat</p>
<img
className="absolute"
style={{ left: 68, top: 65 }}
src="/~chat/img/Tile.png"
width={106}
height={98} />
{numInvElem}
{numMsgElem}
</a>
2019-06-05 01:46:36 +03:00
</div>
);
}
}
window.chatTile = ChatTile;