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 { 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) => (

View file

@ -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