cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-24 22:52:09 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add channel auto-complete.

Browse source
This commit is contained in:
Paul 2021-06-22 13:35:43 +01:00
parent f724cfdf4f
commit feaec3f8d9
2 changed files with 97 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
src/components/common/AutoComplete.tsx
View file

@ -1,28 +1,33 @@
import { StateUpdater, useContext, useState } from "preact/hooks";
import { AppContext } from "../../context/revoltjs/RevoltClient";
import { Channels } from "revolt.js/dist/api/objects";
import { emojiDictionary } from "../../assets/emojis";
import { SYSTEM_USER_ID, User } from "revolt.js";
import UserIcon from "./user/UserIcon";
import styled from "styled-components";
import { SYSTEM_USER_ID, User } from "revolt.js";
import Emoji from "./Emoji";
import ChannelIcon from "./ChannelIcon";
export type AutoCompleteState =
| { type: "none" }
| {
type: "emoji";
matches: string[];
selected: number;
within: boolean;
}
| {
type: "user";
matches: User[];
selected: number;
within: boolean;
};
| ({ selected: number; within: boolean; } & (
{
type: "emoji";
matches: string[];
} |
{
type: "user";
matches: User[];
} |
{
type: "channel";
matches: Channels.TextChannel[];
}
));
export type SearchClues = {
users?: { type: 'channel', id: string } | { type: 'all' }
users?: { type: 'channel', id: string } | { type: 'all' },
channels?: { server: string }
};
export type AutoCompleteProps = {
@ -44,7 +49,7 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
function findSearchString(
el: HTMLTextAreaElement
): ["emoji" | "user", string, number] | undefined {
): ["emoji" | "user" | "channel", string, number] | undefined {
if (el.selectionStart === el.selectionEnd) {
let cursor = el.selectionStart;
let content = el.value.slice(0, cursor);
@ -58,6 +63,12 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
"",
j
];
} else if (content[j] === '#') {
return [
"channel",
"",
j
];
}
while (j >= 0 && valid.test(content[j])) {
@ -67,10 +78,11 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
if (j === -1) return;
let current = content[j];
if (current === ":" || current === "@") {
if (current === ":" || current === "@" || current === "#") {
let search = content.slice(j + 1, content.length);
if (search.length > 0) {
return [
current === "#" ? "channel" :
current === ":" ? "emoji" : "user",
search.toLowerCase(),
j + 1
@ -137,7 +149,7 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
users = users.filter(x => x._id !== SYSTEM_USER_ID);
let matches = (search.length > 0 ? users.filter(user => user?.username.toLowerCase().match(regex)) : users)
let matches = (search.length > 0 ? users.filter(user => user.username.toLowerCase().match(regex)) : users)
.splice(0, 5)
.filter(x => typeof x !== "undefined");
@ -157,6 +169,33 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
return;
}
}
if (type === 'channel' && searchClues?.channels) {
let channels = client.servers.get(searchClues.channels.server)
?.channels
.map(x => client.channels.get(x))
.filter(x => typeof x !== 'undefined') as Channels.TextChannel[];
let matches = (search.length > 0 ? channels.filter(channel => channel.name.toLowerCase().match(regex)) : channels)
.splice(0, 5)
.filter(x => typeof x !== "undefined");
if (matches.length > 0) {
let currentPosition =
state.type !== "none"
? state.selected
: 0;
setState({
type: "channel",
matches,
selected: Math.min(currentPosition, matches.length - 1),
within: false
});
return;
}
}
}
if (state.type !== "none") {
@ -178,7 +217,7 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
state.matches[state.selected],
": "
);
} else {
} else if (state.type === 'user') {
content.splice(
index - 1,
search.length + 1,
@ -186,6 +225,14 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
state.matches[state.selected]._id,
"> "
);
} else {
content.splice(
index - 1,
search.length + 1,
"<#",
state.matches[state.selected]._id,
"> "
);
}
setValue(content.join(""));
@ -358,6 +405,33 @@ export default function AutoComplete({ state, setState, onClick }: Pick<AutoComp
{match.username}
</button>
))}
{state.type === "channel" &&
state.matches.map((match, i) => (
<button
className={i === state.selected ? "active" : ''}
onMouseEnter={() =>
(i !== state.selected ||
!state.within) &&
setState({
...state,
selected: i,
within: true
})
}
onMouseLeave={() =>
state.within &&
setState({
...state,
within: false
})
}
onClick={onClick}>
<ChannelIcon
size={24}
target={match} />
{match.name}
</button>
))}
</div>
</Base>
)

6
src/components/common/messaging/MessageBox.tsx
View file

@ -227,7 +227,11 @@ function MessageBox({ channel, draft, dispatcher }: Props) {
}
const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [ channel._id ]);
const { onChange, onKeyUp, onKeyDown, onFocus, onBlur, ...autoCompleteProps } = useAutoComplete(setMessage, { users: { type: 'channel', id: channel._id } });
const { onChange, onKeyUp, onKeyDown, onFocus, onBlur, ...autoCompleteProps } =
useAutoComplete(setMessage, {
users: { type: 'channel', id: channel._id },
channels: channel.channel_type === 'TextChannel' ? { server: channel.server } : undefined
});
return (
<>