Profile: filter recent toots
- material: new Menu component - material/theme: animation curves - TootFilterButton
This commit is contained in:
parent
08201cccef
commit
f8dc2950d2
5 changed files with 284 additions and 5 deletions
112
src/profiles/TootFilterButton.tsx
Normal file
112
src/profiles/TootFilterButton.tsx
Normal file
|
@ -0,0 +1,112 @@
|
|||
import {
|
||||
Button,
|
||||
MenuItem,
|
||||
Checkbox,
|
||||
ListItemText,
|
||||
} from "@suid/material";
|
||||
import {
|
||||
createMemo,
|
||||
createSignal,
|
||||
createUniqueId,
|
||||
For,
|
||||
} from "solid-js";
|
||||
import Menu from "../material/Menu";
|
||||
import { FilterList, FilterListOff } from "@suid/icons-material";
|
||||
|
||||
type Props<Filters extends Record<string, string>> = {
|
||||
options: Filters;
|
||||
applied: Record<keyof Filters, boolean | undefined>;
|
||||
disabledKeys?: (keyof Filters)[];
|
||||
|
||||
onApply(value: Record<keyof Filters, boolean | undefined>): void;
|
||||
};
|
||||
|
||||
function TootFilterButton<F extends Record<string, string>>(props: Props<F>) {
|
||||
const buttonId = createUniqueId();
|
||||
const [open, setOpen] = createSignal(false);
|
||||
|
||||
const getTextForMultipleEntities = (texts: string[]) => {
|
||||
switch (texts.length) {
|
||||
case 0:
|
||||
return "Nothing";
|
||||
case 1:
|
||||
return texts[0];
|
||||
case 2:
|
||||
return `${texts[0]} and ${texts[1]}`;
|
||||
case 3:
|
||||
return `${texts[0]}, ${texts[1]} and ${texts[2]}`;
|
||||
default:
|
||||
return `${texts[0]} and ${texts.length - 1} other${texts.length > 2 ? "s" : ""}`;
|
||||
}
|
||||
};
|
||||
|
||||
const optionKeys = () => Object.keys(props.options);
|
||||
|
||||
const appliedKeys = createMemo(() => {
|
||||
const applied = props.applied;
|
||||
return optionKeys().filter((k) => applied[k]);
|
||||
});
|
||||
|
||||
const text = () => {
|
||||
const keys = optionKeys();
|
||||
const napplied = appliedKeys().length;
|
||||
switch (napplied) {
|
||||
case keys.length:
|
||||
return "All";
|
||||
default:
|
||||
return getTextForMultipleEntities(
|
||||
appliedKeys().map((k) => props.options[k]),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleKey = (key: keyof F) => {
|
||||
props.onApply(
|
||||
Object.assign({}, props.applied, {
|
||||
[key]: !props.applied[key],
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button size="large" onClick={[setOpen, true]} id={buttonId}>
|
||||
{appliedKeys().length === optionKeys().length ? (
|
||||
<FilterListOff />
|
||||
) : (
|
||||
<FilterList />
|
||||
)}
|
||||
|
||||
<span style={{ "margin-left": "0.5em" }}>{text()}</span>
|
||||
</Button>
|
||||
<Menu
|
||||
open={open()}
|
||||
onClose={[setOpen, false]}
|
||||
anchor={() =>
|
||||
document.getElementById(buttonId)!.getBoundingClientRect()
|
||||
}
|
||||
>
|
||||
<For each={Object.keys(props.options)}>
|
||||
{(item, idx) => (
|
||||
<>
|
||||
<MenuItem
|
||||
data-sort={idx()}
|
||||
onClick={[toggleKey, item]}
|
||||
disabled={props.disabledKeys?.includes(item)}
|
||||
>
|
||||
<ListItemText>{props.options[item]}</ListItemText>
|
||||
<Checkbox
|
||||
checked={props.applied[item]}
|
||||
sx={{ marginRight: "-8px" }}
|
||||
disabled={props.disabledKeys?.includes(item)}
|
||||
></Checkbox>
|
||||
</MenuItem>
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TootFilterButton;
|
Loading…
Add table
Add a link
Reference in a new issue