1 import { myAuthRequired, setIsoData } from "@utils/app";
2 import { capitalizeFirstLetter } from "@utils/helpers";
3 import { Component, linkEvent } from "inferno";
9 } from "lemmy-js-client";
10 import { customEmojisLookup } from "../../markdown";
11 import { HttpService, I18NextService } from "../../services";
12 import { pictrsDeleteToast, toast } from "../../toast";
13 import { EmojiMart } from "../common/emoji-mart";
14 import { HtmlTags } from "../common/html-tags";
15 import { Icon, Spinner } from "../common/icon";
16 import { Paginator } from "../common/paginator";
18 interface EmojiFormProps {
19 onEdit(form: EditCustomEmoji): void;
20 onCreate(form: CreateCustomEmoji): void;
21 onDelete(form: DeleteCustomEmoji): void;
24 interface EmojiFormState {
25 siteRes: GetSiteResponse;
26 customEmojis: CustomEmojiViewForm[];
30 interface CustomEmojiViewForm {
42 export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
43 private isoData = setIsoData(this.context);
44 private itemsPerPage = 15;
45 private emptyState: EmojiFormState = {
46 siteRes: this.isoData.site_res,
47 customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
48 id: x.custom_emoji.id,
49 category: x.custom_emoji.category,
50 shortcode: x.custom_emoji.shortcode,
51 image_url: x.custom_emoji.image_url,
52 alt_text: x.custom_emoji.alt_text,
53 keywords: x.keywords.map(x => x.keyword).join(" "),
55 page: 1 + Math.floor(index / this.itemsPerPage),
60 state: EmojiFormState;
61 private scrollRef: any = {};
62 constructor(props: any, context: any) {
63 super(props, context);
64 this.state = this.emptyState;
66 this.handlePageChange = this.handlePageChange.bind(this);
67 this.handleEmojiClick = this.handleEmojiClick.bind(this);
69 get documentTitle(): string {
70 return I18NextService.i18n.t("custom_emojis");
75 <div className="home-emojis-form col-12">
77 title={this.documentTitle}
78 path={this.context.router.route.match.url}
80 <h5 className="col-12">{I18NextService.i18n.t("custom_emojis")}</h5>
81 {customEmojisLookup.size > 0 && (
84 onEmojiClick={this.handleEmojiClick}
85 pickerOptions={this.configurePicker()}
89 <div className="table-responsive">
92 className="table table-sm table-hover align-middle"
94 <thead className="pointer">
96 <th>{I18NextService.i18n.t("column_emoji")}</th>
97 <th className="text-right">
98 {I18NextService.i18n.t("column_shortcode")}
100 <th className="text-right">
101 {I18NextService.i18n.t("column_category")}
103 <th className="text-right d-lg-table-cell d-none">
104 {I18NextService.i18n.t("column_imageurl")}
106 <th className="text-right">
107 {I18NextService.i18n.t("column_alttext")}
109 <th className="text-right d-lg-table-cell">
110 {I18NextService.i18n.t("column_keywords")}
112 <th style="width:121px"></th>
116 {this.state.customEmojis
118 Number((this.state.page - 1) * this.itemsPerPage),
120 (this.state.page - 1) * this.itemsPerPage +
124 .map((cv, index) => (
125 <tr key={index} ref={e => (this.scrollRef[cv.shortcode] = e)}>
126 <td style="text-align:center;">
127 {cv.image_url.length > 0 && (
129 className="icon-emoji-admin"
134 {cv.image_url.length === 0 && (
136 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
138 className="btn btn-sm btn-secondary pointer"
139 htmlFor={`file-uploader-${index}`}
140 data-tippy-content={I18NextService.i18n.t(
144 {capitalizeFirstLetter(
145 I18NextService.i18n.t("upload")
148 name={`file-uploader-${index}`}
149 id={`file-uploader-${index}`}
154 { form: this, index: index },
155 this.handleImageUpload
161 <td className="text-right">
164 placeholder="ShortCode"
165 className="form-control"
169 { form: this, index: index },
170 this.handleEmojiShortCodeChange
174 <td className="text-right">
177 placeholder="Category"
178 className="form-control"
181 { form: this, index: index },
182 this.handleEmojiCategoryChange
186 <td className="text-right d-lg-table-cell d-none">
190 className="form-control"
193 { form: this, index: index, overrideValue: null },
194 this.handleEmojiImageUrlChange
198 <td className="text-right">
201 placeholder="Alt Text"
202 className="form-control"
205 { form: this, index: index },
206 this.handleEmojiAltTextChange
210 <td className="text-right d-lg-table-cell">
213 placeholder="Keywords"
214 className="form-control"
217 { form: this, index: index },
218 this.handleEmojiKeywordChange
224 <span title={this.getEditTooltip(cv)}>
229 : "text-muted ") + "btn btn-link btn-animate"
233 this.handleEditEmojiClick
235 data-tippy-content={I18NextService.i18n.t("save")}
236 aria-label={I18NextService.i18n.t("save")}
237 disabled={!this.canEdit(cv)}
242 capitalizeFirstLetter(
243 I18NextService.i18n.t("save")
249 className="btn btn-link btn-animate text-muted"
251 { i: this, index: index, cv: cv },
252 this.handleDeleteEmojiClick
254 data-tippy-content={I18NextService.i18n.t("delete")}
255 aria-label={I18NextService.i18n.t("delete")}
256 disabled={cv.loading}
257 title={I18NextService.i18n.t("delete")}
261 classes={`icon-inline text-danger`}
272 className="btn btn-sm btn-secondary me-2"
273 onClick={linkEvent(this, this.handleAddEmojiClick)}
275 {I18NextService.i18n.t("add_custom_emoji")}
278 <Paginator page={this.state.page} onChange={this.handlePageChange} />
284 canEdit(cv: CustomEmojiViewForm) {
285 const noEmptyFields =
286 cv.alt_text.length > 0 &&
287 cv.category.length > 0 &&
288 cv.image_url.length > 0 &&
289 cv.shortcode.length > 0;
290 const noDuplicateShortCodes =
291 this.state.customEmojis.filter(
292 x => x.shortcode == cv.shortcode && x.id != cv.id
294 return noEmptyFields && noDuplicateShortCodes && !cv.loading && cv.changed;
297 getEditTooltip(cv: CustomEmojiViewForm) {
298 if (this.canEdit(cv)) return I18NextService.i18n.t("save");
299 else return I18NextService.i18n.t("custom_emoji_save_validation");
302 handlePageChange(page: number) {
303 this.setState({ page: page });
306 handleEmojiClick(e: any) {
307 const view = customEmojisLookup.get(e.id);
309 const page = this.state.customEmojis.find(
310 x => x.id == view.custom_emoji.id
313 this.setState({ page: page });
314 this.scrollRef[view.custom_emoji.shortcode].scrollIntoView();
319 handleEmojiCategoryChange(
320 props: { form: EmojiForm; index: number },
323 const custom_emojis = [...props.form.state.customEmojis];
325 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
327 ...props.form.state.customEmojis[pagedIndex],
328 category: event.target.value,
331 custom_emojis[Number(pagedIndex)] = item;
332 props.form.setState({ customEmojis: custom_emojis });
335 handleEmojiShortCodeChange(
336 props: { form: EmojiForm; index: number },
339 const custom_emojis = [...props.form.state.customEmojis];
341 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
343 ...props.form.state.customEmojis[pagedIndex],
344 shortcode: event.target.value,
347 custom_emojis[Number(pagedIndex)] = item;
348 props.form.setState({ customEmojis: custom_emojis });
351 handleEmojiImageUrlChange(
356 }: { form: EmojiForm; index: number; overrideValue: string | null },
359 form.setState(prevState => {
360 const custom_emojis = [...form.state.customEmojis];
361 const pagedIndex = (form.state.page - 1) * form.itemsPerPage + index;
363 ...form.state.customEmojis[pagedIndex],
364 image_url: overrideValue ?? event.target.value,
367 custom_emojis[Number(pagedIndex)] = item;
370 customEmojis: prevState.customEmojis.map((ce, i) =>
374 image_url: overrideValue ?? event.target.value,
384 handleEmojiAltTextChange(
385 props: { form: EmojiForm; index: number },
388 const custom_emojis = [...props.form.state.customEmojis];
390 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
392 ...props.form.state.customEmojis[pagedIndex],
393 alt_text: event.target.value,
396 custom_emojis[Number(pagedIndex)] = item;
397 props.form.setState({ customEmojis: custom_emojis });
400 handleEmojiKeywordChange(
401 props: { form: EmojiForm; index: number },
404 const custom_emojis = [...props.form.state.customEmojis];
406 (props.form.state.page - 1) * props.form.itemsPerPage + props.index;
408 ...props.form.state.customEmojis[pagedIndex],
409 keywords: event.target.value,
412 custom_emojis[Number(pagedIndex)] = item;
413 props.form.setState({ customEmojis: custom_emojis });
416 handleDeleteEmojiClick(d: {
419 cv: CustomEmojiViewForm;
421 const pagedIndex = (d.i.state.page - 1) * d.i.itemsPerPage + d.index;
425 auth: myAuthRequired(),
428 const custom_emojis = [...d.i.state.customEmojis];
429 custom_emojis.splice(Number(pagedIndex), 1);
430 d.i.setState({ customEmojis: custom_emojis });
434 handleEditEmojiClick(d: { i: EmojiForm; cv: CustomEmojiViewForm }) {
435 const keywords = d.cv.keywords
437 .filter(x => x.length > 0) as string[];
438 const uniqueKeywords = Array.from(new Set(keywords));
442 category: d.cv.category,
443 image_url: d.cv.image_url,
444 alt_text: d.cv.alt_text,
445 keywords: uniqueKeywords,
446 auth: myAuthRequired(),
450 category: d.cv.category,
451 shortcode: d.cv.shortcode,
452 image_url: d.cv.image_url,
453 alt_text: d.cv.alt_text,
454 keywords: uniqueKeywords,
455 auth: myAuthRequired(),
460 handleAddEmojiClick(form: EmojiForm, event: any) {
461 event.preventDefault();
462 form.setState(prevState => {
464 1 + Math.floor(prevState.customEmojis.length / form.itemsPerPage);
465 const item: CustomEmojiViewForm = {
479 customEmojis: [...prevState.customEmojis, item],
486 { form, index }: { form: EmojiForm; index: number },
491 event.preventDefault();
492 file = event.target.files[0];
497 form.setState(prevState => ({
499 customEmojis: prevState.customEmojis.map((cv, i) =>
500 i === index ? { ...cv, loading: true } : cv
504 HttpService.client.uploadImage({ image: file }).then(res => {
505 console.log("pictrs upload:");
507 if (res.state === "success") {
508 if (res.data.msg === "ok") {
509 pictrsDeleteToast(file.name, res.data.delete_url as string);
510 form.handleEmojiImageUrlChange(
511 { form: form, index: index, overrideValue: res.data.url as string },
515 toast(JSON.stringify(res), "danger");
517 } else if (res.state === "failed") {
518 console.error(res.msg);
519 toast(res.msg, "danger");
524 configurePicker(): any {
526 data: { categories: [], emojis: [], aliases: [] },