import 'jquery.easing';
import { Popover } from '@blueprintjs/core';
import $ from 'jquery';
import { chunk } from 'lodash';
import * as React from 'react';
import ReactDOM from 'react-dom/client';
import { AutoloadPage } from 'vj/misc/Page';
import { request } from 'vj/utils';
function renderReactions(reactions, self, rootEle) {
let html = '';
for (const [k, v] of Object.entries(reactions).sort(([, v1], [, v2]) => +v2 - +v1)) {
if (!v) continue;
html += `
${k} ${v}
\n`;
}
rootEle.html(html);
}
async function handleEmojiClick(payload, emoji, ele) {
const res = await request.post('', { ...payload, emoji });
if (!res.sdoc) return;
renderReactions(res.doc?.react, res.sdoc.react, ele);
}
function getRow(count) {
if (count <= 2) return 2;
if (count <= 3) return 3;
if (count <= 4) return 4;
if (count <= 6) return 6;
return 12;
}
function Reaction({ payload, ele }) {
const emojiList: string[] = (UiContext.emojiList || '👍 👎 😄 😕 ❤️ 🤔 🤣 🌿 🍋 🕊️ 👀 🤣').split(' ');
const elesPerRow = getRow(Math.sqrt(emojiList.length));
const [focus, updateFocus] = React.useState(false);
const [finish, updateFinish] = React.useState(false);
if (finish) setTimeout(() => updateFinish(false), 1000);
return (
{chunk(emojiList, elesPerRow).map((line, i) => (
{line.map((emoji) => (
handleEmojiClick(payload, emoji, ele).then(() => updateFinish(true))}
>
{emoji}
))}
))}
);
}
const reactionPage = new AutoloadPage('reactionPage', () => {
const canUseReaction = $('[data-op="react"]').length > 0;
$('[data-op="react"]').each((i, e) => {
ReactDOM.createRoot(e).render(
,
);
});
$(document).on('click', '.reaction', async (e) => {
if (!canUseReaction) {
(window as any).showSignInDialog();
return;
}
const target = $(e.currentTarget);
const res = await request.post('', {
operation: 'reaction',
nodeType: target.parent().data('type'),
id: target.parent().data(target.parent().data('type')),
emoji: target.text().trim().split(' ')[0],
reverse: target.hasClass('active'),
});
renderReactions(res.doc?.react, res.sdoc?.react, target.parent());
});
});
export default reactionPage;