mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-09 16:53:36 -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 { 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) => (
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue