working on grid emojipicker
This commit is contained in:
parent
689e5db74a
commit
870b4b2b7e
GPG key ID:
0EC431A8DA8F8087
4 changed files with 136 additions and 115 deletions
|
|
@ -7,18 +7,18 @@ Repository: https://www.coastalcommits.com/cswimr/gauntlet-emojipicker
|
||||||
"""
|
"""
|
||||||
|
|
||||||
[[entrypoint]]
|
[[entrypoint]]
|
||||||
id = 'emojipicker'
|
id = 'emojipicker-legacy'
|
||||||
name = 'Emoji Picker'
|
name = 'Emoji Picker'
|
||||||
path = 'src/emojipicker.tsx'
|
path = 'src/emojipicker-legacy.tsx'
|
||||||
type = 'inline-view'
|
type = 'inline-view'
|
||||||
description = """
|
description = """
|
||||||
Copy emojis to your clipboard from Gauntlet!
|
Copy emojis to your clipboard from Gauntlet!
|
||||||
"""
|
"""
|
||||||
|
|
||||||
[[entrypoint]]
|
[[entrypoint]]
|
||||||
id = 'emojipicker-grid'
|
id = 'emojipicker'
|
||||||
name = 'Emoji Picker (Grid)'
|
name = 'Emoji Picker'
|
||||||
path = 'src/emojipicker-grid.tsx'
|
path = 'src/emojipicker.tsx'
|
||||||
type = 'view'
|
type = 'view'
|
||||||
description = """
|
description = """
|
||||||
Copy emojis to your clipboard from Gauntlet!
|
Copy emojis to your clipboard from Gauntlet!
|
||||||
|
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import { Grid } from "@project-gauntlet/api/components";
|
|
||||||
import React, { ReactNode, useState } from "react";
|
|
||||||
import { Clipboard, showHud } from "@project-gauntlet/api/helpers";
|
|
||||||
import {
|
|
||||||
GroupedBy,
|
|
||||||
BaseEmoji,
|
|
||||||
getEmojis,
|
|
||||||
getEmojisGroupedBy,
|
|
||||||
} from "unicode-emoji";
|
|
||||||
|
|
||||||
// @ts-expect-error gauntlet uses deno and not node
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
const denoCore: DenoCore = Deno[Deno.internal].core;
|
|
||||||
|
|
||||||
export default function EmojiPicker(): ReactNode | undefined {
|
|
||||||
const [searchText, setSearchText] = useState<string | undefined>("");
|
|
||||||
|
|
||||||
let emojiList: BaseEmoji[] | Record<GroupedBy, BaseEmoji[]>;
|
|
||||||
let isCategory = null;
|
|
||||||
if (searchText) {
|
|
||||||
emojiList = getEmojis().filter((emoji) =>
|
|
||||||
emoji.keywords.some((keyword) => keyword.includes(searchText)),
|
|
||||||
);
|
|
||||||
isCategory = false;
|
|
||||||
} else {
|
|
||||||
emojiList = getEmojisGroupedBy("category");
|
|
||||||
isCategory = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Grid>
|
|
||||||
<Grid.SearchBar
|
|
||||||
placeholder={"Search for an emoji"}
|
|
||||||
value={searchText}
|
|
||||||
onChange={setSearchText}
|
|
||||||
/>
|
|
||||||
{isCategory
|
|
||||||
? Object.entries(emojiList).map(([category, emojis]) => (
|
|
||||||
<Grid.Section key={category} title={category}>
|
|
||||||
{emojis.map((emoji: BaseEmoji) => (
|
|
||||||
<Grid.Item
|
|
||||||
key={emoji.emoji}
|
|
||||||
title={emoji.emoji}
|
|
||||||
subtitle={emoji.keywords.join(", ")}
|
|
||||||
onClick={async () => {
|
|
||||||
console.log(emoji);
|
|
||||||
await Clipboard.writeText(emoji.emoji);
|
|
||||||
showHud(`${emoji.emoji} copied to clipboard`);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Grid.Section>
|
|
||||||
))
|
|
||||||
: (emojiList as BaseEmoji[]).map((emoji: BaseEmoji) => (
|
|
||||||
<Grid.Item
|
|
||||||
key={emoji.emoji}
|
|
||||||
title={emoji.emoji}
|
|
||||||
subtitle={emoji.keywords.join(", ")}
|
|
||||||
onClick={async () => {
|
|
||||||
console.log(emoji);
|
|
||||||
await Clipboard.writeText(emoji.emoji);
|
|
||||||
showHud(`${emoji.emoji} copied to clipboard`);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
56
src/emojipicker-legacy.tsx
Normal file
56
src/emojipicker-legacy.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
import {
|
||||||
|
Action,
|
||||||
|
ActionPanel,
|
||||||
|
Content,
|
||||||
|
Icons,
|
||||||
|
Inline,
|
||||||
|
} from "@project-gauntlet/api/components";
|
||||||
|
import React, { ReactNode } from "react";
|
||||||
|
import { Clipboard, showHud } from "@project-gauntlet/api/helpers";
|
||||||
|
import * as UnicodeEmoji from "unicode-emoji";
|
||||||
|
|
||||||
|
// @ts-expect-error gauntlet uses deno and not node
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const denoCore: DenoCore = Deno[Deno.internal].core;
|
||||||
|
|
||||||
|
export default function EmojiPicker(props: {
|
||||||
|
text: string;
|
||||||
|
}): ReactNode | undefined {
|
||||||
|
const text = props.text.trim();
|
||||||
|
|
||||||
|
if (text.length < 3) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
const emoji = UnicodeEmoji.getEmojis().find((emoji) =>
|
||||||
|
emoji.keywords.includes(text),
|
||||||
|
);
|
||||||
|
if (!emoji) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Inline
|
||||||
|
actions={
|
||||||
|
<ActionPanel>
|
||||||
|
<Action
|
||||||
|
label={`Copy ${emoji.emoji} to clipboard`}
|
||||||
|
onAction={async () => {
|
||||||
|
console.log(emoji);
|
||||||
|
await Clipboard.writeText(emoji.emoji);
|
||||||
|
showHud(`${emoji.emoji} copied to clipboard`);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ActionPanel>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Inline.Left>
|
||||||
|
<Content.H3>{text}</Content.H3>
|
||||||
|
</Inline.Left>
|
||||||
|
<Inline.Separator icon={Icons.ArrowRight} />
|
||||||
|
<Inline.Right>
|
||||||
|
<Content.Paragraph>{emoji.emoji}</Content.Paragraph>
|
||||||
|
</Inline.Right>
|
||||||
|
</Inline>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,56 +1,89 @@
|
||||||
import {
|
import { Grid } from "@project-gauntlet/api/components";
|
||||||
Action,
|
import React, { ReactNode, useState } from "react";
|
||||||
ActionPanel,
|
|
||||||
Content,
|
|
||||||
Icons,
|
|
||||||
Inline,
|
|
||||||
} from "@project-gauntlet/api/components";
|
|
||||||
import React, { ReactNode } from "react";
|
|
||||||
import { Clipboard, showHud } from "@project-gauntlet/api/helpers";
|
import { Clipboard, showHud } from "@project-gauntlet/api/helpers";
|
||||||
import * as UnicodeEmoji from "unicode-emoji";
|
import {
|
||||||
|
GroupedBy,
|
||||||
|
BaseEmoji,
|
||||||
|
getEmojis,
|
||||||
|
getEmojisGroupedBy,
|
||||||
|
} from "unicode-emoji";
|
||||||
|
|
||||||
// @ts-expect-error gauntlet uses deno and not node
|
// @ts-expect-error gauntlet uses deno and not node
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
const denoCore: DenoCore = Deno[Deno.internal].core;
|
const denoCore: DenoCore = Deno[Deno.internal].core;
|
||||||
|
|
||||||
export default function EmojiPicker(props: {
|
export default function EmojiPicker(): ReactNode | undefined {
|
||||||
text: string;
|
const [searchText, setSearchText] = useState<string | undefined>("");
|
||||||
}): ReactNode | undefined {
|
|
||||||
const text = props.text.trim();
|
|
||||||
|
|
||||||
if (text.length < 3) {
|
let emojiList: BaseEmoji[] | Record<GroupedBy, BaseEmoji[]>;
|
||||||
return undefined;
|
let isCategory = null;
|
||||||
|
if (searchText) {
|
||||||
|
emojiList = getEmojis().filter((emoji) =>
|
||||||
|
emoji.keywords.some((keyword) => keyword.includes(searchText)),
|
||||||
|
);
|
||||||
|
isCategory = false;
|
||||||
|
} else {
|
||||||
|
emojiList = getEmojisGroupedBy("category");
|
||||||
|
isCategory = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const emoji = UnicodeEmoji.getEmojis().find((emoji) =>
|
let emojiListLength = 0;
|
||||||
emoji.keywords.includes(text),
|
if (isCategory) {
|
||||||
);
|
const typedList = emojiList as Record<GroupedBy, BaseEmoji[]>;
|
||||||
if (!emoji) {
|
for (const category in typedList) {
|
||||||
return undefined;
|
emojiListLength += typedList[category as GroupedBy].length;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
emojiListLength = (emojiList as BaseEmoji[]).length;
|
||||||
}
|
}
|
||||||
|
console.log(emojiListLength);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Inline
|
<Grid>
|
||||||
actions={
|
<Grid.SearchBar
|
||||||
<ActionPanel>
|
placeholder={"Search for an emoji"}
|
||||||
<Action
|
value={searchText}
|
||||||
label={`Copy ${emoji.emoji} to clipboard`}
|
onChange={setSearchText}
|
||||||
onAction={async () => {
|
/>
|
||||||
console.log(emoji);
|
{isCategory
|
||||||
await Clipboard.writeText(emoji.emoji);
|
? Object.entries(emojiList).map(([category, emojis]) => (
|
||||||
showHud(`${emoji.emoji} copied to clipboard`);
|
<Grid.Section key={category} title={category}>
|
||||||
}}
|
{emojis.map((emoji: BaseEmoji) => (
|
||||||
/>
|
<Grid.Item
|
||||||
</ActionPanel>
|
key={emoji.emoji}
|
||||||
}
|
title={emoji.description}
|
||||||
>
|
onClick={async () => {
|
||||||
<Inline.Left>
|
console.log(emoji);
|
||||||
<Content.H3>{text}</Content.H3>
|
await Clipboard.writeText(emoji.emoji);
|
||||||
</Inline.Left>
|
showHud(`${emoji.emoji} copied to clipboard`);
|
||||||
<Inline.Separator icon={Icons.ArrowRight} />
|
}}
|
||||||
<Inline.Right>
|
>
|
||||||
<Content.Paragraph>{emoji.emoji}</Content.Paragraph>
|
<Grid.Item.Content>
|
||||||
</Inline.Right>
|
<Grid.Item.Content.Paragraph>
|
||||||
</Inline>
|
{emoji.emoji}
|
||||||
|
</Grid.Item.Content.Paragraph>
|
||||||
|
</Grid.Item.Content>
|
||||||
|
</Grid.Item>
|
||||||
|
))}
|
||||||
|
</Grid.Section>
|
||||||
|
))
|
||||||
|
: (emojiList as BaseEmoji[]).map((emoji: BaseEmoji) => (
|
||||||
|
<Grid.Item
|
||||||
|
key={emoji.emoji}
|
||||||
|
title={emoji.description}
|
||||||
|
onClick={async () => {
|
||||||
|
console.log(emoji);
|
||||||
|
await Clipboard.writeText(emoji.emoji);
|
||||||
|
showHud(`${emoji.emoji} copied to clipboard`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid.Item.Content>
|
||||||
|
<Grid.Item.Content.Paragraph>
|
||||||
|
{emoji.emoji}
|
||||||
|
</Grid.Item.Content.Paragraph>
|
||||||
|
</Grid.Item.Content>
|
||||||
|
</Grid.Item>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue