RegularToot: supports polls
This commit is contained in:
thislight
parent
9bf957188c
commit
c85cffc03e
6 changed files with 408 additions and 2 deletions
22
src/timelines/toots/TootPoll.css
Normal file
22
src/timelines/toots/TootPoll.css
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
.TootPoll {
|
||||
margin-top: 12px;
|
||||
border: 1px solid var(--tutu-color-surface-d);
|
||||
background-color: var(--tutu-color-surface);
|
||||
max-width: 560px;
|
||||
contain: layout style paint;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
|
||||
>.hints,
|
||||
>.trailers {
|
||||
padding-right: 8px;
|
||||
color: var(--tutu-color-secondary-text-on-surface);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
>.hints {
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
193
src/timelines/toots/TootPoll.tsx
Normal file
193
src/timelines/toots/TootPoll.tsx
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
import {
|
||||
batch,
|
||||
createRenderEffect,
|
||||
createSelector,
|
||||
createSignal,
|
||||
Index,
|
||||
Show,
|
||||
untrack,
|
||||
type Component,
|
||||
} from "solid-js";
|
||||
import "./TootPoll.css";
|
||||
import type { mastodon } from "masto";
|
||||
import { resolveCustomEmoji } from "../../masto/toot";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Divider,
|
||||
List,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
Radio,
|
||||
} from "@suid/material";
|
||||
import {
|
||||
formatDistance,
|
||||
isBefore,
|
||||
} from "date-fns";
|
||||
import { useTimeSource } from "~platform/timesrc";
|
||||
import { useDateFnLocale } from "~platform/i18n";
|
||||
import TootPollDialog from "./TootPollDialog";
|
||||
import { ANIM_CURVE_STD } from "~material/theme";
|
||||
|
||||
type TootPollProps = {
|
||||
options: Readonly<mastodon.v1.Poll["options"]>;
|
||||
multiple?: boolean;
|
||||
votesCount: number;
|
||||
expired?: boolean;
|
||||
expiredAt?: Date;
|
||||
voted?: boolean;
|
||||
ownVotes?: readonly number[];
|
||||
|
||||
onVote(votes: readonly number[]): void | Promise<void>;
|
||||
};
|
||||
|
||||
const TootPoll: Component<TootPollProps> = (props) => {
|
||||
let list: HTMLUListElement;
|
||||
const now = useTimeSource();
|
||||
const dateFnLocale = useDateFnLocale();
|
||||
const [mustShowResult, setMustShowResult] = createSignal<boolean>();
|
||||
const [showVoteDialog, setShowVoteDialog] = createSignal(false);
|
||||
|
||||
const [initialVote, setInitialVote] = createSignal(0);
|
||||
|
||||
const isShowResult = () => {
|
||||
const n = mustShowResult();
|
||||
if (typeof n !== "undefined") {
|
||||
return n;
|
||||
}
|
||||
|
||||
return props.expired || props.voted;
|
||||
};
|
||||
|
||||
const isOwnVote = createSelector(
|
||||
() => props.ownVotes,
|
||||
(idx: number, votes) => votes?.includes(idx) || false,
|
||||
);
|
||||
|
||||
const openVote = (i: number, event: Event) => {
|
||||
event.stopPropagation();
|
||||
|
||||
if (props.expired || props.voted) {
|
||||
return;
|
||||
}
|
||||
|
||||
batch(() => {
|
||||
setInitialVote(i);
|
||||
setShowVoteDialog(true);
|
||||
});
|
||||
};
|
||||
|
||||
const animateAndSetMustShow = (event: Event) => {
|
||||
event.stopPropagation();
|
||||
list.animate(
|
||||
{
|
||||
opacity: [0.5, 0, 0.5],
|
||||
},
|
||||
{
|
||||
duration: 220,
|
||||
easing: ANIM_CURVE_STD,
|
||||
},
|
||||
);
|
||||
setMustShowResult((x) => {
|
||||
if (typeof x === "undefined") {
|
||||
return !untrack(isShowResult);
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section class="TootPoll">
|
||||
<div class="hints">
|
||||
<span>{props.votesCount} votes in total</span>
|
||||
<Show when={props.expired}>
|
||||
<span>Poll is ended</span>
|
||||
</Show>
|
||||
</div>
|
||||
<List ref={list!} disablePadding class="option-list">
|
||||
<Index each={props.options}>
|
||||
{(option, index) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={index === 0}>
|
||||
<Divider />
|
||||
</Show>
|
||||
<ListItemButton
|
||||
onClick={[openVote, index]}
|
||||
class="poll-item"
|
||||
aria-disabled={isShowResult()}
|
||||
>
|
||||
<ListItemText>
|
||||
<span
|
||||
ref={(e) =>
|
||||
createRenderEffect(() => {
|
||||
e.innerHTML = resolveCustomEmoji(
|
||||
option().title,
|
||||
option().emojis,
|
||||
);
|
||||
})
|
||||
}
|
||||
></span>
|
||||
</ListItemText>
|
||||
|
||||
<Show when={isShowResult()}>
|
||||
<span>
|
||||
<Show when={typeof option().votesCount !== "undefined"}>
|
||||
{option().votesCount} votes
|
||||
</Show>
|
||||
</span>
|
||||
</Show>
|
||||
|
||||
<Show
|
||||
when={props.multiple}
|
||||
fallback={
|
||||
<Radio
|
||||
checked={isOwnVote(index)}
|
||||
disabled={isShowResult()}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isOwnVote(index)}
|
||||
disabled={isShowResult()}
|
||||
/>
|
||||
</Show>
|
||||
</ListItemButton>
|
||||
<Divider />
|
||||
</>
|
||||
);
|
||||
}}
|
||||
</Index>
|
||||
</List>
|
||||
<div class="trailers">
|
||||
<Button onClick={animateAndSetMustShow}>
|
||||
{isShowResult() ? "Hide result" : "Reveal result"}
|
||||
</Button>
|
||||
<Show when={props.expiredAt}>
|
||||
<span>
|
||||
<span style={{ "margin-inline-end": "0.5ch" }}>
|
||||
{isBefore(now(), props.expiredAt!) ? "Expire in" : "Expired"}
|
||||
</span>
|
||||
|
||||
<time dateTime={props.expiredAt!.toISOString()}>
|
||||
{formatDistance(now(), props.expiredAt!, {
|
||||
locale: dateFnLocale(),
|
||||
})}
|
||||
</time>
|
||||
</span>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<TootPollDialog
|
||||
open={showVoteDialog()}
|
||||
options={props.options}
|
||||
onVote={(votes) => console.debug(votes)}
|
||||
onClose={() => setShowVoteDialog(false)}
|
||||
initialVotes={[initialVote()]}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TootPoll;
|
||||
12
src/timelines/toots/TootPollDialog.css
Normal file
12
src/timelines/toots/TootPollDialog.css
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
.TootPollDialog {
|
||||
>.bottom-dock>.actions {
|
||||
border-top: 1px solid #ddd;
|
||||
background: var(--tutu-color-surface);
|
||||
padding:
|
||||
8px 16px calc(8px + var(--safe-area-inset-bottom, 0px));
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
121
src/timelines/toots/TootPollDialog.tsx
Normal file
121
src/timelines/toots/TootPollDialog.tsx
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
List,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
Radio,
|
||||
} from "@suid/material";
|
||||
import type { mastodon } from "masto";
|
||||
import {
|
||||
createEffect,
|
||||
createRenderEffect,
|
||||
createSignal,
|
||||
Index,
|
||||
Show,
|
||||
type Component,
|
||||
} from "solid-js";
|
||||
import BottomSheet, { type BottomSheetProps } from "~material/BottomSheet";
|
||||
import Scaffold from "~material/Scaffold";
|
||||
import { resolveCustomEmoji } from "../../masto/toot";
|
||||
import "./TootPollDialog.css";
|
||||
|
||||
export type TootPollDialogPoll = {
|
||||
open?: boolean;
|
||||
options: Readonly<mastodon.v1.Poll["options"]>;
|
||||
initialVotes?: readonly number[];
|
||||
multiple?: boolean;
|
||||
|
||||
onVote(votes: readonly number[]): void | Promise<void>;
|
||||
onClose?: BottomSheetProps["onClose"] &
|
||||
((reason: "cancel" | "success") => void);
|
||||
};
|
||||
|
||||
const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
|
||||
const [votes, setVotes] = createSignal([] as readonly number[]);
|
||||
const [inProgress, setInProgress] = createSignal(false);
|
||||
|
||||
createEffect(() => {
|
||||
setVotes(props.initialVotes || []);
|
||||
});
|
||||
|
||||
const toggleVote = (i: number) => {
|
||||
if (props.multiple) {
|
||||
setVotes((o) => [...o.filter((x) => x === i), i]);
|
||||
} else {
|
||||
setVotes([i]);
|
||||
}
|
||||
};
|
||||
|
||||
const sendVote = async () => {
|
||||
setInProgress(true);
|
||||
try {
|
||||
await props.onVote(votes());
|
||||
} catch (reason) {
|
||||
console.error(reason);
|
||||
props.onClose?.("cancel");
|
||||
return;
|
||||
} finally {
|
||||
setInProgress(false);
|
||||
}
|
||||
props.onClose?.("success");
|
||||
};
|
||||
|
||||
return (
|
||||
<BottomSheet open={props.open} onClose={props.onClose} bottomUp>
|
||||
<Scaffold
|
||||
class="TootPollDialog"
|
||||
bottom={
|
||||
<div class="actions">
|
||||
<Button
|
||||
color="error"
|
||||
onClick={props.onClose ? [props.onClose, "cancel"] : undefined}
|
||||
disabled={inProgress()}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={sendVote} disabled={inProgress()}>
|
||||
Confirm
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<List>
|
||||
<Index each={props.options}>
|
||||
{(option, index) => {
|
||||
return (
|
||||
<ListItemButton
|
||||
onClick={[toggleVote, index]}
|
||||
disabled={inProgress()}
|
||||
>
|
||||
<ListItemText>
|
||||
<span
|
||||
ref={(e) =>
|
||||
createRenderEffect(
|
||||
() =>
|
||||
(e.innerHTML = resolveCustomEmoji(
|
||||
option().title,
|
||||
option().emojis,
|
||||
)),
|
||||
)
|
||||
}
|
||||
></span>
|
||||
</ListItemText>
|
||||
|
||||
<Show
|
||||
when={props.multiple}
|
||||
fallback={<Radio checked={votes().includes(index)} />}
|
||||
>
|
||||
<Checkbox checked={votes().includes(index)} />
|
||||
</Show>
|
||||
</ListItemButton>
|
||||
);
|
||||
}}
|
||||
</Index>
|
||||
</List>
|
||||
</Scaffold>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default TootPollDialog;
|
||||
Loading…
Add table
Add a link
Reference in a new issue