1 import { Component, linkEvent } from "inferno";
7 } from "lemmy-js-client";
8 import { i18n } from "../../i18next";
9 import { HttpService } from "../../services/HttpService";
17 import { EmojiMart } from "../common/emoji-mart";
18 import { HtmlTags } from "../common/html-tags";
19 import { Icon } from "../common/icon";
20 import { Paginator } from "../common/paginator";
22 interface EmojiFormProps {
23 onEdit(form: EditCustomEmoji): void;
24 onCreate(form: CreateCustomEmoji): void;
25 onDelete(form: DeleteCustomEmoji): void;
28 interface EmojiFormState {
29 siteRes: GetSiteResponse;
30 customEmojis: CustomEmojiViewForm[];
35 interface CustomEmojiViewForm {
46 export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
47 private isoData = setIsoData(this.context);
48 private itemsPerPage = 15;
49 private emptyState: EmojiFormState = {
51 siteRes: this.isoData.site_res,
52 customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
53 id: x.custom_emoji.id,
54 category: x.custom_emoji.category,
55 shortcode: x.custom_emoji.shortcode,
56 image_url: x.custom_emoji.image_url,
57 alt_text: x.custom_emoji.alt_text,
58 keywords: x.keywords.map(x => x.keyword).join(" "),
60 page: 1 + Math.floor(index / this.itemsPerPage),
64 state: EmojiFormState;
65 private scrollRef: any = {};
66 constructor(props: any, context: any) {
67 super(props, context);
68 this.state = this.emptyState;
70 this.handlePageChange = this.handlePageChange.bind(this);
71 this.handleEmojiClick = this.handleEmojiClick.bind(this);
73 get documentTitle(): string {
74 return i18n.t("custom_emojis");
79 <div className="col-12">
81 title={this.documentTitle}
82 path={this.context.router.route.match.url}
84 <h5 className="col-12">{i18n.t("custom_emojis")}</h5>
85 {customEmojisLookup.size > 0 && (
88 onEmojiClick={this.handleEmojiClick}
89 pickerOptions={this.configurePicker()}
93 <div className="table-responsive">
94 <table id="emojis_table" className="table table-sm table-hover">
95 <thead className="pointer">
97 <th>{i18n.t("column_emoji")}</th>
98 <th className="text-right">{i18n.t("column_shortcode")}</th>
99 <th className="text-right">{i18n.t("column_category")}</th>
100 <th className="text-right d-lg-table-cell d-none">
101 {i18n.t("column_imageurl")}
103 <th className="text-right">{i18n.t("column_alttext")}</th>
104 <th className="text-right d-lg-table-cell">
105 {i18n.t("column_keywords")}
107 <th style="width:121px"></th>
111 {this.state.customEmojis
113 Number((this.state.page - 1) * this.itemsPerPage),
115 (this.state.page - 1) * this.itemsPerPage +
119 .map((cv, index) => (
120 <tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
121 <td style="text-align:center;">
123 htmlFor={index.toString()}
124 className="pointer text-muted small font-weight-bold"
126 {cv.image_url.length > 0 && (
128 className="icon-emoji-admin"
132 {cv.image_url.length == 0 && (
133 <span className="btn btn-sm btn-secondary">
139 name={index.toString()}
140 id={index.toString()}
145 { form: this, index: index },
146 this.handleImageUpload
150 <td className="text-right">
153 placeholder="ShortCode"
154 className="form-control"
158 { form: this, index: index },
159 this.handleEmojiShortCodeChange
163 <td className="text-right">
166 placeholder="Category"
167 className="form-control"
170 { form: this, index: index },
171 this.handleEmojiCategoryChange
175 <td className="text-right d-lg-table-cell d-none">
179 className="form-control"
182 { form: this, index: index, overrideValue: null },
183 this.handleEmojiImageUrlChange
187 <td className="text-right">
190 placeholder="Alt Text"
191 className="form-control"
194 { form: this, index: index },
195 this.handleEmojiAltTextChange
199 <td className="text-right d-lg-table-cell">
202 placeholder="Keywords"
203 className="form-control"
206 { form: this, index: index },
207 this.handleEmojiKeywordChange
213 <span title={this.getEditTooltip(cv)}>
216 (cv.changed ? "text-success " : "text-muted ") +
217 "btn btn-link btn-animate"
221 this.handleEditEmojiClick
223 data-tippy-content={i18n.t("save")}
224 aria-label={i18n.t("save")}
226 this.state.loading ||
233 classes={`icon-inline`}
239 className="btn btn-link btn-animate text-muted"
241 { i: this, index: index, cv: cv },
242 this.handleDeleteEmojiClick
244 data-tippy-content={i18n.t("delete")}
245 aria-label={i18n.t("delete")}
246 disabled={this.state.loading}
247 title={i18n.t("delete")}
251 classes={`icon-inline text-danger`}
262 className="btn btn-sm btn-secondary mr-2"
263 onClick={linkEvent(this, this.handleAddEmojiClick)}
265 {i18n.t("add_custom_emoji")}
268 <Paginator page={this.state.page} onChange={this.handlePageChange} />
274 canEdit(cv: CustomEmojiViewForm) {
275 const noEmptyFields =
276 cv.alt_text.length > 0 &&
277 cv.category.length > 0 &&
278 cv.image_url.length > 0 &&
279 cv.shortcode.length > 0;
280 const noDuplicateShortCodes =
281 this.state.customEmojis.filter(
282 x => x.shortcode == cv.shortcode && x.id != cv.id
284 return noEmptyFields && noDuplicateShortCodes;
287 getEditTooltip(cv: CustomEmojiViewForm) {
288 if (this.canEdit(cv)) return i18n.t("save");
289 else return i18n.t("custom_emoji_save_validation");
292 handlePageChange(page: number) {
293 this.setState({ page: page });
296 handleEmojiClick(e: any) {
297 const view = customEmojisLookup.get(e.id);
299 const page = this.state.customEmojis.find(
300 x => x.id == view.custom_emoji.id
303 this.setState({ page: page });
304 this.scrollRef[view.custom_emoji.shortcode].scrollIntoView();
309 handleEmojiCategoryChange(
310 props: { form: EmojiForm; index: number },
313 const custom_emojis = [...props.form.state.customEmojis];
315 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
317 ...props.form.state.customEmojis[pagedIndex],
318 category: event.target.value,
321 custom_emojis[Number(pagedIndex)] = item;
322 props.form.setState({ customEmojis: custom_emojis });
325 handleEmojiShortCodeChange(
326 props: { form: EmojiForm; index: number },
329 const custom_emojis = [...props.form.state.customEmojis];
331 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
333 ...props.form.state.customEmojis[pagedIndex],
334 shortcode: event.target.value,
337 custom_emojis[Number(pagedIndex)] = item;
338 props.form.setState({ customEmojis: custom_emojis });
341 handleEmojiImageUrlChange(
342 props: { form: EmojiForm; index: number; overrideValue: string | null },
345 const custom_emojis = [...props.form.state.customEmojis];
347 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
349 ...props.form.state.customEmojis[pagedIndex],
350 image_url: props.overrideValue ?? event.target.value,
353 custom_emojis[Number(pagedIndex)] = item;
354 props.form.setState({ customEmojis: custom_emojis });
357 handleEmojiAltTextChange(
358 props: { form: EmojiForm; index: number },
361 const custom_emojis = [...props.form.state.customEmojis];
363 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
365 ...props.form.state.customEmojis[pagedIndex],
366 alt_text: event.target.value,
369 custom_emojis[Number(pagedIndex)] = item;
370 props.form.setState({ customEmojis: custom_emojis });
373 handleEmojiKeywordChange(
374 props: { form: EmojiForm; index: number },
377 const custom_emojis = [...props.form.state.customEmojis];
379 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
381 ...props.form.state.customEmojis[pagedIndex],
382 keywords: event.target.value,
385 custom_emojis[Number(pagedIndex)] = item;
386 props.form.setState({ customEmojis: custom_emojis });
389 handleDeleteEmojiClick(d: {
392 cv: CustomEmojiViewForm;
394 const pagedIndex = (d.i.state.page - 1) * d.i.itemsPerPage + d.index;
398 auth: myAuthRequired(),
401 const custom_emojis = [...d.i.state.customEmojis];
402 custom_emojis.splice(Number(pagedIndex), 1);
403 d.i.setState({ customEmojis: custom_emojis });
407 handleEditEmojiClick(d: { i: EmojiForm; cv: CustomEmojiViewForm }) {
408 const keywords = d.cv.keywords
410 .filter(x => x.length > 0) as string[];
411 const uniqueKeywords = Array.from(new Set(keywords));
415 category: d.cv.category,
416 image_url: d.cv.image_url,
417 alt_text: d.cv.alt_text,
418 keywords: uniqueKeywords,
419 auth: myAuthRequired(),
423 category: d.cv.category,
424 shortcode: d.cv.shortcode,
425 image_url: d.cv.image_url,
426 alt_text: d.cv.alt_text,
427 keywords: uniqueKeywords,
428 auth: myAuthRequired(),
433 handleAddEmojiClick(form: EmojiForm, event: any) {
434 event.preventDefault();
435 const custom_emojis = [...form.state.customEmojis];
437 1 + Math.floor(form.state.customEmojis.length / form.itemsPerPage);
438 const item: CustomEmojiViewForm = {
448 custom_emojis.push(item);
449 form.setState({ customEmojis: custom_emojis, page: page });
452 handleImageUpload(props: { form: EmojiForm; index: number }, event: any) {
455 event.preventDefault();
456 file = event.target.files[0];
461 HttpService.client.uploadImage({ image: file }).then(res => {
462 console.log("pictrs upload:");
464 if (res.state === "success") {
465 if (res.data.msg === "ok") {
466 pictrsDeleteToast(file.name, res.data.delete_url as string);
468 toast(JSON.stringify(res), "danger");
469 const hash = res.data.files?.at(0)?.file;
470 const url = `${res.data.url}/${hash}`;
471 props.form.handleEmojiImageUrlChange(
472 { form: props.form, index: props.index, overrideValue: url },
476 } else if (res.state === "failed") {
477 console.error(res.msg);
478 toast(res.msg, "danger");
483 configurePicker(): any {
485 data: { categories: [], emojis: [], aliases: [] },