mirrors/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-11-13 05:27:29 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions

[frogend] Emoji categories (#1051)

Browse source 
* emoji category combobox

* emoji categorizing

* dropdown entry separation

* emoji filtering/sorting

* add some explaining comments

* remove unneeded default-value code

* remove wrongly created package.json

* configurable ComboBox label+placeHolder
This commit is contained in:
f0x52 2022-11-16 17:05:49 +01:00 • committed by GitHub
commit aa5c4e065c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 249 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

49
web/source/settings/admin/emoji/new-emoji.js
View file

@ -20,30 +20,34 @@
const Promise = require('bluebird');
const React = require("react");
const { matchSorter } = require("match-sorter");
const FakeToot = require("../../components/fake-toot");
const MutateButton = require("../../components/mutation-button");
const ComboBox = require("../../components/combo-box");
const {
const {
useTextInput,
useFileInput
useFileInput,
useComboBoxInput
} = require("../../components/form");
const query = require("../../lib/query");
const syncpipe = require('syncpipe');
module.exports = function NewEmojiForm({emoji}) {
module.exports = function NewEmojiForm({ emoji, emojiByCategory }) {
const emojiCodes = React.useMemo(() => {
return new Set(emoji.map((e) => e.shortcode));
}, [emoji]);
const [addEmoji, result] = query.useAddEmojiMutation();
const [onFileChange, resetFile, {image, imageURL, imageInfo}] = useFileInput("image", {
const [onFileChange, resetFile, { image, imageURL, imageInfo }] = useFileInput("image", {
withPreview: true,
maxSize: 50 * 1024
});
const [onShortcodeChange, resetShortcode, {shortcode, setShortcode, shortcodeRef}] = useTextInput("shortcode", {
const [onShortcodeChange, resetShortcode, { shortcode, setShortcode, shortcodeRef }] = useTextInput("shortcode", {
validator: function validateShortcode(code) {
return emojiCodes.has(code)
? "Shortcode already in use"
@ -51,6 +55,23 @@ module.exports = function NewEmojiForm({emoji}) {
}
});
const [categoryState, resetCategory, { category }] = useComboBoxInput("category");
// data used by the ComboBox element to select an emoji category
const categoryItems = React.useMemo(() => {
return syncpipe(emojiByCategory, [
(_) => Object.keys(_), // just emoji category names
(_) => matchSorter(_, category), // sorted by complex algorithm
(_) => _.map((categoryName) => [ // map to input value, and selectable element with icon
categoryName,
<>
<img src={emojiByCategory[categoryName][0].static_url} aria-hidden="true"></img>
{categoryName}
</>
])
]);
}, [emojiByCategory, category]);
React.useEffect(() => {
if (shortcode.length == 0) {
if (image != undefined) {
@ -58,6 +79,9 @@ module.exports = function NewEmojiForm({emoji}) {
setShortcode(name);
}
}
// we explicitly don't want to add 'shortcode' as a dependency here
// because we only want this to update to the filename if the field is empty
// at the moment the file is selected, not some time after when the field is emptied
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [image]);
@ -69,11 +93,13 @@ module.exports = function NewEmojiForm({emoji}) {
Promise.try(() => {
return addEmoji({
image,
shortcode
shortcode,
category
});
}).then(() => {
resetFile();
resetShortcode();
resetCategory();
});
}
@ -125,8 +151,15 @@ module.exports = function NewEmojiForm({emoji}) {
value={shortcode}
/>
</div>
<MutateButton text="Upload emoji" result={result}/>
<ComboBox
state={categoryState}
items={categoryItems}
label="Category"
placeHolder="e.g., reactions"
/>
<MutateButton text="Upload emoji" result={result} />
</form>
</div>
);