139 lines
5.0 KiB
TypeScript
139 lines
5.0 KiB
TypeScript
import { X } from "@styled-icons/boxicons-regular";
|
|
import { Save } from "@styled-icons/boxicons-solid";
|
|
import { observer } from "mobx-react-lite";
|
|
import styled from "styled-components";
|
|
|
|
import { Text } from "preact-i18n";
|
|
import { useMemo, useState } from "preact/hooks";
|
|
|
|
import {
|
|
Button,
|
|
Category,
|
|
Centred,
|
|
Column,
|
|
InputBox,
|
|
Modal,
|
|
Row,
|
|
Message,
|
|
} from "@revoltchat/ui";
|
|
|
|
import { noop } from "../../../lib/js";
|
|
|
|
import { FileUploader } from "../../client/jsx/legacy/FileUploads";
|
|
import { ModalProps } from "../types";
|
|
|
|
const Preview = styled(Centred)`
|
|
flex-grow: 1;
|
|
border-radius: var(--border-radius);
|
|
background: var(--secondary-background);
|
|
|
|
> div {
|
|
padding: 0;
|
|
}
|
|
`;
|
|
|
|
export default observer(
|
|
({ member, ...props }: ModalProps<"server_identity">) => {
|
|
const [nickname, setNickname] = useState(member.nickname ?? "");
|
|
|
|
const message: any = useMemo(() => {
|
|
return {
|
|
author: member.user!,
|
|
member: {
|
|
...member,
|
|
nickname,
|
|
},
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Modal
|
|
{...props}
|
|
title={
|
|
<Text
|
|
id={"app.special.popovers.server_identity.title"}
|
|
fields={{ server: member.server!.name }}
|
|
/>
|
|
}>
|
|
<Column gap="18px">
|
|
<Column>
|
|
<Category compact>
|
|
<Text id="app.special.popovers.server_identity.nickname" />
|
|
</Category>
|
|
<Row centred>
|
|
<InputBox
|
|
value={nickname}
|
|
placeholder={member.user!.username}
|
|
onChange={(e) =>
|
|
setNickname(e.currentTarget.value)
|
|
}
|
|
/>
|
|
<Button
|
|
compact="icon"
|
|
palette="secondary"
|
|
disabled={
|
|
nickname === member.nickname || !nickname
|
|
}
|
|
onClick={() => member.edit({ nickname })}>
|
|
<Save size={24} />
|
|
</Button>
|
|
<Button
|
|
compact="icon"
|
|
palette="secondary"
|
|
disabled={!member.nickname}
|
|
onClick={() =>
|
|
member
|
|
.edit({ remove: ["Nickname"] })
|
|
.then(() => setNickname(""))
|
|
}>
|
|
<X size={24} />
|
|
</Button>
|
|
</Row>
|
|
</Column>
|
|
<Row gap="18px">
|
|
<Column>
|
|
<Category compact>
|
|
<Text id="app.special.popovers.server_identity.avatar" />
|
|
</Category>
|
|
<FileUploader
|
|
width={80}
|
|
height={80}
|
|
style="icon"
|
|
fileType="avatars"
|
|
behaviour="upload"
|
|
maxFileSize={4_000_000}
|
|
onUpload={(avatar) =>
|
|
member.edit({ avatar }).then(noop)
|
|
}
|
|
remove={() =>
|
|
member
|
|
.edit({ remove: ["Avatar"] })
|
|
.then(noop)
|
|
}
|
|
defaultPreview={member.user?.generateAvatarURL(
|
|
{
|
|
max_side: 256,
|
|
},
|
|
false,
|
|
)}
|
|
previewURL={member.client.generateFileURL(
|
|
member.avatar ?? undefined,
|
|
{ max_side: 256 },
|
|
true,
|
|
)}
|
|
desaturateDefault
|
|
/>
|
|
</Column>
|
|
<Column grow>
|
|
<Category compact>Preview</Category>
|
|
<Preview>
|
|
<Message message={message} head />
|
|
</Preview>
|
|
</Column>
|
|
</Row>
|
|
</Column>
|
|
</Modal>
|
|
);
|
|
},
|
|
);
|