Add auto-complete to profile editor.

This commit is contained in:
Paul 2021-07-03 23:35:27 +01:00
parent 31d74da8e7
commit 7e4406682f
2 changed files with 30 additions and 6 deletions

View file

@ -4,7 +4,7 @@ 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 styled, { css } from "styled-components";
import Emoji from "./Emoji";
import ChannelIcon from "./ChannelIcon";
@ -31,6 +31,7 @@ export type SearchClues = {
};
export type AutoCompleteProps = {
detached?: boolean,
state: 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;
> div {
@ -348,11 +349,19 @@ const Base = styled.div`
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 (
<Base>
<Base detached={detached}>
<div>
{state.type === "emoji" &&
state.matches.map((match, i) => (

View file

@ -8,6 +8,7 @@ import { FileUploader } from "../../../context/revoltjs/FileUploads";
import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
import { UserProfile } from "../../../context/intermediate/popovers/UserProfile";
import { ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
import AutoComplete, { useAutoComplete } from "../../../components/common/AutoComplete";
export function Profile() {
const { intl } = useContext(IntlContext) as any;
@ -36,6 +37,15 @@ export function Profile() {
}, [status]);
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 (
<div className={styles.user}>
@ -93,6 +103,7 @@ export function Profile() {
<h3>
<Text id="app.settings.pages.profile.info" />
</h3>
<AutoComplete detached {...autoCompleteProps} />
<TextAreaAutoSize
maxRows={10}
minHeight={200}
@ -100,8 +111,8 @@ export function Profile() {
value={profile?.content ?? ""}
disabled={typeof profile === "undefined"}
onChange={ev => {
setProfile({ ...profile, content: ev.currentTarget.value })
if (!changed) setChanged(true)
onChange(ev);
setContent(ev.currentTarget.value)
}}
placeholder={translate(
`app.settings.pages.profile.${
@ -112,6 +123,10 @@ export function Profile() {
"",
intl.dictionary
)}
onKeyUp={onKeyUp}
onKeyDown={onKeyDown}
onFocus={onFocus}
onBlur={onBlur}
/>
<p>
<Button contrast