(fix) reactionViewer mock

This commit is contained in:
kakkokari-gtyih 2023-10-31 20:46:03 +09:00
parent 3dd0d8d647
commit dd736b8990
3 changed files with 24 additions and 19 deletions

View File

@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA> <MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
</div> </div>
<MkReactionsViewer :note="appearNote" :maxNumber="16"> <MkReactionsViewer :note="appearNote" :maxNumber="16" :mock="mock">
<template #more> <template #more>
<div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div> <div :class="$style.reactionOmitted">{{ i18n.ts.more }}</div>
</template> </template>

View File

@ -34,6 +34,7 @@ const props = defineProps<{
count: number; count: number;
isInitial: boolean; isInitial: boolean;
note: Misskey.entities.Note; note: Misskey.entities.Note;
mock?: boolean;
}>(); }>();
const buttonEl = shallowRef<HTMLElement>(); const buttonEl = shallowRef<HTMLElement>();
@ -51,7 +52,7 @@ async function toggleReaction() {
type: 'warning', type: 'warning',
text: oldReaction !== props.reaction ? i18n.ts.changeReactionConfirm : i18n.ts.cancelReactionConfirm, text: oldReaction !== props.reaction ? i18n.ts.changeReactionConfirm : i18n.ts.cancelReactionConfirm,
}); });
if (confirm.canceled) return; if (confirm.canceled || props.mock) return;
os.api('notes/reactions/delete', { os.api('notes/reactions/delete', {
noteId: props.note.id, noteId: props.note.id,
@ -92,7 +93,8 @@ onMounted(() => {
if (!props.isInitial) anime(); if (!props.isInitial) anime();
}); });
useTooltip(buttonEl, async (showing) => { if (!props.mock) {
useTooltip(buttonEl, async (showing) => {
const reactions = await os.apiGet('notes/reactions', { const reactions = await os.apiGet('notes/reactions', {
noteId: props.note.id, noteId: props.note.id,
type: props.reaction, type: props.reaction,
@ -109,7 +111,8 @@ useTooltip(buttonEl, async (showing) => {
count: props.count, count: props.count,
targetElement: buttonEl.value, targetElement: buttonEl.value,
}, {}, 'closed'); }, {}, 'closed');
}, 100); }, 100);
}
</script> </script>
<style lang="scss" module> <style lang="scss" module>

View File

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass="defaultStore.state.animation ? $style.transition_x_move : ''" :moveClass="defaultStore.state.animation ? $style.transition_x_move : ''"
tag="div" :class="$style.root" tag="div" :class="$style.root"
> >
<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note"/> <XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" :mock="mock"/>
<slot v-if="hasMoreReactions" name="more"/> <slot v-if="hasMoreReactions" name="more"/>
</TransitionGroup> </TransitionGroup>
</template> </template>
@ -26,8 +26,10 @@ import { defaultStore } from '@/store.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
note: Misskey.entities.Note; note: Misskey.entities.Note;
maxNumber?: number; maxNumber?: number;
mock?: boolean;
}>(), { }>(), {
maxNumber: Infinity, maxNumber: Infinity,
mock: false,
}); });
const initialReactions = new Set(Object.keys(props.note.reactions)); const initialReactions = new Set(Object.keys(props.note.reactions));