gtsocial-umbx

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

new-emoji.js (3121B)

      1 /*
      2 	GoToSocial
      3 	Copyright (C) GoToSocial Authors admin@gotosocial.org
      4 	SPDX-License-Identifier: AGPL-3.0-or-later
      5 
      6 	This program is free software: you can redistribute it and/or modify
      7 	it under the terms of the GNU Affero General Public License as published by
      8 	the Free Software Foundation, either version 3 of the License, or
      9 	(at your option) any later version.
     10 
     11 	This program is distributed in the hope that it will be useful,
     12 	but WITHOUT ANY WARRANTY; without even the implied warranty of
     13 	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     14 	GNU Affero General Public License for more details.
     15 
     16 	You should have received a copy of the GNU Affero General Public License
     17 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
     18 */
     19 
     20 "use strict";
     21 
     22 const React = require("react");
     23 
     24 const query = require("../../../lib/query");
     25 
     26 const {
     27 	useFileInput,
     28 	useComboBoxInput
     29 } = require("../../../lib/form");
     30 const useShortcode = require("./use-shortcode");
     31 
     32 const useFormSubmit = require("../../../lib/form/submit");
     33 
     34 const {
     35 	TextInput, FileInput
     36 } = require("../../../components/form/inputs");
     37 
     38 const { CategorySelect } = require('../category-select');
     39 const FakeToot = require("../../../components/fake-toot");
     40 const MutationButton = require("../../../components/form/mutation-button");
     41 
     42 module.exports = function NewEmojiForm() {
     43 	const shortcode = useShortcode();
     44 
     45 	const { data: instance } = query.useInstanceQuery();
     46 	const emojiMaxSize = React.useMemo(() => {
     47 		return instance?.configuration?.emojis?.emoji_size_limit ?? 50 * 1024;
     48 	}, [instance]);
     49 
     50 	const image = useFileInput("image", {
     51 		withPreview: true,
     52 		maxSize: emojiMaxSize
     53 	});
     54 
     55 	const category = useComboBoxInput("category");
     56 
     57 	const [submitForm, result] = useFormSubmit({
     58 		shortcode, image, category
     59 	}, query.useAddEmojiMutation());
     60 
     61 	React.useEffect(() => {
     62 		if (shortcode.value.length == 0) {
     63 			if (image.value != undefined) {
     64 				let [name, _ext] = image.value.name.split(".");
     65 				shortcode.setter(name);
     66 			}
     67 		}
     68 
     69 		/* We explicitly don't want to have 'shortcode' as a dependency here
     70 			 because we only want to change the shortcode to the filename if the field is empty
     71 			 at the moment the file is selected, not some time after when the field is emptied
     72 		*/
     73 		/* eslint-disable-next-line react-hooks/exhaustive-deps */
     74 	}, [image.value]);
     75 
     76 	let emojiOrShortcode = `:${shortcode.value}:`;
     77 
     78 	if (image.previewValue != undefined) {
     79 		emojiOrShortcode = <img
     80 			className="emoji"
     81 			src={image.previewValue}
     82 			title={`:${shortcode.value}:`}
     83 			alt={shortcode.value}
     84 		/>;
     85 	}
     86 
     87 	return (
     88 		<div>
     89 			<h2>Add new custom emoji</h2>
     90 
     91 			<FakeToot>
     92 				Look at this new custom emoji {emojiOrShortcode} isn&apos;t it cool?
     93 			</FakeToot>
     94 
     95 			<form onSubmit={submitForm} className="form-flex">
     96 				<FileInput
     97 					field={image}
     98 					accept="image/png,image/gif"
     99 				/>
    100 
    101 				<TextInput
    102 					field={shortcode}
    103 					label="Shortcode, must be unique among the instance's local emoji"
    104 				/>
    105 
    106 				<CategorySelect
    107 					field={category}
    108 				/>
    109 
    110 				<MutationButton label="Upload emoji" result={result} />
    111 			</form>
    112 		</div>
    113 	);
    114 };