2023-01-16 22:23:24 +00:00
|
|
|
import "@webscopeio/react-textarea-autocomplete/style.css";
|
2023-01-16 17:48:25 +00:00
|
|
|
import "./Textarea.css";
|
2023-01-14 10:07:49 +00:00
|
|
|
|
2023-01-16 23:19:50 +00:00
|
|
|
import { useState } from "react";
|
2023-01-14 10:07:49 +00:00
|
|
|
import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
|
2023-01-18 22:16:43 +00:00
|
|
|
import emoji from "@jukben/emoji-search";
|
2023-01-15 23:44:50 +00:00
|
|
|
import TextareaAutosize from "react-textarea-autosize";
|
2023-01-14 10:07:49 +00:00
|
|
|
|
2023-01-20 11:11:50 +00:00
|
|
|
import Avatar from "Element/Avatar";
|
|
|
|
import Nip05 from "Element/Nip05";
|
|
|
|
import { hexToBech32 } from "Util";
|
2023-01-27 21:38:41 +00:00
|
|
|
import { MetadataCache } from "State/Users";
|
|
|
|
import { useQuery } from "State/Users/Hooks";
|
2023-01-14 10:07:49 +00:00
|
|
|
|
2023-01-18 22:16:43 +00:00
|
|
|
interface EmojiItemProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
name: string;
|
|
|
|
char: string;
|
2023-01-18 22:16:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
const EmojiItem = ({ entity: { name, char } }: { entity: EmojiItemProps }) => {
|
|
|
|
return (
|
|
|
|
<div className="emoji-item">
|
|
|
|
<div className="emoji">{char}</div>
|
|
|
|
<div className="emoji-name">{name}</div>
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
);
|
|
|
|
};
|
2023-01-18 22:16:43 +00:00
|
|
|
|
2023-01-16 23:19:50 +00:00
|
|
|
const UserItem = (metadata: MetadataCache) => {
|
2023-02-07 20:04:50 +00:00
|
|
|
const { pubkey, display_name, picture, nip05, ...rest } = metadata;
|
2023-01-14 10:07:49 +00:00
|
|
|
return (
|
2023-01-14 10:18:01 +00:00
|
|
|
<div key={pubkey} className="user-item">
|
2023-01-14 10:07:49 +00:00
|
|
|
<div className="user-picture">
|
2023-01-16 23:19:50 +00:00
|
|
|
<Avatar user={metadata} />
|
2023-01-14 10:07:49 +00:00
|
|
|
</div>
|
|
|
|
<div className="user-details">
|
2023-01-14 10:18:01 +00:00
|
|
|
<strong>{display_name || rest.name}</strong>
|
2023-01-15 12:02:45 +00:00
|
|
|
<Nip05 nip05={nip05} pubkey={pubkey} />
|
2023-01-14 10:07:49 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
);
|
|
|
|
};
|
2023-01-14 10:07:49 +00:00
|
|
|
|
2023-01-15 10:41:34 +00:00
|
|
|
const Textarea = ({ users, onChange, ...rest }: any) => {
|
2023-02-07 20:04:50 +00:00
|
|
|
const [query, setQuery] = useState("");
|
2023-01-16 23:19:50 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
const allUsers = useQuery(query);
|
2023-01-15 01:46:13 +00:00
|
|
|
|
2023-01-16 23:19:50 +00:00
|
|
|
const userDataProvider = (token: string) => {
|
2023-02-07 20:04:50 +00:00
|
|
|
setQuery(token);
|
|
|
|
return allUsers;
|
|
|
|
};
|
2023-01-16 23:19:50 +00:00
|
|
|
|
2023-01-18 22:16:43 +00:00
|
|
|
const emojiDataProvider = (token: string) => {
|
|
|
|
return emoji(token)
|
2023-01-20 11:19:38 +00:00
|
|
|
.slice(0, 5)
|
2023-01-18 22:16:43 +00:00
|
|
|
.map(({ name, char }) => ({ name, char }));
|
2023-02-07 20:04:50 +00:00
|
|
|
};
|
2023-01-18 22:16:43 +00:00
|
|
|
|
2023-01-16 13:17:29 +00:00
|
|
|
return (
|
|
|
|
<ReactTextareaAutocomplete
|
|
|
|
{...rest}
|
|
|
|
loadingComponent={() => <span>Loading....</span>}
|
2023-02-01 22:14:30 +00:00
|
|
|
placeholder="What's on your mind?"
|
2023-01-16 13:17:29 +00:00
|
|
|
onChange={onChange}
|
|
|
|
textAreaComponent={TextareaAutosize}
|
|
|
|
trigger={{
|
2023-01-18 22:16:43 +00:00
|
|
|
":": {
|
|
|
|
dataProvider: emojiDataProvider,
|
|
|
|
component: EmojiItem,
|
2023-02-07 20:04:50 +00:00
|
|
|
output: (item: EmojiItemProps, trigger) => item.char,
|
2023-01-18 22:16:43 +00:00
|
|
|
},
|
2023-01-16 13:17:29 +00:00
|
|
|
"@": {
|
|
|
|
afterWhitespace: true,
|
2023-01-16 23:19:50 +00:00
|
|
|
dataProvider: userDataProvider,
|
2023-01-16 13:17:29 +00:00
|
|
|
component: (props: any) => <UserItem {...props.entity} />,
|
2023-02-07 20:04:50 +00:00
|
|
|
output: (item: any) => `@${hexToBech32("npub", item.pubkey)}`,
|
|
|
|
},
|
2023-01-16 13:17:29 +00:00
|
|
|
}}
|
|
|
|
/>
|
2023-02-07 20:04:50 +00:00
|
|
|
);
|
|
|
|
};
|
2023-01-15 01:46:13 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
export default Textarea;
|