panda
2 years ago
committed by
GitHub
parent
1fa5eef2e0
commit
dc7d53b59c
@ -0,0 +1,30 @@
|
||||
.reactions
|
||||
display: inline
|
||||
|
||||
.reaction
|
||||
white-space: nowrap
|
||||
width: auto
|
||||
border-radius: 1.75rem
|
||||
overflow: visible
|
||||
font-size: rem($font-size-small)
|
||||
display: inline-block
|
||||
line-height: rem(22px)
|
||||
padding: rem(0 10px)
|
||||
vertical-align: middle
|
||||
border-radius: rem(12px)
|
||||
border: 1px solid $supplementary-border-color
|
||||
cursor: pointer
|
||||
&.active, &:hover
|
||||
text-decoration: none
|
||||
border-color: $primary-color
|
||||
color: #FFF !important
|
||||
&.active
|
||||
background-color: lighten($primary-color, 10%) !important
|
||||
&:hover
|
||||
background-color: lighten($primary-color, 30%) !important
|
||||
.emoji
|
||||
margin-right: rem(5px)
|
||||
|
||||
.popover-reaction-item
|
||||
&:hover
|
||||
background-color: $toolbar-bg-hover
|
||||
@ -0,0 +1,92 @@
|
||||
import 'jquery.easing';
|
||||
|
||||
import * as React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { Popover } from '@blueprintjs/core';
|
||||
import { AutoloadPage } from 'vj/misc/Page';
|
||||
|
||||
import request from 'vj/utils/request';
|
||||
import { chunk } from 'lodash';
|
||||
|
||||
function renderReactions(reactions, self, rootEle) {
|
||||
let html = '';
|
||||
for (const key in reactions) {
|
||||
if (!reactions[key]) continue;
|
||||
html += `<div class="reaction${self[key] ? ' active' : ''}""><span class="emoji">${key}</span> ${reactions[key]}</div>\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 (
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
<Popover usePortal interactionKind="hover" isOpen={finish ? false : (focus ? true : undefined)}>
|
||||
<span className="icon icon-emoji"></span>
|
||||
<div>
|
||||
{chunk(emojiList, elesPerRow).map((line, i) => (
|
||||
<div className="row" key={+i} style={{ paddingBottom: 4, paddingTop: 4 }}>
|
||||
{line.map((emoji) => (
|
||||
<div
|
||||
key={emoji}
|
||||
className={`medium-${12 / elesPerRow} small-${12 / elesPerRow} columns popover-reaction-item`}
|
||||
onClick={() => handleEmojiClick(payload, emoji, ele).then(() => updateFinish(true))}
|
||||
>
|
||||
{emoji}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<div className="row" style={{ paddingTop: 7, paddingBottom: 4 }}>
|
||||
<div className="medium-12 columns">
|
||||
<input name="emojiSuggest" onFocus={() => updateFocus(true)} onBlur={() => updateFocus(false)}></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
const reactionPage = new AutoloadPage('reactionPage', () => {
|
||||
const canUseReaction = $('[data-op="react"]').length > 0;
|
||||
$('[data-op="react"]').each((i, e) => {
|
||||
ReactDOM.createRoot(e).render(
|
||||
<Reaction payload={$(e).data('form')} ele={$(`.reactions[data-${$(e).data('form').type}='${$(e).data('form').id}']`)} />,
|
||||
);
|
||||
});
|
||||
$(document).on('click', '.reaction', async (e) => {
|
||||
if (!canUseReaction) {
|
||||
(window as any).showSignInDialog();
|
||||
return;
|
||||
}
|
||||
const target = $(e.currentTarget);
|
||||
const res = await request.post('', {
|
||||
operation: 'reaction',
|
||||
type: 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;
|
||||
Loading…
Reference in New Issue