mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-13 18:59:22 -05:00
Add auto-complete to profile editor.
This commit is contained in:
parent
31d74da8e7
commit
7e4406682f
2 changed files with 30 additions and 6 deletions
|
@ -4,7 +4,7 @@ import { Channels } from "revolt.js/dist/api/objects";
|
||||||
import { emojiDictionary } from "../../assets/emojis";
|
import { emojiDictionary } from "../../assets/emojis";
|
||||||
import { SYSTEM_USER_ID, User } from "revolt.js";
|
import { SYSTEM_USER_ID, User } from "revolt.js";
|
||||||
import UserIcon from "./user/UserIcon";
|
import UserIcon from "./user/UserIcon";
|
||||||
import styled from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
import Emoji from "./Emoji";
|
import Emoji from "./Emoji";
|
||||||
import ChannelIcon from "./ChannelIcon";
|
import ChannelIcon from "./ChannelIcon";
|
||||||
|
|
||||||
|
@ -31,6 +31,7 @@ export type SearchClues = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export type AutoCompleteProps = {
|
export type AutoCompleteProps = {
|
||||||
|
detached?: boolean,
|
||||||
state: AutoCompleteState,
|
state: AutoCompleteState,
|
||||||
setState: StateUpdater<AutoCompleteState>,
|
setState: StateUpdater<AutoCompleteState>,
|
||||||
|
|
||||||
|
@ -314,7 +315,7 @@ export function useAutoComplete(setValue: (v?: string) => void, searchClues?: Se
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const Base = styled.div`
|
const Base = styled.div<{ detached?: boolean }>`
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
|
@ -348,11 +349,19 @@ const Base = styled.div`
|
||||||
background: var(--primary-background);
|
background: var(--primary-background);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
${ props => props.detached && css`
|
||||||
|
bottom: 8px;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
` }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default function AutoComplete({ state, setState, onClick }: Pick<AutoCompleteProps, 'state' | 'setState' | 'onClick'>) {
|
export default function AutoComplete({ detached, state, setState, onClick }: Pick<AutoCompleteProps, 'detached' | 'state' | 'setState' | 'onClick'>) {
|
||||||
return (
|
return (
|
||||||
<Base>
|
<Base detached={detached}>
|
||||||
<div>
|
<div>
|
||||||
{state.type === "emoji" &&
|
{state.type === "emoji" &&
|
||||||
state.matches.map((match, i) => (
|
state.matches.map((match, i) => (
|
||||||
|
|
|
@ -8,6 +8,7 @@ import { FileUploader } from "../../../context/revoltjs/FileUploads";
|
||||||
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
|
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
|
||||||
import { UserProfile } from "../../../context/intermediate/popovers/UserProfile";
|
import { UserProfile } from "../../../context/intermediate/popovers/UserProfile";
|
||||||
import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
|
import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
|
||||||
|
import AutoComplete, { useAutoComplete } from "../../../components/common/AutoComplete";
|
||||||
|
|
||||||
export function Profile() {
|
export function Profile() {
|
||||||
const { intl } = useContext(IntlContext) as any;
|
const { intl } = useContext(IntlContext) as any;
|
||||||
|
@ -36,6 +37,15 @@ export function Profile() {
|
||||||
}, [status]);
|
}, [status]);
|
||||||
|
|
||||||
const [ changed, setChanged ] = useState(false);
|
const [ changed, setChanged ] = useState(false);
|
||||||
|
function setContent(content?: string) {
|
||||||
|
setProfile({ ...profile, content })
|
||||||
|
if (!changed) setChanged(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { onChange, onKeyUp, onKeyDown, onFocus, onBlur, ...autoCompleteProps } =
|
||||||
|
useAutoComplete(setContent, {
|
||||||
|
users: { type: 'all' }
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.user}>
|
<div className={styles.user}>
|
||||||
|
@ -93,6 +103,7 @@ export function Profile() {
|
||||||
<h3>
|
<h3>
|
||||||
<Text id="app.settings.pages.profile.info" />
|
<Text id="app.settings.pages.profile.info" />
|
||||||
</h3>
|
</h3>
|
||||||
|
<AutoComplete detached {...autoCompleteProps} />
|
||||||
<TextAreaAutoSize
|
<TextAreaAutoSize
|
||||||
maxRows={10}
|
maxRows={10}
|
||||||
minHeight={200}
|
minHeight={200}
|
||||||
|
@ -100,8 +111,8 @@ export function Profile() {
|
||||||
value={profile?.content ?? ""}
|
value={profile?.content ?? ""}
|
||||||
disabled={typeof profile === "undefined"}
|
disabled={typeof profile === "undefined"}
|
||||||
onChange={ev => {
|
onChange={ev => {
|
||||||
setProfile({ ...profile, content: ev.currentTarget.value })
|
onChange(ev);
|
||||||
if (!changed) setChanged(true)
|
setContent(ev.currentTarget.value)
|
||||||
}}
|
}}
|
||||||
placeholder={translate(
|
placeholder={translate(
|
||||||
`app.settings.pages.profile.${
|
`app.settings.pages.profile.${
|
||||||
|
@ -112,6 +123,10 @@ export function Profile() {
|
||||||
"",
|
"",
|
||||||
intl.dictionary
|
intl.dictionary
|
||||||
)}
|
)}
|
||||||
|
onKeyUp={onKeyUp}
|
||||||
|
onKeyDown={onKeyDown}
|
||||||
|
onFocus={onFocus}
|
||||||
|
onBlur={onBlur}
|
||||||
/>
|
/>
|
||||||
<p>
|
<p>
|
||||||
<Button contrast
|
<Button contrast
|
||||||
|
|
Loading…
Reference in a new issue