69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import styled from "styled-components";
|
|
|
|
import { Text } from "preact-i18n";
|
|
import { useMemo, useState } from "preact/hooks";
|
|
|
|
import { Modal } from "@revoltchat/ui";
|
|
|
|
import UserCheckbox from "../../../components/common/user/UserCheckbox";
|
|
import { useClient } from "../../client/ClientController";
|
|
import { ModalProps } from "../types";
|
|
|
|
const List = styled.div`
|
|
max-width: 100%;
|
|
max-height: 360px;
|
|
overflow-y: scroll;
|
|
`;
|
|
|
|
export default function UserPicker({
|
|
callback,
|
|
omit,
|
|
...props
|
|
}: ModalProps<"user_picker">) {
|
|
const [selected, setSelected] = useState<string[]>([]);
|
|
const omitted = useMemo(
|
|
() => new Set([...(omit || []), "00000000000000000000000000"]),
|
|
[omit],
|
|
);
|
|
|
|
const client = useClient();
|
|
|
|
return (
|
|
<Modal
|
|
{...props}
|
|
title={<Text id="app.special.popovers.user_picker.select" />}
|
|
actions={[
|
|
{
|
|
children: <Text id="app.special.modals.actions.ok" />,
|
|
onClick: () => callback(selected).then(() => true),
|
|
},
|
|
]}>
|
|
<List>
|
|
{[...client.users.values()]
|
|
.filter(
|
|
(x) =>
|
|
x &&
|
|
x.relationship === "Friend" &&
|
|
!omitted.has(x._id),
|
|
)
|
|
.map((x) => (
|
|
<UserCheckbox
|
|
key={x._id}
|
|
user={x}
|
|
value={selected.includes(x._id)}
|
|
onChange={(v) => {
|
|
if (v) {
|
|
setSelected([...selected, x._id]);
|
|
} else {
|
|
setSelected(
|
|
selected.filter((y) => y !== x._id),
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
))}
|
|
</List>
|
|
</Modal>
|
|
);
|
|
}
|